カスタマイズ例

Demo 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 P明朝”,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 &copy; ‘. 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;
}

© 2009 myoujoulibrary
Copyright © 2021 Myoujou Library | My Music Band by Catch Themes