ブログ

    はてなブログのヘッダーにおすすめ記事を作ってwordpressの様に見せる方法

    はてなブログのヘッダーにおすすめ記事を作ってwordpressの様に見せる方法

    他のブログを見てて、「あ~、このデザインいいな~。あっ、wordpressか・・・」って思ったことないですか?

    wordpressに引っ越しも面倒だし、でもこのデザイン欲しいし・・・(ちなみにwordpressに引っ越ししたらこんなことをしないといけません)

    って私が思ったのは、ヘッダーにおすすめ記事を入れるものなのですが、はてなでも出来ちゃいました。

    ちょっと時間はかかりますが、はてなブログのヘッダーをかっこよくカスタマイズしましょう!

    基本的にはてなブログProを使っている方を対象にした記事なので、無料版での動作確認はしておりません。

    この機会にProの利用を検討される人は、はてなブログPro登録からどうぞ 

    ヘッダーのおすすめ記事

    ヘッダーのおすすめ記事は、こう言ったものになります。

    はてなブログのヘッダーにおすすめ記事を入れる コピペ はてなブログのヘッダーにおすすめ記事を入れる コピペ

    これ、かっこいいですよね。ずっと憧れてたんです。

    今回もほぼコピペでOKなカスタマイズなので、是非やってみましょう。

    おすすめ記事のCSS

    貼り付ける場所は2か所あります。

    まずはこちらを、「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」に貼り付けます。

    はてなブログ 目次カスタマイズ

    色の変更を紹介します。

    13行目のbackground: #f0f8ff;/*お好きな色*/の#の文字を変えると、おすすめ記事の背景の色が変わります。

    今はうす水色ですが、分かりやすい様にピンクに変えてみました。

    はてなブログのヘッダーにおすすめ記事を入れる コピペOK はてなブログのヘッダーにおすすめ記事を入れる コピペ

    カラーコードは、原色大辞典で探せます。

    次は、34行目のbackground: Deepskyblue;/*お好きな色*/のDeepskyblueを変えると、PCではカーソルが上にある時、スマホはタップした時の色が変わります。

    はてなブログのヘッダーにおすすめ記事を入れる クリック時の色を変える

    はてなブログのヘッダーにおすすめ記事を入れる クリック時の色を変える<Deepskyblueを#fdd35cに変えました>

    色は先ほどの原色大辞典で探せます。

    今の設定ではトップページのみにおすすめ記事が表示されるので、もし各記事にも表示したい場合は、57.58.59行目の

    {
        display:none;/*記事ページなどには表示しない*/
    }

    を削除すればOKです。

    ヘッダーに入れるコード

    お次は、次のコードを「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「ヘッダ」→「タイトル下」に入れます。

    はてなブログのヘッダーにおすすめ記事を入れる クリック時の色を変える


    ここからが各自手直しが必要なので、説明しますね。

     <span class=”toprecommend-image”><a href=”記事のURL“><img src=”画像URL“></a><br></span>
      <span class=”toprecommend-boxtitle”><a href=”記事のURL“>記事タイトル</a></span>

    変える部分は記事のURLと書かれた部分で、2か所同じURLが必要です。これは読者が画像をクリックしても、記事のタイトルをクリックしても同じページに移動するようにするためです。

    画像のURLの一番簡単な方法は、記事を書く画面で写真を投稿する、もしくはすでにある写真を選び、「選択した写真を貼り付け」をクリックします。

    はてなブログのヘッダーにおすすめ記事を入れる カスタマイズ

    すると画面に写真が表示され、次にHTML編集をクリックすると画像URLが見れるので、https://cdn-ak.f.st-hatena.com/images/fotolife/n/xxx/20200130/20200130073544.jpg部分をコピペします。

    はてなブログのヘッダーにおすすめ記事を入れる カスタマイズ

    残りも同じように作業していきます。

    ちなみに、おすすめ記事を増やしたかったら増やせますが、減らすとどうしても位置がおかしくなるので、最低4つはおすすめ記事が必要です。

    はてなブログのヘッダーにおすすめ記事を入れる 記事を増やす方法<おすすめ記事6つの場合>

    増やし方は分かると思いますが、念のために。

    <div class=”toprecommend-box”>
      <span class=”toprecommend-image”><a href=”記事のURL”><img src=”画像URL”></a><br></span>
      <span class=”toprecommend-boxtitle”><a href=”記事のURL”>記事タイトル</a></span>
    </div>

    枠を増やすコードは上記したものが1つの枠になるので、上のコードをコピペすれば増やせます。

    ちなみにスマホ表示を考えて、偶数個にした方がいいですね。

    <コードをちょっと変えましたが参考にさせていただいたのは、Migaru-daysさんです。ありがとうございました>

    最後に

    これでブログの見た目がwordpressっぽくなったので、PVが増えるかもしれないですね。(そんなわけないです(笑))

    まぁ、wordpressっぽいというのは抜きにしても、読んで欲しい記事をアピールできるので、PVは増えるでしょうね。

    1つ注意点として、ヘッダーで画像を読み込む=ページの表示速度が落ちるので、Lazy loadの設定も一緒にやって、画像の遅延読み込みをしておきましょうね。

    はてなブログでLazy loadを使う方法!コピペで簡単に使えるを参考にどうぞ。