ホーム / #Blogger / #テンプレート / ブログ運営 /

Blogger「Emporio」にホームボタン（SVGアイコン）付きのページナビを設置する

2023/10/06

Emporioテンプレート

「Emporio」なんてGoogleさまが作ったテンプレートなのにページナビがないとか考えられない。

過去の投稿を遡るだけの片道切符のリンクは設置してある。

ユーザビリティ・SEO的にそこまで需要じゃないってことなのか？ワイも他所にあるブログのページナビってほぼ使わないかも。

それこそブログ感、、転ばぬ先の杖的なもの。

※「Emporio」をカスタマイズした サンプルブログ を見る。

ページナビを設置

Emporioのページナビ

「Emporio」のページナビは過去の投稿を遡ることしか出来ない。ページを前後移動できないのはやや不便な気がする。

そこで以下のようなホームボタンを含むページナビを設置することにした。このナビゲーションは記事ページにも反映される。

ページナビ 外観

今回は「Emporio」に限定したカスタマイズとして紹介する。他のテンプレートで同じ方法が成立するかは検証していない。

※ページナビ（ページナビゲーション）には、ページャーやページネーションといった呼び方がある。

ナビゲーションの表示位置を決める

ソースコード挿入位置

HTMLの編集をするので万が一に備えて事前に「xmlファイル」のバックアップを取ろう。

<b:include name='noContentPlaceholder'/>で検索する。2箇所あるので2個目の赤ラインの位置に以下のソースコードを挿入する。

<!-- ページナビを表示するコード -->

<b:include cond='data:view.isPost' name='postPagination'/>

完了したら変更を保存する。

※バックアップ時、ファイル名に「10-06-1theme-12345.xml」のように日付などを含めて管理すると便利。エラーのある状態でファイルを上書きしてしまうと詰むので要注意；；

新しい記事へのリンクを設置する

ソースコード置換

<b:includable id='previousPageLink'>で検索する。

2箇所あるので、2つ目のすぐ下にある、

<b:comment>We don&#39;t show previeus page links in Emporio.</b:comment>を以下のコードに置き換える。

<!-- 新しい記事へのリンク -->

<a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' title='新しい記事'>新しい記事</a>

完了したら変更を保存する。

古い記事へのリンクを設置する

ソースコード置換

<b:includable id='nextPageLink'>で検索する。

2箇所あるので、2つ目のすぐ下にある既存コードを、

<!-- 既存コード -->

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
            <data:messages.morePosts/>
          </a>

以下のコードに置き換える。

<!-- 古い記事へのリンク -->

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' title='古い記事'>古い記事</a>

完了したら変更を保存する。

ホームへのリンクを設置する

ソースコード置換

<b:includable id='homePageLink'>で検索する。

2箇所あるので、2つ目のすぐ下にある、

<b:comment>We don&#39;t show home page links in Emporio.</b:comment>を以下のコードに置き換える。

<!-- ホームへのリンク -->

<a class='home-link flat-button ripple' expr:href='data:blog.homepageUrl' title='HOME'><svg class='feather-home' expr:aria-label='data:title'><use href='#home-icon'/></svg></a>

完了したら変更を保存する。

ページナビをCSSで装飾する

ソースコード挿入位置

]]></b:skin>で検索する。

赤いラインの位置に以下のソースコード（CSS）を挿入する。

/*----- ページナビ -----*/
div#blog-pager {
	display: flex;
	justify-content: space-around;
	height: 38px;
	align-items: center;
	vertical-align: bottom;
	max-width: 90%;
	margin: auto;
}
a.blog-pager-older-link {
	order: 3;
}
a.blog-pager-newer-link, a.blog-pager-older-link, a.home-link {
	width: calc(100% / 3);
	max-width: 200px;
	margin: auto;
	padding: 6px 0;
}
a.blog-pager-older-link {
  background: #0395f4;
  color: #fff !important;
  -webkit-clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
}
a.blog-pager-newer-link {
  background: #0395f4;
  color: #fff !important;
  -webkit-clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 5% 100%, 0% 50%);
  clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 5% 100%, 0% 50%);
}
/*----- ホームアイコン・SVG -----*/
.feather-home {
	width:24px;
	height:24px;
	margin:0;
	vertical-align: -0.15em;
	fill: #fff;
	stroke: #087ac3;
	stroke-width: 2;
}

SVGアイコンのデータを設置する

ソースコード挿入位置

<body>で検索する。

赤ラインの位置に以下のコードを設置する。

<svg style='visibility:hidden; width: 0; height: 0;position: fixed;bottom: 0;' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
  <defs>
<symbol fill='' id='home-icon' stroke='' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><path d='M9 22V12h6v10'/></symbol>
  </defs>
</svg>

このソースコードはシンボル定義したSVGデータの保管場所になっている。（※defsタグ内が、シンボル定義したSVGデータ）

以下のuseタグによって、任意の場所（今回はホームリンク）にSVGアイコンを呼び出している。

<svg class='feather-home' expr:aria-label='data:title'><use href='#home-icon'/></svg>

この部分を削除して「HOME」などテキストリンクに変更する事もできる。

ページナビ完成図

これにてカスタマイズ完了！！

今回紹介したカスタマイズは以下の記事を参考にワイがちょこっとアレンジ（簡略化？）を加えたものである。

nono*Note: Blogger ページナビのないテーマ「Emporio」にページナビを追加する