まえがき
Blogger で提供されている Awesome Inc. テンプレートは、初期設定では投稿記事の「文末」にラベルが表示される仕様になっています。
ラベルは関連するカテゴリの記事へ誘導するための便利な機能ですが、文末にしかないと読者の目にとまりにくく、アクセシビリティの面で課題があります。
そこで、投稿記事のタイトルの直下にもラベルが表示されるようテンプレートをカスタマイズしました。本稿では、その際の手順をメモとして残します。
カスタマイズ概要
テンプレート編集画面を開いてラベル表示に該当する部分のBloggerコードをコピーして、投稿記事のタイトルを表示するコードの下に貼り付けます。
- 検索ワード：
post-labels
<b:if cond="data:top.showPostLabels and data:post.labels">
<data:postlabelslabel>
<b:loop values="data:post.labels" var="label">
<a expr:href="data:label.url" href="https://draft.blogger.com/null" rel="tag"><data:label .name=""></data:label></a><b:if cond="not data:label.isLast">,</b:if>
</b:loop>
</data:postlabelslabel></b:if>
</span>
具体的な手順
1. HTMLの編集画面を開く
Blogger > テーマ > HTMLの編集
2. HTML ソースコードが表示されるので post-labels を探す
テンプレート内のコードが記述された窓の空欄をクリックしてテンプレート編集画面にフォーカスを与えてから、キーボードで Ctrl+F と押す。
検索窓が現れるので "post-labels" と入力してリターンキーを押すと語句にマッチする部分にジャンプすることができます。
Awesomeテンプレートは 1990行で post-labels が見つかりました。
3. <span class="post-labels">～</span> を丸ごとコピーする
※コピー例
※貼り付ける前に先頭と最後にコメントを入れておくと再調整する時に探しやすくなります
<span class="post-labels">
<b:if cond="data:top.showPostLabels and data:post.labels">
<data:postlabelslabel>
<b:loop values="data:post.labels" var="label">
<a expr:href="data:label.url" href="https://draft.blogger.com/null" rel="tag"><data:label .name=""></data:label></a><b:if cond="not data:label.isLast">,</b:if>
</b:loop>
</data:postlabelslabel></b:if>
</span>
<!-- 投稿の上部にもラベルを表示 ここまで -->
4. <div class='post-header-line-1'/> の下に貼り付ける
検索窓に post-header または <div class='post-header-line-1'/> と入力してコードを挿入する部分を検索します。
Awesomeテンプレートは2か所で <div class='post-header-line-1'/> がヒットします。
行番号の若いほうはモバイル用のコードです。
モバイル画面でもタイトルの下にラベルを表示したいときは、2か所の <div class='post-header-line-1'/> 下にコピーしたラベル表示コードを張り付けます。
5. テーマを保存
変更後のテンプレートは [テーマを保存] をクリックすと変更内容が反映されます。
あとがき
Bloggerのテンプレートはシンプルに設計されている反面、細かなUIの調整は自分で手を入れる必要があります。今回のようにラベルの表示位置を変更するだけでも、記事の可読性や導線は大きく改善されます。
特にラベルは、関連記事への回遊を促す重要な要素であるため、ユーザーの目に入りやすい位置に配置することは有効なカスタマイズと言えるでしょう。
なお、テンプレートの改造はレイアウト崩れやアップデート時の上書きといったリスクも伴います。作業前にはバックアップを取得し、変更箇所を把握したうえで適用することをおすすめします。
本記事が、Bloggerカスタマイズの一助となれば幸いです。
このサイトを検索 | Search this site
0 コメント
質問はご遠慮ください。不適切なコメントは公開しません。コメントに自サイトの宣伝を書くのはお控えください。