Hugoでオリジナルのcssを適用する方法

試しに、引用のデザインを例に変更していきます。 最初の状態。

hugo-custom-css2

変えたいのは、blockquoteのデザインです。画像の時の手順は同じく、staticフォルダにcssフォルダを作成します。ファイル名は、custom.cssとでもしておきます。ここに適用したいcssを書き込んでいきます。

blockquote {
    position: relative;
    padding: 35px 15px 10px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 15px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: #9dd4ff;
    font-size: 28px;
    line-height: 1;
}

blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

次にリンクの設定です。使用しているテーマよってcssの記述があるファイルは異なると思いますので、デベロッパーツールなどで一度場所を確認しましょう。

hugo-nowの場合は、layouts/partialsのincludes.htmlにありましたので、ここにcustom.cssのリンクを追記します。

hugo-custom-css3

custom.css

<!-- CSS -->
<link rel="stylesheet" href="/css/style.min.css">
<link rel="stylesheet" href="/css/custom.css">

これで全ての設定が終わりです。 hugo-custom-css1

See Also