ウェブマスター中級講座 -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>