カバー画像設定機能を利用することで、任意の画像をブログのヘッダーに表示し、ブログタイトルの背景画像として表示することができます。
【ご注意】カバー画像設定機能があるデザインテンプレートと、無いデザインテンプレートがあります。
カバー画像設定機能があるデザインの例
シンプル－スタンダード、バンド01、バンド02、ノスタルジア など
詳しくは、「カバー画像（ブログタイトル背景画像）を設定しやすいデザインテンプレート」をご覧ください。
https://support.at.webry.info/201907/article_design_010.html
設定方法
- ウェブリブログ管理画面にログインし、「デザイン」を選びます。
- 「デザイン切替/CSS編集」を選びます。
- カバー画像(タイトル背景画像)を設定したいデザインテンプレートのタイトルをクリックします。
- カバー画像が設定できるデザインテンプレートの場合、「カバー画像設定」というタブが表示されているため、そちらをクリックします。※デザインテンプレートによってはカバー画像が設定できないものもあります。その場合にはタブが表示されません。
- カバー画像にしたい画像をアップロードします。既にアップロード済みの画像を利用することもできます。
※「クリック、もしくはここにファイルをドロップ」と表示されている部分に画像をドラッグアンドドロップすると、下部にその画像のサムネイルが追加されます。この部分はファイルマネージャーと連動しているため、既にアップロードした画像がある場合にはそれも表示されます。
カバー画像にしたい画像のサムネイルをクリックします。
※ブラウザが保持しているキャッシュの影響により表示が崩れている場合があります。その際にはページの再読み込みやキャッシュのクリアをお試しください。
- 【画像を切り取る】にチェックを入れた状態で画像を選択すると、切り取りを行う画面が表示されます。
- ドラッグ操作で元画像の中からカバー画像にしたい部分を選択して、最後に[切り取りを実行]ボタンをクリックします。
※上下の位置はあとから微調整できます。左右のバランスを重視してください。
- カバー画像の詳細設定を行う画面が表示され、ブログタイトルやブログ説明文の文字色を変えることができます。
- カバー画像を設定したところ、文字色が同化してしまいブログタイトルが見えづらいといった場合には、RGBの数値やバーを動かして文字色を変えたり、画像の濃さを変えたり、画像の位置を調整したりすることで、見やすさを調整することができます。
- ページ下部の[プレビュー]ボタンで、掲載イメージを確認してください。
- 最終的にページ内下部の[保存]ボタンをクリックすると、その画像がカバー画像として設定されます。※操作は続きます
- 設定完了を示す画面が表示されます。※操作は続きますこのあと、「スタイルシート編集」を選んでください。
- 元のデザインテンプレートの名前が出ていますが、このままですと後からリストを見て「ヘッダー画像を自分で掲載したもの」だとわかりにくいので、好きな名前に変更してください。
- ページ下部の「バックアップして保存」を選んでください。
- これで、あなたのオリジナルのデザインテンプレートが完成しました。
- 今後、他のデザインテンプレートに変更した後でも、[デザイン]-「デザイン切り替え/CSS編集」で、呼び出すことができます。
- これで、カバー画像(ブログタイトル背景画像)設定は完了です。お疲れ様でした。
カバー画像の解除方法
- ウェブリブログ管理画面にログインし、「デザイン」＞「デザイン切替/CSS編集」で、カバー画像(タイトル背景画像)が設定されているデザインテンプレートのタイトルをクリックします。
- [カバー画像設定]のタブをクリックします。
- 現在設定されているカバー画像の下に[解除]ボタンが表示されているため、そちらをクリックします。
- カバー画像の設定が解除され、デフォルト状態の表示に戻ります。
（ご参考）カバー画像のサイズついて
カバー画像のサイズにつきましては、デザインテンプレートの種類
また、ブログ紹介の文面が長い等の原因により、表示される範囲がプレビューと大きく異なる場合があります。
以下でご紹介する二つの表示イメージは、カバー画像の設定自体は変更しておりません。ブログ紹介分の長さが違うだけで、カバー画像の見え方が違ってきています。
★ブログ紹介文が短い場合
★ブログ紹介文が長い場合
