ブログのテンプレートをBlogger公式テーマ「Emporio」に変更した。
トップページがスッキリしたグリッドレイアウトで以前から少し気になっていた。
さすがGoogle配下のエンジニアが制作しただけあって、デザイン・機能面ともに品質が高い。
そんな素敵な「Emporio」だが、日本語環境で利用するには若干の、、カスタマイズが必要になる。
不要なコードを削除（非表示）、日付の日本語化、ページナビの設置、関連記事の設置などなど。
※「Emporio」をカスタマイズした サンプルブログ を見る。
注目の投稿ガジェットを非表示
※画像はテストサイトのスクショ使用。
「Emporio」を適用すると初期状態で"注目の投稿"がデカデカと表示される。
新着や特定の記事を大きくアピールしたい場合は使えるが、ワイはデザイン的に好きじゃないのでレイアウト（ガジェット設定）で非表示に設定している。
気分次第で使う場合もある。
投稿者・シェアボタンを非表示（削除）
「Emporio」のトップページ（投稿リスト）には、投稿者・コメントボタン・シェアボタンが設置されている。
個人的に、サムネイル・投稿タイトル・日付以外は必要ないのでカスタマイズする。SEOにおいてマイナスになる可能性も否めないが気にしない。
投稿者を非表示
ブログの投稿者もレイアウト（ブログの投稿ガジェット）から非表示にできる。実はコメントボタン・シェアボタンに関しても、ブログの投稿ガジェットから非表示設定が可能だ。
ただしその場合、記事ページに表示されるシェアボタンなども非表示になるため別のやり方で非表示にする。
コメントボタン・シェアボタンを非表示
ここからはテンプレートのソースコードを編集するので、不測の事態に備えてテンプレートファイル（.xml）をバックアップしておく。
Bloggerの管理画面「テーマ」から「HTMLの編集」に移動、]]></b:skin>で検索する。
赤ラインのすぐ上に以下のスタイル（CSS）を貼り付ける。
/*----- SNSボタンを非表示 -----*/
.post-footer .post-share-buttons {
display: none;
}
これでトップページの投稿リストが、サムネイル・投稿タイトル・日付だけになった。
コメントボタン・シェアボタンを右寄せにする
コメントやシェアボタンを消さずに利用する場合、CSSで以下のようなスタイルを指定して、まとまりよく右寄せ表示などもいいかもしれない。
/*----- SNSボタンを右寄せ -----*/
.feed-view .post-footer.container {
display: flex;
flex-direction: row;
justify-content: end;
gap: 10px;
}
海外式の日付を「年/月/日」に変更する
「Emporio」の日付表記はアメリカ式（「月/日/年」）である。「欧米かっ!!」とツッコまれる前にカスタマイズしてしまおう。
日付を出力している部分は、注目の投稿・投稿リスト・記事ページの3箇所。
それぞれに「年/月/日」用のソースコードを追加していく。
Bloggerの管理画面「テーマ」から「HTMLの編集」に移動、<!-- We call super.postShareButtons from the migrated positions. -->で検索する。（※3箇所あるよ）
赤ラインの位置に以下のソースコードを貼り付ける。（※3箇所あるので全てに貼り付ける。）
<!-- 日付のカスタマイズ -->
<b:includable id='postTimestamp'>
<span class='byline post-timestamp'>
<data:byline.label/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><b:eval expr='data:post.date format "yyyy-MM-dd"'/></time></a>
</b:if>
</span>
</b:includable>
yyyy-MM-ddの箇所を、yyyy/MM/ddとすれば「2023/10/04」のように表示される。
以下の記事を参考にさせて頂きました！
Bloggerブログで記事の更新日を表示する方法
Bloggerの公式テーマは記事の最終更新日が表示されない。しかし独自タグでカスタマイズして付けられる。タイムゾーンありのフォーマットはデフォルトで操作できないので、独自タグのプログラムを組んで対応させる。
日付のフォントを調整する？
ワイ的には、日付部分のフォントもカスタマイズしたくなった。
「Emporio」のフォントは基本的に、variable（ヴァリアブル）タグによって設定されている。
.byline.post-timestamp aは日付のクラスだが、varタグで設定されたposts.byline.fontのスタイルを反映している。
フォントを調整する場合、value="italic 400 12px Merriweather, Georgia, serif"の箇所を変更すればいい。
<!-- 日付のvarタグ -->
<Variable name="posts.byline.font" description="Post byline font" type="font" default="$(bylineFont)" value="italic 400 12px Merriweather, Georgia, serif"/>
/*----- 日付を含むクラス -----*/
.byline,.byline.post-author a,.byline.post-timestamp a{
color:$(posts.byline.color);
font:$(posts.byline.font)
}
たとえばitalicスタイル（斜体）を外して、フォントサイズを12px→14px、Lato（Webフォント）を指定した場合。
<!-- 日付のフォントスタイル変更 -->
<Variable name="posts.byline.font" description="Post byline font" type="font" default="$(bylineFont)" value="400 14px Lato, Merriweather, Georgia, serif"/>
まあまあ読みやすくなった気がする。sans-serifが好きだけどね、、
記事タイトルと本文のfont-familyを変更する
/*----- 記事本文のスタイル -----*/
.post-body{
color:$(posts.text.color);
display:block;
font:$(posts.text.font);
line-height:$(posts.text.lineHeight);
margin:0
}
<!-- 記事本文のvarタグ -->
<Variable name="posts.text.font" description="Post text font" type="font" default="$(bodyFont)" value="400 16px Merriweather, Georgia, serif"/>
※ここで解説している設定の一部は、管理画面「テーマ」→「カスタマイズ」からも可能です。
記事本文のfont-familyは、posts.text.font（varタグ）で設定されている。デフォルトでは「Merriweather」というWebフォントが採用されている。当サイトでは以下のvarタグに書き換えている。
<!-- 記事本文のvarタグ（サンプル） -->
<Variable name="posts.text.font" description="Post text font" type="font" default="$(bodyFont)" value="400 16.5px sans-serif, serif"/>
記事タイトルについては手短にvarタグだけ記載しておく。
<!-- 記事タイトルのvarタグ -->
<Variable name="posts.title.font" description="Post title font" type="font" default="$(titleFont)" value="500 24px Ubuntu, sans-serif"/>
細かくやる場合、クラスの切り分けやメディアクエリへの理解が必要になる。ワイもあまり精査せず、ふわっとした知識で説明しているほどだ。
/*----- 記事タイトルのフォントサイズ -----*/
.feed-view .post-wrapper.not-hero .post-title a{
font-size:$(posts.title.font.size * 2 / 3);
line-height:$(posts.title.font.size)
}
フォントサイズの調整は、posts.title.font.size * 2 / 3を変更するか、デベロッパーツールなどでクラスを拾ってCSSを上書きする方法がある。
CSSを上書きする場合は基本「Emporio」で採用されているメディアクエリで指定する。
/*----- 記事タイトルのフォントサイズ（サンプル） -----*/
@media (max-width:485px){
h3.post-title.entry-title {
font-size: 140%;
}
｝
※BloggerでCSSを上書きする場合は、]]></b:skin>の直前に追加するのが一般的。
今後のカスタマイズについて
予想外に記事が長くなりすぎたので、ページナビ、関連記事の設置については別記事にわけたいと思う。
今後は番号付きのページナビと、目次を導入する予定。
まあ～海外製テンプレートって大変だよね。これからBloggerでブログ始めようって人にはあまりオススメ出来ないかも。
もちろんデフォルトのまま使用している垢抜けたBloggerさんもいるけどね。
0 件のコメント:
コメントを投稿