AFFINGER6で前へ次へボタンを見やすくするための修正方法

AFFINGER6では、前へ次へボタンに画像が付き、AFFINGER5の時よりも見やすくなりました。

ただし、画像が小さく、リンクと分かりにくい色が使われているので、修正して見やすくする方法を紹介します。

1 前へ次へボタンを修正して見やすくする
2 【まとめ】前へ次へボタンを見やすくする

前へ次へボタンを修正して見やすくする

前へ次へボタンの視認性をあげるために、下記の3つの部分を修正します。

矢印アイコンの修正
画像を大きくする
テキストリンクの色を変える

修正前の前へ次へボタンのイメージ

色が薄くてややリンクと認識しづらいです。

修正後の前へ次へボタンのイメージ

リンクと認識できるように色を付け、画像を大きくして視認性を高くします。

以下から変更方法を紹介します。

矢印アイコンの修正

まずは、親テーマから子テーマフォルダに「st-single-navigation.php」をコピーして子テーマ上で修正します。

ファイルを開いてアイコンタグ部分のHTMLを2か所修正します。

前へボタンも次へボタンも同じアイコンを使っているので、変更するHTMLは同じでOKです。

//変更前
<i class="st-svg st-svg-angle-right"></i>
▼
//変更後
<i class="fas fa-chevron-circle-right"></i>

画像を大きくする

次にサムネイル画像を大きくするために画像サイズの指定部分を2か所修正します。

どちらも青色の部分の数字のみ変更すれば完了です。

前へボタンの修正箇所は下記の部分です。

//変更前
<?php if( trim( $GLOBALS["stdata5"] ) === '' ): echo get_the_post_thumbnail( $prev_post->ID, array(60,60) ); endif; ?>
▼
//変更後
<?php if( trim( $GLOBALS["stdata5"] ) === '' ): echo get_the_post_thumbnail( $prev_post->ID, array(75,75) ); endif; ?>

下記の部分が次へボタンの修正箇所です。

//変更前
<?php if( trim( $GLOBALS["stdata5"] ) === '' ): echo get_the_post_thumbnail( $next_post->ID, array(60,60) ); endif; ?>
▼
//変更後
<?php if( trim( $GLOBALS["stdata5"] ) === '' ): echo get_the_post_thumbnail( $next_post->ID, array(75,75) ); endif; ?>

テキストリンクの色を変える

子テーマフォルダにある「style.css」に下記のCSSを追加します。

CSSの修正では、テキストカラーの他、paddingの上下幅やマウスオーバーした時の背景色の切り替わりの速さ（1秒から0.3秒）を修正しています。

.p-navi {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.p-navi a {
  transition: background-color 0.3s;
}
.p-navi .st-prev {
  padding: 10px 10px 10px 0;
}
.p-navi .st-next {
  padding: 10px 0 10px 10px;
}
.p-navi a:nth-of-type(2) p {
  border-left: 1px solid #ddd;
}
.p-navi .st-prev-link i,
.p-navi .st-next-link i {
  font-size:1.5em;
  color:#039BE5;
}
.p-navi .st-prev-title,
.p-navi .st-next-title {
  font-weight:bold;
  color:#039BE5;
}
@media print, screen and (max-width: 599px) {
  .p-navi a:nth-of-type(2) p {
    border-left: none;
  }
}

※テキストやアイコンの色は上記CSSの「#039BE5」を別の色に修正すれば変更できます。