Cocoonユーザーさんに
やりたいカスタマイズがあれば、お問い合わせよりお待ちしてます。
または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。

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

スポンサーリンク

Cocoon拡張スタイル『タグ』欄にタイトル変更Checkボックスを追加したカスタマイズ

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

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

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

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

スポンサーリンク
スポンサーリンク

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

タグ欄にBOX追加

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

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

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

Check←ここ編集可能

a

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

Check

a

Check

a

Check

a

Check

a

Check

a

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

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

うえで紹介したデザインになるCSSは以下の通りです。子テーマのstyle.csseditor-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!

a

  • ピンク色に差し替える場合の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にコピペしてください。

//タグ追加 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 //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[6] = new Array();
	htmlTags[6].title  = '<?php echo __( '3カラム', THEME_NAME ); ?>';
	htmlTags[6].tag = '<?php echo $before.$left_msg.$after; ?>';
	htmlTags[6].before = '<?php echo $before; ?>';
	htmlTags[6].after = '<?php echo $after; ?>';

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

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

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

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

軽く説明

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

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

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

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

7の次に8としてbefore・afterのピンク色のコードはHTMLです。

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

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

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

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

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

さいごに

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

❦ For You ❦

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

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

コメント

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております❦

トップへ戻る