CSS編集できないテンプレートでも5分でヘッダーを変える方法！

 

アメブロのCSS編集可能じゃないテンプレートを使用中の方で

テンプレートのデザインは気に入っているんだれど、

ヘッダー画像にタイトルしか表示されないのが残念。。

 

と、ヘッダー画像を諦めてる方のために

 

CSS編集可能じゃないテンプレートでも

好みのヘッダー画像にする方法

をお教えします！

 

 

すでにヘッダー画像をお持ちでしたら

作成所要時間は5分！早いっ！

 

まずは私、またまたダミーブログを実際作ってみたのでサンプル見てみてください♪

 

ヘッダー画像設定前--------------------

（アメブロのCSS編集不可のテンプレ「水彩のあじさい」を設定）

 

 

ヘッダー画像準備------------------

（背景は透過・縦横幅は設定しているテンプレのサイズに合わせます）

 

ヘッダー画像設置後完成！------------------

綺麗に水彩あじさいの上に重なりました♪

 

 

 

 

 

早速方法ですが、

  1. 背景透過のヘッダー画像をアップロード
  2. フリープラグインにヘッダー画像のCSSを書く
  3. 完成！！

 

 

1.ヘッダー画像をアップロードしてURLをコピー

 

準備したヘッダー画像を以下のように

ブログ記事の画像にアップロードします。

 

そしてアップロードした画像のURLをコピー！

（記事はこのURL取得用だけなので削除してください。アップした画像は削除しないでください。）

 

↓以下ピンクのURLが画像のURLです。

 

 

 

2.フリープラグインにヘッダー画像のCSSを書く

 

CSS編集ができませんので、

『プラグインの追加』のフリープラグインにCSSを書きます。

 

（必ず『配置設定』でフリープラグインを使用する機能に設定してください。）

 

 

■プラグインに書くCSSコード 

<style type="text/css">
<!--
[amb-layout="headerInner"] {
background: url(http://stat.ameba.jp/user_images/20160829/20/design-club/7f/1d/p/o1120036113735365874.png) center bottom no-repeat;
text-indent: -9999px;
}
-->  
</style>

 

上記コードをフリープラグインに張り付けて

4行目の以下の箇所を変更してください。

 

➡URL（ここに1でアップロードしたヘッダー画像のURL）

 

3.フリープラグインを保存して完成！

 

実際サンプルブログ見たい方こちら

 

お使いのテンプレートによってはCSSが若干違う場合がございますのでご了承ください。

 

背景透過画像でなくても

お洒落にデザインできると思いますハート

 

少しの工夫でオリジナルのデザインにカスタマイズできますので、

やってみてくださいね♪

 

 

 

 

 

また、背景透過の画像作れないよ！という方

以下オリジナルヘッダー画像モニターで

CSS編集不可のテンプレご使用の方にも制作・設置しますのでご興味ある方はどうぞ♪

 

オリジナルヘッダー画像作ります！モニター様募集中！

 

沢山ご質問やメッセージいただきありがとうございます！

 

Q・ヘッダー画像はどれくらいの期間でできますか？

A・申し込み順で作成させていただきますのでお申込み最後の方は若干お時間いただきます。

申し込み早い方は制作期間最短３日～になります。

 

Q・ヘッダー画像の設定の仕方教えていただけますか？

A・こちら近日、記事にして紹介させていただきますね！

（新css編。css編集できないテンプレ使用の方編。を書く予定です）

 

残2名様募集となりました♪ご質問ある方もお気軽に♪

モニター募集終了いたしました♪多数のご応募ありがとうございました♪

 

モニター応募の詳細はコチラ