Bloggerの無料テーマ、「ZELO」を自分好みにカスタマイズ中です。
今日は「関連記事」のおはなし。
Wordpress使ってたときには気にもしてなかった「関連記事」の表示だけれども、Bloggerには「関連記事」のガジェットすらないのです(´;ω;`)
調べたところ、
今日は「関連記事」のおはなし。
Wordpress使ってたときには気にもしてなかった「関連記事」の表示だけれども、Bloggerには「関連記事」のガジェットすらないのです(´;ω;`)
調べたところ、
- Milliard
- LinkWithin
なんかの外部サービスを使うのが手っ取り早くてラクチンみたいなんだけど・・・
- Milliard → 2020年1月1日でサービス終了
- LinkWithin → コードを取得しようとすると「500 Internal Server Error」
なので、今回は
- Premium Flexible Related Post Widget for Blogger
を使ってみようと思います。
外部サービスじゃないってところもポイント高いね☆
ビフォーアフター
ビフォー
アフター
Bloggerの無料テーマ「ZELO」に「関連記事」を入れるカスタマイズ
※かならずバックアップをとってからカスタマイズしてください。
①HTMLを編集
(1-1)編集画面をひらく
テーマ
→ 「・」がたてに3つ並んでいるメニューを選択
→ 「HTMLを編集」
(1-2)編集する場所を探す
以下のコードを検索
<b:include data='post' name='post'/>
(1-3)コードを貼り付ける
検索したコードの下に、下記のコードを貼り付ける
<!-- START::_140414_related_posts::START -->
<b:if cond='data:blog.pageType == "item"'>
<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 -->
(1-4)保存
②ウィジェットの設定
(2-1)ウィジェットのオプションを設定
Blogger用プレミアムフレキシブル関連投稿ウィジェット で、ウィジェットのオプションを設定します。
わたしは以下のように設定しました。
- ポスト番号(表示記事数) : 4
- ラベルの表示 : しない
- コメント数を表示 : しない
- 著者名を表示 : しない
- サムネイル画像を表示 : する
- サムネイル画像の高さ : 100
- デフォルトのサムネイル : 「ページ」でOGP画像をアップロードして、画像URLをコピーしたものを貼り付け
- 投稿の公開日を表示 : する
- 投稿の抜粋を表示 : しない
- 投稿の抜粋の文字数 : 0
- 境界線を表示 : しない
- 日付の形式 : yyyy/mm/dd
(2-2)ウィジェットを追加
[ウィジェットを追加]ボタンを押します
(2-3)ページ要素を追加
別ウィンドウ(タブ)で、「ホントにこのウィジェットをこのサイトに適用していいの?」みたいな確認をされるので、タイトルを変え(関連記事、など)、[ウィジェットを追加]ボタンを押します。
(2-4)ガジェットの位置を変更する
ガジェット設定画面が表示され、デフォルトだとナビバーの位置に「関連記事」が入っているはずです。
このままだとページをひらくごとにナビバーに一度「関連記事ガジェット」のタイトルが表示されてしまうので(一瞬だけ)、しかるべき場所にガジェットを動かします。
わたしはメインのブログの投稿の下に移動させました。
[配置を保存]したらおしまい!
③デザインを変更
設置してみてわかったこと!
レスポンシブルじゃないです、このウィジェット。
スマホなんかだと4記事を2列×2行の表示にしてほしいところだけど、4列×1行でほそ~い画像とタイトルが表示されちゃいます。。
これを直す技術はとうきび。にはありませんので、おとなしくタイトルのフォントサイズだけ変更するとします。
(3-1)ガジェットの編集
「h3.title」のところに、
font-size: 16px;
を追加
(3-2)保存
[保存]しておしまい!
わたしが今できるのはここまででしたぁ↓
0 件のコメント :
コメントを投稿