Hugo用テーマ TwentyFourteen のカスタマイズ

4683 ワード
Hugo hugo-theme TwentyFourteen Hugo テキストリンク

Hugo用テーマ TwentyFourteen のカスタマイズ

twentyfourteen/static/css/style.cssを編集する．

コンテンツの幅を広くする。

1040行目付近

/**
 * 6.0 Content
 * --------------------------------------------
 */

.content-area {
/*
    padding-top: 48px;
*/
}

.hentry {
    margin: 0 auto 48px;
    max-width: 672px;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
    margin: 0 auto;
/*
    コンテンツの幅を広くするため、max-widthを474pxから
    noneに変更。
*/
    max-width: none;
}

.page-content {
    margin-bottom: 48px;
}

記事タイトルのUppercaseを無効にする。

test-transform: uppercase;をコメントアウトする．

/**
 * 6.2 Entry Header
 * -----------------------------------------------------
 */

.entry-header {
    position: relative;
    z-index: 1;
}

.entry-title {
    font-size: 33px;
    font-weight: 300;
    line-height: 1.0909090909;
    margin-bottom: 12px;
    margin: 0 0 12px 0;
    /* text-transform: uppercase; */
}

記事表示位置のpadding-topを狭める

3630行目付近

@media screen and (min-width: 846px) {
    .content-area,
    .content-sidebar {
        padding-top: 20px;
    }

適用前


中央に配置されていたコンテンツがは左寄りになっている．

適用後