Theme “Edin” Customize
> Master Course > Theme “Edin” CustomizeDemo site URL：https://edindemo.wordpress.com/
テーマの特徴 評価：★★★★☆
・デザインも構成もシンプル
・余白の調整は、ほとんどしなくてよい（スマホサイズでも）
・各リンクについて、細かい設定がしてある（ことメニューバー）
・メニュー項目が多い場合は、メニュースタイルをデフォルトにする（スマホでは、どちらも同じ表示になる）
・アクセントカラーが多用されているので、他の色に変える時は、テキストエディターでする
・固定ページのアイキャッチは、全幅に合わトリミングされた画像なので、使う画像を選ぶ
・投稿ページのアイキャッチも幅で決まるが、トリミング無しなので縦位置の画像は要注意
・投稿記事でアイキャッチを使ったときは、同じ画像を文中で使わない（他のテーマも同様）
※ Demo にはある front-page-testimonials ブロックが無い
※ SNS のブロックが一番下（手入力）
※ グリッドページの使い方・・・？
カスタマイズ例
基本フォント・・・Google chChrome でやや大きくなり、段落が開く
body,
color: #303030;
font-family: Meiryo,‘メイリオ’, Hiragino Kaku Gothic Pro, ‘ヒラギノ角ゴ Pro W3’, sans-serif;
-ms-word-wrap: break-word;
word-wrap: break-word;
font-size: 0.8125rem;
font-size: 13px;h1～h7
font-family: ‘Book Antiqua’, EB Garamond, YuMincho,Yu Mincho,’游明朝’,”ヒラギノ明朝 ProN W6″,HiraMinProN-W6,”HG明朝E”,”ＭＳ Ｐ明朝”,MS PMincho,”MS 明朝”,sans-serif;.site-telitle, entry-title {font-family: ‘Book Antiqua’, EB Garamond;}
ヘッダーとフッター（文字と同じ色）の背景色を変更
フッターのウィジェット 高さ揃え（特にFacebook）
コピーライトは、footer.php で、明るい色に変更
サイトタイトル・TEL（リンク）
メニューバーの表示変更（子メニュー含む）
.navigation-classic .primary-navigation ul ul:before {
border-bottom: 8px solid rgba(53, 53, 53, 0.8);.navigation-classic .primary-navigation ul ul li {
padding: 12px 24px 0 24px;
width: 260px;
background: rgba(53, 53, 53, 0.8);
text-transform: none;
}
.navigation-classic .primary-navigation ul ul li:last-of-type {
border-bottom: 12px solid rgba(53, 53, 53, 0.8);
}リンクなど、テーマのアクセントカラー・青をブルーグレーやグレーに変更（テキストエディターにて）
フロントページのタイトルは、タグでセンタリング・フォントサイズも小さめ
「ACCESS」はモノクロにしてポイントイメージを埋め込む
「CONTACT」は文章を入れてブロック組み
Featured Page・・・background: #FFF; に変更
固定ページのアイキャッチは大きいので使う画像を選ぶ
固定ページのアイキャッチには、タイトルが見やすいようにフィルターが掛かっている／フィルターを無くすには・・・
body:not(.no-image-filter) .hero.with-featured-image:before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;・・・ここと
opacity: 0.3; ・・・ここを削除
}
固定ページは、全幅テンプレートを活かす（使用域が少ない場合はデフォルト）
固定ページ
「フロントページ」のキャッチコピー h2 を小さめの見出しに変更、もしくは、タイトルを入れる
「ACCESS」モノクロマップにする～参考ページをコピペ
「CONTACT」…文章を入れてブロック組み
php ファイルで
電話番号・・・heder.php に入力
<div class=”header-wrapper clear”>
<div class=”site-branding”><a href=”http://workshop.jeez.jp/“><span style=”font-size: 18px;”>Dining Cafe</span> Share-gaki</a>
<h3 style=”margin-top: -30px; letter-spacing: 0.25em; text-align: center;”><a href=”tel:08051158439“><span style=”color: #777777;”>Tel：080-5115-8439</span></a></h3>Copyright は、footer.php で、明るい色に変更
<div class=”site-info”>
<span style=”color:#eeeeee;”><?php echo get_theme_mod(“prestro_copyright”,’Copyright © ‘. date_i18n( ‘Y’ ) .’ share-gaki All Rights Reserved. ‘,”); ?> Since_2018.7</span> <a href=”http://workshop.jeez.jp/wp-admin”><span style=”color:#eeeeee;”>Admin</span></a>
「MENU」
ランチやディナーメニューは、いろんなバージョンを作っておく
メニュー名と価格のレイアウト
画像を織り込む
ウィジェット
SNSアイコンを使って、リンクを掛ける
フッターのウィジェット 高さ揃え（特にFacebook）
スタイルシート
基本フォント修正・・・Google Chrome チェック！
タイトル系フォント（site-title, ently-title, page-title, category, Widget-title, 他）カスタマイズ
色を変更・・・アクセントカラーはたくさん使っているの、テキストエディターで検索して、一括で修正
メニューバーに並びきらないのを修正（メニュー数・フォントサイズ）・・・Google Chrome チェック！
メニューバーの表示変更（子メニュー含む）
ヘッダーとフッター（文字と同じ色）の背景色を変更
blockquote を効果的に使う（カスタマイズしてから）
blockquote, blockquote p { color: #777; line-height: 24px; }
blockquote { margin: 0 0 20px 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ccc; }/*————————————————————–
12.0 Comments
————————————————————–*/
の中身削除
/*————————————————————–
20.0 追加
————————————————————–*/
#page-footer {background-color: #222 !important;}
.block-1 {float: left; display: inline; width: 46%; margin-right: 2%; }
.block-2 {float: left; display:inline; width:31.3%; text-align:center; line-heght:1.2; padding:0 2% 50px; vertical-align:top;}
.block-3 {float: left; display:inline-block; width:31.3%; text-align:left; line-heght:1.2; padding:0 2% 50px; vertical-align:top;}
.block-4 {float: left; display:inline-block; width:45%; text-align:left; line-heght:1.2; padding:75px 0 75px 45px; vertical-align:top;}
.red {color: #d64622}
.post-content {padding-top: 20px !important;}
.page-title {font-weight: 400 !important;}
@media only screen and (max-width: 768px) {
.block-1, block-2, block-3, block-4 {float: none; display: block; width: 100%; }
.block-left, .block-right { float: none; width: 100%; margin: 1%;}
.home {background-color: #222 !important;}
}
補足
基本フォント、見出しは、マイフォントとして作ったものを「font」ページに貼っておく（赤は必須）
編集画面で使う文字の色は、赤の他に何色かを class=”色名” などで表記できるようにしておくと便利
◆ 等幅のブロックソース・・・修正⇒「Lunch」ページのブロックclass を block-1 に変更しておく！
◆ フロントページのコピー文は、h3 からh2 に変更して、サイズなどをカスタマイズする
◆メニューバーの背景色は、↓ここの記述されている（スタイルシートの下の方です）
◆デフォルトカラー #1279be（青）・・・この色をマイカラーにする（※印）
◆メニューバー以外にも、この色は各所で使われているので、次回は必要なところだけを変えていきます
/*————————————————————–
16.3 x >= 1020px
————————————————————–*/
/* Navigation Classic */
.navigation-classic .header-navigation {
display: none;
}
.navigation-classic .primary-navigation {
clear: both;
padding: 0;
margin: 0;
border-top: 1px solid #f8f8f8;
color: inherit;
}
.navigation-classic .primary-navigation .menu-toggle {
display: none;
}
.navigation-classic .primary-navigation .menu-primary {
padding: 0;
}
.navigation-classic .primary-navigation .menu-primary > ul > li {
float: left;
}
.navigation-classic .primary-navigation .menu-primary > ul > li:hover {
※ background: #1279be;
color: #fff;
}
.navigation-classic .primary-navigation .menu-primary > ul > li:nth-of-type(3n+1) {
clear: none;
}
.navigation-classic .primary-navigation .menu-primary > ul > li.current-menu-item > a,
.navigation-classic .primary-navigation .menu-primary > ul > li.current_page_item > a {
※ background: #1279be;
color: #fff;
font-style: normal;
}
.navigation-classic .primary-navigation .menu-primary > ul > li.menu-item-has-children:before {
right: 0.5em;
font-size: 1.5em;
}
.navigation-classic .primary-navigation .menu-primary > ul > li.menu-item-has-children > a {
padding-right: 3em;
}
.navigation-classic .primary-navigation .menu-primary > ul > li > a {
padding: 12px 24px;
border-bottom: 0;
font-size: 1.125em;
line-height: 1.33333em;
}
.navigation-classic .primary-navigation .menu-primary > ul > li > a:hover,
.navigation-classic .primary-navigation .menu-primary > ul > li > a:focus,
.navigation-classic .primary-navigation .menu-primary > ul > li > a:active {
background: #1279be;
color: #fff;
}
.navigation-classic .primary-navigation ul ul {
display: block;
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
padding-top: 9px;
}
.navigation-classic .primary-navigation ul ul:before {
content: ”;
display: block;
position: absolute;
top: 1px;
left: 8px;
border-right: 8px solid transparent;
※ border-bottom: 8px solid #1279be;
border-left: 8px solid transparent;
}
.navigation-classic .primary-navigation ul ul ul {
left: -999em;
top: 0;
padding-top: 0;
padding-left: 8px;
margin: 0;
}
.navigation-classic .primary-navigation ul ul ul:before {
content: ”;
display: block;
position: absolute;
top: 16px;
left: 0;
border-top: 8px solid transparent;
※ border-right-color: #1279be;
border-bottom-color: transparent;
border-left: 0;
}
.navigation-classic .primary-navigation ul ul li {
padding: 12px 24px 0 24px;
width: 260px;
※ background: #1279be;
text-transform: none;
}
.navigation-classic .primary-navigation ul ul li:last-of-type {
border-bottom: 12px solid #1279be;
}
.navigation-classic .primary-navigation ul ul li:hover > ul {
left: 100%;
}
.navigation-classic .primary-navigation ul ul li.menu-item-has-children {
padding-right: 60px;
}
.navigation-classic .primary-navigation ul ul li.menu-item-has-children:before {
right: 1.5em;
margin-top: -0.25em;
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.navigation-classic .primary-navigation ul li {
margin: 0;
width: auto;
}
.navigation-classic .primary-navigation ul li:hover > ul,
.navigation-classic .primary-navigation ul li.focus > ul {
left: auto;
}
.navigation-classic .primary-navigation li {
display: block;
position: relative;
font-weight: bold;
}
.navigation-classic .primary-navigation li.current-menu-item > a,
.navigation-classic .primary-navigation li.current_page_item > a {
border-bottom-color: #fff;
}
.navigation-classic .primary-navigation a {
margin: 0;
color: inherit;
}
.navigation-classic .primary-navigation a:hover,
.navigation-classic .primary-navigation a:focus,
.navigation-classic .primary-navigation a:active {
border-bottom-color: #fff;
}
.navigation-classic .primary-navigation .menu-item-has-children:before {
position: absolute;
z-index: 1;
top: 50%;
right: 0;
margin-top: -0.6em;
※ color: #1279be;
content: “\f431”;
display: inline-block;
width: 1em;
height: 1em;
font-family: “Genericons”;
font-size: 1em;
line-height: 1;
text-decoration: inherit;
font-weight: normal;
font-style: normal;
vertical-align: top;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.navigation-classic .primary-navigation .menu-primary > ul > li.current-menu-item:before,
.navigation-classic .primary-navigation .menu-primary > ul > li.current_page_item:before,
.navigation-classic .primary-navigation .menu-item-has-children:hover:before,
.navigation-classic .primary-navigation ul ul .menu-item-has-children:before {
color: #fff;
}
.navigation-classic .menu-secondary {
padding: 0;
min-height: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.navigation-classic .secondary-navigation {
padding: 0;
margin: 0;
width: 100%;
background: #f8f8f8;
}
.navigation-classic .secondary-navigation ul {
text-align: right;
}
.navigation-classic .secondary-navigation li {
color: #303030;
font-weight: bold;
}
.navigation-classic .secondary-navigation li.current-menu-item a,
.navigation-classic .secondary-navigation li.current_page_item a {
color: inherit;
border-bottom-color: #303030;
}
.navigation-classic .secondary-navigation a:hover,
.navigation-classic .secondary-navigation a:focus,
.navigation-classic .secondary-navigation a:active {
※ border-bottom-color: #1279be;
※ color: #1279be;
}
.navigation-classic .primary-navigation .dropdown-toggle {
display: none;
}
<div class=”header-wrapper clear”>
<div class=”site-branding”>
<h1 class=”site-title”>
<a href=”http://workshop.jeez.jp/”><span style=”font-size:18px;”>Dining Café</span> Share-gaki</a></h1>
<h3 style=”margin-top:-30px; letter-spacing: 0.25em; text-align:center;”><a href=”tel:08051158439″><span style=”color:#777777;”>Tel：080-5115-8439</span></a></h3>
<!– <div class=”header-wrapper clear”>
<div class=”site-branding”>
<?php
edin_the_site_logo();
if ( is_front_page() && is_home() ) : ?>
<h1 class=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></h1>
<?php else : ?>
<p class=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></p>
<?php endif;
$description = get_bloginfo( ‘description’, ‘display’ );
if ( $description || is_customize_preview() ) : ?>
<p class=”site-description”><?php echo $description; ?></p>
<?php endif;
?>
–>
</div><!– .site-branding –>