自分でできるアメブロカスタマイズの方法【2020年最新版】の続きです。
せっかく自分でアメブロカスタマイズするなら・・
タイトル文字を自由な位置に配置したい！
そんな願いを叶える記事です。
CSSの知識がなくてもコピペでできる方法なので、パソコンが苦手な起業ママもご安心くださいね。
オリジナル文字入りヘッダー画像を入れる
CSSを編集しない方法だと、このようなカスタマイズになります。
ヘッダー画像は入れられるのですが、タイトル文字はそのままです。
これを・・
こんな風に、ちょっと凝ったフォントスタイルにしたヘッダーを設置する方法をご紹介します。
手順は、
- ヘッダー画像を作る
- CSS編集可能デザインを設定する
- 画像をアップロードする
- コードを貼り付ける
と、なります。
では、ひとつひとつ見ていきましょう。
ヘッダー画像を作る
ヘッダー画像を作る方法は、３つあります。
１，プロにお願いする（有料）
２，Photoshop、Gimp、Pixlrなどの画像加工ソフトを使ってパソコンで作る（無料）
３，スマホのアプリで作る（無料）
いずれかの方法で作成してくださいね。
サイズについて
2016年3月以降の新CSSではヘッダー画像の幅が1120ピクセルになりました。
依頼する場合にも、自分で作成する場合にも、このサイズだけは覚えておいてください。
高さですが、こちらのサンプルヘッダーで幅1120ピクセル✕高さ400ピクセルです。
できればPCのモニターで表示した時に、スクロールしないで記事が見えるほうがよいと思います。
モニターによって差がありますが、この高さが限界かなと思います。参考になさってください！
作成したものは、わかりやすい場所（デスクトップなど）に保存しておきます。
CSS編集可能デザインを設定する
ここからアメブロの設定となります。
①管理画面の「デザインの変更」をクリックします。
②かなり下までスクロールして、「カスタム可能」をクリック
③その中の、CSS編集用デザインを選びます。
いくつかあるのですが、トップページに記事をどう表示するかが違ってきます。
今回は、こちらの一番オーソドックスな記事が1つ表示されるタイプにしました。
④続いて、カラム数を選びます。
アメブロの使い方次第です。
今はスマホ率が高いので、どんなにサイドバーがんばっても見てもらえない確率が高いです。１つ１つの記事をしっかりと作っていくほうを、おすすめします。
⑤カラム数を決めて「適用」をクリックすると、デザイン完了の画面が表示されるので「CSSの編集をする」をクリックします。
ここまでで、デザインの設定はできました。
画像をアップロードする
次に、最初に保存したヘッダー画像をアップロード（アメブロで使えるようにする）します。
①「ファイルを選択」をクリック
②保存しておいたヘッダー画像を選択して、「アップロード」をクリック
こんな感じで表示されれば、OKです。
↑この画像のパスを後から使用します。次からいよいよ、CSSにコードを加えていきます！
コードを貼り付ける
何やら英語がだだーっと並んでいますが、読まなくて大丈夫です。
①ひたすらスクロールして、一番下まで表示してください。
②最終行の下に、以下のコードをコピーして貼り付けてください。
/* ヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ここに画像URLを貼り付ける);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout="headerInner"]>a,
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: 400px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}
こんな感じに貼り付けばOK！
書き加えるのは、以下の２つのみ。
ヘッダー画像URLを指定
ヘッダー画像のURLをCSSに貼り付けます。
①もう一度、一番上までスクロールして戻し、「この画像のパス」をクリックして選択しコピーする。（ブラウザによって動作の違いあり。枠内を全選択（Ctrl＋A）して、コピー（Ctrl＋C）してもOK)
②また一番下までスクロールして、
/*ヘッダー画像の設定 */
.skin-bgHeader {
background: no-repeat scroll center;
background-image: url(ここに画像URLを貼り付ける);
}
「ここに・・貼り付ける」部分を削除して、先ほどコピーした画像URLを貼り付ける。
するとこんな感じになります↓
あと１つで終わりです！！
がんばれっ！
ヘッダーの高さを指定する
ここでは、400pxになっていますが、作成したヘッダー画像の高さに変更してください。
設定は以上です。
一番下の「表示を確認する」をクリックしてきちんと貼り付いているか確認します。
OKでしたら、もう一度編集画面に戻り「保存」をクリックして完成です。
他の部分もカスタマイズしたい場合はこちらもどうぞ
まとめ
・アメブロのヘッダー画像にオリジナルの文字を入れたい場合は、CSS編集可能なデザインを選ぶ。
・一番下にコードを貼り付けることで、簡単に設定できる。
