Bloggerブログの記事ページに新しい投稿や前の投稿のページネーションを付ける 結城永人 - 2018年7月4日 (水) Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableでは記事ページに新しい投稿や前の投稿のページネーションがデフォルトで付いてないけれどもHTML編集のカスタマイズによって付ける方法が見付かって些細な日常で取り入れてみた。 ソースコードでは最初からページネーションのスペースが取られていて表示しないようにしているだけだからブログの記事ページに設置するための考え方は一から始めるよりは速やかなのが助かる。 目次ページネーションを取り入れる二つの手順独自タグでページネーションを設定する方法(Sohoは省略可能)独自タグでページネーションを配置する方法CSSでページネーションにデザインを付けるページネーションの位置取りを調整する方法ページネーションの上下の余白を調整する方法 ページネーションを取り入れる二つの手順 テンプレートに設定する必要なリンクを生成するテンプレートに配置する 独自タグでページネーションを設定する方法 2017年の公式テーマはインデックスページに「その他の投稿」や「前の投稿」がデフォルトで付いている。ブログの投稿ガジェットのページネーションのソースコードから出力されていて実際には「新しい投稿」や「ホーム」も含まれていて表示されないようになっている。 <b:includable id='postPagination'> <div class='blog-pager container' id='blog-pager'> <b:include cond='data:newerPageUrl' name='previousPageLink'/> <b:include cond='data:olderPageUrl' name='nextPageLink'/> <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/> </div> </b:includable> 四つのテーマで共通してソースコードのBlog1のwidgetに含まれている。 Bloggerの独自タグの<b:includable></b:includable>は他から参照できる部分で、付けられたidが他の独自タグの<b:include/>のnameで呼ばれてソースコードに出力される。 ページネーションのpostPaginationのidのincludableはそれ自体にincludeのnameを持っているからやはり他のincludableの内容を呼び込んでいるんだ。 postPaginationの三種類の参照先 previousPageLink 新しい投稿のリンクを生成する nextPageLink その他の投稿や前の投稿のリンクを生成する homePageLink ホームのリンクを生成する デフォルトで反映するのは<b:include cond='data:olderPageUrl' name='nextPageLink'/>だけになっている。インデックスページでContempoとEmporioとNotableは「その他の投稿」、Sohoは「前の投稿」だ。ページネーションのソースコードが同じなのにどうして出力される内容が違うのかはそれ自体が持っているIncludeの「nextPageLink」の参照先のincludableの記述が違うのに由来している。 ブログの投稿ガジェットのソースコードにはページネーションに必要な三種類のincludable:nextPageLinkとpreviousPageLinkとhomePageLinkの記述されていてページネーションのincludableに含まれるincludeのnameで個々に呼び出されている。 Sohoは全て中身があるけど、ContempoとEmporioとNotableは<!-- Don't show -->(表示しない)となっていて中身がない。だからページネーションを新しく配置するとしても表示されないので、先ずは<!-- Don't show -->を消すと共に中身を記述しなくてはならない。 注意すると2017年の公式テーマではページネーションの参照先について同じ記述が二つある。中身を記述して使用する場合にはブログの投稿ガジェット:Blog1のidのwidget内から選ぶ。もう一つはソースコードのデフォルトの設定だから記述しても構わないけれども呼び込まれるのはブログの投稿ガジェットが優先されるので、空のままで呼び込まれて何も反映しなくなるのを避けるために必ず記述する。 Sohoはもう既に記述されている(デザインのために内容が増えてソースコードは長いもののページネーションを作り出す骨子は変わらない)から設定については省略して大丈夫だけれどもページネーションのリンクを生成する内容に関わるからリンク名/アンカーテキストを変更するなどのソースコードの修正を行うためには部分的な書き換えが求められる。 新しい投稿のリンクを生成するソースコード <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> 記事ページのページネーションに前の投稿を付ける場合、ContempoとEmporioとNotableではもう一つのnextPageLinkのincludableも編集しなくてはならない。何もしないとインデックスページのために記述された「その他の投稿」が表示されてしまう。リンク先のURLは大丈夫だけれどもリンク名/アンカーテキストを「前の投稿」に変更するためには独自タグで振り分けて追加すると良いと思う。 記事ページの前の投稿をインデックスページのその他の投稿と振り分けてリンクを生成するソースコード <b:includable id='nextPageLink'> <b:if cond='data:view.isPost'> <a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.olderPosts'> <data:messages.olderPosts/> </a> <b:else/> <a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'> <data:messages.morePosts/> </a> </b:if> </b:includable> それぞれの違いは「olderPosts」(前の投稿)と「morePosts」(その他の投稿)なんだ。リンクの先のURLはどちらもリンクタグのaに「data:olderPageUrl」が出力されて同じように機能している。因みにサイトアドレスの構成は違う。nextPageLinkで使われる「data:olderPageUrl」のURLはインデックスページだと一つ前のインデックスページへ、記事ページでは一つ前の記事ページへ向けられるようになる。 Sohoテーマが「その他の投稿」を表示しないけれどもインデックスページも「前の投稿」に変わって良ければもっと短く纏められる。 前の投稿のリンクを生成するソースコード <b:includable id='nextPageLink'> <a class='blog-pager-newer-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.olderPosts'> <data:messages.olderPosts/> </a> </b:includable> ContempoとEmporioとNotableではデフォルトで「morePosts」の二ヵ所を「olderPosts」に書き換えるだけだ。 リンク名/アンカーテキストを変更したい場合 新しい投稿も前の投稿やその他の投稿もリンクタグのaに囲まれた独自タグのdataのところがリンク名/アンカーテキストになっているから変更したい場合には消去して他のデザインにしても構わない。 <b:includable id='previousPageLink'> <a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' title='次の投稿'> 次の投稿 </a> </b:includable> リンクタグのtitle属性(パソコンで内容が表示される)も同じにするべきだから接頭の「expr:」と値のdataのところを消去して書き換える。 ページネーションは個々に設定しなくても出力できる PostPaginationのincludableが持っている三種類のincludeはnameの値の最初に「super」を付けて半角コンマ(.)で区切って書き換えるとそれだけで新しい投稿や前の投稿やホームのリンクタグが出力されて使えるようになるんだ。 <b:includable id='postPagination'> <div class='blog-pager container' id='blog-pager'> <b:include cond='data:newerPageUrl' name='super.previousPageLink'/> <b:include cond='data:olderPageUrl' name='super.nextPageLink'/> <b:include cond='data:view.url != data:blog.homepageUrl' name='super.homePageLink'/> </div> </b:includable> 簡単なので、良いと思うけど、ただしインデックスページが「その他の投稿」だとしたら「前の投稿」と別に表示されてしまうので、記事ページと振り分けるには個々に設定しなくてはならない。 ホームのリンクを生成するソースコード Bloggerのページネーションは三種類が使える。新しい投稿と前の投稿に加えてホームだけれども方法は他の二つと全く同じだ。Sohoは記述済みだから省略可能だから何もしなくても大丈夫なので、リンク名/アンカーテキストの「ホーム」を変える場合、そしてContempoとEmporioとNotableはブログの投稿ガジェットから出力する部分のincludableを編集する。 <b:includable id='homePageLink'> <a class='home-link flat-button ripple' expr:href='data:blog.homepageUrl' expr:title='data:messages.home'> <data:messages.home/> </a> </b:includable> またはページネーションのincludableが持っているホームのincludeのnameを「super.homePageLink」に書き換えるだけでも使える。 独自タグでページネーションを配置する方法 記事ページのページネーションはpostPaginationのidのincludableに含まれていて他のincludeのnameから呼び出して配置する。 <b:include cond='data:view.isPost' name='postPagination'/> 記事ページだけページネーションを出力するソースコードで、cond='data:view.isPost'が記事ページの振り分けを意味している。 ページの投稿ガジェットのソースコードへ出力可能なincludableの中にページネーションのincludeを記載するとリンクタグなどの通常のHTMLのマークアップに置き換えられてページネーションがブログに表示されるようになる。 一般的に<b:includable id='main'></b:includable>がBloggerのガジェットの出力可能なソースコードの領域を示して<b:include name='super.main'/>が全体に当て嵌まるけど、すると続けてページネーションを記載した場合にはページの投稿ガジェットの最後にページネーションが配置される。 <b:includable id='main'> 中略 <b:include name='super.main'/> <b:include cond='data:view.isPost' name='postPagination'/> 中略 </b:includable> ページの投稿ガジェットのソースコードへ出力可能なincludableはmainの他にも様々に見付かる。それぞれに持っているincludeが通常のHTMLのマークアップに置き換えられるから例えば「super.headerByline」(タイトル下の日付の部分)や「footerBylines」(本文下のラベルの部分)など、何れも周りにページネーションを配置して構わない。 ページネーションを配置する際に注意するべき二つの条件 何等かのincludableに含めるBlogのtypeのWidgetに含める Bloggerの独自タグのincludeは独自タグのincludableの要素として機能するので、必ず何等かの<b:includable></b:includable>の中に記載しなくてはならない。そしてページネーションのためのincludeはページの投稿ガジェットでしか使えないので、独自タグのwidgetのtypeがBlogの要素に記載しなくてはならない。二つの条件を満たして配置するかぎり、ブログのソースコードにマークアップが自動的に出力されてページネーションの新しい投稿や前の投稿のリンクが追加される。 CSSでページネーションにデザインを付ける Bloggerの2017年の公式テーマではソースコードの<b:skin></b:skin>の中の「Blogger Template Style」以下が主なCSSの記述/ブログのHTMLのhead内にのマークアップで出力される部分になっている。 CSSの指定先はページネーションの全てに共通してpostPaginationのincludableに含まれる領域タグのdivのclassの「blog-pager」やidの「blog-pager」が付いていて個別にはそれぞれのincludableのリンクタグのaに新しい投稿はclassの「blog-pager-newer-link」が、前の投稿はclassの「blog-pager-older-link」が付いているので、使うと例えばborder(枠線)やbackground-color(背景色)などのデザインが色々と追加できるから便利だ。 ページネーションの位置取りを調整する方法 難しいのが位置取りを調整する場合で、ページネーションが最初か最後の記事で前の投稿か新しい投稿の一つだけ表示されるならばインデックスページの特に支障はないかも知れないにせよ、途中の記事では両方が表示されてくっ付いてしまうから間隔を取りたいと思う。 SohoとNotableはデフォルトでページネーションに右寄せがかかっているからそのままならば画面の端に近いリンクの前の投稿の左側に余白を付ければ一つだけ表示される場合でも位置取りは崩れないだろう。 .blog-pager-older-link {margin-left:入力値;} ※入力値は8pxや1emなどの数値。 ContempoとEmporioはデフォルトでページネーションに中寄せがかかっていて難しい。個別のリンクにmarginやpaddingで余白を付けると一つだけ表示される最初と最後の記事ページでずれてしまったり、両方でもパソコンとスマホの大小の画面幅でバランスを取るのが大変だからページネーションを指示タグのnavなどで囲ってFlexboxの「display:flex」からさらにjustify-contentを指定して均等に並べるのが良いと思う。 SohoとNotableでデフォルトの右寄せのデフォルトから中寄せに変える場合でも同じように使える。 Flexboxを使うためのソースコード 独自タグとHTML <b:includable id='postPagination'> <nav> <div class='blog-pager container' id='blog-pager'> <b:include cond='data:newerPageUrl' name='previousPageLink'/> <b:include cond='data:olderPageUrl' name='nextPageLink'/> <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/> </nav> </div> </b:includable> CSS .blog-pager nav {display:flex;justify-content:入力値;} justify-contentの入力値:space-aroundのサンプル 新しい投稿前の投稿 .blog-pager nav {display:flex;justify-content:space-around;} 二つのリンクは間隔を開けて両端は半分の間隔で均等に並ぶ。 justify-contentの入力値:space-evenlyのサンプル 新しい投稿前の投稿 .blog-pager nav {display:flex;justify-content:space-evenly;} 二つのリンクは間隔を開けて両端も同じ間隔で均等に並ぶ。 justify-contentの入力値:space-betweenのサンプル 新しい投稿前の投稿 .blog-pager nav {display:flex;justify-content:space-between;} 二つのリンクは画面の両端にぴったり分けられる。 ContempoとEmporioでページネーションを右寄せにして間隔を取る場合もFlexboxを使うと良いと思うけど、ただし現時点で隙間を取るgap属性に対応するブラウザが少ないみたいだから画面の端に近いリンクの前の投稿の左側に余白を付けなくてはならない。 Flexboxで右寄せして一文字の間隔を取ったページネーションのサンプル 新しい投稿前の投稿 .blog-pager nav {display:flex;justify-content:flex-end;} .blog-pager-older-link {margin-left:1em;} 四つのテーマでデフォルトのデザインではなく、ページネーションを左寄せにする場合はFlexboxの右寄せで右寄せにした場合のソースコードの内容を反対向きに入れ換えるように記述する。 Flexboxで左寄せして一文字の間隔を取ったページネーションのサンプル 新しい投稿前の投稿 .blog-pager nav {display:flex;justify-content:flex-start;} .blog-pager-newer-link {margin-right:1em;} Flexboxで指定するjustify-contentのflex-start(開始方向から表示)とflex-end(終了方向から表示)はコンテンツの並び方から捉える。日本語のサイトだと左から右へ進むので――Bloggerの公式テーマでは出だしのhtmlに「dir='ltr'」(コンテンツは左から右へと進む)が明記されてもいる――アイテムの右寄せにはjustify-contentのflex-endを、左寄せにはjustify-contentのflex-startを使うんだ。 ページネーションの上下の余白を調整する方法 CSSで余白を付けるには外側のmarginと内側のpaddingの二つの俗世がある。ページネーションで試してみると他のデザインが干渉しているようで、配置した場合によって使えるかどうかが違うから確かめながら調整するしかないと思う。 上の外側の余白を付けるソースコード .blog-pager {margin-top:入力値;} 上の内側の余白を付けるソースコード .blog-pager {padding-top:入力値;} 下の外側の余白を付けるソースコード .blog-pager {margin-bottom:入力値;} 下の内側の余白を付けるソースコード .blog-pager {padding-top:入力値;} ※入力値は8pxや1emなどの数値、-8pxや-1emなど、半角のマイナス(-)を付けると余白は縮まる。 他に記事下でページの投稿ガジェットの<b:include name='super.main'/>の次にページネーションを記載すると上の余白はpadding-topで変えられるけれども下の余白は駄目で、margin-bottomでも変更できない。 ページネーションに余白を付けられない場合は周りのコンテンツの余白を変更するとデザインは同じになるから大丈夫なんだ。 記事下にページネーションを配置して下の余白が付けられなくて次のコンテンツが人気の投稿ガジェットとするとidの「#PopularPosts1」にmargin-topやpadding-topを指定するとデザインは反映する。 ブログの訪問者が記事ページの新しい投稿や前の投稿のページネーションを使う可能性は低いと思うし、2017年の公式テーマでは人気の投稿ガジェットが付けられたり、またはアドセンスの関連コンテンツなどを配置して他の記事を画像と文章で鮮やかに紹介する方が大切だろう。 しかし記事同士の内部リンクが増やせるのはSEO(検索エンジン)対策に良いかも知れない。サイト内容を解析するGoogleなどの検索エンジンのクローラーがブログを巡回し易くなるので、記事が良いかぎり、サイト評価が上がる確率が高まる。検索結果で上位に表示されてアクセスアップを図るためにページネーションは役立つと考える。 関連ページImaginary|Bloggerのテンプレートの提供 参考サイトHow to add "next post" and "previous post" links in the end of blog postBlogger Notable Template - Post Pagination Fix or Replacement? コメント Tom (Admin) さんの投稿… Hello, I have pagination in my blog but I want the should be under the same label. Is it possible. Please help if you can. 2022年1月26日 21:06 結城永人 さんの投稿… I found the codes.Contempo and Essential / Add in Blog1 b:widget<b:includable id='post' var='post'><div class='post'> (...)<b:include data='post' name='postFooter'/></div><b:include cond='data:view.isPost' name='postPagination'/></b:includable>Snho / Add in Blog1 b:widget<b:includable id='post' var='post'><b:if cond='data:view.isSingleItem'><div class='post-sidebar'>(...)<b:include data='post' name='postFooter'/></div><b:include cond='data:view.isPost' name='postPagination'/></b:includable>Emporio / Add in Blog1 b:widget and edit the code of postPagenation<b:includable id='post' var='post'><b:with value='"post-thumb-" + data:post.id' var='thumbClassName'><div expr:class='"post-wrapper not-hero post-" + data:post.id'>(...)<div class='slide'><b:include data='post' name='super.post'/></div><b:include cond='data:view.isPost' data='this' name='postPagination'/></div></b:with></b:includable>Notable / Add in Common b:defaultmarkup<b:includable id='normalPost'><b:if cond='(not data:view.isSingleItem or data:widget.type == "PopularPosts")'><b:if cond='data:post.featuredImage and (data:widget.type != "PopularPosts" or data:this.postDisplay.showFeaturedImage)'> (...) </b:if><b:include data='post' name='postFooter'/></div><b:include cond='data:view.isPost' name='postPagination'/></b:includable> Good luck. 2022年1月28日 4:36 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
キム・テヒの反日活動を日本人としてどこまで許せるか かつて韓国ドラマの IRIS -アイリス- を観て何て綺麗で可愛くて良いんだと一目で度肝を抜かれた俳優に キム・テヒ がいた。 映画『アイリス -THE LAST-』予告編 by TAEWON ENTERTAINMENT from シネマトゥデイ 日本で放映されたのが2...
コメント
Hello, I have pagination in my blog but I want the should be under the same label. Is it possible. Please help if you can.
2022年1月26日 21:06I found the codes.
2022年1月28日 4:36Contempo and Essential / Add in Blog1 b:widget
<b:includable id='post' var='post'>
<div class='post'>
(...)
<b:include data='post' name='postFooter'/>
</div>
<b:include cond='data:view.isPost' name='postPagination'/>
</b:includable>
Snho / Add in Blog1 b:widget
<b:includable id='post' var='post'>
<b:if cond='data:view.isSingleItem'>
<div class='post-sidebar'>
(...)
<b:include data='post' name='postFooter'/>
</div>
<b:include cond='data:view.isPost' name='postPagination'/>
</b:includable>
Emporio / Add in Blog1 b:widget and edit the code of postPagenation
<b:includable id='post' var='post'>
<b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>
<div expr:class='"post-wrapper not-hero post-" + data:post.id'>
(...)
<div class='slide'>
<b:include data='post' name='super.post'/>
</div>
<b:include cond='data:view.isPost' data='this' name='postPagination'/>
</div>
</b:with>
</b:includable>
Notable / Add in Common b:defaultmarkup
<b:includable id='normalPost'>
<b:if cond='(not data:view.isSingleItem or data:widget.type == "PopularPosts")'>
<b:if cond='data:post.featuredImage and (data:widget.type != "PopularPosts" or data:this.postDisplay.showFeaturedImage)'>
(...)
</b:if>
<b:include data='post' name='postFooter'/>
</div>
<b:include cond='data:view.isPost' name='postPagination'/>
</b:includable>
Good luck.