アメブロのヘッダーに
オリジナルの写真を使って
好きなように文字を載せて
ヘッダー画像にしたい！
でも自分じゃできない！
高い金を払って外注しないと！
と思ってませんか？！
簡単に自分でできる方法があります。
それはパワポ（パワーポイント）で作る方法。
パワポアレルギーの人多いと思います。
パワポなんて難しいと。
そんなことはありません。
ワードやエクセルよりはるかに簡単！
自在に自分の好きな画像が作れます！
アメブロのヘッダー画像を
パワポで作成する方法と
自分で簡単に設置する方法を教えます。
＜ヘッダー画像を作る＞
1：パワポを立ち上げます。
2：使いたい写真を入れます。
（写真は複数でも可能）
3：ヘッダー画像は横長なので
写真を横長にトリミングします。
トリミングの仕方は右クリックして
トリミングを選択。
すると写真に枠みたいな黒い線が
でてきますので
上下中央にある黒い線を動かし
できるだけ横長にします。
4：横長にしたら
入れたい文字を入れるため
テキストボックスを作って
文字を入れて配置や色を考えます。
5：ヘッダー画像のもとができたら
スクリーンショットをとって画像化するか
このページを画像保存します。
6：フォトショップなどの
画像編集ソフトを使って
横の長さを1120ピクセルにします。
縦は自分の好きなサイズでよいですが
350ピクセルから500ピクセルぐらいが
よいのではと思います。
7：これでヘッダー画像が完成です！
自分でパワポなので
気に食わなければ
いろんな写真を入れてみたり
文字の大きさを変えてみたり
ヘッダー画像を変えたかったり
文字を変えたかったら
いくらでも自分で作れます！
もうこれでお金を払わず
自分で簡単にできます！
ではどうやって設定するのか。
1：ブログ管理＞デザイン設定で
デザイン変更します。
下の方をスクロールすると
「他のカテゴリーから
ブログデザインを探す」があり
そこから「カスタム可能」をクリック。
2：その中から「CSS編集用デザイン」
を選びます。
3：CSSの編集画面にいくと
「ブログデザインヘッダ・背景画像の追加」
があるので、ここで
「ファイル選択」を選び
先ほどパワポで作った画像を
アップロードします。
アップロードすると黄色い枠に
「この画像のパス」というのがでてきます。
4：編集画面のスクロールできるところを
一番下までスクロールし
下記コードをはりつけてください。
/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: 【背景色】;
background-image: url(ここに画像リンク);
}
/* ヘッダーの横幅を設定する */
.skin-bgHeader [data-uranus-layout="headerInner"] {
width: 1120px;
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: ヘッダーの高さ数字半角px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}
5：上記部分で「画像リンク」
と書いてある部分に
先ほどアップロードして
でてきた黄色の枠内にある
リンクをはりつけます。
6：ヘッダーの高さ数字半角
に高さを入れます。
ご自身の画像が横1120ピクセルに
なっている時に縦が
何ピクセルかを確認し
その数値を入れます。
7：これで保存すると
ヘッダー画像ができあがり！
というわけでみなさん！
いくらでも簡単に自分で
ヘッダー画像を作れます！
ぜひ試してみてください！
＊ブログは2000年2月から毎日更新！
アメブロに引っ越ししたのは2018年10月からですが
毎日、生き方、働き方、ネット集客、
ブランディングに役立つ情報を発信。
フォローしていただければと思います。
＊今回の記事作成にあたり
参考にしたブログ
https://bloom-web.com/ameblo-header/
https://ameblo.jp/amecafe2011/entry-10988671227.html
＜再受講無料、個別相談、卒業後も相談無料！
好きを仕事にする大人塾＝かさこ塾講義＞
かさこツイッター（フォローどうぞ）
かさこフェイスブック（フォローどうぞ）
・生き方・働き方のヒントになる
無料冊子「自分探しガイドブック
〜かさこマガジン９」無料配布中！
他人軸から自分軸へのヒントになります！
欲しい方はフォームにどうぞ！
＜初心者でもスマホでもOK！
写真がうまくなる写真講座＞
＊講義データ販売中
https://ameblo.jp/kasakot/entry-12446314134.html
＜好きを仕事にする2時間ブログ術講義＞
＊講義データ販売中
https://ameblo.jp/kasakot/entry-12446314147.html
＜中学校、高校、大学、
専門学校のキャリア教育講演や
中小企業経営者向け、個人事業主向けの
ネット活用講演なども行っております。
講義・講演依頼などはメールで
お問い合わせください＞
kasakotaka@hotmail.com
中学校キャリア教育講演動画
https://www.youtube.com/watch?v=PKoW8TJ3fZc
高校生保護者向けキャリア教育講演動画
https://www.youtube.com/watch?v=1ogqi0YAA1E
＜中学校、高校、大学、
専門学校のキャリア教育講演や
中小企業経営者向け、個人事業主向けの
ネット活用講演なども行っております。
講義・講演依頼などは
メールでお問い合わせください＞
kasakotaka@hotmail.com
中学校キャリア教育講演動画
https://www.youtube.com/watch?v=PKoW8TJ3fZc
高校生保護者向けキャリア教育講演動画
https://www.youtube.com/watch?v=1ogqi0YAA1E