ウェブマスター中級講座 -2「フォント&リンク」
■フォント要素と属性(書体・サイズ・太さ・色など)
・一般(ゴシック系)・・・優先順位 '' や "" で囲う
font-family: Meiryo,‘メイリオ’, Hiragino Kaku Gothic Pro, ‘ヒラギノ角ゴ Pro W3’,sans-serif;
・明朝系
font-family: YuMincho,Yu Mincho,'游明朝',"ヒラギノ明朝 ProN W6",HiraMinProN-W6,"HG明朝E","MS P明朝",MS PMincho,"MS 明朝",serif;
・デザインフォントは、Googleのライブラリーで https://fonts.google.com/(Google Chrome)
・フォントの単位について px と em の換算サイト http://pxtoem.com/
font-size: 13px; フォントの大きさ(日本語のゴシック系は12〜14px・明朝系は14px〜15pxが読みやすい)
font-weight: *** ; 100・200・・・・900まで
font-weight: bold; 太字
font-weight: normal; ノーマル
line-height: 1.8 ; 行間の高さ 1 はフォントサイズが基準で、px で表示することも可
color: #555555 ; フォントの色 (# は16進法 色名 red などでも表記できる)
■フォントのデザイン
letter-spacing: 0.1em; 文字間隔(タイトルなど、デザイン的に調整したい時に使用することが多い)
font-style: italic; イタリック
text-shadow: 5px 5px 1px #999999; フォントに影
text-align: justify; text-justify: inter-ideograph; 長文などで改行した際の幅揃え(英字は使わない)
■英単語の表示(タイトルやメニューなどで設定)
text-transform: none ; 記述した通りに表示します。これが初期値
text-transform: capitalize; 単語の先頭文字を大文字で表示
text-transform: lowercase; 全てを小文字で表示
text-transform: uppercase; 全てを大文字で表示
■見出し
・<h1>・<h2>・<h3>・<h4>・<h5>・<h6>タグは、見出しを付ける際に使用します。
・数値が小さいほど高いランクの見出しとなります。
・<h1>が最も高位の大見出しで、<h6>が最も低位の小見出しです。
・同じ数値のものが複数ある場合には同じランクとなります。
・単独タグは、固定ページや投稿記事で有効
・サイトタイトル・エントリータイトル・ウィジェットタイトルなどは、class で要素を指定する
・テーマによっては class あっても、スタイルシートに指示してないこともあり、その場合は追加してもよい
■リンクの設定
・初期リンクと場所を離れた時の色とアンダーラインの有無
・16進法の色については、同じ値が6つ並ぶ場合は、3つに省略できる
a,
a:visited {
color: #666;
text-decoration: none; ・・・アンダーラインの設定
}
・マウスをのせた時、訪問中
a:hover,
a:focus,
a:active {
color: #424242;
text-decoration: none;
outline: 0;
}
■TELリンク(携帯からアクセル用に)
<a href="tel:ハイフン無しの電話番号">電話番号</a>
メールリンクに関しては、wordpressn の機能でリンクできる
■違うページの場所を指定リンク
<a href="リンク先のURL#ネームをつける" title=" ">
<a name="ネーム">
■トップに戻る
戻りたい位置へ <a name="top"> </a>
<a href="#top">▲TOP(画像でもいい)</a>