記事のPREVとNEXTをカスタマイズしてみた

Web関連

どうも、ヨシです。
STINGER8にある関連記事の下にPREVとNEXTとありますがこちらを少しカスタマイズしてみました。
悩んでいる方の参考になれば幸いです。

画像を表示する


これが標準の状態ですね。
ではこの状態から画像を表示させてみましょう。

外観からテーマの編集で「single.php」を開きます。
single.phpを開いたらShift+Fで検索窓を開いて「ページナビ」と記入する。

表示された箇所と下記のソースを入れ替えます。

入れ替えたらこのような表記になるはずです。

これでNEXT PREVに画像が表示されました。

スタイルシートで整える

画像が表示されましたので次はスタイルシートで整えていきましょう。

外観からテーマの編集で「スタイルシート」を開きます。
開いたら空いている箇所に下記のソースを記入して下さい。

そして@media print, screen and (min-width: 960px) の中には下記のソースを記入して下さい。


これで形が綺麗になりましたね。
しかし、これでもなにか物足りないな…。
そうだ!分かりやすく動かしてみよう!!

アニメーションを付けてみる

先程と同じスタイルシートで作っちゃいましょう。

外観からテーマの編集で「スタイルシート」を開きます。

このソースの下に下記のソースを付け加えて下さい。

次はNEXTをいじりましょう。

このソースの下に下記のソースを加えましょう。

シンプルですが分かりやすいアニメーションが出来ましたね!
画像は動きませんので実際の動きは僕のページの下部で確認して下さい。

まとめ

いかがでしたでしょうか?
「前へ」「次へ」の場所や、矢印の動き、形など色々考えて作ってはみたのですが、なかなか思うようにいかず結局シンプルなデザインにしました。
もしこんなのがあるよ!とか、こんなの作りたい!とかアイディアがあれば是非教えて下さい。
僕で出来そうなら頑張りますので!

読んで頂きありがとうございました。

コメント

タイトルとURLをコピーしました