4liberty-image

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

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

Sponsored Link - Powered by Google.

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

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

4liberty-image 4liberty-image

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

前提条件

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

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

Innocent – テーマ ストア

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

設定

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

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

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

2. デザイン設定

3. サイドバー

4. モジュールを追加

5. 最新記事

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

4liberty-image

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

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

4liberty-image

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

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

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

Sponsored Link - Powered by Google.

ソースコード

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

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

4liberty-image

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

まとめ

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

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

Sponsored Link - Powered by Google.
カテゴリー: ProgrammerProgramming

コメントを残す

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