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
-, , ,

関連記事

【WordPress】ブログを始めてたらやっておいたほうがいい対策やオススメプラグイン紹介【2018年版】

どうも、ヨシです。 このブログも1周年を迎えることが出来ましたので、この経験を生かし「ブログをするならやっておいたほうがいい事」をまとめたいと思います。 これからブログ始める方、もしくはもう始めている …

記事を読む

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

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

記事を読む
no image

このブログについて

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

記事を読む

スマホにはサイドバーを表示させない

どうも、ヨシです。 以前STINGER8のカスタマイズ集で説明した「スマホ」と「PC」で違うものを表記する方法でスマホにサイドバーを表示させないようにしたので詳しくご説明します。 なぜサイドバーを非表 …

記事を読む
アドセンスのアップグレードの方法

【アドセンス】ホスト型アカウントからアップグレートする

どうも、ヨシです。 今回は「過去にYoutubeでAdsenseアカウントを取っており、最近自分のページにAdsense広告を扱いたい方」のご説明です。 このページを見られる方は、既に自分のサイトを持 …

記事を読む

comment

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

jpeg/png/gifのみ

プロフィール

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

pagetop