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のみ

関連記事

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

どうも、ヨシです。 ついこないだワードプレスのテーマを「Twenty Sixteen」から「Tortuga」に変えたとこなんですけど。 いろんな記事を見てたら見つけちゃったんす… STINGER8をね …

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

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

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

記事を読む

ブログを改良しよう【フォント編】

どうも、ヨシです。 今のサイトの現状ですが、PC版がこちら。 スマホ版がこちら。 うむ、The シンプル! シンプルは嫌いじゃないけど、もう少し自分色を出したいな。 とりあえず、細かな所から変えて行き …

記事を読む

表(テーブル)が枠内から飛び出してしまう

どうも、ヨシです。 2017年2月15日に「wordpressでブログを始めよう」という記念すべき1つ目の記事を公開しました。 普段はPCで記事を確認してるんですが、昨日はスマホで自分の記事を確認した …

記事を読む
wordpressのプラグイン

ワードプレス初心者なら必須のプラグイン

どうも、ヨシです。 ワードプレス関連で調べたらいろんな記事があり、いろんなプラグインがあって迷いますよね。 しかも書かれてるのは全部オススメって書いてるから全部入れたらありえない量になるという…。 と …

記事を読む

プロフィール

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

pagetop