スキンのカスタマイズは、CSSを変更することにより可能ですが、「設定ごとにCSSを書くのは大変」という場合は、スキン側から「Cocoon設定」の設定値を制御することが可能です。
変更するファイルの種類は、PHPファイル、CSVファイル、JSONファイルがあります。
今回は、Cocoonのスキン「スキンからオプション変更サンプル（JSON） 」を使用して設定を変更してみます。
スキンフォルダ直下のoption.jsonファイルを編集する
Cocoonのスキン「スキンからオプション変更サンプル（JSON） 」の場合は、すでにoption.jsonファイルが存在しますが、他のスキンの場合は、option.jsonファイルを作成します。
JSONファイルは「UTF-8」の文字コードが編集できるエディターで編集します。
ファイルの場所は、以下です。
「wp-content/themes/cocoon-master/skins/skin-demo-json/option.json」
WinSCPなら、サーバのファイルを直接編集できます。
ファイルの内容は以下の通りです。
{
“site_key_color”:”#19458E”,
“site_key_text_color”:”#fff”,
“header_layout_type”:”center_logo_slim”,
“tagline_position”:”header_bottom”,
“site_font_size”:”18px”,
“site_background_color”:”#e6efff”,
“site_font_family”:”meiryo”,
“site_font_weight”:”500″,
“sidebar_position”:”sidebar_right”,
“site_date_format”:”Y-m-d”,
“header_area_height”:”200″,
“other_analytics_head_tags”:””,
“appeal_area_display_type”:”front_page_only”,
“appeal_area_height”:”300″,
“appeal_area_image_url”:”https://im-cocoon.net/wp-content/uploads/denim.jpg”,
“appeal_area_background_color”:”#19458E”,
“appeal_area_title”:”スキンから入力したタイトル”,
“appeal_area_message”:”スキンから入力したアピールエリアメッセージです。”,
“appeal_area_button_message”:”スキンボタンキャプション”,
“appeal_area_button_url”:”https://wp-cocoon.com/”,
“appeal_area_button_background_color”:”#19458E”,
“entry_card_type”:”vertical_card_2″,
“entry_card_border_visible”:”1″,
“category_tag_display_type”:”one_row”,
“related_entry_type”:”vertical_card_3″,
“related_entry_count”:”9″,
“post_navi_type”:”square”,
“single_breadcrumbs_position”:”main_before”,
“page_breadcrumbs_position”:”main_before”
}
変更前のスキンの内容は以下の通りです。
カラーの変更
カラーの「#19458E」を「#9cadf7」に変更してみます。
結果は以下です。
右サイドバーを左に変更
“sidebar_position”:”sidebar_right”,」を「”sidebar_position”:”sidebar_left”,」に変更します。
kekkaは以下です。
サイドバーの左右変更やカスタマイズはCocoonの設定でも可能です。
以下の投稿ページを参考にしてください。
