このブログはCocoonで作成しました。
そのカスタマイズ備忘録として記事を書いています。
私自身が後々にブログデザインの変更をする際に役立つように・・・
どこをいじったのかを忘れないように・・・
https://yujiblog.org/（yuji blog.）の記事を参考にさせていただきました。
Cocoonスキン設定
こちらのBlog管理者さんのTwitter素敵な言葉と写真ばかりです。
スキン一覧の中から「ホワイトラーメン」を選択。
ホワイトラーメンの作者さんのサイトはこちら
ブログの全体のバランスを整える
「外観」→「テーマエディター」→「style.css」にコピペ
/************************************
https://yujiblog.org/cocoon-customization
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{/*すべてのイメージに影を*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
✔スタイルシートに入力するときの注意点
・編集前に必ずスタイルシートのバックアップを取る。
・編集するテーマが「CocoonChild」になっていることを確かめる。
・「@charset “UTF-8”;」から始まる1～7行目部分は消さない。
ヘッダーロゴのカスタマイズ
「Cocoon設定」から「ヘッダー」タブを選択、各項目を変更
「Cocoon設定」の「モバイル」タブを選択
モバイルメニュー
・ヘッダーモバイルボタン
モバイルボタン
・サイトヘッダーロゴを表示する
・モバイルボタン時コンテンツ下のサイドバーを表示
「外観」→「テーマエディター」→「style.css」にコピペ
/************************************
https://yujiblog.org/cocoon-header-logo
**ヘッダーロゴ
************************************/
@media screen and (max-width: 834px){/*トップページモバイルボタンの真下にスペースを作る*/
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
max-height:60px;
}
.logo {
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}
/************************************
**ヘッダー モバイル表示
************************************/
@media screen and (max-width: 1023px) and (min-width: 835px){/*835px以上で非表示にすると空白ができるので埋める*/
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
}}
@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{/*835px以上でモバイルヘッダーを非表示*/
display:none;
}
}
@media (max-width:834px){/*835px以上でヘッダーを非表示*/
.header-container {
display:none;
}
img.site-logo-image{/*モバイル表示ロゴ*/
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
}
ヘッダーメニュー（グローバルメニュー）を編集
ヘッダーメニューを選択
①「外観」→「メニュー」を開く
②メニュー名に【ヘッダーメニュー】と入力して「メニューを作成」をクリック
③「メニュー項目を追加」からメニューに並べたいコンテンツを複数選び、「メニューに追加」をクリック
※アイコンを付けたい場合は、FontAwesome4.7から選ぶ。
FontAwesomeでサイトマップのアイコンfa-sitemapを選んだ場合は
<i class="fa fa-sitemap" aria-hidden="true"></i>がコード。
デザインを整える
「外観」→「テーマエディター」→「style.css」にコピペ
/************************************
https://yujiblog.org/menu
** ヘッダーメニュー
************************************/
}
.navi-in > ul{
justify-content:flex-start;
}
.navi-in > ul .sub-menu a {
padding: 0;
}
.sub-menu{/*サブメニュー*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap {/*サブメニューを仕切る点線*/
border-top: dotted #dddddd;
background:#fff;
padding:0 0 0 2em;
margin:0;
}
.navi-in > ul .sub-menu a:hover {
transform: none!important;
}
div#header-container {/*ヘッダー下の影を非表示*/
box-shadow: none;
}
div.item-label{
font-weight:bold;
}
Cocoon設定で色と幅を変える
「ヘッダー」→「グローバルナビメニュー色/幅」
グローバルナビメニュー色
・グローバルナビ色…そのまま
・グローバルナビ文字色…#333333
グローバルナビメニュー幅
・メニュー幅をテキストに合わせる
『アピールエリア』のおしゃれなカスタマイズ
ヘッダー設定
WordPressメニュー→Cocoon設定→アピールエリアタブ
✔アピールエリア設定
▶アピールエリアの表示
・全ページで表示
▶高さ
・200
▶エリア画像
・なし
▶テキストエリア表示
・テキストメッセージエリアを表示する
▶タイトル
・なし
▶メッセージ
・なし
▶ボタンメッセージ
・表示したい文字を入力します。
▶ボタンリンク先
・リンク先のURLを入力します。
▶ボタンリンクの開き方
・同じタブで開く（_self）
通知エリアの下にアピールエリアが表示されるようになってしまうため
通知エリアの表示をOFFにしておくこと。
スタイルシートにコードをコピペ
「外観」→「テーマエディター」→「style.css」にコピペ
/************************************
https://yujiblog.org/wordpress-appeal-area
** アピールエリア
************************************/
.appeal{
padding:.1em 0 .2em;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
padding:0;
min-height:0px;
max-height:30px;
}
div.appeal-content{
padding:0;
}
.appeal-content{
background-color:#8b968d; /*背景の色をここで変更します*/
margin:auto;
max-width:100%;
}
a.appeal-button {
color: #fff!important;
font-size:.85em;
font-weight:normal;
box-shadow: none;
padding:0 23em 0;
margin:0;
max-width:100%;
font-weight:bold;
}
@media screen and (max-width: 1023px){
a.appeal-button {
padding:0 18em 0 ;
}}
@media screen and (max-width: 834px){
a.appeal-button {
padding:0 13em 0 ;
}}
@media screen and (max-width: 652px){
a.appeal-button {
padding:0 8em 0 ;
}}
@media screen and (max-width: 500px){
a.appeal-button {
padding:0 6em 0 ;
}}
@media screen and (max-width: 420px){
a.appeal-button {
padding:0 3em 0 ;
}}
.appeal-button:hover {
color: #fff!important;
transform:none;
box-shadow: none;
}
モバイル表示版ヘッダーの設定
「外観」→「テーマエディター」→「style.css」にコピペ
/************************************
https://yujiblog.org/cocoon-menu-mobile
**モバイル表示 ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
height:50px;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
color: #90C31F!important;
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fa.fa-search::before{
margin-left:1em;
color: #90C31F!important;
}
span.fa.fa-bars::before{
margin-right:1em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}
モバイル表示版ヘッダーメニュー（グローバルメニュー）の設定
「外観」→「テーマエディター」→「style.css」にコピペ
/************************************
https://yujiblog.org/cocoon-menu-mobile
**モバイル表示 ヘッダーメニュー
************************************/
span.fa.fa-close::before{/*戻るボタン*/
font-family: FontAwesome;
content: “\f060”;
}
.menu-content .menu-drawer {
padding: 0 1em;
margin:0;
}
ul.menu-drawer:before{
font-size:1.2em;
display: block;
font-weight: normal;
background: white;
color:#7b7b7b;
padding: .5em;
margin-bottom:1em;
font-family: sans-serif;
text-align: center;
border-bottom:3px dotted #90C31F;
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
background-color:#fff;
padding:0;
border-radius:20px;
}
.menu-drawer a{/*menuの文字色をグレー*/
font-size:1.5em;
background-color:#f7f7f7;
color:#afafb0!important;
margin: 6px 0;
padding: 4px 1em;
border-radius:20px;
}
.menu-drawer a:hover{
background-color:#90C31F!important;
color:#fffff4!important;
transition: 0.2s ;
}
.menu-drawer .sub-menu {
padding-left:30px;
margin-top:0;
}
@media (max-width:834px){
.sub-menu{
box-shadow: none!important;
}
}
『インデックスカード』のおしゃれなカスタマイズ
インデックス設定
WordPressメニューから「Cocoon設定」を開く。
「Cocoon設定」から「インデックス」タブを選択し、上から順に設定。
✔リスト設定
▶カードタイプ
・縦型カード2列
・スマホ端末で縦型＆タイル型のエントリーカードを1カラムにする
▶枠線の表示
・カードの枠線のチェックを外す
▶投稿関連情報の表示
・スニペット（抜粋）の表示
・スマホ端末でスニペットを表示（480px以下）
・投稿日の表示
・更新日が存在しない場合は投稿日を表示
・更新日の表示
スタイルシートにコードをコピペする
「外観」→「テーマエディター」→「style.css」へ以下のコードをコピペする。
/************************************
https://yujiblog.org/cocoon-index-card#toc3
**** インデックス
************************************/
a.entry-card-wrap.a-wrap.border-element.cf{/*カード本体*/
padding:0 0 .5em;
border-radius:10px;
width:48%;
margin-bottom:2em;
}
figure.entry-card-thumb.card-thumb.e-card-thumb{/*サムネイル大きさ*/
max-height:150px;
border-radius:10px 10px 0 0/ 10px 10px 0 0;
overflow:hidden;
display: flex;/*位置をflexで中心に*/
justify-content: center;
align-items: center;
}
.e-card-thumb .cat-label{/*カテゴリラベルを右に寄せる*/
margin-left:.8em;
}
@media screen and (max-width: 1100px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:120px;
}}
@media screen and (max-width: 1023px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:180px;
}}
@media screen and (max-width: 900px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:160px;
}}
@media screen and (max-width: 750px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:130px;
}}
@media screen and (max-width: 600px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:250px;
}
a.entry-card-wrap.a-wrap.border-element.cf{/*画面幅600pxまで、1カラムにする*/
margin:.5em 1em!important;
}
.ect-vertical-card .entry-card-wrap {
width: 95%!important;
}
}
@media screen and (max-width: 480px){/*カード本体*/
a.entry-card-wrap.a-wrap.border-element.cf{
margin:.5em 1em!important;
border-radius:10px;
}
.e-card-thumb .cat-label{/*カテゴリラベルを右に寄せる*/
margin-left:1em;
}}
@media screen and (max-width: 1023px){/*画面幅1023未満はカード本体に影を表示*/
div#list a {
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
}
@media screen and (min-width: 601px) and (max-width: 834px){/*通常記事本文の周囲の空白にも影響している*/
div#content.content.cf{
margin:1em;
}}
h2.entry-card-title.card-title.e-card-title{/*カードタイトル*/
font-size:18px;
color:#7b7b7b;
font-weight:bold;
text-align:center;
line-height:1.8em;
margin-top:3em;
margin-bottom:1em;
padding: 0 1.5em 0;
}
.entry-card-snippet.card-snippet.e-card-snippet{/*スニペット*/
font-size:14px;
color:#7b7b7b;
text-align:center;
border-top:3px dotted #90C31F;
line-height:1.8em;
padding-top:0.6em;
margin-left:2em;
margin-right:2em;
margin-bottom:4em;
max-height:20em;
}
@media (max-width:834px){
h2.entry-card-title.card-title.e-card-title{/*カードタイトル*/
font-size: 1.15em;
font-weight:bold;
line-height:1.7em;
padding: 1.5em .8em 1em;
margin:0;
}
.entry-card-snippet.card-snippet.e-card-snippet{/*スニペット*/
font-size:13px;
text-align:center;
border-top:3px dotted #79c06e;
line-height:1.8em;
padding:1em 0.5em 0;
margin: 0 1em 1.5em;
}
main.main, div.sidebar {/*モバイル表示などの本文全体の周りの空白にも影響している*/
padding:0;
}
}
a.entry-card-wrap.a-wrap.border-element.cf .post-date,
a.entry-card-wrap.a-wrap.border-element.cf .post-update{/*日付・更新日*/
margin-right:1.5em!important;
color:#7b7b7b;
font-size:.86em;
}
.eye-catch .cat-label, .cat-label{/*カテゴリラベル全体デザイン*/
font-size:.7em;
border-radius:10px;
margin:0.5em;
padding:0 0.5em 0;
background-color:#90C31F;
color:#fff;
}
div.admin-pv{/*閲覧数を非表示*/
display:none;
}
『サイドバー』のおしゃれなカスタマイズ
スタイルシートにコードをコピペする
「外観」→「テーマエディター」→「style.css」へ以下のコードをコピペする。
/************************************
https://yujiblog.org/cocoon-sidebar
** サイドバー
************************************/
.search-submit:hover::before{/* 検索エンジン */
color:#90C31F;/*検索ボタンホバー時の色*/
}
.widget_search{
padding-bottom:1em;
}
.sidebar h3{/*サイドバーのタイトル表記と緑の点線*/
color:#7b7b7b;
border-radius: 0%;
border-bottom:3px dotted;
border-color:#90C31F;
padding-bottom:0.3em;
margin-top:-0.5em;
margin-bottom:1em;
}
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {/* widgetsの中身*/
background-color:#f7f7f7;
color:#afafb0!important;
margin: 6px 0;
padding: 4px 10px;
border-radius:20px;
transition: 0.4s
}
.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover{/* widgetsの中身 hover */
background-color:#90C31F;
color:#fffff4!important;
}
.tagcloud a{/*tag cloud*/
background-color:#f7f7f7;
color:#afafb0!important;
}
.tagcloud a:hover{
background-color:#90C31F;
color:#fffff4!important;
transition: 0.4s ;
}
『記事タイトル』のおしゃれなカスタマイズ
ヘッダー設定
WordPressメニュー→Cocoon設定→投稿タブ→「カテゴリ・タグ表示設定」のみ編集
✔カテゴリ・タグ表示設定
▶カテゴリ・タグ表示
・カテゴリ・タグ1列
▶カテゴリ・タグ表示位置
・本文下（デフォルト）
スタイルシートにコードをコピペ
「外観」→「テーマエディター」→「style.css」へ以下のコードをコピペする。
/************************************
https://yujiblog.org/cocoon-h1
** 本文記事タイトル
************************************/
header.article-header.entry-header {
text-align:center;
}
.article-header h1 {
position: static;
font-size: 1.4em;
color: #333333;
background-color:#fff;
line-height:1.8em;
text-shadow: none;
margin:0;
padding: 2.3em .95em 1em;
}
.eye-catch{
box-shadow: 0px 3px 7px 0 rgba(0,0,0,.2);
}
.eye-catch img{
height:auto!important;
-webkit-filter:none;
filter:none;
opacity:1;
transform: none;
width: 100%;
}
a.cat-link, a.tag-link{
display: inline-block;
font-size:.6em;
border-radius:10px;
border:0;
margin:0.5em;
padding:0 0.5em 0;
background:#90C31F!important;
color:#fff!important;
word-break: break-all;
position: absolute;
}
.post-date,.post-update{/*日付・更新日*/
margin-right:.5em!important;
color:#7b7b7b;
font-size:.8em;
}
.date-tags{
font-size:0.9em;
color:#7b7b7b;
top:0;
right:0;
}
.cat-link{
top:3.7em;
left:3em;
transition:0.4s;
}
.tag-link{
top:3.7em;
left:14.5em;
transition:0.4s;
}
.tag-link:hover {
opacity: .5;
}
@media (max-width:1023px){
.date-tags{
top:.5em;
right:1em;
}
.cat-link{
top:2.3em;
left:3em;
}
.tag-link{
top:2.3em;
left:14.5em;
}
}
@media (max-width:834px){
.date-tags{
top:.6em;
right:.5em;
}
.cat-link{
top:.3em;
left:.5em;
}
.tag-link{
top:.3em;
left:12em;
}
}
@media (max-width:420px){
.article-header h1 {
font-size: 1.2em;
}
.date-tags{
top:.7em;
right:.2em;
}
.cat-link{
top:.4em;
left:.5em;
}
.tag-link{
top:.4em;
left:12em;
}
}
@media (max-width:834px){/*画面幅834px以下のとき、本文周りの空白を非表示*/
main.main, div.sidebar {
padding:0;
}}
@media screen and (min-width: 601px) and (max-width: 834px){/*画面幅601px以上834px以下のとき、本文周りの空白を表示*/
div#content.content.cf{
margin:1em;
}}
『見出し(H2～H5)』のおしゃれなカスタマイズ
スタイルシートにコードをコピペする
「外観」→「テーマエディター」→「style.css」へ以下のコードをコピペする。
/************************************
https://yujiblog.org/cocoon-h2-h3-h4-h5
** H2~H5
************************************/
.article h2, .article h3, .article h4, .article h5, .article h6{
padding: 0;
margin: 0;
font-size: medium;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: none;
position:relative;
}
.article h2:before {
background-image: none;
}
.article h2{
line-height:2;
background-color:#8b968d;
font-size: 24px;
color:#fff;
border-radius:2px;
padding:1em;
margin-top:70px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.3);
}
.article h3{
line-height:2;
font-size:20px;
border:none;
display:inline-block;
color:#333333;
border-radius:2px;
border-left:10px solid #8b968d;
padding: 0.4em 0.8em;
margin-top:50px;
margin-bottom:20px;
}
.article h4{
line-height:2;
background-color:#e8ece9;
font-size: 17px;
font-weight:normal;
color:#333333;
border-radius:1px;
padding:1.5em;
margin-top:20px;
margin-bottom: 20px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.1);
}
.article h5{
background: #f9fff4;/* 背景色 */
font-size: 17px;
font-weight:normal;
line-height:2;
color:#333333;
border-radius: 4px;
padding: 1.5em;
margin-left:0 auto;
border:2px dotted;
border-color:#90C31F; /* 線の色 */
margin-top:20px;
margin-bottom: 20px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.1);
}
@media (max-width:480px){/*スマホ表示*/
.article h2{
font-size:18px;
padding:1.5em 1em 1.5em 0.5em;
}
.article h3{
font-weight:bold;
margin-top:3em;
margin-bottom:0em;
font-size:17px!important;
}
.article h4, .article h5, .article h6{
font-size:15px!important;
}
}
『ブログカード』のおしゃれなカスタマイズ
ヘッダー設定
WordPressメニュー→Cocoon設定→ブログカードタブの編集
✔内部ブログカード設定
▶ブログカード表示
・コメント欄のブログカード表示を有効にする
スタイルシートにコードをコピペ
「外観」→「テーマエディター」→「style.css」へ以下のコードをコピペする。
/************************************
https://yujiblog.org/cocoon-blogcard
** ブログカード（本文挿入）
***********************************/
.blogcard {
border: 0px solid whitesmoke;
border-radius:4px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover{/*内部ブログカードのみhovershadowを非表示*/
box-shadow:none;
}
.internal-blogcard::after{
background-color:#8b968d!important;
}
.blogcard:before {/*ブログカード左上のアイコンを非表示*/
display:none;
}
.internal-blogcard::after{/** 続きを読む*/
content: ‘続きを読む \00bb’; /* 内部リンク右下枠の文言 */
position: absolute;
bottom: 0.5rem;
right: 0.7rem;
font-size: 70%;
background-color: #ffd242; /* 内部リンク右下枠の背景色 */
padding: .4em 3em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}
.blogcard-date{
display:none;
}
.blogcard-title { /* タイトル */
font-size:1em;
padding:.2em .2em 0;
line-height:1.4em;
text-align: justify;
}
.blogcard-snippet {
padding:0em .5em .3em;
color:#7b7b7b;
text-align: justify;
}
.blogcard-content.internal-blogcard-content{/*ブログカードタイトルの枠を大きくする*/
max-height:20em;
}
@media screen and (max-width: 1023px){
.blogcard-title {
padding:.3em .3em 0em .2em;
line-height:1.5em;
}
.blogcard-snippet {
font-size:.9em;
margin-top:.3em;
}
}
@media screen and (max-width: 960px){
.blogcard-title {
padding:.3em .3em .2em .2em;
line-height:1.5em;
}
.blogcard-snippet{
font-size:.8em;
max-height:15em;
}
}
@media screen and (max-width: 834px){
.blogcard-title {
font-size:1.1em;
padding:.2em .3em .5em .2em;
}
.blogcard-snippet {
font-size:.9em;
}
}
@media screen and (max-width: 740px){
.blogcard-title {
padding:.3em;
}
}
@media screen and (max-width: 673px){
.blogcard-title {
padding:.3em .5em 1em .2em;
line-height:1.8em;
}
.blogcard-snippet {
display:none;
}
}
@media screen and (max-width: 480px){
.blogcard-title {
padding:.1em .4em 0em .1em;
line-height:1.5em;
}
.blogcard-footer{
margin-top:1em;
}
}
『目次』のおしゃれなカスタマイズ
今回上手くカスタマイズできず変更しませんでしたが
参考のために載せました。
スタイルシートにコードをコピペする
「外観」→「テーマエディター」→「style.css」へ以下のコードをコピペする。
/************************************
https://yujiblog.org/table-of-contents
** 目次
************************************/
.toc-title{/*目次タイトルを太く*/
font-weight:bold;
color:#7b7b7b;
}
.toc-list > li a {/*小見出し（H2）*/
font-weight: bold;
color: #7b7b7b;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {/*小見出し（H2）の先頭につけるアイコン*/
font-family: FontAwesome;
content : “\f144“;
margin-right: 7px;
}
.toc-list > li li a {/*小見出し（H3）*/
font-weight: normal;
font-size: 95%;
color: #7b7b7b;
margin-top:0;
margin-left: 3em;
}
.toc-list > li li a::before {/*小見出し（H3）の先頭につける「・」*/
content: ”;
width: 8px;
height: 8px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #90C31F;/*ここで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}
@media (max-width:880px){/*モバイル表示*/
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -2em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc{/*枠に影を付けます*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.15);
}
※小見出し（H2）の先頭につけるアイコンは、FontAwesome4.7から選ぶ。
ヘッダーロゴ
・「選択」から表示する画像をアップロードします。（背景透過がおすすめです）
ヘッダーロゴサイズ
・横幅のみ入力します。ページを確認しつつ微調整します。
キャッチフレーズの配置
・表示しない
ヘッダー背景画像
・なし
ヘッダーレイアウト
・センターロゴ（デフォルト）
ヘッダーの固定
・チェックしない
高さ
・なし
高さ（モバイル）
・なし