デジモノ大好き+

デジタルグッズ自腹レポ・Wordpress関連。+ バツ1おっさんのライフハック。

Stinger8ページナビ「PREV」「NEXT」をカスタマイズしてみた。 [WordPress]

投稿日:2018年8月22日 更新日:

関連記事直下にある「PREV」「NEXT」を削除や非表示してるところもあるけど、サイト内リンクを削除してしまうのはもったいない
せっかくなので、触ってもらえるようにカスタマイズしてみました。

今回手を加えたのは、style.cssとsingle.php
コピペで使えますが、子テーマ内のファイルでカスタマイズしましょう。

「PREV」「NEXT」をカスタマイズ

single.phpを編集

「p-navi」の部分が「PREV」「NEXT」の記述になるので、以下の記述を削除もしくはコメントアウトで非表示にします。

[crayon-5cb9dbb5d8970385461060/]

同じ場所に以下をコピペ。

[crayon-5cb9dbb5d897d267518483/]

style.cssを編集

  • 「PREV」「NEXT」の表示位置を上下から左右に変更
  • ボーダーの追加
  • アイコンの追加
  • hoverの追加
  • 文字調整

[crayon-5cb9dbb5d8982621439777/]

スマートフォンも表示調整

PC版は「width: 360px;」で設定してるので、「width: 50%;」に変更

[crayon-5cb9dbb5d8989706375720/]

トップページへ戻るボタンを追加

「Back to INDEX」を追加。

「PREV」(前の記事へ)「NEXT」(次の記事へ)があるのだから、「Back to INDEX」(一覧へ)があってもいいのではないかと思うわけです。

ここもstyle.cssとsingle.phpに手を加えます。

single.phpに追加

先ほど追加したページナビの直下に追記します。
【https://your-domain】は、適宜変更ください。

[crayon-5cb9dbb5d898d170207429/]

style.cssに追記

[crayon-5cb9dbb5d8991174378703/]

まとめ

ボタンに関しての考察
「PREV」「NEXT」「Back to INDEX」もボタンなのでアイキャッチも重要ですが、判読しやすくあるべきではないかと。
「PREV」「NEXT」に関しては記事タイトルになるので、文字数もばらつきがあり、天地センタリングすると読みづらいのではないか。
実際テスト段階で天地センタリングにもしてたんですけど、読みづらかったので頭ぞろえにしたわけです。

テーマデフォルトの場合は、判読はしやすい(?)が、アイキャッチが弱く目に留まらない

スポンサーリンク

-WordPress
-, , , ,

関連記事

AmazonJSの画像が表示されないときの回復方法 [WordPress]

AmazonJSはAmazonアソシエイトのリンクを張るときに投稿画面から商品検索ができ、しかもショートコードで貼り付けてくれて、さらに格好良く表示してくれるプラグインなので、ちょーおススメなプラグイ …

Stinger8パンくずリストをおしゃれにカスタマイズしてみた。 [WordPress]

ナビゲーション系のカスタマイズ連投になりますが、今回はパンくずリストです。 デフォルトは色が薄く目立たないので、アイコンを付けたり、hoverで色付けしたりとちょこっと目立たせています。 今回はいつも …

no image

Stinger8のタイトルとキャッチフレーズをセンタリングしてみた。 [WordPress]

Stinger8のタイトルとキャッチフレーズはデフォルトだと左寄せになります。 style.cssに追記するだけ style.css に以下を追記。 [crayon-5cb9dbb6158be3178 …

Stinger8記事下のアドセンス広告を横並びにしてみた。 [WordPress]

Stinger8デフォルトのままアドセンスの記事下広告を入れると縦に2つ並んでしまうので、横並びにしてみました。 横並びするためには まずは、サイト幅を広げないとです。 というのもデフォルトのサイズは …

no image

Stinger8よく使う「h」タグを装飾してみた。 [WordPress]

ブログを書く上で、よく使うタグの一つが「h」タグではないでしょうか。 なので、カスタマイズしたくもなります。 デフォルトだとこんな感じです。 今回手を入れたのは、「h2」タグと「h3」タグ。 「h4」 …