【はてなブログカスタマイズ】PC版トップページのデザインを変更！一覧性を上げつつ見た目もおしゃれにしちゃいました！ #2

www.cocococococococococococo.com

前の記事で「JSでトップページを開いたら記事一覧ページへ転送する方法」を書いたので、今回はCSSだけでトップページをカスタマイズした方法をご紹介！

私のブログのテーマは「Innocent」を使用させてもらっているので、他のテーマでそのままで出来るかちょっと自信ないです。動作確認はMacのChrome、Safari、Firefoxのみ（IEとか知らないです笑）

CSSでトップページをカスタマイズした手順（ざっくり）

ざっくり手順を並べるとおおきく5工程ぐらいの手順で出来ました。

GitHub PagesでCSSを公開できる環境をつくる
GulpでSass（Scss）をコンパイルできる環境をつくる
Sass（Scss）でデザインをカスタマイズしていく
コンパイルしたCSSをGitHubにPush
はてなブログのヘッダー読み込みにGitHubにPushしたCSSを読み込み

結構いろいろやっていますが、カスタマイズ作業をしやすいように環境をつくるのに時間かかりました。なので実際にCSSを書いてごにょごにょした時間より、環境をつくったり調べたりする時間のほうがかかっています。

手順は一応書きましたがこの記事では「GitHub Pages」「Sass」「CSSを読み込み」については詳しくは触れません。。全部を書くとちょっと量が多すぎるのと、重要なポイントがわからないと思うので簡単な説明ぐらいで済ませたいと思います。（そのうち詳細な記事を書くかも）

GitHub PagesでCSSを公開できる環境をつくる

↓こちらの記事を参考にさせていただきました karamomo.hatenablog.jp

ざっくりまとめると

はてなブログのCSSを書くところは使い勝手悪すぎなので、外部CSSにしたい
GitHubならコードの履歴も残せるし、デザインを元に戻したいときも楽
GitHub Pagesにすることで外部からの参照も簡単

デメリットはGitHubのサーバーがダウンするとCSSを読み込めなくなるかもという点ですが、そうなった場合は手元にあるCSSファイルをはてなブログのCSSにコピペすればとりあえず応急処置できるのでまあ大丈夫でしょう。

余りあるメリットのことを考えるとデメリットはあってないようなものな気がします。

GulpでSass（Scss）をコンパイルできる環境をつくる

↓こちらの記事を参考にさせていただきました horicdesign.com qiita.com

ざっくりまとめると

素のCSSはセレクタを何回も書かなければいけないので、Sassで楽したい
コンパイルと一緒にファイル圧縮（minfiy）したい
トップページ以外の記述もあるので、記述ファイルは分けたい（最終的には１つのファイルにする）

素のCSSとSassがどれ位違うかというとコレぐらい違います

/* --- sass (scss) --- */
.page-index {
    #content {
        padding: {
            top: 80px;
        }
    }

    #content-inner {
        position: relative;
    }

    #wrapper {
        float: none;
        border: none;
    }
}

/* --- css --- */
.page-index #content {
    padding-top: 80px;
}

.page-index #content-inner {
    position: relative;
}

.page-index #wrapper {
    float: none;
    border: none;
}

記述量はCSSの方が少ないんですがトップページのデザインを変更する場合「.page-index」を何度も書かなければいけなくなり面倒です。Sassだと一度書いて入れ子にすればあとは書かなくても自動的に「.page-index」が付いている状態でコンパイルしてくれます。

見た目的にもHTMLの構造と近いかたちで記述できるので「どのクラスの子要素のどれ」というのが視覚的に判断しやすいです。

Sass（Scss）でデザインをカスタマイズしていく

自分でもなにをやったか思い出しながらなので、ちょっと記述が漏れているかもしれませんが、ざっくりこんなことをしています

サイドバーを下に移動（2カラム→1カラム）
縦に並んでいる記事を3つずつ表示（ブログ記事を3カラム）
タイトルと画像の位置を入れ替える（画像→タイトルの順）
続きを読むを画像に重なるように調整
検索ボックスをブログ記事の上に移動

サイドバーを下に移動（2カラム→1カラム）

これは結構簡単でこういう記述を追加するとサイドバーを下に移動させることが出来ます

/* ブログ記事エリア */
.page-index #wrapper {
    float: none;
    border: none; /* お好みでborderを消す */
    margin-right: 0;
    padding-right: 0;
}

/* サイドバーエリア */
.page-index #box2 {
    float: none;
    width: auto;
}

.page-index #box2-inner {
    border: none; /* お好みでborderを消す */
    margin-left: 0;
    padding-left: 0;
}

ざっくり仕組みを説明すると、「float」っていう横並びにできる記述と「margin」と「padding」っていう領域を調整する記述を使ってサイドバーを横に表示されているので、それを打ち消せばOKっていう仕組みです。

縦に並んでいる記事を3つずつ表示（ブログ記事を3カラム）

これも結構簡単にできます。個人的な好みで3カラムにしていますが2カラムでも4カラムにでもできます。

/* ブログ記事を囲っている要素 */
.page-index #main-inner {
    font-size: 0;
    margin-right: -20px;
    margin-left: -20px;
}

 /* 各ブログ記事 */
.page-index .entry {
    width: 33.3%;  /* 50%で2カラム、25%で4カラム */
    display: inline-block;
    vertical-align: top;
    font-size: 1rem;
    padding: 0 10px;
    box-sizing: border-box;
    border: none; /* お好みでborderを消す */
    margin-bottom: 32px;
}

ざっくり説明すると、ブログ記事ごとに「.entry」というclassが自動的に振られているので、幅を「33.3%」（width: 33.3%）、「display: inline-block」を記述することで3カラムにしています。

ただこれだけだと微妙に隙間が空いてしまうので「ブログ記事を囲っている要素」に「font-size: 0」と「各ブログ記事」に「font-size: 1rem」で隙間を埋めます。（隙間の原因は改行によるものですが、詳しくは「display inline-block 隙間」で検索すると分かります）

一応3カラムにはなったんですが、上下の位置がバラバラなので「vertical-align: top」で上揃いに整列させます。

あとはお好みで各記事の両サイドに「padding: 0 10px」とかでスペースを入れたり、線を消したりします。「ブログ記事を囲っている要素」に「margin-right」「margin-left」で各記事のスペース分マイナスの値を入れてやると表示領域を狭くせずに配置できます。

ただし、各記事にスペースを設ける場合は「box-sizing: border-box」が必要です。

タイトルと画像の位置を入れ替える（画像→タイトルの順）

元々のHTMLがタイトル→画像の順なんですが、ここもうまいことCSSで順番を変更させます

 /* 各ブログ記事 */
.page-index .entry-inner {
    display: table;
}

 /* 日付、ブログタイトル、カテゴリの親要素 */
.page-index .entry-header {
        display: table-footer-group;
}

 /* ブログ本文、続きを読むボタンの親要素 */
.page-index .entry-content {
    margin-top: 0;
    margin-bottom: 24px;
}

 /* はてなスター、SNSボタン関連 */
.page-index .entry-footer {
    display: none;
}

ざっくり説明すると「日付、ブログタイトル、カテゴリの親要素」を「display: table-footer-group」という記述でブログ本文の下に配置されるようにします。これには「各ブログ記事の親要素」に「display: table」が指定されていないとうまく動作しないので、記述を加えておきます。

これで「画像→タイトル」の順で表示されます。

「はてなスター、SNSボタン関連」はトップページでは表示させたくないので、非表示。

続きを読むを画像に重なるように調整

これがカスタマイズで一番悩んでしまい、結構時間がかかりました。

 /* ブログ本文、続きを読むボタンの親要素 */
.page-index .entry-content {
    position: relative;
}

/* 続きを読むボタン */
.page-index .entry-content .entry-see-more {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    padding-top: 28%;
}

 /* ブログ記事の最初の画像（要素）、続きを読むボタン以外の本文を非表示 */
.page-index .entry-content>:not(:first-child):not(.entry-see-more) {
    display: none;
}

ざっくり説明すると「ブログ記事の最初の画像+続きを読むボタン」以外を非表示にした状態で「ブログ本文、続きを読むボタンの親要素」に「position: relative」、「続きを読むボタン」に「position: absolute」を指定すると、画像（要素）の上に重なるように表示されます。

ただし、このデザインには制約があって

必ず本文の最初は画像
必ず本文に続きを読むを入れる

ということが必要になってきます。ただ、結構だれでもやっていることなのでそんなに大袈裟なことではないですね。

ちなみに悩んだところは「ブログ本文、続きを読むボタンの親要素」に「display: table-header-group」を入れてしまっていたので、「続きを読むボタン」を思い通りの場所に配置できなかったことでした。指定しなくても問題なく動いているようなので良しとします。

検索ボックスをブログ記事の上に移動

これは「続きを読むを画像に重なるように表示」と仕組み自体は同じで表示することができます。

.page-index #content {
    padding-top: 80px;
}

.page-index .hatena-module-search-box {
    position: absolute;
    top: -64px;
    right: 0;
    left: 0;
    margin: auto;
}

コンパイルしたCSSをGitHubにPush

これは事前に最初につくったGitHubリポジトリに変更したCSSをPushするだけですね。

私は「SourceTree」というツールをつかってPushしています。

www.sourcetreeapp.com

はてなブログのヘッダー読み込みにGitHubにPushしたCSSを読み込み

そのままなんですが、はてなブログ側にGitHubにPushしているCSSを読み込ませます。

読み込ませる場所は「管理画面」>「デザイン」>「カスタマイズ」>「ヘッダ」>「タイトル下」です。

<link rel="stylesheet" type="text/css" href=“GItHubにPushしたURL" />

「管理画面」>「デザイン」>「カスタマイズ」>「デザインCSS」に外部CSSを読み込ませる記述を書いてもHTMLとして展開されないようなので「ヘッダ」>「タイトル下」に書きましょう。

さいごに

すごいざっくり書きましたが、だれかの参考になれば幸いです。