WordPressのブログのデザインをMediumっぽくしてみた

シェアする

  • このエントリーをはてなブックマークに追加

自分の好きなサイトのデザインのひとつに「Medium」というサイトがあります。
Medium
白、黒、グレーを基調としていて、めちゃくちゃなシンプルな作り!
自分もシンプルなものが好きで、htmlやcssをいじるのも好きなので、このブログ「適当イズベター」のデザインもMediumっぽくしてみた。

横幅を画面いっぱいに広がるようにして、右にサイドバーを固定し、左側の記事のほうの横幅を可変にする方法について記しておきます。

・WordPress
・デザインテーマ「Simplicity」(子テーマ使用)
・PC表示

について書きます。

横幅100%

Mediumはヘッダー、bodyが横幅100%なのでSimplicityもそれに合わせます。
子テーマのstyle.cssに

#header-in, #navi-in, #body-in, #footer-in {
        width: 100%;
    }

を追加して、ヘッダー、ボディ、フッターを100%表示に。

記事の横幅を可変、サイドバーの横幅を固定

Meidumは左に記事、右にサイドバーという作りになっている。
右のサイトバーは右端に固定されている。横幅は画面幅により400pxか350pxで固定。
左の記事の方は可変。ただし文章が書かれている部分は600pxで固定されている。

自分のサイトでは、
右のサイドバーを右端に300pxで固定。
左の記事部分を可変にし文章部分を600pxにしています。
スクリーンショット 2015-12-18 14.40.17

header.phpとfooter.phpに

<div id='main'>

の始まりと終わりがあるので、
その外側にもうひとつdivで囲います。
自分の場合は’kahen’というクラス名をつけています。
そうして囲った記事側のdivとサイドバーのdivを横並びにして、片方を可変、片方を固定にすればいいわけです。

固定したい方(今回は右側)のdivに、float:rightと横幅を設定。

#sidebar {
    float: right;
    width: 300px;
}

可変の方に(今回は左側)は以下のように設定。

   
.kahen{
 float: left;
    box-sizing: border-box;
    width: 100%;
    margin-right: -360px;
    padding-right: 380px;
}

これで左側は可変、右側が固定になります。
あとは、左のdiv id=’main’の横幅を設定して、左側の中心にくるように設定します。

#main {
    float: none;
    width: 640px;
    padding: 20px;
    margin-right: auto;
    margin-left: auto;
    border: none;
}

元々float:leftが設定されているのでそれを解除。
幅を600pxになるようにwidthとpaddingで調整という感じです。