Twenty Twelve 「前の記事」「次の記事」をカスタマイズ

カテゴリー : Twenty Twelve カスタマイズ

投 稿 日 :

更 新 日 :

この記事は書いてから 約4年 経過しています。

※1年以上経過しているので情報が古い可能性があります。

タ  グ  : | |

Twenty Twelve 「前の記事」「次の記事」をカスタマイズ

カスタマイズという程のものでもありませんが、テーマ Twenty Twelve の、投稿記事を読み終わった後に表示される「前の記事」「次の記事」へのナビゲーションを自分好みに変更してみました。

style.css と併せて single.php をイジるので子テーマの人はコピーしてからカスタマイズです。

↓ カスタマイズ前はこんな感じ

Twenty Twelve 「前の記事」「次の記事」をカスタマイズ

css の ↓ 部分

↓ こんな風にして左右の間隔を広く取りました。

↓ こんな感じになります。

Twenty Twelve 「前の記事」「次の記事」をカスタマイズ

「←」「→」の記号も「≪」「≫」にしてオリジナリティ(?)を出したいので single.php をイジります。

↓ この部分の

「←」が「←」
「↑」が「→」
(&は本来は半角ね)

なので

「«」で「≪」
「»」で「≫」
(もちろん&は半角)

にしました。

↓ こんな感じ

↓ こうなります

Twenty Twelve 「前の記事」「次の記事」をカスタマイズ

調子に乗ってカラフルにしてみます。

↓ こんな風になりました。

Twenty Twelve 「前の記事」「次の記事」をカスタマイズ

padding で上下に余白を設定してしまうと、最新の記事を表示した時に「次の記事」(次の記事は無いから表示してはならない)のとこに色が少し表示されちゃったりしたので値を 0 にしました。

コメントを残す

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

*