Web関連 WordPress

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

投稿日:2017年4月10日 更新日:

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

画像を表示する


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

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

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

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

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

スタイルシートで整える

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

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

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


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

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

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

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

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

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

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

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

まとめ

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

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

-Web関連, WordPress
-, , ,


comment

メールアドレスが公開されることはありません。

jpeg/png/gifのみ

関連記事

ワードプレスのテーマを「Tortuga」に変えてみた

どうも、ヨシです。 今回すでにテーマを決めて稼動をしている状態から、新たなテーマに変えたいと思います。 今までワードプレスのテーマ「Twenty Sixteen」を使って色々カスタマイズしてたんですが …

記事を読む

【WordPress】検索結果で画像だけのページが表示される原因と対策

どうも、ヨシです。 今までこの現象は分かっていても原因が分からず放置していたんですが、やっぱり気になり過ぎたので調べまくってみました。 もしこの悩みを抱えている方がいらっしゃったら参考にして下さい。 …

記事を読む
no image

このブログについて

はじめまして、ヨシといいます。 まだ私もこのサイトも未熟な状態ですが、少しずつ更新して良くしていければと思ってます。 レイアウトの変え方も、フォントの変え方も分からないこの状態からどれだけ成長出来るか …

記事を読む

【WordPress】いつの間にかアドセンスのプラグインがサービス終了してた…

どうも、ヨシです。 さっき何気にプラグインのGoogle AdSenseを開こうとしたらサービス終了してました。 なのでこれからの対応や、自分で広告を掲載する方法をご紹介します。 目次 Google …

記事を読む

A8.netのバナー広告がなんかおかしい

どうも、ヨシです。 僕はたまに自分の過去記事を見てミスや変更がないか確認するんですが、バナーに変な点が付いてるのを見つけました。 なんやこれ? 前はこんなの無かったはず…。とりあえず開発者ツールで確認 …

記事を読む

プロフィール

初めまして、ヨシだよ!
このブログはだいたい音楽やゲーム、アニメ、面白い動画なんかをメインに紹介してたまに自分のアピールをするよ。
それからサイトをちょくちょくいじるので、基本エラー画面が僕のトップページだと思って欲しい。
今WordPressを勉強中なので、便利なコードやプラグインなんかを自分で使ってみて良かったら紹介するよ!

pagetop