ブログタイトル画像の周りの余白を無くす方法
【スポンサーリンク】
こんにちは。
現在ブログデザインをカスタマイズ中なのですが、なかなかうまくいかず悪戦苦闘中の蒼夢です(-_-;)
ということで、ブログタイトル周辺の調整について備忘録もといメモ程度に残しておきます。
使用テーマ
まず初めに、テーマですがこれまでは公式テーマの”evergreen”を使用しておりましたが2カラムのテーマにしたいと思い、思い切って変更しました。
テーマはこどみすさんの”Minimalism”を使わせていただきました。
テーマの変更に伴い、いろいろなところがガタガタに😱
しかもCSSはコピペしてメモ帳に貼り付けといたのはいいが、面倒臭がってこれまでコメント等で整理しておかなかった為ごちゃついてよくわかんなくなってました。
と言うことで、もういっそのこと１から作り直すことに決めました。
↑本当に蒼夢さんは面倒くさがりやの鑑ですねｗｗ
ブログタイトル画像を挿入
ブログタイトルを画像に変更しようと思ったのですが、ブログデザイン編集ツールから挿入しようとすると画像サイズが横1000px縦200pxになってしまうので、はてなフォトライフにタイトル画像をアップロードしてそれを使うことにしました。
また、この際タイトル画像周りの余白が気になったのでこれを無くすようにCSSで指定しました。
それがこちら↓
/* ----- ブログタイトル挿入 ----- */
#blog-title {
background-image: url("画像URL");
background-repeat: no-repeat; /*画像繰り返し*/
background-position: center; /*画像の位置*/
background-size: cover;
height: 300px;/* 表示したい画像の高さ */
width: 100%;/* 幅100%に */
margin: 0;
padding: 0;
top: 0;
overflow-x: hidden; /*はみ出た部分の表示方法*/
}
「画像URL」の所にフォトライフにアップロードしたブログタイトル画像のURLを入れて、「height:〇〇px;」の所に表示したい（アップした）画像の高さを入れます。
これでとりあえずタイトル画像を横幅いっぱいに挿入できました。
タイトル文字を非表示にする
上記の方法でタイトル画像を挿入するとタイトルの文字が残ってしまうので、これを非表示（削除ではない）にします。
それがこちら↓
/* ----- ブログタイトルを非表示 ----- */
#title a {
visibility: hidden;
}
これをCSSの所に加えればOKです。
ブログ説明文を編集
ブログ説明文も非表示にしたい場合もタイトルと同じようにCSSに付け加えればOKですが、今回は説明文は位置を調整しつつ残しました。
ブログ説明文編集のコードはこちら↓
/* ----- ブログ説明編集 ----- */
#blog-description{
color: #カラーコード;
font-size: 120%;
padding: 180px 0px 0px 0px;/*左から「上右下左」*/
}
とりあえずこんな感じで編集しました。
問題点
以上のようにしてブログタイトルを編集した訳ですが、ここで問題が発生しました。
タイトルについていたブログトップページへのリンクが見事になくなりました。
HTMLの方をいじってやればよいのでしょうが、とりあえず無いと困るものではないのでこれに関してはそのうち修正しようと思います。
まとめ
問題は残ってますがとりあえずタイトル周辺の編集をしました。
他にも色々調整したいのでタイトル周辺に関しては一旦完了とします。
時間ができたら修正して報告したいと思います。
