【Bloggerを使いこなす】第2回 タイトル画像を調節する
先日作ったBloggerのブログタイトルに、画像がないので入れてみました。
ですが、以下のように、途中で切れてしまったため、調節しました。
今回は、タイトル画像の入れ方と、サイズを調節する方法をご紹介します。
タイトル画像を入れる方法
管理画面の左ペイン「レイアウト」→「ヘッダー」のペンマークをクリック
ヘッダーのポップアップが出るので、「ファイルを選択」してアップロードします。
こんなかんじで、「保存」します。
では早速、ブログを表示してみます。
ちゃんと画像が入りました。
ところが、タイトル画像がドデカくなってしまいました；
かなりバランスが悪いです。
なのでここから、タイトル領域の高さを調節をしました。
タイトル領域の高さを調節する
タイトル画像の高さを変えたいので、以下を行ってみます。
左ペイン「テーマ」 →「カスタマイズ」
「上級者」 →「CSSを追加」
以下の内容をコピペ →「ブログに適用」 →「Bloggerに戻る」
#header-inner{
max-height:150px;
align-items:center;
margin:0 auto;
}
では、ブログを表示してみます。
何も変わりません...。
元の画像サイズが優先されているものと思われます。
なので、UPした画像は一旦削除して、高さを半分の150pxにリサイズした画像で、もう一度アップしなおしました。
サイズが小さくなっただけで、左よりになっています。
どうやらこのテーマでは、CSSの設定が効かないようです。
他のテーマで試したら、有効なものもありましたので。
今回のテーマは、
max-height:150px;（高さ調節）も効かず、
align-items:center; margin:0 auto;（センター寄せ）も効きませんでした。
そこで、今回は仕方なく、画像に透明な横長の四角をつけることで、横長の画像を作るという、超アナログな方法に落ち着きました。
表示はどうなったかというと、
ましになりました。
テーマによって、必ずしもCSSが効くとは限らないということを学びました。
色々と方法を試してもダメな場合は、私のようにアナログな方法で形にするのもありだと思います。
