Cocoon|汎用ブロック「タブ見出しボックス」のデザインをスタイリッシュにする

WordPress 無料テーマ『Cocoon』の『タブ見出しボックス(Cocoon汎用ブロック)』のデザインをスタイリッシュにするカスタマイズ方法をご紹介します。

記事のポイント
  • 『タブ見出しボックス』がシャープなデザインになる
  • おしゃれなブログにしたい方におすすめ
  • コードをコピペするだけでカスタマイズ完了

お気に入りのカスタマイズなので当サイトでも適用中です!

思うように設定できない場合やご要望などもありましたら、お気軽にコメントください。

タブ見出しボックスをスタイリッシュにするカスタマイズのビフォーアフター

パソコン表示

クリックで拡大できます
パソコン表示 Before
パソコン表示 After

スマホ表示

クリックで拡大できます
スマホ表示 Before
スマホ表示 After

タブ見出しボックスをスタイリッシュにするカスタマイズの流れ

ざっくり手順
  1. WordPress 管理画面にアクセスする
  2. 外観】⇒【テーマエディター】をクリックする
  3. カスタマイズ用コードをコピーする
  4. コードをスタイルシート(style.css)に貼り付ける
  5. ファイルを更新】をクリックする

WordPress 初心者の方や Cocoon のカスタマイズに慣れていない方は、下の【手順を詳しく見る(図解)】をクリックしてください。それぞれの手順を画像付きで解説しています。

  • STEP 1
    WordPress 管理画面にアクセスする

    『https://ドメイン名/admin』にアクセスすると、すでにログイン済みの方は【ダッシュボード】が表示されます。

    ログインしていない場合は、ログインページが表示されるので、ユーザー情報を入力後、ログインしてください。

  • STEP 2
    【外観】⇒【テーマエディター】をクリックする

    外観】メニューの上にマウスポインターを合わせ、展開したサブメニューの【テーマエディター】をクリックしてください。

  • STEP 3
    カスタマイズ用コードをコピーする

    コードの右上に表示されている【コピーする】をクリックすれば、内容がクリップボードにコピーされます。

  • STEP 4
    コードをスタイルシート(style.css)に貼り付ける

    コピーしたコードを /*必要ならばここにコードを書く*/ と書かれている行の、すぐ下辺りにコードを貼り付けてください。

    すでに何かしらのコードが記述されている場合は、そのコードの下に貼り付けましょう。

  • STEP 5
    【ファイルを更新】をクリックする

    コードを貼り付けたら、左下の【ファイルを更新】クリックしましょう。これでカスタマイズ完了です!

タブ見出しボックスをスタイリッシュにするカスタマイズ用コード

/************************************
** タブ見出しボックス(Cocoon 汎用ブロック)のデザインをスタイリッシュにする
************************************/

/*枠組み*/
.tab-caption-box {
	position: relative; /*要素の配置*/
	margin-top: 2em; /*上の余白*/
	margin-right: 2%; /*右の余白*/
	margin-left: 2%; /*左の余白*/
}

/*ラベル*/
.tab-caption-box-label {
	position: absolute; /*要素の配置*/
	top: 0; /*上からの距離*/
	left: 0; /*左からの距離*/
	border-radius: 0; /*丸み*/
	font-size: .833333em; /*文字の大きさ*/
}

/*コンテンツ*/
.tab-caption-box-content {
	padding: 2.2em 1.2em 1em; /*内側の余白*/
	border-width: 1px; /*線の太さ*/
	border-radius: 0; /*丸み*/
	font-size: .9375em; /*文字の大きさ*/
}

/*横幅 440px 以下に適用される*/
@media screen and (max-width: 440px){
	/*枠組み*/
	.tab-caption-box {
		margin-right: 0; /*右の余白*/
		margin-left: 0; /*左の余白*/
	}
}

Cocoon ブロックの『タブボックス』と余白等を合わせてありますので、一緒に使っていただいても違和感がありません。

コメント

  1. hana より:

    こんにちは^^

    JINからコクーンにテーマ変更しまして色々調べていたところ
    ともさんのこちらのサイトに辿り着きました。

    ・汎用ブロック「タブ見出しボックス」のデザインをスタイリッシュにする
    https://www.satokobo.net/cocoon/2152

    こちらに記載されている通り対応してみたのですが反映されなく、原因も分からず対処できなかったのでコメントいたしました。

    申し訳ありませんが対応方法についてご教授いただきたくよろしくお願いいたします。m(__)m

    • トモ トモ より:

      hanaさん

      こんにちは、トモです^^
      コメントありがとうございます。

      カスタマイズが反映されないとのことですね。
      ひとまず、このカスタマイズは現在当サイトでも適用していますので、コード自体に問題はなさそうです。

      記事の通りにやっても反映されないとなると、「キャッシュ」関係が怪しいですね!
      キャッシュは大まかに言うと、「記事の情報を一時保存しておき、ページの表示速度を高速化するための仕組み」なのですが…

      古いキャッシュが残っている状態の場合、「設定を変更したのに表面上は更新されていないように見える」ことがあります。
      なので、キャッシュの削除を行ってみてはいかがでしょうか?

      キャッシュにも色々あるのですが、

      「レンタルサーバー名 キャッシュ削除」
      「Cocoon キャッシュ削除」
      「ブラウザ名 キャッシュ削除」

      などと検索すれば方法はわかるかなと。

      解決しないようでしたら、返信いただければと思います^^
      その際、可能でしたらサイトのURLを添えていただけると、当方としても対応しやすいです。

      • 匿名 より:

        トモさん
        早々にお返事いただきましてありがとうございます。
        キャッシュ削除で無事に解決できました(^^)/

        これからもこちらで色々勉強させていただきます♪
        ありがとうございましたm(__)m

        • トモ トモ より:

          解決されたようで何よりです!
          またご不明な点などあれば、気軽にコメントしてくださいね^^

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