STEP
- 自分でヘッダー画像を作る
- ヘッダー画像をアメブロに挿入する
canvaなどを利用して
自分でお好みのヘッダーを作成する
canvaは出来上がりのサイズを指定したり
写真や素材も、canva内にあるものから選べるので
ヘッダー画像を作る以外にも
とてのオススメなツールです
無料でもある程度利用できますが
有料会員になるとたくさんの機能が
ストレスなく使えるので
個人的にはオススメです
canvaは説明書がなくても
感覚的に使っていけますが
もし手っ取り早く使い方を知りたい！
という方は
個別にレクチャーも可能ですので
ご連絡ください♡
【制作する場合のサイズ】
横幅1120px(ピクセル) ✖︎ 縦幅400px（ピクセル）
写真・素材・文字などを組み合わせて
お好みのヘッダーを作成する
このブログのヘッダーはこんな感じで作成
ヘッダー画像はパソコンから見ている方には
表示されますが
スマホから見ている方には
表示されません
アメブロで集客したい方は
ほとんどの場合
ヘッダー画像はオリジナルのものにされていますね
最初に見る画面なので
その画像を見るだけで
何の記事を書いているブログなのか？
何屋さんなのか？が
分かりやすい画像やタイトルを
表示されている方が多いと思います
自分で作れない場合には
ヘッダー制作代行依頼することも可能です
「アメブロヘッダー制作」
「ヘッダー制作」
などで検索してみてください♡
ヘッダー画像ができたら
パソコンにダウンロードし
分かるところに保存しておきます
ヘッダーができたらアメブロに挿入します
ヘッダーをデザインするには
CSS編集という作業が必要になってきます
その為、ブログのデザインは
「カスタム可能」の中から選択しておきます
▶︎ブログ管理
▶︎デザインの設定
▶︎ブログのデザインを探す
▶︎カスタム可能
ヘッダー画像をCSS編集でカスタマイズしましょう
▶︎ブログ管理
▶︎デザインの設定
▶︎CSSの編集
▶︎ブログデザインヘッダ・背景用画像
▶︎ファイルを選択(ヘッダー画像を選択する)
▶︎アップロード
アップロードを押すと
上記のように自分がアップロードした画像が表示されます
後ほど、黄色部分の「この画像のパス」のURLを使用します
このページの下へ行くと
CSSを編集する場所があります
ここにピンク部分を追加します
【追加するコード】コピペして使います
/* ここから追加*/
/* ヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(黄色部分の「この画像のパス」のURLを挿入);
background-size:100%;
width:1120px;
margin: 0 auto;
height: 400px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}
/* ここまで*/
ヘッダー画像の縦幅は、コピペした状態では
400pxになっているので
違う高さで作った場合には
その高さに変更してください
例えば縦幅600pxでヘッダー画像を作ったら
600pxと自分で書き換えます
作業が終わったら
下の方に「表示を確認する」
というボタンがあるのでクリックして
ちゃんと表示されるか確認し
保存を押して完了です
上手くできましたか？
初めて自分でヘッダー画像を作って
表示させるまでやろうと思うと
最初は時間がかかってしまうと思いますが
こういった作業が好きな方なら
自力で形になると思いますので
興味があればやってみてくださいね！