このサイトの丸目デザインを気に入ってくださった方がいたら、とっても嬉しいです！
このブログは、有料テーマ【トール】を、CSSでちょこっといじっています！
【トール】はカスタマイズ設定でヘッダー周りを色々といじることができます。
このブログでは、標準のカスタマイズ設定だけでなく、オリジナルのCSSを使って、ヘッダー周りの見た目をガラッと変更しています。
色々なパターンのヘッダーを作ったので、のちのちご紹介していこうと思っています。
まずは、このブログで採用しているものに近い、丸いグローバルメニューとサーチパネルのCSSをご紹介します。
ただ、ご紹介しているコードをコピペしても、ヘッダー周りの設定がこのブログと同じでないと、綺麗に表示されません。
まずはヘッダーのカスタマイズ設定から始めます。
それと、コードや設定を変更するときは、先にバックアップをとって、自己責任で行ってくださいねー
ヘッダーのカスタマイズ設定
ほとんどデフォルトのままでも大丈夫ですが、選択項目によっては、ご紹介しているCSSを少し変更する必要があります。
ヘッダー周りのカスタマイズ設定は、ワードプレスのダッシュボードメニューから、【外観】→【カスタマイズ】→【共通エリア設定】→【ヘッダーエリア設定】→【ヘッダの設定】から行います。
レイアウト
レイアウトは【ダイナミック】でないと、きちんと表示しません。
■ヘッダーのレイアウトを選択
→ダイナミック
ヘッダーのテキストカラー
■ヘッダーのテキストカラーを選択
→黒（デフォルトです）
【ヘッダーのテキストカラー】で白を選んでいる場合、ご紹介しているCSSでは、お色の調整が必要になってきます。
また、サイトのタイトルがテキストになっている場合は、タイトル色がこのメニューで選択したお色となるので、タイトルが黒では困るなーという方は、【ヘッダーのテキストカラー】は白のまま、追加するCSSのほうのコードで文字色を調整します。
また、別の方法として、タイトルのお色に関しては、それはそれで別のCSSを追加するというのもシンプルな手です。
これでしたら、ヘッダーのテキストカラーがなんであれ、タイトルのお色は指定したものになります。
後者の場合は、こちらのコードを追加します。
/*タイトルの文字色*/
.siteTitle{
color:white;
}ヘッダー周りのCSS
ヘッダー周りの設定が終わりましたら、こちらのCSSを追加していきます。
CSSの追加方法については、こちらのページでざっくりご説明しています。
丸いグローバルメニューのCSS
/*グローバルメニュー*/
.menuBtn__link{
background:#58a9ef !important;/*メニューの色*/
border-radius:50% !important;/*メニューの丸み*/
border:solid 1px #fff;/*メニューの外枠*/
color:white !important;/*メニューの文字色*/
height:60px !important;/*メニューの高さ*/
width:60px !important;/*メニューの幅*/
}
/*タブレットで表示したとき*/
@media only screen and (max-width: 990px) {
.menuBtn__link {
height:50px !important;/*メニューの高さ*/
margin-top:-12px;/*メニューの上の余白*/
padding-top:7px;/*メニュー内の上の余白*/
width:50px !important;/*メニューの幅*/
}
}
/*iPadより小さいモバイル表示のとき*/
@media only screen and (max-width: 768px) {
.menuBtn__link {
margin-top:3px;/*メニューの上の余白*/
padding-top:7px;/*メニュー内の上の余白*/
}
}
/*マウスホバーしたとき*/
.menuBtn__link:hover{
color:white !important;/*メニューの文字色*/
filter: brightness(109%);/*明るさ*/
opacity:0.9;/*不透明度*/
}丸いサーチパネルのCSS
/*サーチパネル*/
.icon-search {
background:#fff;/*サーチの背景色*/
border-radius:50%;/*サーチの丸み*/
border:solid 1px #58a9ef;/*サーチの外枠*/
color:#58a9ef;/*サーチの文字色*/
height:60px;/*サーチの高さ*/
width:60px !important;/*サーチの幅*/
}
/*タブレットで表示したとき*/
@media only screen and (max-width: 990px) {
.icon-search {
border-radius:50%;/*サーチの丸み*/
height:50px;/*サーチの高さ*/
margin-top:-12px;/*サーチの上の余白*/
padding-top:7px;/*サーチ内の上の余白*/
width:50px;/*サーチの幅*/
}
}
/*iPadより小さいモバイル表示のとき*/
@media only screen and (max-width: 760px) {
.icon-search {
border-radius:50%;/*サーチの丸み*/
height:50px;/*サーチの高さ*/
margin-top:3px;/*サーチの上の余白*/
padding-top:7px;/*サーチ内の上の丸み*/
width:50px !important;/*サーチの幅*/
}
}
/*マウスホバーしたとき*/
.icon-search:hover{
background:#58a9ef;/*サーチの背景色*/
border:solid 1px #fff;/*サーチの外枠*/
color:#fff;/*サーチの文字色*/
filter: brightness(109%);/*サーチの明るさ*/
}グローバルナビのCSS
ヘッダー内のグローバルナビで、該当するカテゴリーがアクティブなときの下線の色を変えるCSSです。
/*グローバルナビ*/
/*記事が該当カテゴリーに含まれているとき*/
ul li.current-post-parent a{
border-bottom:#58a9ef 2px solid !important;}
/*該当のカテゴリーページのとき*/
ul li.current-menu-item a{
border-bottom:#58a9ef 2px solid !important;}