Blogger(ブロガー)のタイトルをカスタマイズ

2019年04月06日 (土)

Blogger(ブロガー)でブログを開設して少しずつですが、記事を投稿してきました。

まずは記事を投稿していくことを中心に考えて、機能自体のカスタマイズは後回しに考えていました。

Googleの検索結果を確認してみると、タイトルのレイアウトがあまり良くないなと気づきました。

このような検索結果で表示されていました。

・トップページの場合
【ブログ名】

・記事ページの場合
【ブログ名】：【記事タイトル】

・ラベル（カテゴリー）の場合
【ブログ名】：【ラベル（カテゴリー）】


テーマは、最初にBlogger(ブロガー)を作成した時に選択した「Awesome Inc.」というテーマを使っています。

Blogger(ブロガー)の管理画面内から選択可能なデフォルトのテーマです。
将来は、自作のテーマにしようと画策していますが、今はまだ余裕がありません。
ある程度、このブログにアクセスが来るようになったら、着手していこうと思います。


デザイン自体は、無難な感じで悪くないと思っているので、今のところは、テーマを大きく変更しようとは思っていませんが
やはり、検索結果で、先頭に記事名が表示されないのは問題かなと感じたので、少しだけ変更することにしました。


記事タイトルが長い場合に、途中で短くされるので、やっぱり記事タイトルは先頭にしないともったいないですよね。
SEOでも不利になるでしょうから。


このように変更しました。

(1) Blogger(ブロガー)の管理画面を開く

Blogger(ブロガー)の管理画面のURLはこちら
https://www.blogger.com/

(2) 【テーマ】をクリック

画面左にあるメニューの【テーマ】をクリックします。

(3) タイトルの要素を探して書き換える

(3) - 1【HTML の編集】ボタンをクリック

(3) - 2 入力エリア内の<title>…</title>を探して、書き換えます。

元のタイトルコード

<title><data:blog.pageTitle/></title>

変更後のタイトルコード

<!-- title -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <title><data:blog.pageTitle/></title>
<b:elseif cond='data:blog.pageName != &quot;&quot;'/>
  <title><data:blog.pageName/> &amp;raquo; <data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <title>Error &amp;raquo; <data:blog.pageTitle/></title>
<b:else/>
  <title><data:blog.title/></title>
</b:if>
</b:if>
<!-- /title -->

(3) - 3 【テーマを保存】ボタンをクリックします。

以上で、完了です。

変更後のタイトル

・トップページの場合
【ブログ名】



・記事ページの場合
【ブログ名】：【記事タイトル】

↓ 変更

【記事タイトル】：【ブログ名】



・ラベル（カテゴリー）の場合
【ブログ名】：【ラベル（カテゴリー）】

↓  変更

【ラベル（カテゴリー）】：【ブログ名】




実は、最初に開設した時から気付いていたんです。

でも、まぁ後からでもいいかと思いながら、ずっと気になっていました。
今度の休みの日に作業しようと考えていたので、やっと着手できました。

これで、頭のモヤモヤが少しスッキリしました。