【Bloggerを使いこなす】第2回 タイトル画像を調節する

f:id:naru443:20200710222956p:plain

【Bloggerを使いこなす】第2回 タイトル画像を調節する

第1回はこちら << ■■■ >> 第3回はこちら


先日作ったBloggerのブログタイトルに、画像がないので入れてみました。

ですが、以下のように、途中で切れてしまったため、調節しました。

今回は、タイトル画像の入れ方と、サイズを調節する方法をご紹介します。

 

f:id:naru443:20200710175545p:plain

 

 

タイトル画像を入れる方法

 

管理画面の左ペイン「レイアウト」→「ヘッダー」のペンマークをクリック

f:id:naru443:20200710180009p:plain

 

ヘッダーのポップアップが出るので、「ファイルを選択」してアップロードします。

f:id:naru443:20200710180156p:plain

こんなかんじで、「保存」します。

f:id:naru443:20200710180615p:plain

 

では早速、ブログを表示してみます。

ちゃんと画像が入りました。

ところが、タイトル画像がドデカくなってしまいました;

f:id:naru443:20200710180736p:plain

かなりバランスが悪いです。

なのでここから、タイトル領域の高さを調節をしました。

 

タイトル領域の高さを調節する

タイトル画像の高さを変えたいので、以下を行ってみます。

左ペイン「テーマ」 →「カスタマイズ」

f:id:naru443:20200710181239p:plain

 

「上級者」 →「CSSを追加」

f:id:naru443:20200710181555p:plain

 

以下の内容をコピペ →「ブログに適用」 →「Bloggerに戻る」

#header-inner{
max-height:150px;
align-items:center;
margin:0 auto;
}

f:id:naru443:20200710182110p:plain

 では、ブログを表示してみます。

f:id:naru443:20200710210747p:plain

何も変わりません...。

元の画像サイズが優先されているものと思われます。

なので、UPした画像は一旦削除して、高さを半分の150pxにリサイズした画像で、もう一度アップしなおしました。

f:id:naru443:20200710220916p:plain

 

サイズが小さくなっただけで、左よりになっています。

どうやらこのテーマでは、CSSの設定が効かないようです。

他のテーマで試したら、有効なものもありましたので。

 

今回のテーマは、

max-height:150px;(高さ調節)も効かず、

align-items:center; margin:0 auto;(センター寄せ)も効きませんでした。


そこで、今回は仕方なく、画像に透明な横長の四角をつけることで、横長の画像を作るという、超アナログな方法に落ち着きました。

 

f:id:naru443:20200710221722p:plain

 

表示はどうなったかというと、

f:id:naru443:20200710222244p:plain

ましになりました。

 

テーマによって、必ずしもCSSが効くとは限らないということを学びました。

色々と方法を試してもダメな場合は、私のようにアナログな方法で形にするのもありだと思います。