2019/03/17

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

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

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



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

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




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


(1)テーマのページ右上の『バックアップ/復元』をクリックする(*画像内①)

Bloggerページナビ追加


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

Bloggerページナビ追加

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



2. HTMLの編集 ①


(1) テーマのページにて『HTML の編集』をクリックする。(*↑一番上の画像②)

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

(3) 検索バーに『Blog1』と記入して『Enter』を押す。(*下の画像参照↓)

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

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

Bloggerページナビ追加


(5)『...』の部分をクリックして、隠れた部分を展開させる。(↓)

Bloggerページナビ追加


(6)展開した部分のこの箇所(↓)を確認し・・・(*下の画像内①)

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

(7)その下の行にこれをコピペする(*下の画像内②)

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

Bloggerページナビ追加


(8)『テーマを保存』をクリックする。

ひとまず終わり。

ページTOPにもどる



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

3. HTML編集 ②


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

(2) 後ろの『...』をクリックして隠れた部分を展開する

Bloggerページナビ追加


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

Bloggerページナビ追加


(4) <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ページナビ追加


(5)『テーマを保存』をクリックして終了する。

ページTOPにもどる



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


(1)テーマの編集で、この記述を検索する。(↓)
(*2つあるが、下にある方を編集する)

<b:includable id='homePageLink'>

(2)後ろの『...』をクリックして、隠れた部分を展開する

(3)真下にあるこの部分を・・・(テーマによって少し異なるかも)

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

Bloggerページナビ追加


(4)これに書き換える(↓)

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

Bloggerページナビ


(5)『テーマを保存』をクリックして終了する。

ページTOPにもどる



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


(1)テーマのHTML編集で、この記述(↓)の箇所を検索する。
(*2箇所あるが下の方だけを編集すればよい)

<b:includable id='nextPageLink'>

(2)後ろの『...』をクリックして隠れている部分を展開する。

Bloggerページナビ追加


(3)表示されたこの部分を・・・

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

</a>

Bloggerページナビ追加


(4)これに書き換える。(↓)

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

</a>

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

Bloggerページナビ追加


(5)『テーマを保存』をクリックして終了する。

ページTOPにもどる



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


(1)この記述(↓)を検索する
<data:messages.newerPosts/>

(2)記述の前後のこの部分(↓)を・・・

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

</a>

Bloggerページナビ追加


(3)これに置き換える。(↓)

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

</a>

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

Bloggerページナビ追加


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

ページTOPにもどる



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

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

(1)文字に背景色をつける

 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ページナビ


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


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

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

Bloggerページナビ


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

Bloggerページナビ

めでたし♪


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


Today's cat / ladious666

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



- - -《 広 告 》- - -


- - 感想をどうぞ! - - 《 Reaction Buttons

  にほんブログ村 ライフスタイルブログ 一人暮らしへ
Categories: , ,

- - - - -《 広 告 》- - - - -


8 コメント:

ふじやん。 さんのコメント...

はじめまして。Japanese Bloggers Infoからふらっと立ち寄ってみたら偶然私のブログ記事のリンクがあってびっくりしました(笑)。
私の記事が参考になったとのことででよかったです(^^)
ホームリンクの追加は逆に参考になりました。後で試してみようと思います。ちなみに今はHTMLウィジェットにホームへのリンクタグを入れて設置しています。

ところで、せっかくリンクを貼って頂いたのに申し訳ないのですが、実は諸事情によりブログを削除してしまいまして、現在新ブログを立ち上げて、当該記事もそちらに引っ越しております。
大変お手数ですがリンクを修正していただけると幸いです。よろしくお願いいたします。
ページネーション(前後記事リンク)を表示させる - ふじろじっく

のの さんのコメント...

>ふじやん。さん
了承もいただかず勝手に記事にリンクして、こちらこそ申し訳ありません。m(_ _)m
それなのに新しいリンクを教えてくださり、ありがとうございます!
早速URL変更いたしました。
しかもしかも、ブログにコメントをいただくのも初めてなんで、大変喜んでいます。

新ブログ、少し拝見しました。
コメント欄のデザインカスタマイズしてみたいと思いました。
でも、コメント滅多にいただかないので...ボチボチやります。( ; ; )

ふじやん。 さんのコメント...

早速のリンク変更対応ありがとうございます!・・・が、よく見たら旧リンクと新リンクの2つになってて、もとからあった結城永人さんの記事リンクが消えちゃってる(^^; お手数ですがこちらの修正の方も・・・
Bloggerブログの記事ページに新しい投稿や前の投稿のページネーションを付ける - 些細な日常


うちのブログは特に明記はしてませんけど、リンクや引用は自由にして頂いて構いませんので(^^)丿

のの さんのコメント...

>ふじやん。さん
あれま、本当だ!
ご指摘感謝いたします。
あんぽんなのがバレちゃいました。恥ずかしい・・(^^;)
重ね重ねありがとうございます。m(_ _)m

ふじやん。 さんのコメント...

こんばんは。
こちらの記事の 「4.中央に『HOME』へのリンクを設置する」の部分を、先程更新した当ブログ記事で紹介させていただきました。
もし何か問題ありましたらすぐに対応しますので、お手すきの時にでもご確認頂ければと思います。
https://fujilogic.blogspot.com/2019/06/add-a-home-link.html

のの さんのコメント...

>ふじやん。さん
私のヘッポコ記事を紹介してくださり、ありがとうございます。
ブログカスタマイズなど実はさっぱりわかっておらず、いつも謎解きのような感覚でやっています。
なので少々恐れ多いですが...。(^^;)

ところで、最新コメントのガジェットもふじやん。さんの真似をして設置してみました。
でも、コメントなんか滅多にもらわないよな〜...と思っていたところだったので、二重に嬉しいです。(^^)

ふじやん。 さんのコメント...

こんばんは。
へっぽこだなんてとんでもないです! とても丁寧に書かれていて、解りやすいですし、参考になる点もすごく多いですから(^^)
ウチの記事のほうがよっぽど不親切で稚拙な文でお恥ずかしいです…

ところで最新コメントウィジェットですけど、私の個人的な好みで「>」アイコンは非表示にしてたんですが、ののさん、自力で表示されたんですね! 提供元の Sneeit さんを参考になさったのかな? お手数おかけして申し訳ないですm(_ _)m
今更ですが、よくよく考えたらやっぱり一般的には「>」があった方が好まれるのかなって気がしてきたもんで、記事で紹介してるCSSも「>」が表示される仕様に書き直しました(^^;

(のωの) さんのコメント...

>ふじやん。さん
エヘヘ、恐縮です。
いえいえ!、親切に解説されているからこそ、私みたいなのがやってもうまくいくのです。
最新コメントウィジェットはぐうぐるさんのものがイマイチで...あちこちを彷徨い、Disqusなんかも入れてみましたが、ふじやん。さんの方法が一番よかったです。
「>」は、私もあった方がいいと思いました。
サイトのどーでもいいような表示が気になって...、よくわからずにいじるので、終いには目がチカチカしたりします。(*_*;)