ウェブマスター中級講座 -Vol.4(2018.5.18)
◆固定ページのフロントページやヘッダーなどに・・・住所・電話番号(リンクを貼る)・営業時間・定休日など
◆固定ページのテンプレート選択/アイキャッチは、画像によって効果的
◆ロゴを入れる・ファビコンも入れてみる
(テーマのよってプログラムがない場合は、他のテーマを使う
◆「Contact」ページにメールアドレス追加
◆ウィジェットの Meta 情報は削除
◆ヘッダー情報追加
<meta name="description" content="検索した際のコピー文">
<meta name="keywords" content="複数のキーワードをカンマで区切る">
◆フッターにコピーライトのソースを貼る・Adomin リンクも貼っておく
<?php echo get_theme_mod("prestro_copyright",'Copyright © '. date_i18n( 'Y' ) .' サイト名 All Rights Reserved. ',''); ?> Since_開設年月
◆SNS リンク(face book, twitter, insutagram)・・・アイコンを使う(テーマによってオプションにあり)
■スタイルシート
◆body で基本フォント設定
font-family: YuMincho,Yu Mincho,'游明朝',"ヒラギノ明朝 ProN W6",HiraMinProN-W6,"HG明朝E","MS P明朝",MS PMincho,"MS 明朝",serif;
◆フォント
font-weight: 100〜900; ノーマル・300.400
letter-spacing: 0.1em; 文字間隔
line-height: 1.8; 行間 100% と 1 はフォントサイズと同じで他に 15px・・・フォントより大きく指定
font-size: 13px; フォントの大きさ(12pxは標準)
color: #555555; フォントの色 (# は16進法 原色の色名 red などでも表記できる)
vertical-align: baseline; テキストなどの位置指定 右は right 指定しなければ左寄せ
vertical-align: middle; 画像に対しての高さ位置指定 top middle bottom (上 真中 下)
font-style: italic; イタリック
text-align:justify; text-justify:inter-ideograph; 長文などで改行した際の幅揃え(英字は単語単位になるので使わない)
◆見出しタグのフォント変更(書体・色・太さなど)
h1〜h6、entry-title、page-title、category-title、widget-title
Google Font https://fonts.google.com/
Web 色見本 http://www.colordic.org/
※編集画面では span タグで style="" class=""(スタイルシートに作ったもの)を使って部分的にフォントのサイズと色を変更
font-size: px; color: #;
※フォントサイズのみであれば・・・big=125% small=75%
◆リンクについて
a,
a:visited {
color: #7599c5;
text-decoration: none; underline
}
a:hover,
a:focus,
a:active {
color: #424242;
text-decoration: none;
outline: 0;
}
◆TELリンク(携帯からアクセル用に)
<a href="tel:電話番号ハイフン無し">ここをクリック</a>
◆アイコン画像を使ってトップに戻る
戻りたい位置へ <a name="top"> </a>
<a href="#top"><img src="画像の場所と名前"></a>
◆メニューバーのカスタマイズ
◆メニューバーの有無、背景の色、フォントのサイズ・太さ・色、マウスオーバーの色、英語での表記
◆子メニューのデザイン
◆フッターエリアの背景色
■Luch Menu 作成
◆参考サイト
・豊橋 「Cafe Accordiana」
・浜松 和風フレンチレストラン「杜のふう」
・豊橋 食事・宴会「三三九」
・豊橋 「サンローズ」
・豊橋 「Aux Crieurs de Vin」
・田原 創作中華料理「Chinese-kitchen 海」
◆オリジナルブロックを作成(スタイルシートの最下段に)
/*--------------------------------------------------------------
original
--------------------------------------------------------------*/
.block-1 { float: left; display: inline; width: 46%; margin-right: 2%; }
.block-left { float:left; width:30%; padding:15px;}
.block-right { float:right; width:70%; padding:15px;}
@media only screen and (max-width: 768px) {
.block-1 {float: none; display: block; width: 100%; }
.block-left, .block-right { float: none; width: 100%; margin: 1%;}
}
-----------------------------------------
◆回りこみを防ぐ
<div style="clear: both;"></div> 回りこみを防ぐ