骨Step 8からStep 10（骨テーマ外観カスタマイズ）

自作

2019.05.222019.05.27

この記事は約6分で読めます。

出典：
https://code.tutsplus.com/tutorials/making-a-theme-with-bones-getting-started–wp-26545　
Step 8~Step 10

Step 8: Main Background and Text Color

bone

先生　翻訳お願いします。

我々はbase.lessでオレンジ色の背景と中間灰色（@kotkoda-grey）のテキストカラーを使用しています。
（フォントの色を設定するにはcolorを、背景色を設定するにはbackgroundプロパティを使用してください。）

body {
    font-family: Georgia, serif;
    font-size: 14px;
    line-height: 1.5;
    color: @kotkoda-grey;
    background: #ED7626; /* main background color */
}

そしてこれはmixins.lessに入ります。

以下のようにLESSで色変数を定義できます。@kotkoda-greyは色変数名、コロンの後は色コード（#19171A）です。すべての変数名は@符号で始まります。

@kotkoda-grey:      #19171A;

Step 9: Link, Heading and Post Meta Color

bone

先生　また翻訳お願いします。

リンクの色になります@whiteが、@alert-yellowホバーとフォーカスのスタイルのために使用されます。

colorプロパティを使って値を設定します。

すべての見出しとリンクの見出しがあります@kotkoda-grey。

これには少し濃いグレーが必要#999です。元の値はそうでした。

このcolor規則でそれを#444に設定することができます（それはに等しいです#444444）。

/*********************
LINK STYLES
*********************/
 
a, a:visited {
    color: @white;
 
    /* on hover */
    &:hover, &:focus {
        color: @alert-yellow;
    }
    ...
}
 
...
 
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    font-family: sans-serif;
    text-rendering: optimizelegibility;
    font-weight: 500;
 
    /*
    if you're going to use webfonts, be sure to check your weights
    http://css-tricks.com/watch-your-font-weight/
    */
 
    /* removing text decoration from all headline links */
    a {
        text-decoration: none;
        color: @kotkoda-grey;
    }
}
 
...
 
/* post meta */
        .meta {
            color: #444;
            ...
        }