今回は、投稿本文部分のCSS設定を行います。

TwentyFourteenでのCSS設定

　
記事本文のテンプレートファイルcontent.phpの中身を見ると、記事本文に関して下記CSSクラスを使って設定しています。
　
<div class=”entry-content”>
<div class=”entry-summary”>
<div class=”page-content”>
<div class=”page-links”><span class=”page-links-title”>
　
TwentyFourteenのstyle.cssから該当する部分をコピーし、適宜修正します。
　

TwentyFourteenのstyle.cssの設定をベースに設定

　
上記のCSSクラスは、TwentyFourteenのstyle.cssの”6.4 Entry Content”の部分に設定されています。
　
“6.4 Entry Content”の部分をコピーし、使用していないクラスは除去し、使用しているCSSクラスを自分の好みに合わせて修正します。
　
●修正例

/**
 * 6.4 Entry Content
 * ---------------------------------------------------------
 */

.entry-content,
.entry-summary,
.page-content {
        -webkit-hyphens: auto;
        -moz-hyphens:    auto;
        -ms-hyphens:     auto;
        hyphens:         auto;
        word-wrap: break-word;
}

.page-content {
        background-color: #fff;
        padding: 12px 10px 0;
}

.page .entry-content {
        padding-top: 0;
}

.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child,
.entry-content h5:first-child,
.entry-content h6:first-child,
.entry-summary h1:first-child,
.entry-summary h2:first-child,
.entry-summary h3:first-child,
.entry-summary h4:first-child,
.entry-summary h5:first-child,
.entry-summary h6:first-child,
.page-content h1:first-child,
.page-content h2:first-child,
.page-content h3:first-child,
.page-content h4:first-child,
.page-content h5:first-child,
.page-content h6:first-child {
        margin-top: 0;
}

.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a {
        text-decoration: underline;
}

.entry-content a:hover,
.entry-summary a:hover,
.page-content a:hover {
        text-decoration: none;
}

.entry-content table,

.entry-content th {
        font-weight: 700;
        padding: 8px;
        text-transform: uppercase;
}

.entry-content td {
        padding: 8px;
}

.entry-content .edit-link {
        clear: both;
        display: block;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.3333333333;
        text-transform: uppercase;
}

.entry-content .edit-link a {
        color: #767676;
        text-decoration: none;
}

.entry-content .edit-link a:hover {
        color: #41a62a;
}

/* Page links */

.page-links {
        clear: both;
        font-size: 12px;
        font-weight: 900;
        line-height: 2;
        margin: 24px 0;
        text-transform: uppercase;
}

.page-links a,
.page-links > span {
        background: #fff;
        border: 1px solid #fff;
        display: inline-block;
        height: 22px;
        margin: 0 1px 2px 0;
        text-align: center;
        width: 22px;
}

.page-links a {
        background: #000;
        border: 1px solid #000;
        color: #fff;
        text-decoration: none;
}

.page-links a:hover {
        background: #41a62a;
        border: 1px solid #41a62a;
        color: #fff;
}

.page-links > .page-links-title {
        height: auto;
        margin: 0;
        padding-right: 7px;
        width: auto;
}

　
「ブートストラップ３を使って自作テーマ作成」の目次へ

関連記事の目次