【Cocoon】コピペOK!初心者向け『タブ見出しボックス』のカスタマイズ

Cocoon カスタマイズ タブ見出しボックス
キップム
キップム

『タブ見出しボックス』、このブログみたいなデザインにしたいんだけど…どうしたらいいのかな??

yoko
yoko

今からコピペだけで簡単にカスタマイズできる方法を紹介するから、ぜひ試してみて。

キップム
キップム

わぁ、ありがとう!すぐトライしてみる♪

スポンサーリンク

この記事はこんな人にオススメ

  • 「タブ見出しボックス」をおしゃれにカスタマイズしたい人
  • Cocoonユーザー

この記事を読めば、できること

下記画像(2枚目)のようなデザインに「タブ見出しボックス」をカスタマイズできる!

ちなみにCocoonデフォルトのデザインはこんな具合で、

Cocoon「タブ見出しボックス」デフォルトのデザイン

カスタマイズ後のデザインはこんな感じ。

注意しましょう

注意喚起文など。

yoko
yoko

少し窮屈な印象だったので、余白を広めにとって情報がパッと目に入ってくるデザインにしてみたよ。

タブボックスではなく、タブ見出しボックスをカスタマイズした理由

私はCocoonブログでよく見る「タブボックス」よりも

Cocoonのタブボックス
画像引用元:Cocoon公式サイト拡張スタイル「タブボックス」の表示サンプル より

「タブ見出しボックス」派。理由としては、

見出しの文字を自由に変えられフレキシブルだから

タブボックスも良いのだけれど、シンプルな方がブログがキレイに見えるので「使用する装飾は絞る」ということをマイルールにしている。

カスタマイズの大まかな流れ

簡単にまとめるとカスタマイズの手順は、2ステップ!

スタイルシートにコードを追加する
デザインを確認する 

さっそくの方法から順番に解説していきたいと思う。

1 スタイルシートにコードを追加する【コピペOK】

スタイルシートに入力する前の注意点!
  • 編集前にスタイルシートのバックアップを必ず取る

  • 編集するテーマが「CocoonChild」になっていることを確認する

  • 「@charset”UTF-8”;」から始まる部分(最初から入力されている内容)は消さずに下に追記していく

  • 当ページによるデザイン崩れなど、動作不良があっても責任を取ることはできないのでご了承を
yoko
yoko

上記のような感じで「タブ見出しボックス」を使ってるよ!

ここからは、コードの追加方法を紹介していきたいと思う。

1. 「外観」から「テーマエディター」を選択

Cocoonのダッシュボード画面

2. スタイルシートにコードをコピペする

Cocoonスタイルシートの画面

コードはこちら。

/****************
タブ見出しボックス
****************/
.tab-caption-box-label{ 
	line-height: 0; /*タブ設定をリセット*/
	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; /*ボックス左上角丸*/
}

今回のカスタマイズ内容は、

タブ
 ・内側の余白を調整
 ・タイトルの文字サイズを調整
 ・タイトル文字を太く
 ・角丸を調整

ボックス
 ・ボックスの位置を調整(枠線を細くしたため)
 ・枠線を細く
 ・内側の余白を広めに
 ・角丸を調整

となっている。

3. コピペ後、「ファイルを更新」をクリックしたらカスタマイズは終了

2 デザインを確認する

1.記事執筆画面の「+」をクリックし「すべて表示」を選択

Cocoon投稿画面

2. 左に全ブロックが表示されるので、下にスクロールし、COCOON汎用ブロックから「タブ見出しボックス」をクリック

Cocoon汎用ブロック

3. 「タブ見出しボックス」が表示される

Cocoon「タブ見出しボックス」を表示

4. 見出しと内容を書き込む。また、右のブロックから、色(枠・背景)やアイコンも選ぶことができる

Cocoon「タブ見出しボックス」の設定方法

ボックスの色を自分好みに変えたい!という方は、こちらの記事【Cocoonカスタマイズ】超簡単!記事装飾の色を自分好みに変える方法 をぜひ!

5. 右上の「プレビュー」をクリックし、デザインを確認する

Coocon「タブ見出しボックス」カスタマイズ後のデザイン確認方法

5. このように表示されていれば完成

注意しましょう

注意喚起文など。

キップム
キップム

余白や角丸の丸み、線の太さは、お好みで調整してね!

こちらもオススメ!

yoko
yoko

この本で基礎知識を身につけたら、思い通りにカスタマイズできるようになったよ!

おわりに

「タブ見出しボックス」のカスタマイズ紹介は、以上でおわり。

HTML&CSS初心者カスタマイズ奮闘記なので、プロから見たら綺麗なコードではないかもしれないけれど、誰かのお役に立てれば嬉しいなと思う。

文章: yoko( @_yoko51_

Comment