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名様募集となりました♪ご質問ある方もお気軽に♪

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

 

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

 

 

 

これは使える！無料の予約フォームとお問い合わせフォーム♪

 

今日はお教室やセミナーをされてる

女性企業家やママさん企業家、個人企業家さんが使えるサービスをご紹介します！

 

 

予約申し込みを受け付けされるのに

 

皆さん無料のお問い合わせフォームを使ってらっしゃいますが

 

予約にカレンダーもないですし

 

他にどんなコースがあるのかもわからないですし

 

ブログ内での告知だけではわかりにくいですよね・・・

 



予約フォーム＆お問い合わせフォームが

 

両方一度に無料で簡単にWEB上で作れるサービス

を紹介したいと思います♪



作成所要時間は２０分から３０分！

 

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

 

予約フォームトップ--------------------

 

 

お問い合わせフォーム------------------

 

上記のようなページができました！

ヘッダー画像も設定できます♪

 

なんと便利なのが自動で

↓このような「予約する」ボタンをブログ内につけることもできました！

 

RESERVA予約システムから予約する

 

↑クリックして私が作ったダミーのお教室予約サイトへ飛んで見れます。

（注※全てサンプルですのでクリックしても予約はされません！）

 

お問い合わせ管理とか顧客管理機能まで無料でついていますので、かなり使えますね！

まずはお問い合わせフォームとして利用するのもありではないでしょうか？

 

下記レゼルバさんで無料で作れました。

興味のある方はどうぞ♪↓

予約システムRESERVA（レゼルバ）

 

 

折角予約サイト作ったので何か

無料講座かお茶会でも開こうかと思ってしまいました　笑

 

 

以下オリジナルヘッダー画像作ります！の告知です♪

 

 

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

 

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

 

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

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

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

 

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

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

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

 

まだモニター間に合います♪ご質問ある方もお気軽に♪

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

 

 

 

読者はブログを読むか２秒で決めている！皆さんのオリジナルヘッダー画像作ります♪

 

読者がはじめてのブログを訪問して

そのブログの記事を読むか！読まないか！

を判断する思考時間は

約２秒から３秒と言われています。

 

その一瞬でアピール出来るものは一体何でしょうか？

 

それがヘッダー画像です。

 

 

 

オリジナルヘッダー画像制作いたします

 

あなたのブログの世界に１つだけのオリジナルのヘッダー画像を作りませんか？

普段企業のWEBサイト、広告等のデザインをさせていただいておりますので

プロとして

以下を大切に心を込めて丁寧に制作をさせていただきます。

 

★ご希望のイメージ以上のものを引き出すヒアリング

★デザイン案出しは基本

★２秒でブログの魅力が伝わるデザイン

★ブログを更新するのが楽しくなるようなデザイン

★ご期待以上のデザイン

 

只今のキャンペーン

制作させていただいた方にもれなくスマホ版ヘッダー画像もプレゼント！

 

キャンペーン延長させていただきます！

 

①スマホ版ヘッダー画像と設置

②サムネつき人気記事一覧設置（フルカスタマイズの方のみ）

制作設置プレゼントキャンペーン中！

 

 

制作実績

フルカスタマイズ制作----------------------

パステルアート＆個性筆「ここいろ」さん

 

 

◇制作内容

  • ヘッダ―画像（横幅画面いっぱいの大きいフルヘッダー画像）
  • ヘッダーに合うデザインのグローバルメメニュー、右サイドバーの薔薇アクセント、読者になるボタン

◇デザインのポイント

ご自身の個性筆とパステルアートの作品のお写真を使わせていただき、
素敵な作品の魅力がより一層伝わるようデザインさせていただきました♪

 

 

フルカスタマイズ制作----------------------

ときめく毎日！煌めき溢れるライフスタイルへ♡BeautyLife コンサルタント 輝美さん

◇制作内容

  • ヘッダ―画像・タイトルロゴ
  • 背景と、記事コンテンツのデザイングローバルメメニュー、右サイドバーのデザイン、読者になるボタン等

◇デザインのポイント

真っ白なcss編集可能テンプレからフルカスタマイズさせていただきました♪

洋服のティファニーブルーをキーカラーにデザインしています。

 

 

ヘッダー画像制作----------------------

心屋認定カウンセラー～個性筆文字 "MASANA"さん

 ◇制作内容

  • ヘッダ―画像

◇デザインのポイント

設定されてらしたアメブロのテンプレに合うデザインで、

ご本人の個性筆の作品のお写真を生かしてデザインさせていただきました。

 

 

制作にあたりLINEで何度もデザインのやりとりさせていただきご協力ありがとうございました！

 

 

 

制作の流れ

以下のような流れで制作させていただきます。

 

  1. メールとお電話でヒアリング♪（ご希望のデザインやイメージ等）
  2. 使用したいロゴデータやお店の写真やご本人の写真、タイトル、キャッチフレーズ等あればお送りください
  3. デザイン案が出来次第メールにてヘッダー画像お送りします
  4. 文言の誤り等修正点がないかご確認ください
  5. 最終修正後ヘッダーデザインFIX（最終修正は１度のみとなります。）
  6. メールにて完成ヘッダー画像お送りします！

 

 

制作料金

お好みのデザインイメージやよりブログのコンテンツが魅力的になるようアドバイスをさせていただきながら数案（通常3案～5案）デザインイメージを出させていただき納得いただけるデザインにさせていただきます。

 

フルカスタマイズですとロゴ制作も込みとなりますので

更にお得です！

 

※2017年5月制作料金改定させていただきました。

2月までにお問い合わせいただきましたお客様につきましては以前の料金となります。

 

●オリジナルヘッダー画像制作

25,000円（税別）

 

制作内容-------------

  • 設置代行費が含まれています。
  • ヘッダーをスライダーにすることも可能です。（別途ご相談）
  • ヘッダー画像はお使いのテンプレの横幅になります。（「ここいろさん」のような横幅フルがご希望の場合は別途ご相談ください）
  • ご希望のイメージをヒアリングさせていただきます。
  • ご希望の写真があればデザインに使用します。（写真の修正はこちらでさせていただきます）
※アメブロのCSS編集不可のテンプレートをご使用の場合もヘッダー画像設置可能です。

-------------------------

 

 

●オリジナルヘッダー画像+グローバルメニュー制作

30,000円（税別）

 

制作内容-------------

上記のブログヘッダー画像制作内容に

グローバルメニューをセットでデザイン制作いたします。

  • HOME
  • プロフィール
  • お問い合わせ

等のメニューです。

※アメブロのCSS編集不可のテンプレートをご使用の場合もメニュー設置可能です。

--------------------------

 

 

●アメブロフルカスタマイズ制作

60,000円（税別）

 

制作内容-------------

オリジナルデザインで

ブログをフルカスタマイズ制作いたします。

  • ヘッダー画像（ロゴが無い場合は制作いたします）
  • ヘッダーをスライダーにすることも可能です。（別途ご相談）
  • グローバルメニュー
  • 背景
  • サイドバーデザイン
  • 読者登録ボタン等

その他デザインに応じて必要な箇所。

------------------------

 

 

制作ご依頼要項----------------------

  • PCメール、LINE等でご連絡取れる方（デザイン確認のため）
  • css編集不可のアメブロテンプレートをご使用の方もヘッダー画像設置可能です。（その際テンプレートのデザインにあったヘッダー画像デザインにさせていただきます）
  • 事前にヘッダー画像が必要なブログのURLをお伺いいたします。
  • お写真をヘッダーデザインに使用したい場合は縦横サイズの大きいクリアな写真をご用意ください。
    写真の明るさの調整と切り取り、サイズ変更等はいたします。（例：顔色が暗い等修正します）

--------------------------------------------

 

日々更新する大切なブログ。

その魅力を引き出して読者に一目で伝えるのがデザインです。

アガるBlogに着替えよう♪

 

『美デザイン』

 

お任せくださいrose

以下よりご質問等お気軽にご連絡ください。

 

 

その他デザイン制作についてはHP

SAN:DSGN  -Blog＆Webデザイン制作-

 

 

 

※2017/1/28再編集させていただいております。