ヘッダーメニューと各テキストのカラー設定

投稿日:2017年3月19日

前回の記事投稿のすぐ後に、AFFINGER4テーマカスタマイザーより、まだ触っていなかった残りの項目[メニューのカラー設定]と[各テキストとhタグ]、及び[ウィジェット](ここは少しだけ)をいじってみました。

えー、結果から言いますと、今まで悩んでいた事の半分くらいはここで解決できました!(´▽`)
嬉しいことなんですが、前回できねーできねー言ってたのに、ホントにその投稿後すぐにできてしまったので、もーちょっといろいろ試してから記事にすれば良かったなーとちょっと後悔( ´△`;)

今回はそこで行った細々とした設定を書き記しておこうと思います。
いつどんな拍子に設定が初期化されたりするか分からんですしね。WordPressってのがどういうものなのか未だによく理解できてませんし(汗)

 

[メニューのカラー設定]
ここから行ったのはヘッダーメニューに関する物のみです。

  • [ボーダー右色]をくっきりと
    前回ボタンとボタンの境目の線が見えにくいと書きましたが、ここから設定できました。
    しかし一番右端のボタンの右側にはボーダーが付かないんですね。これが欲しかったんですが…
    [ボーダー左右色]から設定できるのかとも思いましたが、これはメニューバー全体を取り囲む外枠の左右部分だったので、私の欲しい物ではありませんでした。
     
  • [メニューを太字に]
    ここは完全に好みの話なんですが、最初にヘッダーメニューを見た時に、なんかボタンっぽくないというか、ただリンクを並べただけって感じで、若干の物足りなさを感じていたので、これは地味に嬉しかったですね。
     
  • [メニューの横幅を100%に]
    はい、これね。ずっと探してましたよ(笑)
    これで各エリア毎の背景色は個別に設定してあったので、全体の[背景色]の設定を白に戻せました。
    ここで設定した色はサイトの読み込み時とかバナーのマウスオーバー時に透けて見える色でもあるので、白以外はちょっとないかなと。

 
[各テキストとhタグ]
ここで行ったのは記事タイトル・投稿日時・リンクテキストの3項目。

  • 記事タイトル[左の余白]
    どうもAFFINGERのデフォルトの記事タイトルはただフォントを大きくして太字にしただけで、シンプルすぎるように感じていました。記事本文で少し大きめのフォントとか使ったらすぐに記事タイトル以上の文字になってしまうんですよね。
    タイトルには本文では使われる事の無い、それこそ一目でタイトルだ、って判るような特別感と言いますか、個性みたいのが欲しかったんですよね。
    個人的な理想としてはAFFINGER4公式サイトに使われている赤いペンの画像!あれいいよなぁ~
    確証はないけど、あれ多分記事タイトルの背景画像ですよね?
    今回は画像を用意できていなかったので、とりあえず画像が入るかもしれないスペースという想定で左側を少しだけ空けておきました。
    できればあの画像を記事のカテゴリーとかに応じて数種類使い分けられたりできれば最高なんだけど、この設定を見る限りでは一種類だけかなぁ…残念(ノд-`)
     
  • 投稿日時・ぱんくず・タグの[テキスト色]
    これもずっっと気になってたところ。やっと見つけました。
    でもこれ他のAFFINGER4製のサイトを見ても、デフォルトのまま使ってる人が多いんですよね。なにかこの薄さに意味があるんだろうか…?
    ま、やり方さえ解ってしまえばあとはいつでも変えられるので、やや濃い目にしただけで今は完了としておこう。
     
  • リンクテキストの[マウスオーバー時に透明]
    初め何を言ってるのか分からなかったのですが、リンク先の設定してあるテキスト(デフォルトでは青文字)にマウスをのせた時に変化する文字色(デフォルトでは赤)に関する設定のようです。
    このデフォの赤色がけっこうドぎつい色をしていたのですが、ここにチェックを入れたら若干やんわりとした赤になった気がします。
    それだけじゃなく、サイトタイトルやフッターメニューなどの、今までマウスオーバーで変化しなかったリンクテキストへのマウスオーバー時にも元の文字色をほんの少し明るくした色に変化させる効果が加わりました!
    すっごい地味!でもこれ実はかなり大きい効果なんじゃないかと思う。ここはデフォでチェックONでも良いとさえ思います。

 
あ、あと投稿日の表示が見やすくなったので、ついでにAFFINGER4管理画面より、投稿日+更新日のダブル表記に変更しておきました。
前にも書きましたが、やっぱり私にはこの「更新日」というものが必要無いと思っているのですが、この設定にしておかないと更新がなされた記事からは「投稿日」の表記が消えてしまいますから。

 
あとは[ウィジェット]も少しいじってみて、サイドバー関連に手を加えてみました。デフォルトのものがほぼ消えて、ちびっとだけオリジナリティが出てきたかも??
なんだかけっこうな文字数いってしまったので、もう少しウィジェットをいじってみてからこの辺は改めて記事にしようと思います。

 

あ!最後にもうひとつ、忘れちゃならんことをば。

前回(3月17日)の記事でグローバルメニュー(ヘッダーメニュー)をセンタリング(中央寄せ)できたら良いなぁ的な事を言ったのですが、なんとその翌日(昨日ですね)にちょうど公式FAQにそのやり方が!
ちょっと難しそうだし、不具合が出るかもしれないとも書かれているのですが、これで私の悩みが一つ解消されました!ヽ(⌒▽⌒)ノ<ワーイ

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.