また、アップロードした画像は切り抜きやサイズ最適化をすることができます。
設定はマイページのブログ設定からデザイン / ブログ パーツ設定欄のPCへ進みます。
タイトル/背景のタブから行えます。
※ 対応テンプレートはデザイン選択タブにある、マークのついた公式デザインテンプレートのみとなります。
利用手順
1. デザイン設定画面内に新設されたタイトル/背景タブを選択
2. アップロードボタンをクリックし、画像を選択。
※ アップロード可能な画像ファイルの形式はjpg, png, gifのみとなります。
3. 画像アップロード後にポップアップする画面内で画像を編集。
ポップアップ画面内に表示された画像のうち、点線で囲まれた四角形の範囲が切り抜かれます。四角形の範囲は自在に調節が可能です。
画像を切り抜かずにタイトル画像として設定したい場合には、画像を切り抜くと書かれたチェックボックスからチェックを外してください。
また、画像上にブログタイトルのテキストを表示させたくない場合には、その下のタイトルテキストを隠すにチェックを入れてください。(画像全体がリンク化します)
編集を終えたら決定ボタンをクリックしてください。「決定」後も画像の再アップロード・再編集が可能です。
4. タイトル画像が設定された自分のブログを確認。
こちらのサンプルのように、切り抜いた画像の横幅が、テンプレートの横幅にピッタリ合う形で最適化されます。(このサンプルブログでは「タイトルテキストを隠す」設定を行っています)
以上で設定は完了です。
独自タグ
以下のタグを使用して予め対応していないテンプレートをこの機能に対応させることも可能です。
・<$BlogHeaderImageUrl$> : タイトル画像の表示タグ
・<$BlogHeaderImageWidth$> : タイトル画像の横幅指定タグ
・<$BlogHeaderImageHeight$> : タイトル画像の高さ指定タグ
※独自タグについては「こちら」をご覧ください。
導入例
・ヘッダー画像を表示させたい場所に<$BlogHeaderImageUrl$>という独自タグを挿入する。
<div class="blog-title-outer"<IfBlogHeaderImageUrl> style="background-image:url(<$BlogHeaderImageUrl$>);"</IfBlogHeaderImageUrl>>
※<IfBlogHeaderImageUrl>は、タイトル画像が設定さているかの条件タグ
・タイトル画像の横幅を指定する場合
<div class="blog-title-outer"<IfBlogHeaderImageUrl> style="background:url(<$BlogHeaderImageUrl$>) no-repeat left top;width:<$BlogHeaderImageWidth$>px;"</IfBlogHeaderImageUrl>>
・タイトル画像の縦幅を指定する場合
<div class="blog-title-outer"<IfBlogHeaderImageUrl> style="background:url(<$BlogHeaderImageUrl$>) no-repeat left top;height:<$BlogHeaderImageHeight$>px;"</IfBlogHeaderImageUrl>>
背景画像を変更してタイトル文字が見づらくなった場合は、こちらを参考にCSSで文字色を変えてみてください。