ゆるりまあるく

~ システム管理者で主婦の私の暮らしの工夫 ~

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

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

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

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

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

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

 

 

サイドバーの幅の調整

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

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

参考になりました。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のところの数字を小さくしていきました(上の色付きの文字列です)。するとサイドバーが右側に戻ってくれました。ここの数字を小さくするとメインの枠が狭くなるようです。色々数字を入れて調整してここに落ち着きました。

  ※2016.4.2時点←後日また変更するかもしれません(^^; 

 

 

<スポンサーサイト>

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

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

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

 

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

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

f:id:yururimaaruku:20160402100530p:plain

 

ブログのデザインを触っていると結構時間がかかります。

私の場合、色々調べながら手探り状態で試行錯誤しているので余計に。

折角の情報なので、共有させていただければと思っています。

 

コメントやメッセージとても楽しく読ませていただいています。

本当にありがとうございます。

 

反響があると嬉しくてやる気が出てきます!(^^)!

 

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


今後ともよろしくお願いいたします。

 

▼応援クリックしていただけると励みになります。

にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ
にほんブログ村

 

Google Adsenseについての本

最近かなり気になっている本です。本屋で見ましたがなかなか良さそう。

アドセンスの収入が入ったら最初に購入しようと思っています。

 

 

▼独自ドメインはここでとりました。

 

▼スポンサーサイト

 

 

他にこんな記事も書いております。

 

 

 

 

 

 

 

yururimaaruku.hateblo.jp