ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑲タブをオシャレに整えるCSS】

ブログ

こんにちわ
ニワトリです

『自分のブログを見やすく
 オシャレにしたい・・・』

『デフォルトも悪くないけど
 カスタマイズしたい・・・』

『CSSとか難しくて分からない・・・』

こんな悩みを抱えた初心者ブロガーさんも
多いのではないでしょうか?

私もそのひとりです!!

そんなブログ初心者の私が
追加CSSでcocoonをカスタマイズしたので

やり方を紹介していきます。

cocoonの良いところ
  • wordpressの無料テーマ
  • 細かくカスタマイズができる
  • デザインの幅が広い

今回はタブをオシャレに
カスタイマイズする方法を紹介していきます。

当ブログのタブはこのようになっています。

今回のカスタマイズ
  • タブの設定
  • タブの色を変えるカスタマイズ
  • タブの下にラインを入れるカスタマイズ

タブの設定方法

やり方
  • wordpress
  • cocoon設定
  • インデックス

フロントページタイプ
 ▶タブ一覧に✓

「変更をまとめて保存」を押して保存。

①【コピペでOK!】タブの色を変更するCSS

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
    今回の追加CSSを前回のCSSの下から
    貼り付けていきます

やり方
  • wordpressメニュー
  • 外観
  • テーマエディター
  • スタイルCSS

スタイルシート用追加CSS
/***タブ一覧表示の設定***/
/*選択タブの色*/
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"],
#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"],
#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"],
#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
background: #233B6C; /*タブ色*/
border: none; /*枠線なし*/
}
/*非選択タブの色*/
.index-tab-buttons .index-tab-button{
background-color: #cacaca;
}
/*ホバー時のタブの色*/
.index-tab-wrap label:hover{
background-color: rgba(35,59,108,0.4);
}
/*タブの文字色・太字*/
.index-tab-button{
color:#333;
font-weight: 700;
}

■タブの色を変更する場合

background: #233B6C; /タブ色/

■非選択のタブの色を変更する場合

/非選択タブの色/
.index-tab-buttons .index-tab-button{
background-color: #cacaca;

②【コピペでOK!】タブの下にラインを入れるCSS

①のCSSに続いて以下のCSSを
追加で入力していきます。

スタイルシート用追加CSS
/*タブの下に下線*/
.index-tab-buttons{
border-bottom: solid 2px #233B6C; /*アンダーライン*/
box-shadow: 0 4px 6px rgba(0, 0, 0, .18); /*影*/
}

■アンダーラインの色を変える場合

border-bottom: solid 2px #233B6C; /アンダーライン/

CSSの貼り付けが終わりましたら
左下の「ファイルを更新」を押します。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

スマホとPCで変更したデザインが反映しているか確認する

パソコン
スマホ

タブがスマホとPC画面の両方で
反映しているか確認をします。

タブが上の画像のように
表示されていれば設定は完了です。

まとめ

さて、いかがだったでしょうか?

wordpress無料テーマcocoonを
カスタマイズする追加CSS。

今回はタブのプチカスタマイズ
について紹介してきました。

次回もcocoonカスタマイズについて
記事をまとめていきますね!

最後までお付き合いいただき
誠にありがとうございました。

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

ニワトリの自己紹介はコチラ

コメント

タイトルとURLをコピーしました