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てのは扱いにくいブログサービスだと思う。全体的にな〜んかフシンセツな感じがするよね。。


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

▲TOPへ戻る▲

Categories: , ,

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


0 コメント: