hankyu blog

アウトプットが大事と聞いたので、勉強中メモを書いていこうと思います。仕事は.NET中心で、最近はWebの世界に足を突っ込み中。フォクすけくんかわいい。

はてなブログをちょっとカスタマイズしてみました

ブログのメイン部分をちょっと広げたいな、と思いカスタマイズしてみました。
ちょっとしたことですが、思った通りにできたので満足です(´∪`*)

カスタマイズ前

f:id:tomoko_tsubasa:20150827190952p:plain

設定場所

右上のはてなID>デザイン>カスタマイズ>デザインCSS

f:id:tomoko_tsubasa:20150827190529p:plain

設定を変更したい部分のidを確認します。こんな感じでした。

f:id:tomoko_tsubasa:20150827190708p:plain
※タッチパッドで書いたので文字がきたなくてすみません><

CSS

デザインCSSに下記設定をします。 やっていることはこれだけです。

  • contentの幅を広げる。
  • 白地の背景にぴったり収まるようにmainを広げる。
  • はみ出たbox2をmainと統一感が出るように背景色(白)を設定する。
#content {
  width: 1400px;
}

#main {
  width: 1000px;
}

#box2 {
  width: 300px;
  background-color: white;
  padding:10px;
}

カスタマイズ後

f:id:tomoko_tsubasa:20150827192207p:plain

感想

カスタマイズはCSS以外にも、ヘッダ・フッタ・サイドバーにHTMLを設定したりできるみたいですね。スマホ用画面はproにならないとカスタマイズはできないようです‥

今回は公式テンプレートをカスタマイズしましたが、いずれは自分でテンプレートを作ってみたいです!

‥いつまでたってもプロフィールアイコンが反映されないのはなんでなんでしょう?困った(´・ω・`)

追記(8/29)

幅広すぎたのでちょっと修正したけどなかなか思うようにいかない><
もうちょっとちゃんと勉強しよう(汗)