Simplicityからハミングバードに移行してから行ったカスタマイズまとめ【WordPress】

当ブログのテーマは「ハミングバード」を使用しています。もともとは「Simplicity」を使用していたのですが、「ハミングバード」のその魅力の虜になりまして、テーマの移行に踏み切りました。

ただ、「Simplicity」ってカスタマイズの情報がたくさんあるのですが、「ハミングバード」はそういった情報が少ないような気がしました。まあ、カスタマイズしなくても十分かっこ良いテーマなんですが、痒いところに手が届かないといいますか、そういったところは独自にカスタマイズしていく必要があります。

カスタマイズにあたってはいろんな方のブログの記事を参考にさせていただきました。当記事で行ったカスタマイズをまとめていきます。

スポンサーリンク

「ハミングバード」を使った良記事の書き方

最強のテーマ「ハミングバード」でアクセスが爆発する記事を書く方法【WordPress】

「Crescita」の松本様の記事を参考にさせて頂きました。

「ハミングバード」の機能を余すことなく使った記事を書く術が紹介されています。サイトの色使いや構成など、非常に見やすく、いつも参考にさせて頂いております。

カスタマイズ

h4タグのスタイル修正

「ハミングバード」のh4タグのスタイルはちょいと味気ないのでちょっとだけ手を加えました。

/* h4 */
.entry-content h4 {
 border-bottom: 3px solid #a7a199;
 padding: .5em 0;
}

マーカー、太字のスタイル化

こんな感じのスタイルです。

/* マーカー(太字) */
.marker-under {
background: linear-gradient(transparent 60%, #FFCCFF 60%);
font-weight: bold;
}

色はお好みで。実際に書く際はこんな風に。

こんな感じのスタイルです。

スマホ左右揺れ対策

/* スマホ左右揺れ対策 */
#wrap{
 overflow:hidden;
}

@media only screen and (max-width: 480px) {
/* タイトル下のテキストウィジェットの隙間をなくす */
.titleunder .textwidget{
 margin-left:-2%;
 margin-right:-2%;
}
}

便利なプラグイン

WordPressテーマ『Hummingbird(ハミングバード)』をより便利にするプラグイン及び小技

「ワドプラ」のトモノリ様の記事を参考にさせて頂きました。

「ハミングバード」を利用するにあたって便利なプラグインや小技が紹介されています。”アドセンスの広告を記事下(PC)に336✕280を並べて表示する方法”はとても助かりました。

アイキャッチ画像のサイズ再設定

「ハミングバード」に移行した際、アイキャッチ画像の切り抜きサイズが最適な状態ではありません。見栄えが悪いので、修正しましょう。

テーマを適用した後に追加された画像(アイキャッチ画像)は最適な状態で切り抜きされますが、過去別のテーマでアップロードしたアイキャッチ画像に関しては、切り抜き後の画像がないため、フルサイズのアイキャッチ画像が適用されるようになります。
引用:https://open-cage.com/eyecatch-return/

この点に関しては公式に紹介されています。

過去記事のアイキャッチ画像のサイズをつくりなおす

アドセンス、アフィリエイト広告貼り付け場所

ブログにアフィリエイト広告を貼るオススメの場所ベスト3 ~ハミングバード編~

IT軍師の KENTA の記事を参考にさせて頂きました。

「ハミングバード」に限らず、アドセンス、アフィリ広告の貼り場所についてはきちんと考察すべきだということを考えさせられました!ありがとうございます!

h2タグ前のアドセンス広告

もともと「ハミングバード」では広告貼り付け用のウィジェットが複数用意されています。ただ、h2タグ前に広告を挿入するウィジェットってないんですよね。

どうしてh2タグ前に挿入したいかっていいますと、例えばモバイル用の記事タイトル下にレスポンシブな広告を貼ると、スマホのアクセスして最初に見える部分(ファーストビュー)が広告で占有されてしまいます。これは Google のポリシー違反ですので、そうならないようにするためです。

h2タグ前に広告を挿入して、ある程度のリード文を書くようにさえすればそのようなことにはなりません。
コピペ一発!WordPress本文中にウィジェットでアドセンス挿入するカスタマイズ方法

「寝ログ」のわいひら様の記事を参考にさせて頂きました。

カスタマイズは以上です。参考にさせて頂いたサイト様には非常に感謝しております。ありがとうございました。

ではでは。

スポンサーリンク

おもしろかったらシェアお願いします!

1 個のコメント

  • はじめまして。英語育児サイトを運営しているともといいます!
    私もハミングバードを使い始めてこちらの記事を参考にさせてもらっています♪

    しかし、なにぶん初心者で特にCSS関係は苦手で、TOMOZOさんのようなかっこいいヘッダーにしたいのですが、うまくいきません・・・。

    お忙しい所恐縮ですが、どうすればヘッダー部分をTOMOZO三のようなシンプルな感じに作れるでしょうか?参考にされたブログでもいいので紹介してもらえたら嬉しいです。できれば下記メールにいただければ幸いです。

    それではまた遊びに来ます^^

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA


    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください