サイト&ブログの作り方

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

  1. HOME >
  2. コラム >
  3. サイト&ブログの作り方 >

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

株式会社オンスピードより発売されている、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年からおこなっているウェブ制作。
気がつけば今年で18年目。

⇒もっと自己紹介

pixiv 小説家になろう

⇒お問い合わせ

-サイト&ブログの作り方
-,