AFFINGER5 「ページ送り」スタイルの小変更

スポンサーリンク

 

AFFINGER5は、色々カスタマイズできますが、「ページ送り prev next」については、何故かカスタマイズができず、現状のスタイルに不満を覚えたので、イメージを崩さない程度の小変更にとどめたカスタマイズを行ってみました。

 

AFFINGER5・ページ送り(スタイル)

変更前のスタイル

現状スタイルの不満なところ

「PREV」と「NEXT」の表現が判り難く、行間も狭く、「PREV」と「NEXT」にリンクも設定されていない。

カスタマイズ後のスタイル

 

スタイル変更の手順

 

step
1
4つのファイルを子テーマへコピー

ページ送りを子テーマ内でカスタマイズするために、関連している3つのファイル(header.php、single.php、single-type1.php、single-type2.php)をFTPソフト等で親テーマからコピーして子テーマフォルダーへ貼り付けておきます。

 

step
2
single.phpの一部変更

子テーマフォルダーに入れたsingle-type1.phpでスタイル変更を行いますが、これを反映させるためには、single.phpのコードを以下のようにTEMPLATEPATHからSTYLESHEETPATH変更することが必要です。

single.php

ポイント

ページ送りの設定は、子テーマにコピーしたsingle-type1.phpにあるコードです。 このコードを色々いじっても全く変更が反映されませんでした。 この原因を調べたら、single.phpにあるTEMPLATEPATHSTYLESHEETPATHに変えれば子テーマのsingle-type1.phpの設定が反映されることが判りました。

参考にさせて頂いたのは、以下のサイトです。
https://itwn.jp/archives/2720/

 

step
3
「Font Awesome 5」の導入(header.php)

下の画像で示す、要素部分(色分け文字)が変更箇所です。 アイコン部は「Font Awesome 5」になります。

「Font Awesome 5」を使用するために(2020/3/28)

AFFINGER5で対応しているFont Awesomeのバージョンは今の所「4」です。 「Font Awesome 5」を導入するには、親テーマのheader.phpを子テーマにコピーして、</head>の上に以下のコードを予め記述しておきます。 

以下のコードは、「WordPressのヘッダーメニューの作り方」からFont Awesomeの遅延読み込みができる「Font Awesome 5」の導入コードを使用させて頂いています。

 

step
4
「ページ送り」デザインの変更(single-type1.php)

「ページ送り」デザインを変更するには、子テーマにコピーしたsingle-type1.phpに対して以下のようにコードを変更します。

single-type1.php

159行目以降の行のハイライト部分が、変更箇所になります。

PREVとNEXTは、以下の様に、Font Awesomeアイコンに変更しています。

(2020/3/28 変更)

<dt>タグで囲まれた「PREV」と「NEXT」部分を下の様にデザイン変更しました。

「PREV」→ 前頁 

「NEXT」→ 次頁 

 

備 考(注意)

  • 「Font Awesome 5」を導入する場合、AFFINGER5「管理」>「その他」の[上級者向け]にある「headに出力するコード」に記述すると、サイト全体が「Font Awesome 5」になり、例えばツイッター  アイコンが消えてしまいます。 「Font Awesome 5」導入コードはheader.phpに追記する必要があります。
  • AFFINGER5のバージョンが上がるとheader.php、single.php、single-type1.php、single-type2.phpの内容が変更されている場合があり、この時は、子テーマのファイルに上書きコピーして、上記Step1〜Step4の作業を行う必要があります。

 

以上、「ページ送り」スタイルの小変更でした。

 

AFFINGER5について

 

スポンサーリンク


〜〜〜〜〜〜〜〜〜〜〜

オススメ記事

レコードのハイレゾ化
オススメ記事

LPレコードのハイレゾ化のススメ(ハイレゾ録音のヒント集)

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

MCカートリッジとMMカートリッジの音質比較

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

DENON MCカートリッジ DL103Rのクロストーク「 原理編」

今更ながら、「我が家のB級プレーヤ」に取り付けた「DL103Rカートリッジのクロストーク(セパレーション)をテストレコード(AD-1 2面のバンド4:基準レベル、1kHz、3.54cm/sec(尖頭値 ...

テストレコード(AD-1)で出来ること

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

レコードをハイレゾ化するならDSDかPCMか?

ことの 発 端 ことの発端は、あるハイレゾDLサイトから、チャイコのバイオリンコンチェルトをPCM(Flacファイル 192Khz、24Bit)で購入しました。WAVファイルも平行販売されています。 ...

CD音質関連 その他
オススメ記事

アナログ・レコードのここがダメ「CD音質と比較して」

これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあまり言いたくは ...

CDフォーマットのここがダメ「ハイレゾと比較して」

CDフォーマットのサンプリング周波数は44.1khzでビット深度は16bitです。 特にビット深度は録音レベルが低下するに伴い音質に問題が生じます。 CDの開発時点では先端技術で市場を席巻しましたが昨 ...

Sony HAP-Z1ESのDSEE機能/確認

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Apple Digital MastersのAAC音質(その1)

2019年7月付けの「Apple Digital Masters テクノロジー概要」によれば、iTunesやApple Musicで配信される楽曲は、「Apple Digital Masters テク ...

Post Snippets Pluginで出来ること(小技・事例集)

 WordPressで記事を書いているビジュアルエディタ派の方でPost Snippets Plugin(以下PSPに略します)を使わずにいませんか? または、PSPをインストールしているのにも関わら ...

© 2020 ハイレコのブログ Powered by AFFINGER5