ヘッダーデザイン

/*スマホだけ文字小さく*/
@media (max-width: 639px) {
	body {
		font-size: 90%!important;
	}
}



/*--------------------
ヘッダーエリアの変更：グローバルナビ
---------------------*/
/*ヘッダメニュー背景色*/
.l-1row-header, .l-header__content{background-color: #0075c1!important;}

/*リンク色変更*/
.p-global-nav a:link{color:#FFFFFF;}
.p-global-nav a:visited{color:#FFFFFF;}
.p-global-nav a:hover{color:#0093ff;}
.p-global-nav a:active{color:#FFFFFF;}

/*メニューオーバーレイ*/
.l-header__content{
	background:rgba(255, 255, 255, 1)!important;
	background:-moz-rgba(255, 255, 255, 1)!important;
	background:-webkit-rgba(255, 255, 255, 1)!important;
}

/*ドロワーメニューの色変更*/
.c-drawer {background:rgba(0,117,193, 0.7);}

/*スクロールTOPの背景色変更*/
.c-page-top{background-color:#4f0806;}

/*ロゴの上部の余白を縮小*/
.c-site-branding__title {margin-top:-10px!important;}

/*説明文ディレクション*/
.c-site-branding__description{
	font-size:0.9em!important;
	margin-bottom:5px;
	margin-top:5px;
}

/*ハンバーガーメニューの太さ変更*/
.c-hamburger-btn__bars {
    width: 26px;/*好きなサイズを設定*/
    height: 18px;/*バーの太さと位置から計算して設定*/
}
/*バーの太さ*/
.c-hamburger-btn__bar {height: 2px;}
/*2本目のバーのy位置*/
.c-hamburger-btn__bar:nth-of-type(2) {top: 8px;}
/*3本目のバーのy位置*/
.c-hamburger-btn__bar:nth-of-type(3) {top: 16px;}
/*MENU の文字サイズ*/
.c-hamburger-btn__label {font-size: 12px;}


/*固定ページのタイトルだけ削除*/
.page .c-entry__title{display: none;}/*固定*/
.single .c-entry__title{display: none;}/*投稿*/
.blog .c-entry__title{display: none;}/*ブログ*/

タイトル項目ごとだけ削除したい場合
.page-id-100 .c-entry__header {display: none;}


/*メニューの間隔を狭く*/
.p-global-nav ul li a{
  padding-bottom:5px!important;
  margin-bottom:5px!important;
}

/*グローバルナビのフォントサイズ変更*/
.p-global-nav .c-navbar__item>a {font-size: 18px;}

サイトタイトルと概要を横並びにする方法

/*キャッチフレーズをロゴの上に表示*/
.c-site-branding--has-logo {
	display: flex;
	flex-direction: column-reverse;
}



/*キャッチフレーズとをロゴを一列表示*/
.c-site-branding { 
	display: flex;
	align-items:center /*上下中央揃え。お好みで*/
} 
.c-site-branding__title { 
	padding-right: 30px /*タイトルと概要の間を開ける。お好みで*/ 
}


■スマホは2段にする
@media (min-width:601px){
.c-site-branding {
display: flex;
align-items:center /*上下中央揃え。お好みで*/
}
.c-site-branding__title {
padding-right: 30px /*タイトルと概要の間を開ける。お好みで*/
}
}

■イトロゴ（h1）と概要（.c-site-branding__description）にinline-blockを設定したもの。
.c-site-branding__title,
.c-site-branding__description {
display:inline-block;
vertical-align:middle /*上下中央揃え。お好みで*/
}

お問い合わせボタンに変更

<div class="contactbtm"><a href="contact">お問い合わせ</a></div>


【CSS】
/*お問い合わせボタン*/
.contactbtm a{
	background-color:#e88a95;
	padding:30px 20px!important;
	text-decoration:none;
	border-radius:6px;
}
.contactbtm a:link{color:#FFFFFF;}
.contactbtm a:visited{color:#FFFFFF;}
.contactbtm a:hover{color:#FFFFFF;}
.contactbtm a:active{color:#FFFFFF;}

タイトルとアイキャッチ画像

h1.c-page-header__title{
	color:#272727!important;/*固定ページタイトル色*/
	background:rgba(255, 255, 255, 0.8);
	padding:2px 40px 8px 40px!important;
}
/*アイキャッチの縦の幅を調整*/
.c-page-header[data-has-image=true] {height: 50px !important; margin-bottom:30px;} 


@media screen and (max-width: 481px)  {/*SP*/
	.c-page-header[data-has-image=true] {height: 180px !important;}/*アイキャッチの縦の幅を調整*/
	.p-breadcrumbs-wrapper ol{font-size:60%!important;}/*パンくずのフォントサイズ整*/
	.l-contents__inner{margin-top:0px!important;}/*ぱんくずとメインカラムの余白の調整*/
}

ロゴとサイト説明文

@media screen and (min-width: 482px) {/*PCのみ*/
/*ロゴの上部の余白を縮小*/
.c-site-branding__title {margin-top:-10px!important;}
/*説明文ディレクション*/
.c-site-branding__description{
	font-size:0.9em!important;
	margin-bottom:2px;
	margin-top:5px;
}
}
@media screen and (max-width: 481px)  {
.c-site-branding__title {text-align:left!important; margin-left:-20px!important;}
/*説明文ディレクション*/
.c-site-branding__description{
	font-size:0.6em!important;
	margin-top:5px;
	text-align:left!important;
	line-height:140%!important;
	margin-left:-20px!important;
}
/*パンくづの上の罫線*/
.p-breadcrumbs-wrapper{border-top:solid 1px #999999;}
}

ページタイトルとの余白を少なくする

.c-entry__header{margin-top:-30px!important;}

または

.c-entry__body{margin-top:-30px!important;}

ヘッダーオーバーレイに設定した際のフロントページの余白

.l-contents__inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.c-entry__header {
margin-bottom: 0rem!important;
}

メニューにだけ色をつける

.p-global-nav{
	width:120%!important;
	background-color:#306!important;
}

メニューの下に文字をいれる

1. メニューの編集画面の右上にある「表示オプション」をクリックし「説明」にチェック
2. グローバルナビゲーション（PC用）に割り当てたメニューを選択
3. サブラベルを付与したい項目のパネルを開く
4. 「説明」に入力
5. 必要な項目全てに入力し終わったら、メニューを保存をクリック

アイコンフォント

fa-fw　でアイコンを大きく表示

【フォント一覧】
https://johobase.com/font-awesome-icon-font-list-free/

<i class="fas fa-cut fa-fw"></i> 求人案内
<i class="far fa-comment-dots fa-fw"></i> 働く先輩の声
<i class="far fa-heart fa-fw"></i> 福利厚生について
<i class="fas fa-clipboard-list fa-fw"></i> 募集要項
<i class="fas fa-home fa-fw"></i> トップページ



<i class="fas fa-home fa-lg fa-fw"></i> トップページ
<i class="fas fa-building fa-lg fa-fw"></i> 会社概要
<i class="fas fa-pencil-alt fa-lg fa-fw"></i> ブログ
<i class="far fa-envelope fa-lg fa-fw"></i> お問い合わせ

アイコンフォントを縦並び

brを入れて改行させる
<i class="fas fa-home fa-lg fa-fw"></i><br> トップページ


【 CSS 】
.p-global-nav .c-navbar__item>a>span {
  display: block;
}

メニューデザイン１

/*--------------------
ヘッダーエリアの変更：グローバルナビ
---------------------*/
/*リンク色変更*/
.p-global-nav a:link{color:#003953;}
.p-global-nav a:visited{color:#003953;}
.p-global-nav a:hover{color:#0093ff;}
.p-global-nav a:active{color:#003953;}

/*メニューの文字の大きさ*/
#menu-top-menu-1 a{font-size:1.1em!important;}

/*--------------------
ヘッダーエリアの変更：グローバルナビ
---------------------*/
/*ヘッダメニュー背景色*/
.l-center-header__row nav{background: linear-gradient(-135deg, #cafecd, #98feff); margin-top:20px!important;}


/*ロゴの上部の余白を縮小*/
.c-site-branding__title {margin-top:-10px!important;}
/*説明文ディレクション*/
.c-site-branding__description{
	font-size:0.9em!important;
	margin-bottom:2px;
	margin-top:5px;
}

メニューデザイン２

#menu-menu a:link{color:#FFFFFF;}
#menu-menu a:visited{color:#FFFFFF;}
#menu-menu a:hover{color:#ef8300;}
#menu-menu a:active{color:#FFFFFF;}
#menu-menu li{border-right:solid 1px #FFFFFF;}
#menu-menu li:last-of-type{border:none;}

メニューデザイン３

メニューが縦の時の背景設定
画像サイズ：400px×2000px

.l-header--left{
	background-image:url(img/bg-menu.jpg);
	background-repeat:no-repeat;
}

メニューデザイン４

サブページのアイキャッチ画像+メニューにだけ白背景を入れる。

.l-header{background-color:#FFFFFF;}/*メニュー背景色*/
h1.c-page-header__title{color:#272727!important;}/*固定ページタイトル色*/

メニューデザイン５

ボタン風に背景をカラーブロック
.p-global-navのタグをfooterにいれると共通で使える

/*ヘッダーメニュー*/
.p-global-nav a:link{color:#FFFFFF;}
.p-global-nav a:visited{color:#FFFFFF;}
.p-global-nav a:hover{color:#FFFFFF;}
.p-global-nav a:active{color:#FFFFFF;}


.p-global-nav li{margin-left:10px!important;}
.menu-item-146 a{
	background-color:#009944;
	border-radius:3px;
}
.menu-item-149 a{
	background-color:#a3009c;
	border-radius:3px;
}
.menu-item-225 a{
	background-color:#cd162c;
	border-radius:3px;
}
.menu-item-146 a:hover, .menu-item-149 a:hover, .menu-item-225 a:hover{background-color:#999999!important;}/*footerボタンと共通*/

サブページのヘッダ画像にタイトル入れる

PhotoShopデータダウンロード

/*.c-page-header__content{display:none;}ページタイトルを消す*/
.page-id-13 .l-contents__body{margin-top:-170px;}
@media screen and (max-width: 481px)  {
	.page-id-13 .l-contents__body{margin-top:-230px;}
}

メニューの色を変更する

.p-global-nav li li a{
	background-color:#999999!important;
	border-bottom:dashed 1px #EEEEEE!important;
}

サイドバー追従

【HTML】
<div class="l-sidebar-sticky-widget-area"
	data-is-slim-widget-area="true"
	data-is-content-widget-area="false"
	>
<div class="side-nav">
<p>民団紹介</p>
<ul class="none">
<li><a href="https://www.mindan.org/" target="_blank" rel="noopener"><img src="https://akita-mindan.org/wp/wp-content/plugins/my-snow-monkey/img/link1.gif" alt="在日本大韓民国民団中央本部" />在日本大韓民国民団中央本部</a></li>
<li><a href="https://mindan.org/miyagi/" target="_blank" rel="noopener"><img src="https://akita-mindan.org/wp/wp-content/plugins/my-snow-monkey/img/link2.gif" alt="在日本大韓民国民団宮城地方本部" />在日本大韓民国民団宮城地方本部</a></li>
</ul>

<ul class="none">
<p>その他</p>
<li><a href="https://overseas.mofa.go.kr/jp-sendai-ja/index.do" target="_blank" rel="noopener"><img src="https://akita-mindan.org/wp/wp-content/plugins/my-snow-monkey/img/link4.gif" alt="駐仙台大韓民国総領事館" />駐仙台大韓民国総領事館</a></li>
<li><a href="http://www.oka.go.kr/oka/" target="_blank" rel="noopener"><img src="https://akita-mindan.org/wp/wp-content/plugins/my-snow-monkey/img/link3.gif" alt="在外同胞庁" />在外同胞庁</a></li>
</ul>
</div></div>


【CSS】
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

sidebar
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.side-nav{
	border:solid 1px #CCCCCC;
	border-radius:5px;
	padding:20px 20px 10px 20px;
}
.side-nav p{
	font-size:1.4em;
	border-bottom:solid 1px #272727;
	margin-bottom:10px!important;
}
.side-nav ul{margin-left:-20px!important;}
.side-nav li{margin-bottom:8px;}
.side-nav a{
	text-decoration:none;
	display:block;
	padding:7px 3px;
	text-align:center;
	border:solid 2px #0078d7;
	font-weight:bold;
}

.side-nav a:link{color:#FFFFFF; background-color:#0078d7;}
.side-nav a:visited{color:#FFFFFF;}
.side-nav a:hover{color:#0078d7; background-color:#FFFFFF;}
.side-nav a:active{color:#FFFFFF;}