Home » memo » Blogger ページナビのないテーマ「Emporio」にページナビを追加する

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

8 2019/03/17
Bloggerのブログテーマ「Emporio」は個別記事を表示したときに前後の記事へのリンクがない。前後の記事へ移動できないのって不便だよね。で、ページナビを追加する方法を詳しく調べたのでメモっておく。

個別記事に前後の記事へのナビを追加する方法



上の目次の２と３の「HTML編集」を実行すれば、記事下に前後の記事へ移動するリンクが表示されるようになる。
が、中央に並んで表示され、背景画像の色によっては文字が見えないので、7の「ページナビの表示をカスタマイズ」を行うことをおすすめする。

4はお好みで、5と6は後まわし、またはやらなくてもよいと思う。


1. テーマのHTMLを編集するので、まずバックアップを取る


（１）テーマのページ右上の『バックアップ/復元』をクリックする（＊画像内①）

Bloggerページナビ追加


（２）現れる画面の『テーマをダウンロード』をクリックする。
  現在のテーマのxmlファイルがダウンロードされるので、保存しておく。

Bloggerページナビ追加

もしも、HTML編集に失敗してブログ表示が崩れたときなどは、『ダウンロード』の下側にある『ファイルを選択』で、PC上に保存したこのxmlファイル選んで『アップロード』すれば、HTML編集を行う前の状態に戻すことができる。
テーマなどブログの設定をいじるときは、事前に必ずバックアップをとるべし！


2. HTMLの編集 ①


（１） テーマのページにて『HTML の編集』をクリックする。（＊↑一番上の画像②）

（２）HTMLが表示されるので、この文字列のどこかにカーソルを合わせ、キーボードの『command』と『F』を同時に押すと、検索バーが現れる。（＊下の画像参照↓）

（３） 検索バーに『Blog1』と記入して『Enter』を押す。（＊下の画像参照↓）

（４） すると、文字列の中の『Blog1』の箇所が黄色く反転して表示される。（＊下の画像内①）
  その２行下のこの記述（↓）を確認する。（＊下の画像内②）

<b:includable id='main'>…</b:includable>

Bloggerページナビ追加


（５）『...』の部分をクリックして、隠れた部分を展開させる。（↓）

Bloggerページナビ追加


（６）展開した部分のこの箇所（↓）を確認し・・・（＊下の画像内①）

<b:include name='super.main'/>

（７）その下の行にこれをコピペする（＊下の画像内②）

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

Bloggerページナビ追加


（８）『テーマを保存』をクリックする。

ひとまず終わり。

ページTOPにもどる


引き続き、ページナビのリンクを作成するためのHTML編集を行う。

3. HTML編集 ②


（１）上と同じ方法で、この記述（↓）を検索する。
<b:includable id='previousPageLink'>
＊同じものが２箇所あるが、下の方を編集する。
『Enter』を押す度に、検索結果それぞれに移動する。
 左端の数字（行数）を見れば、どちらが下にあるかがわかる。

（２） 後ろの『...』をクリックして隠れた部分を展開する

Bloggerページナビ追加


（３）以下のような部分が展開するので・・（テーマによって多少の違いがある）

Bloggerページナビ追加


（４） <b:comment> から </b:comment>の間を全て、以下の赤い文字部分に置き換える。

<b:includable id='previousPageLink'>
 <a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' expr:title='data:messages.newerPosts'>
  <data:messages.newerPosts/>
 </a>
</b:includable>

Bloggerページナビ追加


（５）『テーマを保存』をクリックして終了する。

ページTOPにもどる


4. 中央に『HOME』へのリンクを設置する


（１）テーマの編集で、この記述を検索する。（↓）
（＊2つあるが、下にある方を編集する）

<b:includable id='homePageLink'>

（２）後ろの『...』をクリックして、隠れた部分を展開する

（３）真下にあるこの部分を・・・（テーマによって少し異なるかも）

<b:comment>We don't show home page links in Emporio.</b:comment>

Bloggerページナビ追加


（４）これに書き換える（↓）

　<a class='home-link flat-button ripple' expr:href='data:blog.homepageUrl' title='HOME'>
HOME
</a>

Bloggerページナビ


（５）『テーマを保存』をクリックして終了する。

ページTOPにもどる


5.『その他の投稿』を『古い記事』に書き換える


（１）テーマのHTML編集で、この記述（↓）の箇所を検索する。
（＊２箇所あるが下の方だけを編集すればよい）

<b:includable id='nextPageLink'>

（２）後ろの『...』をクリックして隠れている部分を展開する。

Bloggerページナビ追加


（３）表示されたこの部分を・・・

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

Bloggerページナビ追加


（４）これに書き換える。（↓）

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

（＊変わるのは背景が水色の部分。『古い記事』でなく『Older』などお好みのものにどうぞ）

Bloggerページナビ追加


（５）『テーマを保存』をクリックして終了する。

ページTOPにもどる


6.『新しい投稿』を『新しい記事』に書き換える


（１）この記述（↓）を検索する
<data:messages.newerPosts/>

（２）記述の前後のこの部分（↓）を・・・

 <a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' expr:title='data:messages.newerPosts'>
  <data:messages.newerPosts/>
 </a>

Bloggerページナビ追加


（３）これに置き換える。（↓）

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

（＊変わるのは背景が水色の部分。『新しい記事』でなく『Newer』などお好みのものにどうぞ）

Bloggerページナビ追加


（４）『テーマを保存』をクリックして終了。

ページTOPにもどる


7. ページナビの表示をカスタマイズする

ブログを表示してみると、記事下にページナビが表示されるようになっている（はず）。だが、文字色が黒であるから背景によっては見えにくいので、見やすいように表示をカスタマイズする。

（１）文字に背景色をつける

 HTMLの編集でこれを検索（↓）
#blog-pager{

 そしてこの箇所を（↓）・・・
#blog-pager{
margin-top:2em;
margin-bottom:1em
}
#blog-pager a{
color:$(body.button.color);
font:$(body.button.font);
cursor:pointer;
text-transform:uppercase
}


 こう変更する。（↓）
#blog-pager{
margin-top:2em;
margin-right:15px;
margin-bottom:1em;
margin-left:15px;
background-color:#fffbfb;
padding:3px;
}
#blog-pager a{
color:#2561b0;
font-weight:normal;
font-size:14px;
cursor:pointer;
text-transform:uppercase
}
  （＊赤字部分が変更、または追加された）

Bloggerページナビ


（２）ページナビの位置を両端に変更する
 これを（↓）検索して
]]></b:skin>


 真上にこれを追加する。（↓）
.blog-pager-older-link{
float:left;
}
.blog-pager-newer-link{
float:right;
}

 そして『テーマを保存』をクリックして終了。

Bloggerページナビ


これで、個別記事の下にこのように（↓）ページナビが表示されるようになった。

Bloggerページナビ

めでたし♪


- - - - - - - - - - -
＊参考にした記事：
・ページネーション(前後記事リンク)を表示させる - ふじろっく
・Bloggerブログの記事ページに新しい投稿や前の投稿のページネーションを付ける - 些細な日常

Today's cat / ladious666

私のテーマはEmporioではないからこのメモは必要ないんだけど、、訳あってちょっと調べたらハマってしまった。ブログのカスタマイズなんてよくわかってないし、しかとわかる気もないんだけど...、このちょっと謎解きみたいな感じが好きでわり楽しかったりする。
でもね、使っていてこんなこというのもなんだけど、Bloggerてのは扱いにくいブログサービスだと思う。全体的にな〜んかフシンセツな感じがするよね。。


カテゴリー : , ,