テンプレート「Faber」の着せ替えと使ってみた感想

2020年3月20日金曜日

上記画像の「Faber」は Blogger 用テンプレートです。ダウンロード（DL）先はこちらです。関連情報は以前の記事個性的なBlogger用テンプレートを海外ギャラリーよりピックアップしますの内容を参照して下さい。

このテンプレートを選ぶに当たっての注意点があります。すっきりしたデザインで特にトップ部分が余計な事を一切しない、タイトルの横にボタンもすっきり収まっている代わりに、ブログタイトルの幅（HTMLを知っているなら編集できる）が漢字9文字分しかありません。長ければタイトルを折り返し表示できますが、2行以上では折角スッキリしたトップデザインの意味がなくなります。右側にあるメニューボタンも５～６個を超えれば、同じ様に折り返し2行目に表示されます。

HTML編集を取り敢えず考えない事にして、

● ブログタイトル9文字以内メニューボタン5個までタイトルバーをすっきり
● ブログタイトル9文字以内でブログ説明あり、合わせて2行表示
● ブログタイトル9文字以上で2行表示、ブログ説明無し

上記3パターンならこのテンプレートの選択は後悔させません。タイトル2行表示となればメニューボタンも10～12個設置できますが･･････多ければいいってものではないので、デザインとの関連性を吟味して決めましょう。

ダウンロードとインストール

DLのページへ移動してから、「↓Download」をクリックすると、このような圧縮ファイルがフォルダーに入ります。

展開して見るとこれだけのファイルがあります。

高校程度の英語で理解できますので、先ず「How to install」ファイルを読んでみてください。作業のイメージが一通り掴めると思います。「How to setup this templateーAsk here」ファイルではQ&Aコーナーになっていますが、質問だけで回答が無く参考にはなりませんでした。

では、Bloggerの管理ページにある「テーマ」に移動し、テンプレートを着せ替える前に、先ずはバックアップを忘れずに取りましょう。「転ばぬ先の杖」です。

次はインストールの方法を見て行きましょう。バックアップを取ったままの画面で右ボタンをクリック。そこに「元に戻す」と言うメニューがあります。見易いよう赤い枠を付けました。

この「元に戻す」が日本語的でないメニューなので、戸惑う人が多いかと思います。筆者も最初は見過ごしてしまい、あれ？どこをどうすれば？と慌てました。バックアップしたテンプレートを元に戻す時に重点を置いた翻訳ですが、着せ替えのテンプレートをインストールするのもここです。むしろ着せ替えの用途が多いと言うか･･････「テンプレートのインストール」にして欲しいですね～「元に戻す」も結局は保存したテンプレートを（再）インストールする事ですから。元はアメリカのサービス、「restore」を日本語対応にしたら「元に戻す」になったのかな、1回覚えれば済むし、ここは有難く使わせて頂きましょう。

「元に戻す」メニューをクリックするとポップアップウィンドウが現れます。このポップアップウィンドウの表示内容でスッキリしてきます。

DLして解凍したファイル群の中から Template の名前が付いているファイルを選択して「開く」をクリックすると、インストールします。

インストール結果はすぐにサムネールで表示できません、Bloggerの付属テンプレートでは無いからですね。効果を見たい時は、Blogger管理メニューの左上にある「ブログを表示」をクリックして下さい。

タイトルバーの右側のボタンがない？

テンプレートをインストールした後にブログを見ると、結構重要視しているタイトルバーの右側にある筈のボタンがない？！いやぁ～ここは自動的にページのタイトルを拾って欲しいところですね～でも大丈夫です。

Blogger 管理ページの「レイアウト」に入ると、ブログの widget 毎の移動や編集ができるのは知ってますよね、そこにメニューボタンの widget があり、メニューの編集ができます。

メニューボタンの編集方法と各要素は下記画像を参照下さい。

この他、投稿記事の日付表示や人気投稿、アドセンス設置など含め、多くの設定がレイアウト画面で出来ますので、それぞれの widget 編集画面を確認してみて下さい。

構造化データエラーの修正

自分の使っているテンプレートの構造化データを一度テストしょうと言う記事を内部SEOコーナーにアップしていましたので、「Faber」テンプレートをインストールしたブログもテストしました。Vaster2とBloggerの内部テンプレートの構造エラーをせっせと修正しますの記事でも記述したのとほぼ同じエラーが現れていました。

エラーと警告内容の相互関係でエラーを修正すると、全部消えます。これは「Vaster2」と言うテンプレートでも触れましたが、Blogger の構造化データ記述方法の対応問題であり、Google の構造化データに関する説明ページを一通り見た所、Blogger は自動的に設定しているから特に無視しても差し支えは無いような解釈があります。

殆どの Blogger テンプレートにこのような問題があり、例え検索に問題がないと言われても、マイナス表示を消しておきたいのが人情、特に日本人としての気質がそうさせます。一度に訂正が出来ましたので、同じユーザーはぜひ参考にして下さい。

Blogger の管理ページから「テーマ」に入り、右上のメニューボタンで「HTMLを編集」をクリックします。

「post hentry」で下記の行を探します。

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

この行が見つかれば、その下に以下のコードを追加します。

<data:post.author/>
<data:post.timestampISO8601/>
<data:post.title/>


ここにロゴ画像(代わり画像)のURL
ここに組織名(個人名かペンネームでも)

これで一度にエラーと警告が全部消えました。補足したいのは、このテンプレートは画像使用がデフォルトになっており、文字のみの投稿ですと「image」エラーが出ます。代わりのフリー画像でも入れればいいので、かったるいなら全然無視しても問題ありません。

「Faber」の感想

「Faber」のファーストインプレッションは、オリジナルサイトに展示された回りの色のせいか、一見地味に見えていましたが、実装して見ると日本人好みの「堅実」な感じです。派手ではないところがコンテンツに期待を寄せ、アイキャッチ画像がかなり強い印象を与えます。

全体的に無駄のないデザインがいいですね、真面目さを全身に纏っているから、知識系の情報には持って来いのテンプレートと思います。

Google Search Console に登録し、一定時期を経ると、このテンプレートの良さや不足部分が更に見えて来ますので、追って情報を追加して行きたいと思います。

テンプレート「Faber」を実装した日本のブログがありますので、インストールを決める前、ぜひご参考に一度訪れてみて下さい。