Cocoonタブボックスのタイトルをビジュアルエディタで変更したい！コピペカスタマイズ

Cocoonカスタマイズ

2019.06.08

Cocoon拡張機能、スタイル欄にあるボックス（タブ）。管理画面ビジュアルエディタ上で『CHECK・ポイント・メモ』などのタイトルを『○○ポイント！』など自由に変更出来たら便利ですよね。

さらにCocoon機能のタグ欄でまかなえたら、プラグインも減り更に軽量化できるサイト運営者さんもいるのでは？？

Cocoon風タグボックスを1種類（色変更イメージは＋4種）・シンプルなタブボックス5種類を準備しました。

子テーマfunctions.phpと任意のCSSをコピペし、管理投稿画面ビジュアル上にあるタグ欄から選択しタブボックスのタイトルを気ままに・快適に編集して記事作成にはげんでいただけたらと思います。

タブボックスのデザインと機能について
ボックスの装飾：スタイル、子テーマCSSにコピペ
1. Cocoon風！文字変更・可能ボックスの説明・色の差し替えイメチェン
投稿画面ビジュアルでタイトル変更可能ボックスをCocoon拡張スタイルに追加
1. 軽く説明
さいごに

タブボックスのデザインと機能について

タグ欄にBOX追加

1つ目がCocoon風のチェックボックス。元々ビジュアルエディタ上にある『スタイル』欄から設置できるのでタブ欄から選択できるのは1種類だけ。

ただご自身で好きな色に変更したいかもしれないので、＋4種類のスタイルを準備しました。※後述

管理画面上からタイトル部分のタブを編集したい場合に使えるようにしてます。以下のようなスタイル。Cocoon仕様ですね。

Check←ここ編集可能

以下の5種類はCocoon投稿ビジュアルの上にあるタブ欄からすべて選択できるよう、コピペカスタマイズで準備済み。

Check

こんな感じCheck覧は、全部ビジュアルエディタ上で編集可能
ボックス内のaについて
- これがないと、ビジュアル上から編集できないので仕込みました＾＾；
はじめのCocoon風タグボックスだけ、ボックスの外側へ改行しない（ボックス内にカーソルが残る仕様だった）ため
- divの囲いの下に段落pタグを挿入※一段と余白が大きいと思ったら段落です。
PCタブレットサイズで閲覧時は左右に余白あり
- スマホビューでは左右の余白は無し

ボックスの装飾：スタイル、子テーマCSSにコピペ

うえで紹介したデザインになるCSSは以下の通りです。子テーマのstyle.css・editor-style.cssにコピペしてください。

スマホ以外481px以上のメディアクエリの項目はAMPでは不要だと思えばamp.cssにコピペ後メディアクエリ部分は削除してくださいね。

以下を3種類のCSSにコピペどうぞ。

/*
 * 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風！文字変更・可能ボックスの説明・色の差し替えイメチェン

タイトルのフォント色と背景色・ボックスの枠の色を変更するだけで、ボックスのイメージがかわるので、ブログのイロにあった装飾に変更してくださいね。

タブ内の文字列は、投稿エディタ・ビジュアル上で変更OK！

Check←文字変更OK！

ピンク色に差し替える場合のcolorコード付き

可愛いピンクに

ボックスの色をピンクに。

可愛いイメージにするには以下の色#hoge**を差し替えてください❦

/*
 * Cocoon風タブボックス *
 ***********************/
/* タイトル */
.title-simple {
	background: #f278a4; /* 背景ピンクに差し替え */
}
/* BOX */
.box-simple {
	border: 1px solid #ffcbde; /* 枠ピンクに差し替え */
}

ブルーに変更

青に変更する？

ブルーに変更

リストは（はじめだけ）コピペすることで、改行もスラスラできる！

/*
 * Cocoon風タブボックス *
 ***********************/
/* タイトル */
.title-simple {
	background: #3847fa; /* 背景ブルーに差し替え */
}
/* BOX */
.box-simple {
	border: 1px solid #a0a8ff; /* 枠ブルーに差し替え */
}

ブラウンに

コツ！

リストを青く反転後チェックボックスを付けたら
- ボックス上下にリストが残ってしまう
はじめのリストはコピペして使ってください。

/*
 * Cocoon風タブボックス *
 ***********************/
/* タイトル */
.title-simple {
	background: #bb5f03; /* 背景ブラウンに差し替え */
}
/* BOX */
.box-simple {
	border: 1px solid #efb072; /* 枠ブラウンに差し替え */
}

グリーンに

自由度がたかい

コツさえつかめば、タブ内の文字列は変えたい放題ってわけです❦

ちなみに。この緑が良い場合は以下を差し替えて、使ってください

/*
 * Cocoon風タブボックス *
 ***********************/
/* タイトル */
.title-simple {
	background: #4CAF50; /* 背景グリーンに差し替え */
}
/* BOX */
.box-simple {
	border: 1px solid #9dd9a0; /* 枠グリーンに差し替え */
}

投稿画面ビジュアルでタイトル変更可能ボックスをCocoon拡張スタイルに追加

CSSの貼り付けてもHTMLタグが無いと元も子もないので、子テーマfunctions.phpにコピペしてください。

2カラム（1:1, ｜□｜□｜)　などが増えたので2018/10/19に対応。
トグルボックス・ふりがなが増えたので対応2019/06/08

//タグ追加 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 //２カラムレイアウト
	$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 //２カラムレイアウト（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: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 //２カラムレイアウト（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 //２カラムレイアウト（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 //トグルボックス
  $before = '<div class="toggle-wrap"><input id="toggle-checkbox-COCOON_DATE_ID" class="toggle-checkbox" type="checkbox"><label class="toggle-button" for="toggle-checkbox-COCOON_DATE_ID">'.__( 'トグルボックス見出し', THEME_NAME ).'</label><span class="toggle-content">';
  $after = '</span></div>';
  ?>
  htmlTags[12] = new Array();
  htmlTags[12].title  = '<?php echo __( 'トグルボックス', THEME_NAME ); ?>';
  htmlTags[12].tag = '<?php echo $before.__( 'トグルボックス内容', THEME_NAME ).$after; ?>';
  htmlTags[12].before = '<?php echo $before; ?>';
  htmlTags[12].after = '<?php echo $after; ?>';

  <?php //ふりがな
  $before = '<ruby>';
  $after = '<rt>'.__( 'ふりがな', THEME_NAME ).'</rt></ruby>';
  ?>
  htmlTags[13] = new Array();
  htmlTags[13].title  = '<?php echo __( 'ふりがな', THEME_NAME ); ?>';
  htmlTags[13].tag = '<?php echo $before.__( '振り仮名', THEME_NAME ).$after; ?>';
  htmlTags[13].before = '<?php echo $before; ?>';
  htmlTags[13].after = '<?php echo $after; ?>';

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

変な文字列が1文字でも入るとエラーが出ます。子テーマfunctions.phpのバックアップをとってから編集してくださいね。

/your-domain.com（/public_html）/wp-content/themes/cocoon-child-masterフォルダ内にfunctions.phpがあります。

このように最後までキチンとコピペを！

サーバーにある『ファイルマネージャー』で直接貼り付ければOK！

実装後。管理画面ビジュアルではこんな感じ

軽く説明

lib/tinymce/html-tags.phpファイルの一部項目を編集してます。00000と縦に並んでいるのが並び順です。上記コードを見ると0,1,2,3,4,5,6,7…11まであります。

11が以下のとおり。12を作成することも可能です。

<?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 //灰色タブ $before = '<div class="title-box box-gray"><div class="box-title title-gray">Check</div>a'; $after = '</div>'; ?> htmlTags[12] = new Array(); htmlTags[12].title = '<?php echo __( 'BOX:灰色', THEME_NAME ); ?>'; htmlTags[12].tag = '<?php echo $before.$after; ?>'; htmlTags[12].before = '<?php echo $before; ?>'; htmlTags[12].after = '<?php echo $after; ?>';
11の次に12としてbefore・afterのピンク色のコードはHTMLです。

HTMLだけでなく文字列も半角ローマ字で書いてください。
並び順は11の次に12のカスタマイズがビジュアルエディタのタグ欄に反映されます。

並び順の変更も可能です。

2を5の位置に持ってくるのも0,1,2,3,4,5,6,7…の並び順にポチポチ変更

ちなみにスペースをタブに変更しました。コピペ中にスペースが文字化けして?や特殊文字のコードのような文字列が入りエラーが出て、エラーを探すのが面倒だったので。

あとはテスト環境で適当に触ってください。トライ&エラーでなるほど！と理解できますよ。

さいごに

記事作成で小さな装飾は、ページを見やすくする効果もありますもんね！

❦ For You ❦

管理画面のビジュアルエディタでタブボックスのタイトルを変更したい人へ届けばと思います。

それでは。かうたっくでした＾＾

Comments

moco より:

2019-05-14 9:48 午後

はじめまして！
ブログを始めたばかりの初心者ですが、タブボックスをカスタマイズする方法を探してこちらにたどり着きました。

早速で申し訳ないのですが質問させてください。
コードをありがたくコピペさせていただいたのですが、投稿の編集画面ではきちんと反映されているのに、なぜかプレビュー画面ではタブボックスが反映されません。
PCで編集したのですが、キャッシュクリアしてもスマホから見てもプレビュー画面では反映されませんでした。

投稿編集の画面では反映されているのでコードのコピペミスではないと思うのですが、「!important」で優先順位を上げるにもコードのどの部分に挿入すべきかがよく…（今のところ、コピペさせていただいたコード以外ではfunctions.phpにヘッダーのタイトルロゴを非表示にするものだけ使用しています）

お忙しいところ大変申し訳ありませんが、こちらのタブボックスをぜひ使いたいので、回答いただければと思います。よろしくお願いします。
かうたっくより:

2019-05-15 2:28 午前

mocoさんに。
はじめまして。

今子テーマのstyleをチェックしてみたのですが、

https://gyazo.com/b0b45afd0f3ab4d916be505b64a4460a

h　ttp://moco-useful.com/wp-content/themes/cocoon-child-master/style.css?ver=5.2&fver=20190502013427

このように2019年05月02日01時34分27秒に更新されてますが、それ以降は上記のとおりCSSが反映されてないんですね。

おそらくエックスサーバーのキャッシュあたりが影響してると思われます。

サーバーパネルの『高速化』にある、『サーバーキャッシュ設定』がonであれば、キャッシュ削除を行って反映されるかチェックしていただければ。と思います。
moco より:

2019-05-15 5:56 午後

こんにちは！
丁寧なお返事をありがとうございます。

コメントいただいてからエディターをよく確認したところ、なんとコードの貼り付けがeditor-style.css以外きちんと出来ていないことがわかりました…おそらく更新ボタンを押し忘れるという超初歩的ミスです。先ほど全てのCSSにコピペし直したところ、無事プレビュー画面でも反映されました。

最初にeditor-style.cssにコピペして、そのあと他２種類に貼り付けたのでコードチェックはeditor-style.cssでしかしていなかった（ここが合ってれば他も大丈夫のはず）という思い込みが気付くのに遅れた原因です…

自分でよく調べればわかったはずの事でお時間いただいてしまい申し訳ありませんでした。便利なコードをありがとうございます。これからもたくさん使わせていただきます。

ありがとうございました！
かうたっくより:

2019-05-15 7:43 午後

mocoさん、こんにちは❦

そうだったんですね＾＾
原因が分からない内はそうなるかも知れないですもん。

でも解決されたようで良かったです！

ちなみに
Cocoonはstyle.cssに追記するだけで、editor-styleもAMPを有効にしている場合も反映されるんですよ。
ユーザーさんの手間とか色々考慮してくれてて、ありがたいです。

色んな対応お疲れさまでした＾＾