[Blogger] タイトルの下にラベルを表示

Atom | RSS

このサイトを検索 | Search this site

[Blogger] タイトルの下にラベルを表示

投稿記事のタイトルの下にもラベル表示

Blogger で提供されている Awesome Inc. テンプレート は、初期設定では投稿記事の文末にラベルを表示するようになっています。

ラベルは同じカテゴリの記事へのアクセシビリティを表示するのに便利な機能ですが、文末に表示されるラベルは視認性が悪いです。

そこで、投稿記事のタイトルの下にもラベルを表示できるようにテンプレートを改造したので、私が実行した手順をメモに残します。

目次[表示]

• 1.カスタマイズ概要
• 2.具体的な手順
  • 2.1.1. HTMLの編集画面を開く
    Blogger > テーマ > HTMLの編集
  • 2.2.2. HTML ソースコードが表示されるので post-labels を探す
  • 2.3.3. <span class="post-labels">～</span> を丸ごとコピーする
  • 2.4.4.  <div class='post-header-line-1'/> の下に貼り付ける
  • 2.5.5. テーマを保存

カスタマイズ概要

テンプレート編集画面を開いてラベル表示に該当する部分のBloggerコードをコピーして、投稿記事のタイトルを表示するコードの下に貼り付けます。

• 検索ワード： post-labels

Awesome Inc. テンプレートの例

<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>

具体的な手順

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. テーマを保存

変更後のテンプレートは [テーマを保存] をクリックすと変更内容が反映されます。

 Related post

• bloggerラベルの記事一覧 :Scrap 2nd.

検証：Awesome Inc. テンプレート

AwesomeInc の記事 (Articles about the AwesomeInc)

1. Blogger: ブログのページ幅を最適化（アドセンス対策）
2. moreタグの動作をカスタマイズする方法｜Blogger
3. アドセンスコードをmoreタグの位置に挿入する方法（同期コード）
4. more タグの位置にアドセンスコードを挿入する方法
5. モバイルユーザビリティエラーの対処方法 (Blogger)
6. Google Search Consoleに記録された構造化データエラーとは？（対策あり）
7. アドセンスを文末に自動表示させる方法
8. [Blogger] 単一ページのガジェットを制限してアドセンスに準拠
9. [Blogger] ヘッダ、ウィジェットの余白を調整
10. Blogger：CSSの独自クラス名をモバイルテンプレートだけに反映させる方法
11. AwesomeInc ラベルの記事（要約付）
12. Blogger が含まれる記事（要約付）

新着順 (New arrival order)

1. Intel(R) ME Firmware Ver.11.8.97.4739（2025年6月3日）【vaio】
2. 【Clibor】行頭に連番を挿入する方法【New!】
3. 【ブログ執筆者必見】Cliborでテキスト整形をマスター！コピペ効率を劇的に上げる方法
4. 吉田栄作と織田裕二：キャリアパスの分岐と戦略的選択の分析
5. 【Pixel 9a／6a】ホーム画面のお天気アイコンが消える原因と対処方法
6. 「アダルトサイト動画公開」詐欺メールに注意！あなたのネットリテラシーは大丈夫？
7. 【大阪】「ヒョウ柄ばっかちゃうねん！」リアル大阪人図鑑
8. 【Thunderbird】ESR → Release へ移行する方法と注意点
9. 【Pixel／2025年5月】アンチロールバックの実装、ゼロデイ脆弱性（CVE-2025-27363）
10. 【初心者向け】Windows／AndroidでDoHを設定してセキュリティを高める方法

タイトル：[Blogger] タイトルの下にラベルを表示：SC2

このサイトを検索 | Search this site