かんたんタイトル画像

「かんたんタイトル画像」はブログのヘッダー（タイトル部分）に表示する画像を管理画面から手軽に変更できる機能です。

また、アップロードした画像は切り抜きやサイズ最適化をすることができます。

設定はマイページの ブログ設定 から デザイン / ブログ パーツ設定 欄の 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で文字色を変えてみてください。

• ブログタイトルの文字色を変更する