はてなブログ スマホのトップページをカスタマイズ

当ブログはスマホからのアクセスが圧倒的に多い。 スマホのトップページの記事一覧のデザインがダサいというか、平たい感じ。 ということでちょっとでもいい感じに見えるようにデザインをカスタマイズしてみた。

使用しているはてなブログテーマはDUDE

画像サイズ、画像の枠線、日付のデザインを変更した。

コード挿入箇所

デザイン→スマホアイコン→ヘッダー→タイトル下

タイトル下は「スマートフォン用のHTMLを使用」を選択しておく。

変更コード

<style type="text/css">
  .list-entry-article .thumb-image 
      {
      width: 100px; /*サムネイル画像の横幅*/
      height: 100px; /*サムネイルが画像の縦幅*/
      border-radius: 1em; /*サムネイル画像の角の丸みをなくす*/
      border: solid 3px rgb(131, 210, 250); /*画像の枠線をつける*/
      }

  .date
      {
      color: white; /*日付の文字色*/
      background: #444B99;/*日付の背景色*/
      padding: 0px 10px;/*日付の文字まわりのスペース*/
      }

.list-entry-article .entry-footer {
    background:#0091c5; /* 背景色 */
    color:#fff; /* 文字色 */
}

</style>

変更したのがこんな感じ。

色合いや太さの変更

例えば

    border-radius: 1em; /*サムネイル画像の角の丸みをなくす*/
      border: solid 3px rgb(131, 210, 250); /*画像の枠線をつける*/

の部分の数値を変更するだけで色合い丸みなどを変えることができる。 ちょっとした見た目の変更で他のブログと差別化することもできる。 数値を色々変更してみるのも面白い。

簡単に元に戻すこともできる。

参考サイト

tsukuruiroiro.hatenablog.com

上記サイトを非常に参考にさせてもらいました。 すごくボリュームミーなサイトですごく分かりやすかったてす。

自分に必要な部分だけを取り出して自身の忘備録的に分かりやすくしました。

もし誰かのお役て立てればいいかな。

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ