フロントページのメインビジュアルに、プラグイン「grayish MV add」を使用中!詳しくはここをClick!
PR

スキン制御について

確認・注意事項
記事内に広告が含まれています。

grayishはCocoon設定のデザイン・レイアウトに関する項目について、多数箇所スキン制御しています。

Cocoon設定の各タブ内で、以下画像にあるように「スキン制御」が表示され、ピンクの枠で囲まれている箇所のことになります。

スキン制御となっている箇所は、Cocoon設定では変更できません。

スポンサーリンク

スキン制御の方法

スキンフォルダの下にある、option.csvというファイルで行っています。

公式サイトの以下の方法になります。

スキン制御を外したい時

スキン制御を外したい場合はoption.csvの該当行について、行頭にカンマを2つ以上入力することでコメントアウト相当となります。

option.csvはテーマファイルエディターでは編集できないようです。(ファイルが表示されない)

FTPツールやお使いのサーバーのファイルマネージャーなどで各自のPCにoption.csvをダウンロードし、コピー(バックアップ)をとってから編集しましょう。

変更後のoption.csvを再びFTPツール等でスキンフォルダの下にアップすることで、変更が反映されます。

スキン制御を外すとレイアウト崩れなど起きる可能性があります。その場合は申し訳ありませんが、自己責任で対応いただきますよう、お願いいたします。

スキン制御とは

本来ユーザーが自由に変更できるようになっている設定を、スキン開発者が項目選択したり、値を決定している部分になります。

スキン開発の目線では、全ての機能を考慮してCSS等を用意する必要がなくなり、開発効率が向上します。(※Cocoonは多機能なので、全ての設定に合わせてスキン制作するのはとても大変です)

ユーザー目線では、この設定は決められてしまってるんだ・・・と制限がかかる感じになります。

ユーザー目線だとあまり好ましくない感じがしますが(?)設定を自由に選べるということは、それぞれについて機能を調べ、確認する作業が発生するということでもあります。

全ての内容について確認していると、本来のブログ執筆の前に挫折してしまう可能性もあると思います。

まずはスキン制御の状態で運営してみて、ここはやっぱり変えたい!という箇所がでてきたら、各自でスキン制御を変更して、CSSでカスタマイズにチャレンジしていく流れをおすすめします!

なお、CSSでカスタマイズする為にはある程度HTML/CSSについて学習が必要となります。
(PHP利用はより一層学習必要)

ななふ
ななふ

ネットにはコピペでOK!のコードが沢山ありますが、思ったような結果にならないこともよくあります・・・

スキン制御についてもっと!参考記事

Cocoonの公式サイトのスキンに関する記事です。

Cocoon設定のスキン制御ありのタブ

以下の部分についてスキン制御しています。
※不具合修正などで予告なく内容を変更する場合があります。

スキン制御ありのタブ名
  • 全体
  • ヘッダー
  • カラム
  • インデックス
  • 投稿
  • 本文
  • 目次
  • SNSシェア
  • SNSフォロー
  • 画像
  • ブログカード
  • 通知
  • アピールエリア
  • フッター
  • ボタン
  • モバイル

以下より各タブの詳細になります。

全体

設定値に関して共通事項

設定値がハイフン”-“の箇所はcsvでは値を設定していません。
初期値からの変更を想定していない項目になります。

サイトフォントについて、以下のようにサイズを固定しています。

PC時のサイトフォント:16px
モバイルサイトフォント:14px

サイトアイコンフォントについて、

Font Awesome 5で固定しています。

こちらはfunctions.phpでオーバーライドしています。

grayishはFont Awesome 5の使用前提でデザインしているので、この設定は変更しないでください。

Cocoon設定の項目名option.csv設定値設定値補足
キーカラー(サイトキーカラー)site_key_colorテキストのカラー設定はテーマカスタマイザーで行う
キーカラー(サイトキーテキストカラー
)
site_key_text_colorテキストのカラー設定はテーマカスタマイザーで行う
サイトフォント(文字色)site_text_colorテキストのカラー設定はテーマカスタマイザーで行う
サイトフォント(文字サイズ)site_font_size16pxPC時文字サイズ
モバイルサイトフォントmobile_site_font_size14pxモバイル時文字サイズ
文字の太さsite_font_weight400
サイト背景画像site_background_image_url
サイト幅の均一化align_site_width0
サイドバーの表示状態sidebar_display_typeno_display_index_pagesインデックスページでサイドバー非表示
サムネイル表示all_thumbnail_visible1
サイト背景色site_background_color#ffffffサイトの背景色は白
サイトリンク色site_link_colorテキストのカラー設定はテーマカスタマイザーで行う
サイドバーの位置sidebar_positionsidebar_rightサイドバー右

ヘッダー

Cocoon設定の項目名option.csv設定値設定値補足
ヘッダーレイアウトheader_layout_typecenter_logo_slim_top_menu
ヘッダーの固定header_fixed0
高さheader_area_heightスキン独自制御
高さ(モバイル)mobile_header_area_heightスキン独自制御
ヘッダー背景画像

背景画像の全てを表示
header_size_background_image_aspect_ratio0
ヘッダー全体背景色header_container_background_colorテーマカスタマイザーで設定する
ヘッダー全体文字色header_container_text_colorテーマカスタマイザーで設定する
ロゴエリア背景色header_background_color
ロゴ文字色
header_text_colorテキストのカラー設定はテーマカスタマイザーで行う
グローバルナビ色


global_navi_background_color
テーマカスタマイザーで設定する
グローバルナビ文字色

global_navi_text_colorテキストのカラー設定はテーマカスタマイザーで行う
グローバルナビメニュー幅(トップメニュー幅)global_navi_menu_widthスキン独自制御
メニュー幅をテキストに合わせるglobal_navi_menu_text_width_enableスキン独自制御
サブメニュー幅global_navi_sub_menu_widthスキン独自制御

カラム

カラムに関しては全てスキン制御しています。

Cocoon設定の項目名option.csv設定値設定値補足
コンテンツ幅main_column_contents_width
860スキン独自制御
コンテンツ余白幅
main_column_padding
28スキン独自制御
コンテンツ枠線幅

main_column_border_width
0スキン独自制御
コンテンツ枠線色main_column_border_color
サイドバー幅sidebar_contents_width
300スキン独自制御
サイドバー余白幅sidebar_padding20スキン独自制御
サイドバー枠線幅sidebar_border_width
0スキン独自制御
サイドバー枠線色sidebar_border_color
カラム間の幅main_sidebar_margin20スキン独自制御

インデックス

インデックスタブの投稿関連情報の表示で、投稿者名は表示しないにしています。

※セキュリティプラグインで適切にユーザー名の変更が行われていない場合、投稿者名の表示で WordPressのユーザーIDが表示される可能性があるため、他の設定タブでも投稿者名は表示OFFにしています。

Cocoon設定の項目名option.csv設定値設定値補足
カードタイプentry_card_typevertical_card_3縦型
カードタイプ:スマホ端末で縦型&タイル型のエントリーカードを1カラムにするsmartphone_entry_card_1_columnスキン独自制御
枠線の表示entry_card_border_visible0スキン独自制御
自動生成抜粋文字数entry_card_excerpt_max_length
100スキン独自制御
投稿関連情報の表示(
投稿者名の表示
entry_card_post_author_visible0スキン独自制御

投稿

Cocoon設定の項目名option.csv設定値設定値補足
カテゴリー・タグ表示category_tag_display_typetwo_rowsカテゴリー・タグ2列
カテゴリー・タグ表示位置category_tag_display_positioncontent_bottom本文下(デフォルト)
関連記事の表示related_entries_visible1常に表示
表示タイプrelated_entry_typevertical_card_4縦型
枠線の表示related_entry_border_visible0スキン独自制御
最大自動生成抜粋文字数related_excerpt_max_length
120スキン独自制御
投稿関連情報の表示(投稿者名の表示)related_entry_card_post_author_visible0スキン独自制御
ページ送りナビ表示post_navi_visible1常に表示
ページ送りナビ
表示タイプ
post_navi_typedefault(v1.0.5より追加)
枠線の表示post_navi_border_visible0スキン独自制御
パンくずリストの配置single_breadcrumbs_positionmain_before
メインカラム手前

固定ページ

Cocoon設定の項目名option.csv設定値設定値補足
パンくずリストの配置page_breadcrumbs_positionmain_beforeメインカラム手前
記事タイトルpage_breadcrumbs_include_post1固定ページのパンくずリストに対して、表示されているページのタイトルを含める

本文

Cocoon設定の項目名option.csv設定値設定値補足
投稿関連情報(
投稿者名の表示
post_author_visible0表示しない

目次

目次表示の深さをH3までとしています。
ウィジェットでの表示も同様になります。

Cocoon設定の項目名option.csv設定値設定値補足
目次表示の深さtoc_depth3H3まで表示
目次の中央表示toc_position_center1スキン独自制御

SNSシェア

SNSシェアボタン(トップ・ボトム)は、投稿・固定ページのみ表示可能です。

Cocoon設定の項目名option.csv設定値設定値補足
トップシェアボタン表示ページ(
フロントページ(インデックスページ)
sns_front_page_top_share_buttons_visible
トップシェアボタン表示ページ(カテゴリー)sns_category_top_share_buttons_visible
トップシェアボタン表示ページ(タグ)sns_tag_top_share_buttons_visible
トップシェアボタン
ボタンカラー
sns_top_share_button_colorbrand_color_white
トップシェアボタン
カラム数
sns_top_share_column_count6
トップシェアボタン
ロゴ・キャプション配置
sns_top_share_logo_caption_positionhigh_and_low_lc
トップシェアボタン
シェア数の表示
sns_top_share_buttons_count_visible0
ボトムシェアボタン
表示ページ(
フロントページ(インデックスページ)
sns_front_page_bottom_share_buttons_visible
ボトムシェアボタン表示ページ(カテゴリー)sns_category_bottom_share_buttons_visible
ボトムシェアボタン表示ページ(タグ)sns_tag_bottom_share_buttons_visible
ボトムシェアボタン
ボタンカラー
sns_bottom_share_button_colormonochrome
ボトムシェアボタン
カラム数
sns_bottom_share_column_count6
ボトムシェアボタン
ロゴ・キャプション配置
sns_bottom_share_logo_caption_positionleft_and_right
ボトムシェアボタン
シェア数の表示
sns_bottom_share_buttons_count_visible0

SNSフォロー

SNSフォローボタンは、投稿・固定ページのみ表示可能です。

Cocoon設定の項目名option.csv設定値設定値補足
フォローボタン表示ページ(
フロントページ(インデックスページ)
sns_front_page_follow_buttons_visible
フォローボタン表示ページ(カテゴリー)sns_category_follow_buttons_visible
フォローボタン表示ページ(タグ)sns_tag_follow_buttons_visible
フォローボタン
ボタンカラー
sns_follow_button_colormonochrome
フォローボタン
フォロー数の表示
sns_follow_buttons_count_visible0

画像

Cocoon v2.7.0より、
アイキャッチの中央寄せ
アイキャッチをカラム幅に引き伸ばす
のスキン制御を外しました。

Cocoon設定の項目名option.csv設定値設定値補足
アイキャッチラベルを表示するeyecatch_label_visible1表示
アイキャッチの中央寄せeyecatch_center_enable0OFF
アイキャッチをカラム幅に引き伸ばすeyecatch_width_100_percent_enable0OFF
画像の囲み効果image_wrap_effectnoneOFF

ブログカード

Cocoon設定の項目名option.csv設定値設定値補足
内部ブログカード
サムネイルスタイル
internal_blogcard_thumbnail_styleleft
内部ブログカード
日付表示
internal_blogcard_date_typeup_date更新日。
更新日がない場合は投稿日が表示される
外部ブログカード
サムネイルスタイル
external_blogcard_thumbnail_styleleft

通知

Cocoon設定の項目名option.csv設定値設定値補足
通知タイプnotice_typewarning(v1.0.5で追加)
通知エリア背景色notice_area_background_colorテーマカスタマイザーで設定
通知エリア文字色notice_area_text_colorテーマカスタマイザーで設定

アピールエリア

Cocoon設定の項目名option.csv設定値設定値補足
ボタン色appeal_area_button_background_colorテーマカスタマイザーで設定

フッター

Cocoon設定の項目名option.csv設定値設定値補足
フッター背景色footer_background_colorスキン独自制御
フッター文字色footer_text_colorスキン独自制御
フッター表示タイプfooter_display_typelogo_enableロゴありに固定
フッターメニュー幅footer_navi_menu_widthスキン独自制御
フッターメニュー幅
メニュー幅を均一にせずにテキスト幅で設定
footer_navi_menu_text_width_enable1

ボタン

Cocoon設定の項目名option.csv設定値設定値補足
ボタンのアイコンフォントgo_to_top_button_icon_fontfa-angle-double-upトップへ戻るボタンにアイコンフォントを使用しない。スキン独自ボタン
ボタン背景色go_to_top_background_colorスキン独自制御
ボタン文字色go_to_top_text_colorスキン独自制御

モバイル

Cocoon設定の項目名option.csv設定値設定値補足
モバイルメニューmobile_button_layout_typeheader_and_footer_mobile_buttons
ヘッダー・フッターモバイルボタン

モバイルボタンの固定表示
fixed_mobile_buttons_enable0固定表示せず、スクロールするとモバイルボタンが隠れます。

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