1万円台の激安ロボット掃除機に大満足

モバイルではブログカードとカスタムHTMLでメニュー一覧を代用

monilephone

モバイルビューではメニュー一覧が表示されない

ブログを始めてもうすぐ3年

私がBloggerでブログを始めたのは2017年初め。
その後ワードプレスに引っ越しをして2年が経過しました。
気ままに好きなことを書きながらGoogleのAdSenseに合格し、僅かながらも収入を得るようになっています。
今年3月のGoogleアルゴリズムアップデートにより、かなりヤバい状況に落ち込んでいますが…

ブログPVとAdSense収入激減~開業して個人事業主になったのにヤバい状況
2019年3月に実施されたGoogleコアアルゴリズムアップデートをきっかけに、ブログPVとAdSense収入が激減。折角今年に入り個人事業主になったのに、いきなり酷い仕打ちを食らった気分。尤も、少額でもブログでお金を貰えるなら十分かも。

今更ながらモバイルビューにメニュー一覧が無いことに気付く

私がブログを書くのに使っているのがワードプレス。
個人のブログだけでなく、企業が自社サイトを作成するのにも広く利用されています。

そして、PCビューではブログタイトル下にメニューを設置しています。

menu

上記画像の赤矢印の部分。
メニューにはいくつか作成している固定ページに飛ぶリンクが貼ってあり、一発で飛んでいくことができます。

メニューの一覧部分は、ブログを訪問してくれる方にはブログタイトルと共に最初に目に入るスペース。
そのため、プライバシーポリシーなどに加えて読んでいただきたい投稿一覧ページへのリンクも設置。
最近設置したのは私も大好きな「有吉ゼミ家を買うシリーズ一覧」。
これまで投稿した一覧を掲載しています。

有吉ゼミ家を買うの物件
日本テレビ有吉ゼミで放送されている芸能人による家(別荘)を買うシリーズ一覧。詳しい場所やリンク先不動産会社HPなども掲載。

登場した物件を毎回特定しているよ

ところが、このメニュー一覧はモバイルビューにはありません。
PCと違い表示エリアが狭いため。
今頃になり「そういえば無いね」と気付きました…

ワードプレスでは使用してるテーマにより違いますが、画面の一部にメニューバーなどを設置するのが一般的。
例えば私が利用しているテーマのCocoonでは画面最下部に

cocoonmenu

のようなバーを設置。
左のメニューをタップするとメニュー一覧が表示されます。

他のテーマや「はてな」などを利用している場合には、

othermenu

のようなメニュー単独のパーツを画面右上などに設置することも。

横3本線のみのパーツもあるよね

尤も、Cocoonなどと同様にメニューパーツをタップしなければメニュー一覧が表示されないのは同じ…
何もしないで目に入ってくるのと、タップしなければ表示されないのでは凄く大きな違いの気がします。

スポンサーリンク

カスタムHTMLを利用しブログカードを随所に表示して代用

メニュー一覧表示が無いならブログカードで個別に表示

沢山の方に紹介したいのでメニュー一覧に表示しているのに、モバイルビューでは一度タップしないと一覧が表示されないのではアピール度合いに雲泥の差があります。

最初から表示されていれば目につきやすいよね

そこで、せめてメニュー一覧の内で投稿一覧の表題だけでもぱっと見で見ることができる方法がないか考えます。
思いついたのがブログカードを活用する方法。
ブログカードとは、投稿文中に挿入表示する

【有吉ゼミ】家(別荘)を買うで放映された熱海・伊豆高原の別荘~丸山桂里奈さん登場
有吉ゼミ家(別荘)を買うシリーズに元サッカー選手の丸山桂里奈さんが登場。熱海近郊で予算は2,500万円。親孝行のためという泣けてくる理由での別荘探しです。いきなり「買います」宣言が出るなど波乱の放送回でした。

のようなBOXです。
これをモバイルのトップページなどに設置することで、設置場所までスクロールされればとりあえず作業不要で目に入ってきます。

カスタムHTMLを活用してブログカードを表示

モバイルトップページなら違和感が少ない

幸いにして私が利用してるCocoonやかつて利用していたSimplicity2では、トップページに各投稿のインデックスが上から並ぶタイプを選択可能で私のブログでも採用しています。
そこで、そのインデックスの中に入れれば違和感がかなり少なく表示可能。

やり方は簡単!
Cocoonでは外観⇒ウイジェット。
カスタムHTMLを選択し、インデックスリストトップ・ミドル・ボトムのいずれかにぶち込みます。
私はミドルに入れました。

テキストだと余計なコードが勝手に付加されるみたい

その際タイトルは空白のまま。
内容に表示したいURLを入れるだけ。

なお、私はモバイルのみで表示させたいので、ウイジェットのロジック欄に「wp_is_mobile()」を入れています。
これだけでモバイルのみの表示に。
Widjet Logicというプラグインが必要だったかもしれません…

mobiletop

そして、実際にぶち込んでみたのが上記スクリーンショット。
上がぶち込んだブログカードで下が通常の投稿文です。
固定ページにも画像を設置しているので、小さいながらもブログカードに画像も表示されていい感じ。
結構馴染んでいますよね。

これは何?って気付いてくれると嬉しい

本文中やサイドバーにも設置可能

もちろん、投稿文の中やサイドバーにも設置可能。
ウイジェットを利用して設置すれば、各投稿に個別に設置する必要も無し。

尤も、サイドバーに設置した場合はモバイルだと本文の相当下方になるので、到達するまでかなりスクロールが必要になりアピール度は下がりそう…

効果のほどはどうかな?