フロントページの全幅画像ヘッダースライダーと都会的で洗練されたテンプレートデザインが人気のWordPressテーマ「Sydney」。しかし、個人的にどうしてもひとつだけ気になる箇所があります。
それは、投稿ページの記事最後部にあるページナビゲーションに付いている矢印の形。
今回は、FontAwesomeを使って、そんな矢印を見やすく見栄えの良いものに変更します。そして同時に、ライトグレーの地色を取り除いて、スッキリとした印象にマイナーチェンジしましょう。
以下に当サイトの子テーマ内「single.php」と「style.css」に記述しているコードを開示したいと思います。
さあ、早速始めましょう。
まずは「single.php」 28行目付近のコード
<?php sydney_post_navigation(); ?>
このコードを削除して、その箇所に以下のコードを追加します。
<div class="page_navi"><!-- 投稿ページナビのカスタマイズ --> <div class="pre"><?php previous_post_link('%link', '<i class="fa fa-chevron-circle-left"></i> %title', TRUE, ''); ?></div> <div class="nex"><?php next_post_link('%link', ' %title <i class="fa fa-chevron-circle-right"></i>', TRUE, ''); ?></div> </div>
これで「single.php」はOK。
次に「style.css 」に以下のコードを追加しましょう。
/* 投稿ページナビのカスタマイズ */ div.pre { text-align: left; float: left; width: 46%; margin-right: 3.0em; } div.nex { text-align: right; } div.page_navi { font-size:1em; }
はい、これで作業完了です。
ページナビゲーションが下のようなスタイルに変わったと思いますが、いかがでしょうか。
どうしても、WordPressテーマ「Sydney」の投稿ページ最下部にあるページナビゲーションをカスタマイズしたいという方は、上のコードをご参照いただきながら「single.php」と「style.css」に変更を加えてみてください。
ただし、カスタマイズはあくまでも自己責任でお願いします(子テーマ推奨)m(_ _)m。
Sydney導入サイト 制作費10%OFFキャンペーン始めました
制作費10%OFFのキャンペーンは終了しました。 ポイント還元花盛りの令和元年10月です。HideoGoto.org も制…続きを読む →
Sydney改造編 – 抜粋文のあとに「続きを読む」ボタンを設置
サイトロゴ・ヘッダースライダー・背景画像などのビジュアル要素を直感的にカスタマイズできる管理画面が秀逸なWordPress…続きを読む →
Sydney改造編 – CSSでヘッダーメニュー項目に背景色を設定
直感的なカスタマイズが可能な管理画面とフロントページの全幅画像ヘッダースライダーが秀逸なWordPressテーマ「Sydn…続きを読む →
Sydney改造編 – CSSでヘッダーサブメニューの背景色を半透明化
★今回は分かりやすくお伝えするために【改造済みサンプルサイト】を作ってみました。宜しければご覧ください(別ウインドウで開き…続きを読む →
Sydney改造編 – CSSでモバイルナビゲーションの背景色を強制変更
世界中で根強い人気で当サイトでもお世話になっているWordPressテーマ「Sydney」。 PC、タブレット、スマートフ…続きを読む →
Sydney改造編 – CSSでヘッダースライダー内のボタンをカスタマイズ
フロントページの洗練された全幅ヘッダースライダーが魅力的なWordPressテーマ「Sydney」。 初心者でも、管理画面…続きを読む →
Sydney改造編 – CSSでヘッダースライダーのテキストをカスタマイズ
当サイトでもお世話になっているWordPressテーマ「Sydney」。 初心者でも、管理画面から直感的で多彩なカスタマイ…続きを読む →
Sydney改造編 – 投稿ページの前後ナビゲーションをカスタマイズ
フロントページの全幅画像ヘッダースライダーと都会的で洗練されたテンプレートデザインが人気のWordPressテーマ「Syd…続きを読む →
Sydney改造編 – CSSで「ページTOPに戻るボタン」の色を強制変更
当サイトでも導入しているWordPressテーマ「Sydney」には、デフォルトの状態でページ右下部に「ページTOPに戻る…続きを読む →
Sydney応用編 – Sydney Toolbox でフロントページをカスタマイズ
WordPressテーマ に「Sydney」を導入し、推奨WPプラグイン「Sydney Toolbox」をインストール&有…続きを読む →
Sydney応用編 – フロントページ全面を全幅背景画像で埋め尽す
フロントページヘッダー部分の、全面画像スライダー(5枚!)がとても魅力的なWordPressテーマ「Sydney」ですが、…続きを読む →
Sydneyをビジネスサイト用WPテーマとしてお勧めする理由
初心者でも簡単にカッコいいブログを始められるということで、世界中で人気のWordPressテーマ「Sydney」。 外国産…続きを読む →
Sydney – 企業・飲食店・自営等の商用サイトに最適WPテーマ
Sydney(シドニー)といっても、高層ビルや英国風のモダンな町並み、海や緑の自然との調和が美しいオーストラリアの都市のこ…続きを読む →