備忘録のような何か

何か += 備忘録( 日々のこと, 妄想, IT, DIY, 畑仕事 );

はてなブログのデザインをカスタマイズ

移転しました。

約5秒後に自動的にリダイレクトします。



ここ数日、ちまちまとブログのデザインをカスタマイズして遊んでいました。
いじったところの備忘録ついでにカスタマイズ方法をご紹介したいと思います。

【目次】


以前はどんなデザインだったっけ?

以前は以下のテーマをデフォルト設定のままインストールしてただけでした。

Written - テーマ ストア - はてなブログ

とてもシンプルなのが気に入ってたのですが、
ちょっと気分転換にいろいろいじってみたくなったのです。

元がシンプルな分、カスタマイズするには良い状態でした。

ブログタイトルのカスタマイズ

ブログタイトルに画像を使ってみます。

f:id:m_uta:20151216210047p:plain
Before

f:id:m_uta:20151216210057p:plain
After
我が家のお猫様です(ΦωΦ)
なんかこれだけでずいぶんリッチになった気がしますね。


何をいじったの?

f:id:m_uta:20151216211310j:plain
デザイン設定画面のカスタマイズタブから
「ヘッダ」と「デザインCSS」を変更しました。

f:id:m_uta:20151216211314p:plain
まずは「ヘッダ」のタイトル画像のところに使用する写真をアップロードします。
その後、画像のどの部分を使うかの選択を行います。

元の写真の形は関係ないですが、最終的に横長の写真になるので、
構図は考えて写真を選びましょ〜。

f:id:m_uta:20151216211320p:plain
次にCSSを適用します。

「ブログの説明」(タイトルの下)の文字が太字になっていて見づらいので、
太字を解除したいと思います。

以下のコードを追加。

/* ブログタイトル */
.header-image-enable #blog-title #blog-description {
    font-weight: normal;
}


サイドバーのカスタマイズ

サイドバーは細々とした変更です。

f:id:m_uta:20151216215255p:plain f:id:m_uta:20151216215301p:plain
BeforeAfter


やったことは主に2つ。

  • 最新エントリと注目エントリにサムネイル画像を表示
  • 各モジュールのタイトルアイコンを統一



何をいじったの?

f:id:m_uta:20151216221212j:plain
「サイドバー」と「デザインCSS」を変更しました。

f:id:m_uta:20151216221204j:plain
まずは「サイドバー」の最新記事モジュールの編集画面を開いて、
"サムネイル画像を表示する"にチェックを入れます。
画像の大きさはお好みで変更できます。
デフォルトの100×100だとちょっと大きい気がしたので90×90にしてみました。

次に各モジュールのタイトルアイコンですが。
別にそのままでも良かったのだけれど、
一番下の「欲しいもの」だけアイコンがないのです!!

既存で用意されているモジュールにはアイコンが付いていたのですが、
HTMLモジュールにだけは付かないっぽい。
ベースにしているテーマを変えればいいのかもしれませんが、
ここはちょっと強引に直すことに。(別のテーマを探すのがめんd...)

CSSに以下のコードを追加して、アイコンの代わりに"○"を表示させました。

/* サイドバーモジュールタイトル */
.hatena-module-title:before,
.hatena-module-profile .hatena-module-title:before,
.hatena-module-entries-access-ranking .hatena-module-title:before,
.hatena-module-recent-entries .hatena-module-title:before,
.hatena-module-archive .hatena-module-title:before,
.hatena-module-links .hatena-module-title:before {
    content: '○';
    font-size: 1.2em;
}


記事タイトルのカスタマイズ

f:id:m_uta:20151216223733p:plain
Before

f:id:m_uta:20151216223706p:plain
After


何をいじったの?

これはCSSをいじっただけです。以下のコードを追加。

/* 記事タイトル */
.entry-title {
    border-bottom: solid 1px #e07000;
    border-left: solid 10px #e07000;
    padding: 10px;
}
.entry-title a {
    color: #000;
}


目次のカスタマイズ

f:id:m_uta:20151216224609p:plain
Before

f:id:m_uta:20151216224558p:plain
After


何をいじったの?

こちらもCSSをいじっただけ。以下のコードを追加。

/* 目次 */
.table-of-contents {
    margin-left: 0;
    width: 80%;
    list-style-type: none;
    border-radius: 10px;
    border: dashed 1px #ccc;
    background-color: #f6f6f6;
}
.table-of-contents li {
    margin-left: 10px;
}
.table-of-contents li:before {
    content: "・ ";
}


ちなみに、目次はmarkdown記法を使って

【目次】  
[:contents]

という感じで書くと自動生成されるやつです。

見出しのカスタマイズ

f:id:m_uta:20151216225502p:plain
Before

f:id:m_uta:20151216225508p:plain
After


何をいじったの?

これもCSSだけ。以下のコードを追加。

/* 見出し */
.entry-content h3{
    color: #ffffff;
    background: #e07000;
    padding: 15px 15px;
    border-radius: 10px;
}
.entry-content h3 a {
    text-decoration: none;
    color: #fff;
}


見出しはmarkdown記法で

### 休日のお出かけ

のように書いてます。

まとめ

いかがだったでしょうか?
ちょっと変えるだけでずいぶん印象が変わったような気がしませんか?

僕はデザインのセンスがないので、
ベースのテーマにちょっと手を加える程度しかやりませんでしたけど、
やる気とセンスがあれば、結構細かいところまでカスタマイズ出来そうですね。

今後もちょっとずつ手を加えて行きたいと思います。

(。・ω・)ノシ