ブロプー Blog

こんにちは！さいとうです
実は・・・重大なお知らせがあります
６月５日からスタートしたこのブロプーBLOG。
今回の第24回をもちまして、終了とさせていただきます

私はブログのテンプレート制作に関して知識がなかったので、このブログを書きながら少しずつ勉強してきました。

そんな大したWebの知識も持たない私が書いてきたブログですが、少しでも誰かのお役に立てれたら幸いです

さてそんな最終回は、前回に引き続き「ちょっと役立つ？tips」です。

画像を上下の真ん中に表示させる

右の図のように、記事やプラグインのタイトルの背景に画像を表示させたい場合、文字数が１行で収まる場合は特に問題ないのですが・・・

2行3行となると、真ん中に表示させたかった画像が上に行ってしまいます

この例のデザインの場合は画像が上にいってしまっても気になりませんが、画像が枠線の場合は、枠から文字がはみ出てしまいます

右の図のように文字の真ん中に画像が表示されるようにするには、背景を表示している要素にbackground-position: left center;を記述します。

これだけでは文字数が少ない場合、画像が切れてしまうので高さを指定しなければいけません。

単純にheightで高さを指定すると、文字数が多くて指定した高さ以上になった場合、次の要素と表示がかぶってしまいます。そこでpaddingで上下に余白を持たせ、画像が全て表示されるように高さを作ります。

これで文字が大きくなっても、文字数が増えても、背景の画像が文字の上下の真ん中に表示されるようになりました！

６月から半年間という短い間でしたが、どうもありがとうございました。ブロプーBLOGは今回で終了となってしまいますが、ブロプーは今後もどんどん新作テンプレートを公開していきますので、みなさま今後ともブロプーをよろしくお願い致します

新作テンプレートが追加されました！ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ