『タブ見出しボックス』、このブログみたいなデザインにしたいんだけど…どうしたらいいのかな？？
今からコピペだけで簡単にカスタマイズできる方法を紹介するから、ぜひ試してみて。
わぁ、ありがとう！すぐトライしてみる♪
この記事はこんな人にオススメ
この記事を読めば、できること
下記画像（2枚目）のようなデザインに「タブ見出しボックス」をカスタマイズできる！
ちなみにCocoonデフォルトのデザインはこんな具合で、
カスタマイズ後のデザインはこんな感じ。
注意喚起文など。
少し窮屈な印象だったので、余白を広めにとって情報がパッと目に入ってくるデザインにしてみたよ。
ポチップ
タブボックスではなく、タブ見出しボックスをカスタマイズした理由
私はCocoonブログでよく見る「タブボックス」よりも
「タブ見出しボックス」派。理由としては、
見出しの文字を自由に変えられフレキシブルだから
タブボックスも良いのだけれど、シンプルな方がブログがキレイに見えるので「使用する装飾は絞る」ということをマイルールにしています。
カスタマイズの大まかな流れ
簡単にまとめるとカスタマイズの手順は、2ステップ！
❶ スタイルシートにコードを追加する
❷ デザインを確認する
さっそく❶の方法から順番に解説していきます。
1 スタイルシートにコードを追加する【コピペOK】
上記のような感じで「タブ見出しボックス」を使ってるよ！
ここからは、コードの追加方法を紹介していきたいと思います。
1. 「外観」から「テーマエディター」を選択
2. スタイルシートにコードをコピペする
コードはこちら。
/****************
タブ見出しボックス
****************/
.tab-caption-box-label{
padding: 6px 16px; /*タブ内側余白*/
font-size: 16px; /*タイトル文字の大きさ*/
font-weight: bold; /*タイトル文字の太さ*/
border-radius: 4px 4px 0px 0px; /*タブ角丸*/
}
.tab-caption-box-content {
position: relative; /*配置に関するもの（ここを基準に）*/
top: 1px; /*上から(1px）移動*/
border: 2px solid; /*ボックス線*/
padding: 48px 24px; /*ボックス内側余白*/
border-radius: 4px; /*ボックス角丸*/
border-top-left-radius: 0px; /*ボックス左上角丸*/
}今回のカスタマイズ内容は、
[wp-svg-icons icon=”checkmark” wrap=”span”] タブ
・内側の余白を調整
・タイトルの文字サイズを調整
・タイトル文字を太く
・角丸を調整
[wp-svg-icons icon=”checkmark” wrap=”span”] ボックス
・ボックスの位置を調整（枠線を細くしたため）
・枠線を細く
・内側の余白を広めに
・角丸を調整
となっています。
3. コピペ後、「ファイルを更新」をクリックしたらカスタマイズは終了
2 デザインを確認する
1.記事執筆画面の「＋」をクリックし「すべて表示」を選択
2. 左に全ブロックが表示されるので、下にスクロールし、COCOON汎用ブロックから「タブ見出しボックス」をクリック
3. 「タブ見出しボックス」が表示される
4. 見出しと内容を書き込む。また、右のブロックから、色（枠・背景）やアイコンも選ぶことができる
ボックスの色を自分好みに変えたい！という方は、こちらの記事【Cocoonカスタマイズ】超簡単！記事装飾の色を自分好みに変える方法 をぜひ！
5. 右上の「プレビュー」をクリックし、デザインを確認する
5. このように表示されていれば完成
注意喚起文など。
余白や角丸の丸み、線の太さは、お好みで調整してね！
こちらもオススメ！
ポチップ
この本で基礎知識を身につけたら、思い通りにカスタマイズできるようになったよ！
おわりに
「タブ見出しボックス」のカスタマイズ紹介は、以上でおわり。
HTML&CSS初心者カスタマイズ奮闘記なので、プロから見たら綺麗なコードではないかもしれないけれど、誰かのお役に立てれば嬉しいなと思います。
文章： yoko（ @_yoko51_）
Comment