AFFINGER6 WordPress サイト&ブログの作り方 絵描き生活

AFFINGER6:PREV NEXTリンクの背景色を変えたい!

2021年9月5日

  1. HOME >
  2. 絵描き生活 >
  3. AFFINGER6 >

AFFINGER6:PREV NEXTリンクの背景色を変えたい!

2021年9月5日

株式会社オンスピードより発売されている、WordPressの有料テーマ『AFFINGER6』。

『AFFINGER6』の前バージョンである『AFFINGER5』では、投稿ページ下部にある次・前ページへのリンクがテキストのみの状態でした。
それが『AFFINGER6』になって、サムネイル付きのものにアップデート!
嬉しい変化です^^

『AFFINGER6』のPREV/NEXTリンクはサムネイルが表示される
『AFFINGER6』のPREV/NEXTリンクは、サムネイルが表示されます。

このPREV/NEXTリンクにマウスを置くと……、

『AFFINGER6』のPREV/NEXTリンクにオンマウスしたところ
『AFFINGER6』のPREV/NEXTリンクにオンマウスしたところ。
ホワイトグレーな背景色に変わります。

リンク部分の背景色がホワイトグレーっぽい色味に変わるんですね~。

おしゃれですが、あなたはこう思ったことはございませんか。

『AFFINGER6』のPREV/NEXTリンクの背景色を変えたい
『AFFINGER6』のPREV/NEXTリンクの背景色を変えたい!

「ほんま、ここの色を自分の好きな色にしたいねん! サイトのカラーに合った色を自分で選びたい!」

そんなあなたにコピペでOKなCSSをご紹介いたします。

以下のCSSを追加CSSに入力する

コピペでOKのCSSコード

/*PREVとNEXTリンクのオンマウス背景色*/
.p-navi a:hover {background:#c0c0c0;}

【#c0c0c0】としているのは単なる例なので、お好きな色をお入れくださいね~。

追加CSSに入力するとこんな感じになるよ

たとえば上記のとおり【#c0c0c0】で追加CSSを入力すると、このような感じに変わります。

『AFFINGER6』のPREV/NEXTリンクのオンマウスしたときの背景色を別の色にしてみたところ
『AFFINGER6』のPREV/NEXTリンクのオンマウスしたときの背景色を別の色にしてみたところ。

これはけっこう濃いめのグレーなので極端ですが、かわいいニュアンスカラーなどを指定するとおしゃれになると思います。
ぜひサイトカラーに合わせてレイアウトしてください^^

このコードを書いた理由

「ほんま、ここの色変えたいねん!」

『AFFINGER6』のPREV/NEXTリンクの背景色を変えたい
『AFFINGER6』のPREV/NEXTリンクの背景色を変えたい!

この一言に尽きますねえええええ。

『AFFINGER5』のときはいろいろ改造してサムネイル付きのPREV/NEXTリンクにしていたものですから、『AFFINGER6』になってサムネイルが表示されるようになったと聞いて嬉しかったんですけど。
オンマウスしたときの色――hover色――が原則として固定になっているのにはビックリしました。
【外観】>>【カスタマイズ】のカスタマイザから設定できるのか?? と思ってあちこち触りたくってもついぞここの設定箇所は見つけられず。
「こりゃ、自分でCSS書いたほうが早いな」と思ったので書いちゃいました。笑。

と言いつつ、けっきょく現在はデフォルトのhover色で運用しています……。

当サイト『あとりえ極星堂』は、うっすらグレーの背景色がメインになっています。

最初は『AFFINGER6』のPREV/NEXTリンクのデフォルトhover色にたいへん違和感を覚えていました。
グレー×グレーで、なんだかもっさりした色合わせに思えてしまったんですよね。
で、今回ご紹介したCSSを使って、違う色に変更していました。

ところが、追加CSSの整理をしていた時にあらためてデフォルトのhover色を見てみると……。

一周回って「これはこれでなじんでいる気がするなあ……」と、印象が180度変わってしまっていたのでした!

文字どおり女心と秋の空です……!
レイアウトの印象ってヤツは奥が深いですね。汗。

わたし 鍋弓わた が描いた漫画(同人誌)

わたし 鍋弓わた が表紙を描いた本

  • この記事を書いた人
  • 最新記事

鍋弓わた

美と歴史と物語を愛するイラストレーター。
同人サークル『極星堂きょくせいどう』で歴史漫画も描いています。
大阪生まれの奈良在住。
一児(男の子)を抱えながら、絵描き生活と歴史生活を楽しんでいます。

趣味は2003年からおこなっているウェブ制作。
気がつけば今年で19年目。

このブログの近代史や軍事のページでは、艦船模型雑誌で作例や考証記事を書かれている艦船模型プロモデラー 渡辺真郎(HIGH-GEARed)氏をアドバイザーとしてお招きしています。
※戦争賛美はしていません※

⇒もっと自己紹介
⇒渡辺真郎氏公式ブログ

Instagram pixiv みてみん

⇒お問い合わせ

-AFFINGER6, WordPress, サイト&ブログの作り方, 絵描き生活