＜ZELOカスタマイズ記⑫＞「関連記事」が自動表示されるようにしてみたはなし

Blogger ZELO カスタマイズ ブログ

Bloggerの無料テーマ、「ZELO」を自分好みにカスタマイズ中です。
今日は「関連記事」のおはなし。

Wordpress使ってたときには気にもしてなかった「関連記事」の表示だけれども、Bloggerには「関連記事」のガジェットすらないのです(´；ω；`)

調べたところ、
  • Milliard
  • LinkWithin
なんかの外部サービスを使うのが手っ取り早くてラクチンみたいなんだけど・・・
  • Milliard　→　2020年１月１日でサービス終了
  • LinkWithin　→　コードを取得しようとすると「500 Internal Server Error」
なので、今回は
  • Premium Flexible Related Post Widget for Blogger
を使ってみようと思います。


外部サービスじゃないってところもポイント高いね☆


ビフォーアフター

ビフォー

Blogger「ZELO」に関連記事を追加する前

アフター

Blogger「ZELO」に関連記事を追加


Bloggerの無料テーマ「ZELO」に「関連記事」を入れるカスタマイズ


※かならずバックアップをとってからカスタマイズしてください。

①HTMLを編集

（１－１）編集画面をひらく

テーマ
　→　「・」がたてに３つ並んでいるメニューを選択
　→　「HTMLを編集」

（１－２）編集する場所を探す

以下のコードを検索

<b:include data='post' name='post'/>

（１－３）コードを貼り付ける

検索したコードの下に、下記のコードを貼り付ける

<!-- START::_140414_related_posts::START -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label'>
   <span class='_140414_related_label' expr:post_id='data:post.id' expr:url='data:label.url' style='display:none'><data:label.name/></span>
  </b:loop>
 </b:if>
 <div class='_140414_related_posts' expr:post_id='data:post.id'>
 </div>
</b:if>
<!-- END::_140414_related_posts::END -->

（１－４）保存


②ウィジェットの設定

（２－１）ウィジェットのオプションを設定

Blogger用プレミアムフレキシブル関連投稿ウィジェット　で、ウィジェットのオプションを設定します。

わたしは以下のように設定しました。
  • ポスト番号（表示記事数）　：　４
  • ラベルの表示　：　しない
  • コメント数を表示　：　しない
  • 著者名を表示　：　しない
  • サムネイル画像を表示　：　する
  • サムネイル画像の高さ　：　100
  • デフォルトのサムネイル　：　「ページ」でOGP画像をアップロードして、画像URLをコピーしたものを貼り付け
  • 投稿の公開日を表示　：　する
  • 投稿の抜粋を表示　：　しない
  • 投稿の抜粋の文字数　：　０
  • 境界線を表示　：　しない
  • 日付の形式　：　yyyy/mm/dd

（２－２）ウィジェットを追加

［ウィジェットを追加］ボタンを押します

（２－３）ページ要素を追加

別ウィンドウ（タブ）で、「ホントにこのウィジェットをこのサイトに適用していいの？」みたいな確認をされるので、タイトルを変え（関連記事、など）、［ウィジェットを追加］ボタンを押します。

（２－４）ガジェットの位置を変更する

ガジェット設定画面が表示され、デフォルトだとナビバーの位置に「関連記事」が入っているはずです。

このままだとページをひらくごとにナビバーに一度「関連記事ガジェット」のタイトルが表示されてしまうので（一瞬だけ）、しかるべき場所にガジェットを動かします。

わたしはメインのブログの投稿の下に移動させました。

［配置を保存］したらおしまい！


③デザインを変更

設置してみてわかったこと！
レスポンシブルじゃないです、このウィジェット。

スマホなんかだと４記事を２列×２行の表示にしてほしいところだけど、４列×１行でほそ～い画像とタイトルが表示されちゃいます。。

これを直す技術はとうきび。にはありませんので、おとなしくタイトルのフォントサイズだけ変更するとします。

（３－１）ガジェットの編集

「h3.title」のところに、
    font-size: 16px;
を追加

（３－２）保存

［保存］しておしまい！

わたしが今できるのはここまででしたぁ↓
Blogger「ZELO」の関連記事タイトルを小さくする

0 件のコメント :

コメントを投稿

関連記事