【コピペで簡単】Cocoonのボックスの文字列を変更できるようにカスタマイズ

Cocoonのボックスの文字列を変更できるようにカスタマイズ Cocoon

有料級の無料テーマ「Cocoon」のカスタマイズ備忘録です。

無料のWordpressテーマ「Cocoon」は、なぜ無料なのかと戸惑うくらいに機能が豊富で使いやすいんですが、唯一と言っていい不満点がありました。

それが、ボックスの文字を変更できないことです。

・ボックスはこういうやつ
↑この文字列(CHECKの部分)を好きなように変えたい
ボックス(タブ)

ボックスの文字一覧(「BAD」の下に「プロフィール」あり)

無料なので仕方ないよなぁと思って諦めてたんですが、ググってみたら普通にカスタマイズ方法を紹介しているブログがありました。

やったぜ

そして、カスタマイズ成功!

というわけで、上記のように文字列を自由に変更できるカスタマイズの方法を、今回は説明したいと思います。

Cocoonのボックス上部の文字列を自由に変更できるカスタマイズ!

上記のサイトを見てください。

おわり。

でもいいんですが、一応自分がカスタマイズした部分の説明をしていきます。

「外観」→「テーマの編集」から、子テーマのCSSを編集する

子テーマの「style.css」、「editor-style.css」、「amp.css」の3ヶ所に、以下の3種類のコードをコピペしました。(1ヶ所に3種類全部コピペ×3ヶ所です)

/*
 * Cocoon風タブボックス *
 ***********************/
/* タイトル */
.title-simple {
	position: absolute;
	top: -1.9em;
	left: -1px;
	font-size: 1em;
	font-weight: bold;
	display: inline-block;
	padding: 0.2em 1em 0;
	border-radius: 5px 5px 0 0;
	color: #fff;
	background: #666; /* 背景グレー:いろ差し替え場所 */
}
/* BOX */
.box-simple {
	position: relative;
	border-radius: 0 5px 5px;
	padding: 1.5em 1em 0.5em;
	margin: 2.5em 0 2em;
	box-shadow: 2px 3px 3px #ddd;
	border: 1px solid #bbb; /* 枠グレー:色の差し替え場所 */
}
/* スマホ以外481px以上 */
@media screen and (min-width: 481px) {
	.box-simple {
		margin: 3em 1em 2em; /* 上 左右 下 */
	}
}
/* ここまでCocoon風 */
/*
 * シンプルタブボックス *
 **********************/
/* タイトル */
.box-title {
	position: absolute;
	top: -1em; /* タイトル位置マイナス値あげると上  */
	left: 1em; /* 左から1文字分右へ */
	font-size: 1.1em; /* サイズ1.1文字分 */
	font-weight: bold; /* フォント太く */
	display: inline-block;
	padding: 0.2em 0.8em 0; /*内側余白:上下 左右*/
	border-radius: 5px; /* 角丸 */
}
/* BOX */
.title-box {
	position: relative;
	border-radius: 5px;
	padding: 1.5em 1em 0.5em; /* 内側余白:上 左右 下 */
	margin: 2.5em 0 2em; /* 外側余白: 上 左右 下 */
	box-shadow: 2px 3px 3px #ddd;
}
/* スマホ以外481px以上 */
@media screen and (min-width: 481px) {
	.title-box {
		margin: 3em 1em 2em; /* 上 左右 下 */
	}
}
/* gray */
.title-gray {
	color: #666;
	background: #fff;
}
.box-gray {
	border: #ddd 1px solid;
}
/* pink */
.title-pink {
	color: #f278a4;
	background: #fff;
}
.box-pink {
	border: #ffcbde 1px solid;
}
/* blue */
.title-blue {
	color: #3847fa;
	background: #fff;
}
.box-blue {
	border: #a0a8ff 1px solid;
}
/* brown */
.title-brown {
	color: #bb5f03;
	background: #fff;
}
.box-brown {
	border: #efb072 1px solid;
}
/* green */
.title-green {
	color: #4CAF50;
	background: #fff;
}
.box-green {
	border: #9dd9a0 1px solid;
}

引用:Cocoonタブボックスのタイトルをビジュアルエディタで変更したい!コピペカスタマイズ | ビバ★りずむ

そして、子テーマの「functions.php」に以下のコードをコピペです。

//タグ追加 lib/tinymce/html-tags.php
if ( !function_exists( 'generate_html_tags_is' ) ):
function generate_html_tags_is($value){
	echo '<script type="text/javascript">
	var htmlTagsTitle = "'.__( 'タグ', THEME_NAME ).'";
	var htmlTagsEmptyText = "'.__( '内容を入力してください。', THEME_NAME ).'";
	var htmlTags = new Array();';
	$left_msg = __( '左側に入力する内容', THEME_NAME );
	$center_msg = __( '中央に入力する内容', THEME_NAME );
	$right_msg = __( '右側に入力する内容', THEME_NAME );
	$keyword_msg = __( 'キーワード', THEME_NAME );
	?>;

	<?php //シンプルタブ
	$before = '<div class="title-box box-simple"><div class="box-title title-simple">Check</div>a';
	$after = '</div>';
	?>
	htmlTags[0] = new Array();
	htmlTags[0].title  = '<?php echo __( 'BOX:シンプル', THEME_NAME ); ?>';
	htmlTags[0].tag = '<?php echo $before.$after; ?>';
	htmlTags[0].before = '<?php echo $before; ?>';
	htmlTags[0].after = '<?php echo $after; ?>';

	<?php //灰色タブ
	$before = '<div class="title-box box-gray"><div class="box-title title-gray">Check</div>a';
	$after = '</div>';
	?>
	htmlTags[1] = new Array();
	htmlTags[1].title  = '<?php echo __( 'BOX:灰色', THEME_NAME ); ?>';
	htmlTags[1].tag = '<?php echo $before.$after; ?>';
	htmlTags[1].before = '<?php echo $before; ?>';
	htmlTags[1].after = '<?php echo $after; ?>';

	<?php //ピンクタブ
	$before = '<div class="title-box box-pink"><div class="box-title title-pink">Check</div>a';
	$after = '</div>';
	?>
	htmlTags[2] = new Array();
	htmlTags[2].title  = '<?php echo __( 'BOX:ピンク', THEME_NAME ); ?>';
	htmlTags[2].tag = '<?php echo $before.$after; ?>';
	htmlTags[2].before = '<?php echo $before; ?>';
	htmlTags[2].after = '<?php echo $after; ?>';

	<?php //ブルータブ
	$before = '<div class="title-box box-blue"><div class="box-title title-blue">Check</div>a';
	$after = '</div>';
	?>
	htmlTags[3] = new Array();
	htmlTags[3].title  = '<?php echo __( 'BOX:ブルー', THEME_NAME ); ?>';
	htmlTags[3].tag = '<?php echo $before.$after; ?>';
	htmlTags[3].before = '<?php echo $before; ?>';
	htmlTags[3].after = '<?php echo $after; ?>';

	<?php //茶色タブ
	$before = '<div class="title-box box-brown"><div class="box-title title-brown">Check</div>a';
	$after = '</div>';
	?>
	htmlTags[4] = new Array();
	htmlTags[4].title  = '<?php echo __( 'BOX:茶色', THEME_NAME ); ?>';
	htmlTags[4].tag = '<?php echo $before.$after; ?>';
	htmlTags[4].before = '<?php echo $before; ?>';
	htmlTags[4].after = '<?php echo $after; ?>';

	<?php //2カラムレイアウト
	$before = '<div class="column-wrap column-2"><div class="column-left"><p>';
	$after = '</p></div><div class="column-right"><p>'.$right_msg.'</p></div></div>';
	?>
	htmlTags[5] = new Array();
	htmlTags[5].title  = '<?php echo __( '2カラム', THEME_NAME ); ?>';
	htmlTags[5].tag = '<?php echo $before.$left_msg.$after; ?>';
	htmlTags[5].before = '<?php echo $before; ?>';
	htmlTags[5].after = '<?php echo $after; ?>';

  <?php //2カラムレイアウト(1:2)
  $before = '<div class="column-wrap column-2 column-2-3-1-2"><div class="column-left"><p>';
  $after = '</p></div><div class="column-right"><p>'.$right_msg.'</p></div></div>';
  ?>
  htmlTags[6] = new Array();
  htmlTags[6].title  = '<?php echo __( '2カラム(1:2, |□|□□|)', THEME_NAME ); ?>';
  htmlTags[6].tag = '<?php echo $before.$left_msg.$after; ?>';
  htmlTags[6].before = '<?php echo $before; ?>';
  htmlTags[6].after = '<?php echo $after; ?>';

  <?php //2カラムレイアウト(2:1)
  $before = '<div class="column-wrap column-2 column-2-3-2-1"><div class="column-left"><p>';
  $after = '</p></div><div class="column-right"><p>'.$right_msg.'</p></div></div>';
  ?>
  htmlTags[7] = new Array();
  htmlTags[7].title  = '<?php echo __( '2カラム(2:1, |□□|□|)', THEME_NAME ); ?>';
  htmlTags[7].tag = '<?php echo $before.$left_msg.$after; ?>';
  htmlTags[7].before = '<?php echo $before; ?>';
  htmlTags[7].after = '<?php echo $after; ?>';

  <?php //2カラムレイアウト(1:3)
  $before = '<div class="column-wrap column-2 column-2-4-1-3"><div class="column-left"><p>';
  $after = '</p></div><div class="column-right"><p>'.$right_msg.'</p></div></div>';
  ?>
  htmlTags[8] = new Array();
  htmlTags[8].title  = '<?php echo __( '2カラム(1:3, |□|□□□|)', THEME_NAME ); ?>';
  htmlTags[8].tag = '<?php echo $before.$left_msg.$after; ?>';
  htmlTags[8].before = '<?php echo $before; ?>';
  htmlTags[8].after = '<?php echo $after; ?>';

  <?php //2カラムレイアウト(3:1)
  $before = '<div class="column-wrap column-2 column-2-4-3-1"><div class="column-left"><p>';
  $after = '</p></div><div class="column-right"><p>'.$right_msg.'</p></div></div>';
  ?>
  htmlTags[9] = new Array();
  htmlTags[9].title  = '<?php echo __( '2カラム(3:1, |□□□|□|)', THEME_NAME ); ?>';
  htmlTags[9].tag = '<?php echo $before.$left_msg.$after; ?>';
  htmlTags[9].before = '<?php echo $before; ?>';
  htmlTags[9].after = '<?php echo $after; ?>';

  <?php //3カラムレイアウト
  $before = '<div class="column-wrap column-3"><div class="column-left"><p>';
  $after = '</p></div><div class="column-center"><p>'.$center_msg.'</p></div><div class="column-right"><p>'.$right_msg.'</p></div></div>';
   ?>
  htmlTags[10] = new Array();
  htmlTags[10].title  = '<?php echo __( '3カラム', THEME_NAME ); ?>';
  htmlTags[10].tag = '<?php echo $before.$left_msg.$after; ?>';
  htmlTags[10].before = '<?php echo $before; ?>';
  htmlTags[10].after = '<?php echo $after; ?>';

  <?php //検索
  $before = '<div class="search-form"><div class="sform">';
  $after = '</div><div class="sbtn">'.__( '検索', THEME_NAME ).'</div></div>';
   ?>
  htmlTags[11] = new Array();
  htmlTags[11].title  = '<?php echo __( '検索フォーム風', THEME_NAME ); ?>';
  htmlTags[11].tag = '<?php echo $before.$keyword_msg.$after; ?>';
  htmlTags[11].before = '<?php echo $before; ?>';
  htmlTags[11].after = '<?php echo $after; ?>';

	<?php
	echo '</script>';
}
endif;

引用:Cocoonタブボックスのタイトルをビジュアルエディタで変更したい!コピペカスタマイズ | ビバ★りずむ

以上です。

私はコピペしただけで理屈がよくわかっていないので、詳しくは引用元のサイトをご覧ください。

上記以外に、ボックスの色の変更ができるCSSなども公開されています。

タグ

ビジュアルエディタの「タグ」欄にBOXという項目が増えています

この部分の色も変えられるみたいです

色は今回変えませんでしたが、文字列を変えられるようになりました

Check灰色

a

Checkピンク

a

Checkブルー

a

Check茶色

a

5種類の文字列を変えられるボックスを手に入れました。

まとめ

ただでさえ有料級の無料テーマ「Cocoon」が、これでまた一歩最強に近づきました。

コピペで簡単に設定できるので、ぜひ今回の記事や今回紹介したサイトを参考に設定してみてください。

というわけで、今回は以上です。

では。

コメント

  1. 松千代 より:

    こんにちは。
    松千代です。
    ボックスが欲しいと想いっていたところです。また、そのボックスの色なども変えられるようにできるのですね。
    少しずつ勉強していきたいと思います。
    記事にしていいただき、どうもありがとうございます。

    • zaipon zaipon より:

      松千代さん、こんにちは。
      コメントありがとうございます。

      Cocoon用のカスタマイズなので、
      もしかしたら、松千代さんが使ってるテーマでは使えないかもしれないので、
      注意してください(>_<)