f:id:t-d-0203:20170902004047j:plain

初のプログラミングの記事です。

備忘録にもなるのでこれからちまちま残していければと思います。

Sponsored Link - Powered by Google.

 はてな サイドバー”最新記事”をおしゃれにカスタマイズ

下図が完成イメージで、バナーのようになります。

f:id:t-d-0203:20170901223126p:plain f:id:t-d-0203:20170901223304p:plain

マウスオーバーで画像が薄く、文字が大きくなります。

前提条件

うまくいかない場合はテーマを以下に設定する必要があります。

下記テーマ以外では動作確認はしていません。

Innocent – テーマ ストア

非常に人気のテーマでこれを前提条件にしているカスタマイズも多いのでこちらおすすめですよ。私もこちらを使わせていただきました。

設定

画像は記事のサムネイルが自動で設定されます。

下記 の順で押下していってください。

1. はてなのブログ管理画面 

2. デザイン設定

3. サイドバー

4. モジュールを追加

5. 最新記事

下図の画面に遷移すると思います。

f:id:t-d-0203:20170901224201p:plain

特に設定する必要があるのは、画像サイズだけです。

以下のように設定しましょう。

f:id:t-d-0203:20170901224610p:plain

設定が終わると適用を押してください。

そしてブログを確認するとサイドバーに最新記事が標準のデザインで表示されていると思います。

設定はここまでで、次はCSSを編集しましょう。

Sponsored Link - Powered by Google.

ソースコード

ソースと言っても難しいことはなく、コピーするだけです。

あまりきれいなコードではないですが、、参考にどうぞ。

f:id:t-d-0203:20170901224918p:plain

先ほどのサイドバーの下のデザインCSSに以下をコピペします。

まとめ

簡単でしたよね!これだけで画像の上に文字が出る最新記事欄が作成できます。

良かったらぜひお試しください!

Sponsored Link - Powered by Google.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です