編集

Blogger『Contempo』でページナビをつける

｜2022/05/03

ページナビをつける


カスマタイズを調べていると、前・次記事へのリンクの張り方を見つけた。
手間でしたが、頑張ってつけてみた。


ただ、ページの説明が古いインターフェースだったので、所々、立ち止まってしまった。後はテーマが違うので、若干違う部分も。
メモとして、ここに書くのです。

私が使ってるテーマは『Contempo』です。

※HTML編集の前にテーマ→バックアップは忘れずに。

*一つ目のリンクを作る


テーマ→詳細設定→HTMLの編集を開く。

まずは『Blog1』を検索
 <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' version='2' visible='true'>が3936行目にある。

元記事は２行下となっているがさらに下。

3973行目に<b:include name='super.main'/>がやっと見つかる。
40行ほど下です。↑これで検索をすると複数が引っかかってくるので、探しづらい。

その下に↓これを追加。
<b:include cond='data:view.isPost' name='postPagination'/>

一つ目終わり。


**二つ目のリンク


HTMLの編集で
『<b:includable id='previousPageLink'>』を検索。

二つ出てくるので、下の方を編集。
この部分を
<b:includable id='previousPageLink'><b:comment>Don&#39;t show</b:comment></b:includable>

これに変える。
<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>

リンクの文字を替える場合はピンク部分をこんな感じにする。
<a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' title='新記事'>
新記事
&#8195;</a>

黄色い部分はリンク文字なので好きに変える事が出来る。私は『新記事』と変えた。
こまめに保存をした方がいいと思うので、この辺りで保存をする。
前と次の記事のリンクが出来ている。


***homeリンク

HTMLの編集で
『<b:includable id='homePageLink'>』を検索。
これも下の方のを編集。

この部分を
<b:includable id='homePageLink'><b:comment>Don&#39;t show</b:comment></b:includable>

これへ
<b:includable id='homePageLink'><a class='home-link flat-button ripple' expr:href='data:blog.homepageUrl' title='ホーム'>
ホーム</a></b:includable>


****『その他の投稿』を『過去記事』へ


HTMLの編集で
『<b:includable id='nextPageLink'>』を検索。

この部分を
<b:includable id='nextPageLink'>
          <a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
            <data:messages.morePosts/>
          </a>
        </b:includable>

これに変える。
<b:includable id='nextPageLink'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' title='過去記事'>
過去記事</a>
        </b:includable>


*****ページナビのカスタマイズ

背景色をつける。

HTMLの編集で『#blog-pager{』を検索。

この部分を
#blog-pager{
margin:2em 0
}
#blog-pager a{
color:$(attribution.link.color);
font-size:14px
}

これに変更
#blog-pager{
margin-top:2em;
margin-right:15px;
margin-bottom:1em;
margin-left:15px;
background-color:#ffdb4f;
padding:3px;
}
#blog-pager a{
font-weight:normal;
font-size:14px;
cursor:pointer;
text-transform:uppercase
}
青色文字が背景色。私は黄色系に変えてます。好きに設定してください。


ページナビの位置を両端に

これ、新しいテンプレートでは効かなかったです。
HTMLの編集→『　]]></b:skin>　』の前に置く。
.blog-pager-older-link{
float:left;
}
.blog-pager-newer-link{
float:right;
}

最後の位置表示だけ上手く出来ない理由……分かりませんでした。
スマホも同じく位置表示が上手く出来てませんが、気にしない事にしたのです。

『次　前　ホーム』が中央辺りに表示されてしまう。


とりあえず、次と前リンクがつけられたので、満足。