【Gush2】前の記事・次の記事へ行くリンク「PREV:NEXT:」を、関連記事の上に移動してみました。文字も変えたよ

 

前の記事・次の記事に行くためのリンク「PREV:NEXT:」を関連記事の上に移動したので、その方法を紹介します。
Gush2のデフォルトでは、「PREV:NEXT:」は、コメント欄の下(記事エリアの一番下)に表示されます。
 

個別記事画面で「PREV:NEXT:」を関連記事の上に移動

個別記事に関するPHPファイルは「single.php」ですので、これを編集します。

single.php で、「PREV:NEXT:」用の記述を移動します

single.phpで、「PREV:NEXT:」を表示している部分(前後記事用記述)を関連記事を表示している部分(関連記事用記述)の前に移動します。

「前後記事用記述」のID名は「page_pn」です。
single.phpをエディタで開き、「page_pn」を検索すれば、「前後記事用記述」を見つけられます。single.phpがGush2デフォルトのままであれば、117~130行目です。

上記の水色部分を切り取って、「関連記事用記述」の前に貼り付けます。
「<div id=”relations”>」の前、single.phpがGush2デフォルトのままであれば、73行目です。

下記は、変更後のsingle.phpです。

ついでに、「PREV:」「NEXT:」を好きな文字列に変更

「PREV:」を「ひとつ前」、「NEXT:」を「ひとつ後」に変えてみました。

single.phpで、文字列を変えます

変更する箇所は、「PREV」「NEXT」を「大文字と小文字を区別する」で検索すると見つかります。single.phpがGush2デフォルトのままであれば、「PREV:」は122行目、「NEXT:」は127行目です。
コードは前章を見てね。
「PREV:」「NEXT:」を好きな文字列に変えます。

全角3文字を超える場合、style.cssで表示を調整します

PC表示のとき、「ひとつ前」「ひとつ後」の後ろで改行しちゃうので、style.cssで、表示の調整をしました。
style.cssによれば、文字列幅が60pxを超えると改行するようです。

style.cssの「前後記事用記述」は、PC表示(画面幅1024px以上)とタブレット表示(画面幅768px以上)と共通で記述されています。
下記のとおり「768px 前の記事・次の記事」のところを変更します。style.cssがGush2デフォルトのままであれば、記述は1542行目からで、変更するのは1547行目です。

文字列幅はemで定義するほうが、なんとなく好きなので、そうしてます。4.5emは、全角4.5文字ぐらいです。(emは英字基準で、日本語の全角とは違うので、「ぐらい」になっちゃいます)

Gush2のバグ?を、ついでに修正

このカスタマイズのデバッグ中に、「スマホ表示で『PREV:』の下にマージンが入ってる。『NEXT:』の下には入っていないのに」って気がつきました。私のミスかと思ったら、Gush2デフォルトでも「NEXT:」の下だけマージンが入っていました。
原因は、style.cssの573行目、このマージンを継承してしまうからでした。
first-childにマージンをつけているので、「PREV:」の下には1emのマージンが入るけど、「NEXT:」の下には入らないのです。

修正は、573行目を変更するのではなく、975行目からの「スマホ用の『前の記事・次の記事』」のところで行います。992行目で指定しているマージンが573行目での指定に負けちゃっているので、992行目が生きるように「!important」を入れます。
(975行目からが「スマホ用の『前の記事・次の記事』」です。前章の1542行目からの記述は「PCとタブレット用」なので、間違えないでね)

992行目に!importantを追加します。

まとめと今後の課題

ファブレットで全記事の表示確認をしていて、「PREV:NEXT:」が使いづらいなって思ったので、変えてみました。
PCだと一番下までスクロールすれば「PREV:NEXT:」が見つかるけど、モバイルだと「PREV:NEXT:」の下にサイドバーが表示されるから、スクロールで「PREV:NEXT:」のところにうまく止まれなくて、記事を次々に移動するのにイマイチだったのです。
シェアボタンの上に入れるか迷ったけど、下にしました。私のブログは、まだ関連記事の無い記事が多いので、そんな場合に、「PREV:NEXT:」を見てもらえるといいかなって思ったりして。(^^ゞ

このカスタマイズの後で、「書いた人」をシェアボタンの下に入れちゃったので、また「PREV:NEXT:」にたどり着きにくくなっちゃいました。PC表示は前のほうがよかった気もするし、様子を見て、また変えてみようと思っています。

  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。