ゆずハック

ゆずハックというブログです。プログラミングからデザイン、生活や恋愛のことまでつらつらと書いています!

【コード付き】はてなブログのスマホ記事一覧ページをカスタマイズしました!

スポンサーリンク


こんにちは、ユズです。今回は、はてなブログのカスタマイズについてです。

いきなりですが、


f:id:yuzuhooo:20170801230702p:plain




私のブログをスマホで見たとき、

トップページ(=記事一覧ページ)めっちゃダサくないすか・・・

正直なところ、下のTOPや人気記事以外は、何も手をつけてない状態です。

もっとおしゃれにしたい!!!

そう思って、こんな感じにしました!


f:id:yuzuhooo:20170801231519p:plain


まあまあおしゃれになりましたよね。はい。笑(黙れ)

ということで何をやったか、どのコードをどこに貼り付ければいいかというのを教えたいと思います!

何をしたか!これだけ!

実はやったのはこれだけなんです。

  • ヘッダ(一番上の部分)を画像のみにしました。
  • はてなブログ特有の上の部分を非表示にした
  • 記事一覧に表示させるものを、アイキャッチ画像、日付、タイトルだけにした



ヘッダ(一番上の部分)を画像のみにしました

f:id:yuzuhooo:20170801235734p:plain:w280


通常のはてなブログだと、スマホで見た際、ヘッダ画像とブログタイトルとブログ説明文とアイコン画像の4つ全てが表示されてしまうんです。そこで、ヘッダ画像のみにし、余分な情報を排除し、すっきりさせました。


f:id:yuzuhooo:20170802000203p:plain:w400


ブログ上のメニューのデザインからできます。ここのチェックボックスを画像だけ表示にします。

これだけで記事一覧の見える部分も増えて、とても良いのです。


はてなブログ特有の上のバーを消しました。


f:id:yuzuhooo:20170801235445p:plain:w280


通常だと、はてなブログ特有の上のバーが表示されてしまいます。これだと見える範囲も狭めるし、なんか煩わしいなと思いませんか?

そこで、同じく デザイン→スマホの設定(スマホアイコン)→ヘッダ の

タイトル下で、スマートフォン用にHTMLに設定をするにチェックを入れます。
そしてこのタグを打てばOKです。

<style>
/* ヘッダーを非表示に */
#globalheader-container {
    display:none;
}

/* 上からヘッダの画像までの余白の調整 */
#container {
    padding-top: 10px; //数字を変えてね
}
</style>



記事一覧に表示させるものを、アイキャッチ画像、日付、タイトルだけにした

f:id:yuzuhooo:20170801235627p:plain:w280


そして最後に、これが一番重要なところです!

記事一覧に表示させるものを、アイキャッチ画像、日付、タイトルだけにしました。理由としては、情報量が多いとごちゃごちゃしするからです。

コードはこちら。(ちなみにはてなブログProでなければできないです、、、。)
デザイン→スマホアイコン→フッタ→ページャ下 or フッタにまでを貼り付けてくださいね。

<style>
/* 記事一覧本文、更新時間非表示 */
.entry-list .entry-content p, .entry-list .entry-footer {
    display: none;
}
/* 日付とタイトルを右に */
.list-entry-header {
    float: right;
    width: 70%;
}
/* アイキャッチ画像を左に */
.list-entry-article .entry-body {
    display: table;
    width: 30%;
}
.list-entry-article .entry-body .thumb {
    float: left;
    width: 30%;
}
.list-entry-article {
 overflow: hidden;
}
.list-entry-article .thumb-image {
    width: 80px;
    height: 80px;
    border-radius: .3em;
}

/* 記事タイトルの装飾 */
.list-entry-article .entry-title {
    font-weight: 700;
    font-size: 86%;
    margin-top: .5em;
    margin-bottom: .5em;
}
/* 日付の装飾 */
.date {
    padding: 2px 3px;
    background-color: #fc9d9d; /* 日付の背景色 */
    color: #fff; /* 日付の文字色 */
}

.hatena-module-title {
    font-weight: 700;
    border-bottom: 0;
    margin-bottom: .8em;
    background-color: #b4daed;
    padding: 3px 0 3px 6px;
}
</style>

日付の文字色などは コメントで書いてある部分から変更できます。

まとめ

最近ではPCよりもスマホから記事が読まれるってことも多いはずです。トップページの記事一覧をカスタマイズして、読む人にとって読みやすくできるように是非活用してください!