はてなブログのデザインカスタマイズ【ヘッダー(タイトル)画像下の余白の調整方法編】
スポンサーリンク
今回の記事は、はてなブログのデザインのカスタマイズ編です。
前回行ったヘッダー画像の高さ調節で余分な余白を調節する内容になります。
ヘッダー(タイトル)画像の余分な余白の調節設定方法
前回の記事では、ヘッダー(タイトル)の画像の設定を行いました。
まだ設定を行っていない方はこちらの記事を読みながら設定を行ってください。
はてなブログの始めた人がやっておくべきデザインカスタマイズ【ヘッダー画像の設定編】
通常設定では余白がヘッダー(タイトル)画像の間に余白が出る？
通常のヘッダー画像の設定を行った後の状態ですと、変な余白が画像の下に出てきてします。
この状態でも構わないという人は、このままでも良いのですが、自分は少し気になったので、この部分を調節してこのような形に直しました。
どうでしょうか？
少しスッキリした印象に変わりましたよね。
今回はこの設定を行っていきたいと思います。
ではスタートしましょう。
デザイン設定欄からデザインＣＳＳにコードを入力する
では今回も【ダッシュボード(管理画面)】から【デザイン】の欄に行きましょう。
【デザイン】の項目に入りましたら次に、管理画面に戻るの下の工具のマークをクリックしましょう。
クリックすると、このような項目が出てきますので一番下の【デザインＣＳＳ】という項目に進みます。
ここの【デザインＣＳＳ】の欄をクリックすると、ＣＳＳを入力出来る項目が出てきます。
『ＣＳＳ』とはブログやサイトの表示されるデザインを調節するためのコードです。
ここの【デザインのＣＳＳ】の欄はカスタマイズをする際には良く使用する場所なので覚えておきましょう。
ではそのデザインをする為の『ＣＳＳ』を入力していきましょう。
今回はシンプルに高さだけを調整したいのでこのようなコードの内容になります。
/* ----- ブログタイトル下のスペース調整 ---- */
#blog-title{
height:130px;
}
この内容コピーして【デザインＣＳＳ】の項目の中に貼り付けをします。
どうでしょうか？入力をすると隣に表示されているブログのデザインが少し変わりましたね。
もしこの状態で丁度良い方は【変更を保存する】をクリックして終了になります。
高さが微妙に合わない方もいると思いますので、次は調整方法を書いていきたいます。
高さが合わない場合のデザインCSSのコード変更方法
/* ----- ブログタイトル下のスペース調整 ---- */
#blog-title{
height:130px;
}
現在このような記入になっているかと思いますが、高さを高くしたり低くする場合は、
【height: ここ数値を変える px ;】
- 高くしたい場合は 数値を少なくする。
- 低くしたい場合 数値を上げる
※数値を変える場合は10pxごとに変更することをオススメします。
必ず変更が終了したら【変更を保存する】をクリックしてください。
あとはご自身の好きな感覚になりますので微調整をよろしくお願いします。
まとめ
今回の記事は、デザインのCSSの入力になりましたが、HTMLやCSSの知識が無くてもたくさんの方がコードをネット上に掲載しておりますので、初心者の方でも勉強しなきゃいけないという訳ではないです。
これからの記事はデザインのカスタマイズ編になりますが、デザインのＣＳＳ欄は良く使用する場所なので覚えておきましょう。
分からない部分や、上手く表示が出来ない方はコメント欄やツイッターなどからご連絡を頂けましたらなるべく早く回答を致しますのでお気軽にご質問下さいませ。