【WP】Stinger3の記事の表示サイズを大きくする

2022/11/09

Stinger3のデザインを変えた！

現在このブログで使用ている WordPress のテーマ「Stinger3」のデザインを変更しました。

今回は以下のデザインを変更しました。

トップ、記事ページのテキストの表示領域の変更
トップページの記事タイトル部分の表示サイズの変更
トップページに記事と記事の区切り線を追加

作業前の確認事項

今回修正を加えるファイルはstyle.cssです。

修正前にファイルのバックアップを必ず取るようにしましょう！

→これ本当に大事！まじでバックアップはしっかりと取りましょう。

Step1 トップ、記事ページのテキストの表示領域の変更

Stinger3のデフォルトの表示領域のサイズは986pxですが、今回は1100pxに変更します。

修正場所は「基本構造」でファイル内検索すればわかるはず。

また、記事の表示領域を広くしたのでサイドバーの表示領域を少し小さくしています。

表示サイズは300pxとしています。

/*-----------------------------
基本構造
------------------------------*/
#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
        /* 変更前の値↓ */
    #width: 986px;
        /* 変更後の値↓ */
        width: 1100px;
    margin-right: auto;
    margin-left: auto;
}
#wrap #wrap-in #side {
    float: right;
        /* 変更前の値↓ */
    #width: 336px;
        /* 変更後の値↓ */
        width: 300px;
}
#wrap #wrap-in #main {
    float: left;
        /* 変更前の値↓ */
    #width: 550px;
        /* 変更後の値↓ */
        width: 690px;
    padding-right: 39px;
    padding-left: 39px;
    padding-top: 20px;
    border: 1px solid #ccc;
    background-color: #FFF;
    border-radius: 4px 4px 4px 4px;
    padding-bottom: 20px;
}

Step2 トップページの記事タイトル部分の表示サイズの変更

修正場所は「.entry-conten {」でファイル内検索すればわかるはず。

.post .entry .entry-content {
    float: right;
        /* 変更前の値↓ */
        #width:380px;
        /* 変更後の値↓ */
    width: 500px;
    padding-left: 20px;
}

Step3 トップページに記事と記事の区切り線を追加

修正場所は「.entry {」でファイル内検索すればわかるはず。

.entry {
     margin-bottom: 20px;
     padding-top: 10px;
     /* CSSの記述を追加↓ */
     border-bottom: 1px dashed #000000;
}

[dashed]と指定していますので、区切りは点線になります。

実線にしたい方は、dashedをsolidに変えてやればおｋです。

デザインの確認

さて、修正が終わったところで、デザインの確認をしていきましょう！

ビフォー

アフター

がっつりデザイン変わってますね！

So Good!