かたまりちゃん

ブログを作り始めて思った事や、やった事を自分なりにまとめています。

はてなブログのタイトルを画像にしたが、謎の余白が出来て夜も眠れないのでCSSを修正して余白を消す

f:id:katamarichan:20151016203648j:plain


今日は学校が開校記念日でお休みだったので10時間も寝ちゃった、かたまりちゃんです。

はてなブログのタイトルを画像にしたのですが、謎の余白が!!



この余白は一体、何なんでしょうか?


わけがわからないよ。


と、言う事で修正してみたいと思います。

この方法が正しいのかどうかは、はてなブログのヘルプを見ても分かりませんでした。そうです、私はおバカさんです。

ブログのCSSを修正すればできると思うんですけど、頑張ってみました。

少し難しい?かもしれないので、チャレンジする方は自己責任でお願いします。

はてなブログCSSの修正方法


メニューから、デザイン→カスタマイズ→{}デザインCSSを選びます。


f:id:katamarichan:20151016205525j:plain



図の部分のアドレスをドラッグしコピーします。



f:id:katamarichan:20151016210216j:plain



開くと謎の怪文章が表示されます。
使っているテンプレートや、ブラウザ、テキストエディタなど使っている環境によって表示が違うと思いますが、怪文章で間違いないです。


f:id:katamarichan:20151016210948j:plain


この文章をクリックして、Ctrl+A をキー入力し、すべて選択した状態で ctrl+C を押して全部コピーします。

そして、テキストエディタやメモ帳などを開き、ctrl+v で貼り付けます。

そして、余白の部分が書かれている箇所を探します。(これは使用しているテンプレートによって違う可能性があります。)

キーボードの ctrl+F を入力して、そこに下の文字をコピペして、



#blog-title {



エンターキーを押すと




#blog-title {
padding: 48px 0;
border-bottom: 1px solid #e4e4e4;
}



このような感じの部分が選択されたら、あなたの勝ちです。


そこに追記するのですが、タイトルに使っている画像を右クリックしてプロパティを表示し、画像サイズを確認します。



f:id:katamarichan:20151016212320j:plain



画像の高さを直接指定することによって余白を消す作戦です。

先ほどの箇所に



height: 150px;



と追記します。私の場合はタイトル画像が150ピクセルなので、数字が150になっています。タイトル画像のプロパティで確認した数値に変更してください。



#blog-title {
padding: 48px 0;
border-bottom: 1px solid #e4e4e4;
/* ↓ここが追記箇所 */
height: 150px;
}



このように追記します。

そして、ctrl+a で全てを選択し、ctrl+c でコピーし、



f:id:katamarichan:20151016213520j:plain



先ほどの{}デザインCSS の記載をすべて消して ctrl+v で貼り付けます。

【変更を保存する】をクリックして、画面を確認してみましょう。


すっきり余白が無くなっている!(はず)


もし、余白がうまくいかない場合は、タイトル画像のプロパティを確認し、入力した数値を変えてみてください。

この作業によって、以前のデザインスタイル(css)が完全に消えてしまいますので、必要であればバックアップ(メモ帳かなにかに保存)しておきましょう。

文字が全角だったり、ほんの些細な打ち間違えも許されない世界ですので、慎重に作業しましょう。

長くなりましたが、終わりです。
レッツトライ!(失敗したらやり直せばいいのさっ!)