【簡単】はてなブログのサイドバーをカスタマイズ。横幅と注目記事のサムネイル画像サイズを調整しました。

2017年9月25日はてなブログからWordpressに移転しました。この記事ははてなブログでの記事です。文中ブログのデザインは現在のデザインとは異なります。(2017.9.27追記)

——————————————–

おはようございます。あいかわらずブログのデザインでさまよっています。

 今回はサイドバーの調整をしてみました。

私の選んだテーマは、全体的には良いのですが・・
サイドバーの横幅が狭くて窮屈なところがどうも気になっていました。

調整してみて少し見やすくなったように思います。

どのようにしたか備忘録 兼ねてご紹介いたします。


[Sponsor]

サイドバーの幅の調整

参考にさせていただいたサイトさま

大変分かりやすく説明してくださっています。

参考になりました。tkoyama1988さま、本当にありがとうございます。

tkoyama1988.hatenablog.com

私のブログの場合

こちらのコードを自分のブログのデザイン→カスタマイズ→サイドバー→CSSの枠に貼り付けました。それぞれのブログのデザインによってちょうどいい数字は違うと思いますので、プレビューで確認しながら調整してみてください(^^)

#box2 {
float: right;
width: 250px; /* サイドバーの幅 */
}

#content {
padding: 0 10px 20px 10px;
}

#wrapper {
float: left;
width:490px;
}

#main {
float: right;
width: 540px;
padding: 0 10px 0 10px;
min-height: 100px;
}

一瞬 戸惑ったところ

ご紹介した記事のコードをそのまま貼り付けるとサイドバーがメイン本文の下に回り込んでしまい、あせりました。そこで#wrapperのところの数字を小さくしていきました(上の色付きの文字列です)。するとサイドバーが右側に戻ってくれました。ここの数字を小さくするとメインの枠が狭くなるようです。色々数字を入れて調整してここに落ち着きました。

「よく読まれている記事」のサムネイル画像

サムネイル画像のサイズを調整しました。

ちょっと大きくするとタイトルがちょうど入るぐらいの高さになりました
(見るものによって多少変わると思いますが・・(^^; 気休め)

管理→デザイン→カスタマイズ→サイドバー→注目記事 にて

今回は縦横70ピクセルにしました。

f:id:yururimaaruku:20160402100530p:plain

ブログのデザインを触っていると結構時間がかかります。私の場合、色々調べながら手探り状態で試行錯誤しているので余計にかかってしまいます。

カスタマイズばかりではなく記事の方も書いていきたいですが、つい楽しくてこちらの方をやってしまっています。

ではまた。

スポンサーサイト