現代版羊システム

為になることならないことなんでも書いていく雑記です。

【2017年度版】初心者ワードプレスブロガーに見てほしいカスタマイズとは!?

f:id:sheepsystem:20170314005814j:plain ※この記事はワードプレス時代のものとなります! 初心者ブロガーの一つ目の壁、

それは、『ブログカスタマイズ』です!!

僕は『simplicity2』という無料テーマを基にいろいろとカスタマイズしてこのブログを作成しました

ワードプレスはCSS、プラグイン等カスタマイズ性が高くブロガー各々によってかなり違いますね(-ω-)

日本のブログ界の中で2強とされている『はてなブログ』は、一般的にワードプレスよりもカスタマイズ性は低いと言われています。(収益も)

ということで、カスタマイズ性が高いワードプレスを使っている僕がしてみた、カスタマイズについて紹介したいと思います。

 

これだけは絶対にしておくべき修正カスタマイズ!

この画像を見てください。

どう見ても広告がはみ出ていますよね。

現在のブログでは改善したため、広告がはみ出て表示されることはありませんが、初期の何も弄っていない状態ではこのように表示されてしまっていました。

グーグルアドセンス推奨が推奨しているサイズの広告といっても、全てのブログにとって最良のサイズとは言えません。レスポンシブサイズの広告でも同様です。

アドセンスのカスタム機能でサイズを調節できるみたいですが、サイズを調節したことによって、広告の競争率が下がってしまう恐れがあります。それを改善するために、下記のCSSを追加しましょう。


[css] /adsense広告を枠内に収める/ .widget_pc_ad { margin: 0 -25px auto; } [/css]


タイトルページ&エントリーカード


投稿リストは2列

これがPC版のタイトルページ(投稿リスト)となります。

スマホ版も同様に、2列となっています

何故、2列にしているのかというと、単純に目につく記事数が多くなるからです。

これのおかげで、ページ/セッション比が上昇しました。

多くのブログでは1列表示にしているところが多いですが、それでは、コンテンツが少ないように見えてしまうこともあります。また、ブログを運営しない人が見たときに「似たようなブログを見たな~」というような感想も少なからずあると思います。

なので、僕はあえて比較的少ない2列表示にしました。

記事を読むボタンをスタイリッシュにする方法

上の画像は変更する前の表示(左側)と変更後の表示です(右側)

全然違いますよね。正直サムネイル画像をクリックしてページを見ている人も多いと思いますが、このように、記事を読むボタンがはっきりと差別化されて表示されているとわかりやすいですよね。さらに、変更する前ではクリック反応範囲が狭く、押しづらく感じることもありますが、反応範囲を広げることによってクリックしやすさも向上しています。

まぁそんなことよりも、見た目が良くなった!ということの方が大切です(笑)

下にカスタマイズに使用したCSSを載せておきます。

[1列表示でも確認済み]


[css] / 記事を見るのカスタマイズ / .entry-read a{ color:#fff; font-size:14px; background-color:#468c74; border:1px solid #468c74; border-radius:2px; padding:3px 10px 3px 5px; text-decoration:none; } .entry-read a:hover{ color:#fff; background-color:#65ceab; border:1px solid #65ceab; } .entry-read { text-align: right; margin-right: 10px; } [/css]


エントリーカードの大きさ調節

記事を読むボタンをカスタマイズしたことにより、記事を読むボタンが枠線上に表示されていると思います。

これを改善するには、下記のCSSを入れてください。

[1列表示でも確認済み]


[css] / エントリーカードの大きさ調節 /

main .entry {

border-bottom: 1px dotted #ccc; padding-bottom: 10px; } [/css]


padding-bottom: 15px;←の数字を変更することで大きさを変えることが出来ます。

サムネイル画像にエフェクト付与

サムネイルにマウスを置いたとき、ズームされるようなエフェクトを付与します。

正直、集客に関する効果はありません。

見た目だけの問題です。これはこの機能が気に入った人だけが入れるといいでしょう。

ただ、他のブログより「カスタマイズ出来てるぞ~」って気にはなれます。

[1列表示でも確認済み]


[css] / サムネイル画像のエフェクト / .entry-thumb,.wpp-thumbnail{ overflow: hidden; } .entry-thumb img,.wpp-thumbnail img{ transition: 0.6s ; } .entry-thumb img:hover,.wpp-thumbnail:hover { opacity: 0.6; -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); } [/css]


メニューバー

テーマによってはスマホやタブレットで見たとき、メニューバーがページ上部にしか表示されない、なんてことがよくあります。

ページのどの部分を見てても常にメニューバーがある方がいいですよね。

そんな時は、このプラグインを導入しましょう!

MAX MEGA MENU

これを導入することで、スマホ等の小さい画面でも常にメニューバーを邪魔なく表示させ続けることができます!


メニュー、検索、トップ、サイドバーが追加されます。

カスタマイズすれば別のボタンにも変更可能です!


サイドバー

メニューバー


導入してからページビュー数が増加しました(‘ω’)

解説したてのブログにはあまりこういうカスタマイズが無いのでぜひ導入してみるといいと思います。

まとめ

この中で僕がおすすめしたいのは、スマホ用のメニューバー追加プラグインです。

これがあるとないとはかなり違っていました。

PV/セッション率の変化の結果がすぐに見えると思うので、まずこれをお勧めします!

僕もまだまだ初心者ブロガーなので一緒に頑張りましょう!