初心者にもできるアメブロカスタマイズ新2016.pages

初

心者にもできる

アメブロ

カ

スタマイズ

目次 【はじめに】 5 ■作業に便利なファイル 6 ■サポートについて 7 【注意 カスタマイズの前に】 8 ■カスタマイズはあくまでも補助的なもの 8 ■カスタマイズは主に「CSS（シーエスエス）」と「フリープラグイン」を使用 8 ■使用するデザインと、カスタマイズの手順 9 ■カスタマイズ後に必ずしておくこと 12 ■広告は外そう 13 【基本CSS】 14 【Step1. まずはやっておきたい読まれるためのカスタマイズ】 16 ■1-1 記事とメッセージボードの文字を読みやすい大きさにする 16 ■1-2 記事、メッセージボードのリンクを青文字、太字、下線にする 17 ■1-3 フリースペースのリンクを目立たせる 18 ■1-4 サイドバーのリストを見やすくする 19 ■1-5 訪問済みのリンクの色が変わらないようにする 20 ■1-6 プロフィール項目の自己紹介を非表示にする 21 ■1-7 記事タイトル下の投稿日、テーマを記事タイトル上に移動 22 ■1-8 文章を枠で囲む 23 【Step2. ヘッダーを変えてみる】 25 ■2-1 ヘッダー画像を作ってみる 29 ■2-2 ヘッダー画像のアップロードとURL 取得の仕方 39 ■2-3 ヘッダー画像を入れる
 (ブログタイトルと説明文を画像化せずに表示させる場合) 40 ◆ヘッダー画像とブログタイトル、説明文が重なりに見にくい場合 41 ■2-4 ヘッダー画像を挿入する 43 (ブログタイトル、説明文を画像化す る場合) 43 【Step3 各部分を変えてみる】 45 ■3-1ブログタイトルの文字を変更する 45

■3-2 ブログタイトルの位置を変える 46 ■3-3 ブログタイトルを折り返す 47 ■3-4 ブログ説明文の文字を変更する 48 ■3-5 説明文の位置を変える 48 ■3-6 説明文を折り返えす 49 ■3-7 記事タイトル背景色を変える 50 ■3-8 記事タイトルの文字を変える 51 ■3-9 記事エリアの幅をかえる 52 ■3-10 メッセージボードに枠を付ける 53 ■3-11 ページ送りボタンの色を変えてみる 54 ■3-12 ページ背景に色を付けてみる 55 ■3-13 ページ背景に画像を入れる 57 ■3-14 サイドバー見出し背景色を変える 58 ■3-15 サイドバー見出し文字を変える 58 ■3-16 サイドバーの項目に枠をつける 59 ◆各項目を角丸にする 60 ■3-17 サイドバー見出し背景を画像にしてみる 61 ■3-18 サイドバー各項目を画像化したい場合
 (見出し文字も画像に) 62 ■3-19 「読者になる」ボタンを目立つように変える 64 ■3-20 『NEW!』や『更新!』の文字色を変える 65 ■3-21 各種ボタンを作ってみる 66 ■3-22 サイドバーに画像やリンクを簡単に入れる 67 ◆タグ編集エディタの場合 68 ◆新しエディタの場合 70 【Step4 便利な機能をつけたカスタマイズ】 73 ■4-1 メニューバーの設置 73 ◆項目を 6 項目に増やす場合 78 ◆サブメニューを追加し、プルダウンメニューにする 80 ■4-2お問合せフォームの作り方 82 ■4-3 記事内の定型文 83

■4-4 記事の下に定型文を自動挿入 84 ■4-5 文頭に定型文を自動挿入 86 ■4-6 サイドバーの『このブログの読者』にある読者登録ボタンを上 に移動させる 87 ■4-7 テーマをに小見出しをつけて見やすく 89 ■4-8 記事の下に「読者になる」ボタンをいれて読者を増やす 92 ■4-9 アクセス解析を入れる 97 ◆FC2アクセス解析 97 【Step5 プロフィールページを変えてみる】 102 プロフィールページの編集 102 よく見られるプロフィール 104 【その他】 106 定型文など簡単に挿入できる「Insert Text」 106 アメリンク 109 AmeCare 110 【最後に】 111

【はじめに】

この度は『初心者にもできるアメブロカスタマイズ』をご利用いただき、ありがとう ございます。 当マニュアルをご利用いただくには Adobe リーダーが便利です。 無料でダウンロードできます http://get.adobe.com/jp/reader/?promoid=BPBQN 本書は、アメブロのカスタマイズが可能なデザイン

『CSS 編集用デザイン』

に対応したマニュアルです。また2016年3月にCSS編集用デザインが新たに3種類追加さ れましたが、そのデザインにも対応しています。 本書では、一番左のトップページの表示が「スタンダード」の「CSS編集用デザイン」の カスタマイズ方法を解説いたします 本書は2016年4月に編集したものであり、アメブロの仕様変更があった場合、実際の表 示画面と一部異なる場合があります。 ◆著作権について 本書の著作権はすべて内藤勲に帰属します。 本書の一部または全部を著作権者の承諾を得ずにホームページ・書籍・電子ファイル・ビ デオなどにより、複製、流用転用、転売することを禁止いたします。 またあなた以外の閲覧、無断転載も禁止事項となります。

◆免責事項 本書により、いかなる損害が発生しても著者は一切の責任を負いません。 自己責任の上ご利用ください。 ◆本書の便利な使い方 ページ数が多いですが、全てやる必要はありません。 必要な箇所を見つけてカスタマイズしてください。 このPDFマニュアルにあるCSSをコピーして貼り付ければ、わざわざ難しいコードを書く 必要はありません。 また、本書のCSSコードをまとめたテキストファイルもございます。

■作業に便利なファイル

まず、こちらから作業に便利なファイルをダウンロードしてください http://simpleworks.jp/downloadfile/ac201604.zip ※一般公開されないようご注意願います。 (圧縮ファイルになっていますので、解凍ソフトで解凍してください) 内容は以下のようになっていますので、ご確認ください このマニュアルと一緒にパソコンの分かりやすい場所に

保存

しておいてください。 ・基本CSS 基本的なカスタマイズを既に施している CSS ファイルです ・CSS コード
 本書にある CSS コードです。本書からコピーがしにくい場合お使いください ・メニューバー用 メニューバー設置に使うファイルです。 ・フリープラグイン用 フリープラグインに入れるスクリプトをコピーできます。 これらのファイル類は、「メモ帳」などのエディタを使って開いてください。

「Word」など、装飾ができるエディタは使わないようにしてください

■サポートについて

専用のサポートルームにて

ご購入日から 60 日間

無料サポートいたします。 ご購入後、サポートルームへの登録をいたします。 登録完了までしばらくお待ちくだ さい。 
 登録が完了するとパスワードが記載されたメールが届きますので、以下の URL から メー ルアドレスと、パスワードを入力しサポートルームへログインしてください サポートルームはこちらから ※一般公開されないようご注意願います。 http://simpleworks.jp/ameblomember/forum/ また、サポートの延長も月額1500円で可能です

【注意 カスタマイズの前に】

■カスタマイズはあくまでも補助的なもの

カスタマイズは、綺麗なブログにする事が目的ではなく、

読者が読みやすくするため

に行います。 カスタマイズで大事なのが統一感です。 綺麗なデザインにこだわり過ぎたり、ゴチャゴチャしてしまったりすると逆効果です。

■カスタマイズは主に「CSS（シーエスエス）」と「フリープラグ

イン」を使用

アメブロで行うカスタマイズは、 ・「CSS（シーエスエス）」 ・サイドバーに設置する「フリープラグイン」 を使って行います。

■使用するデザインと、カスタマイズの手順

アメブロのデザイン(スキン)では、CSS を編集してカスタマイズができるものと、 カス タマイズできないものがあります。 ●CSS を使ったカスタマイズするには 管理画面右の三本線 [すべてのAmebaサービス一覧] [デザインの変更] ページ下部にある「カスタム可 能」を選びます

●「CSS 編集用デザイン」を選びます ※既にカスタマイズをしている場合、デザインの変更でそれまでの CSS 変更内容は失わ れます。 変更の際には、十分ご注意ください。
 『CSS 編集用デザイン』 以外にもカスタム可能なデザインはありますが、細かなカスタ マイズが可能なのは「CSS 編集用デザイ ン」となります お勧めは、一番左の「スタンダード」のCSS編集用デザイン ※「カスタム可能」デザイン一覧の2ページ目にある「CSS編集用デザイン」を選んだ場 合は、こちらのマニュアルをご利用ください http://simpleworks.jp/downloadfile/ac2016.pdf ●レイアウト変更で、レイアウトを選択します

●「CSS の編集をする」をクリックして、編集画面に移動します ●ブログデザインの CSS の編集ページになり、もともとアメブロにある現在使用中 のブ ログデザイン CSS が表示されます。 元々ある CSS の

一番最後に

、本書で紹介するCSS コードを貼り付けてカスタマイ ズしていきます。 「補足説明」は貼り付けないようにしてください

■カスタマイズ後に必ずしておくこと

カスタマイズ（CSS追加）後に正しく反映されないように見える時があります これはブラウザ(インターネットエクスプローラーなどの閲覧ソフト)が

古いデータ(キャッシュ)を読み込んでいる

状態です 「カスタマイズがうまくできていない」と思ってしまう方も多いので、 カスタマイズ後は必ずブラウザのアドレスバー横にある丸い矢印の

更新ボタン

を押 して最新状 態にしてください(F5 ボタンでも可) それでも変化が無い場合 IE(インターネットエクスプローラー)の場合 [ツール] [インターネット オプション] [閲覧履歴の削除] [インターネット一時ファ イル] これで再度読み込んでみてください。 FireFox の場合 [ツール] [オプション] [詳細] [ネットワーク] オフラインデータ 今すぐ消去 CSS を変えても、ブラウザ上で変わらない場合試してみてください。 Google Chromeの場合 右側にある三本線のマークから [閲覧]   [閲覧履歴データの消去]  これでも変化がない場合は、他の不備が考えられますので、サポートルームでお問い合わ せください

■広告は外そう

アメブロには広告が表示されます。しかも、読者の閲覧履歴や好みに応じて、読者ひとり ひとりに合わせた広告が表示されます。 つまり、ライバル店のチラシを自分の店のいい場所におくようなものです。 広告はクレジットカードやアメゴールドで 1 ヶ月単位で非表示にできます。 Amebaプレミアムの「広告をはずすコース」から https://premium.ameba.jp/pc/ アメブロの管理画面（マイページ）にログインし、右上にある三本線から、 「その他のサービス」 「Amebaプレミアム」 「広告をはずすコース」に申込みます。

【基本CSS】

本書では、各部分をカスタマイズするためのCSSを1つ1つ紹介しています。 基本CSSは、それらのうち読みやすいブログにするために必要なCSSをセットにしたも のです。 この基本CSSを入れて部分部分、色や大きさなど変更して使う事もできますし、基本CSS を使わずに、CSSを1つ1つ追加して好みのカスタマイズをしていただくこともできます。 ・基本CSS + 部分的に変更、追加 ・CSS1つ1つを追加（基本CSSを使わない） という2つの進め方があります。 『基本css』には、step1の一部、Step3 の一部、メニューバーがあらかじめセットされ ています。 ヘッダー、メニューバーは、画像の設定や色の指定や微調整が必要です 『基本css』を貼付け後、各ステップのカスタマイズを自由に追加することもできます。 「基本CSS」ファイルの中身をコピーし、CSSの編集の一番最後に貼り付けてください

基本CSSの内容は ・訪問済みリンクの色がかわらないようにする ・記事とメッセージボードの文字を大きくする ・記事、メッセージボードのリンクを青文字、太字、下線にする ・フリースペースのリンクを目立たせる ・サイドバーのリスト等の行間を見やすくする ・プロフィール項目の 自己紹介 を非表示にする ・記事タイトルの文字を変える ・読者登録ボタンを目立つように変える ・メニューバー です 基本CSSは、  http://simpleworks.jp/downloadfile/ac201604.zip からダウンロードしてお使いください カスタマイズは、CSSをメモ帳など、テキストファイルにバックアップをとりながら進め てください

【Step1. まずはやっておきたい読まれるためのカスタマイ

ズ】

Step1 では読者さんが読みやすいブログにするためのこれだけはやっておきたいカス タ マイズを紹介します。 (※『基本CSS』には1-1∼1-6はセットされています)

■1-1 記事とメッセージボードの文字を読みやすい大きさにする

・こちらのCSSをコピーして貼り付けます /* 記事、メッセージボードの文字 */ .skin-entryBody,.skin-message{ font-size: 15px; /*文字サイズ*/ line-height:1.5; /*行間*/ color:#000000; } ・補足説明 記事、メッセージボードの{ 文字サイズを: 15px に 行間を: 1.5 に 文字色を：黒に } 記事、メセージボードの文字を読みやすくする CSS です。 文字の大きさを変えたい場合は 15 の部分を変更してください。 文字の太さの font-weight では  太字 bold  標準 normal

文字装飾の text-decoration では  下線 underline  装飾なし none カラーコードは http://simpleworks.jp/color

好みに合わせて変更してください




※アメブロの記事を書く画面で 文字サイズ を使ってしまうと、この CSS よりも優先さ れて しまいます。 文字サイズ は部分的以外に使わないようにしましょう。

■1-2 記事、メッセージボードのリンクを青文字、太字、下線に

する

・こちらのCSSをコピーして貼り付けます /* 記事、メッセージボードのリンク文字 */ .skin-entryBody a,.skin-message a{ font-size:15px; /*文字サイズ*/ font-weight:bold; /*文字の太さ*/ color:#0000ff; /*文字色*/ text-decoration:underline; /*文字装飾*/ } /*リンクマウスオーバー時の半透明無効*/ a:hover{ opacity:1; } .skin-linkList li a:hover{ opacity:1; } .skin-headerTitle:hover{ opacity:1; } リンクにマウスオーバーした時の半透明化も無効にします

■1-3 フリースペースのリンクを目立たせる

サイドバーの左上に置くと目に付き、告知や宣伝にもつかえる「フリースペース」 大事な記事へリンク誘導させるためにも、記事のリンクと同様目立つようにします。 ・こちらのCSSをコピーして貼り付けます /*フリースペース内の文字*/ #freespace .skin-widgetBody{ margin-top:0; font-size:15px;/*文字サイズ*/ line-height:1.5;/*行間*/ } /*フリースペース内のリンク*/ #freespace .skin-widgetBody a{ font-size:15px;/*文字サイズ*/ font-weight:bold;/*文字の太さ*/ color:#0000FF;/*文字色*/ text-decoration:underline;/*文字装飾*/ } ・補足説明 フリースペースの{ 上部マージンをなくし、 文字サイズを 14px に、 行間を 1.5 に } フリースペースのリンクの{ 文字サイズを 15px に、 文字の太さを太くし、 文字色を 0000FF に、 文字装飾を 下線に } フリースペースの編集は、管理画面右上にある「三本線」から 「サイドバー」   「フリースペース編集」 で編集できます。

■1-4 サイドバーのリストを見やすくする

リストが見やすくなるように下線を引きます ・こちらのCSSをコピーして貼り付けます /* サイドバーのリストの行間 */ ul.skin-linkList li{ margin-bottom:8px; /*下マージン*/ border-bottom:1px dotted #cccccc; } ・補足説明 サイドバーの各リストの { 下マージンを: 8px に 下線を:1px 点線 グレーに } それぞれのリストの下にマージンを持たせることで見やすくします。 マージンの数字は環境にあわせて変えてください

リストに下線をひき、見やすくする

■1-5 訪問済みのリンクの色が変わらないようにする

訪問済みやマウスオーバー時色が変わらないようにできます。 基本CSSを使わない場合は、1-2、1-3 よりも上に追加してください ・こちらのCSSをコピーして貼り付けます /*リンク*/ a{ text-decoration:none; /*文字装飾*/ color:#0066CC; /*文字色*/ } /*リンク:訪問済み*/ a:visited{ text-decoration:none; /*文字装飾*/ color:#0066CC; /*文字色*/ } /*リンク:マウスオーバー時*/ a:hover{ text-decoration:underline; /*文字装飾*/ color:#0066CC; /*文字色*/ } ・補足説明 リンクの{ 文字装飾を: なしに; 文字色を: #0066CC に; } 訪問済みリンクの{ 文字装飾を: なしに; 文字色を: #0066CC に; } マウスオーバー時のリンクの{ 文字装飾を: 下線に;  文字色を: #0066CC に;
 } 上記の CSS の例では、全ての色を同じにしています カラーコードhttp://simpleworks.jp/color

■1-6 プロフィール項目の自己紹介を非表示にする

アメンバーはアメンバー記事を書いた際に記事エリアから登録できます。 不要なリンクをなくします。 ・こちらのCSSをコピーして貼り付けます /*プロフィール項目の 自己紹介 を非表示にする*/ .skin-profileStatus{ display:none; } .skin-profileMore{ display:none; } /*プロフィール項目のニックネーム*/ .skin-profileName{ font-size:15px; }

■1-7 記事タイトル下の投稿日、テーマを記事タイトル上に移動

初期段階では、記事の投稿日、テーマが、記事タイトル下にあります。 投稿日を記事タイトル上に、テーマを右側に移動させ、文の始まりを見やすくします。 ・こちらのCSSをコピーして貼り付けます /*記事タイトル上に投稿日、テーマを移動*/ .skin-entryInner { position:relative; padding-top:25px;/*記事上のスペース作り*/ } /*投稿日*/ .skin-entryPubdate { position:absolute; top:0px;/*上からの位置*/ font-size:13px;/*文字サイズ*/ } /*テーマ*/ .skin-entryThemes { position:absolute; right:5px;/*右からの位置*/ margin-top:-10px;/*テーマ上のマージンを上詰め*/ } /*本文開始高さ*/ .skin-entryBody{ padding-top:15px;/*本文開始高さ余白*/ }

■1-8 文章を枠で囲む

文章を枠で囲みたい場合の方法です。

(タグ編集エディタの場合はそのまま貼り付けます。

新エディタ、標準エディタの場合は HTML 表示にして貼り付けて下さい。)

<div style="border:1px solid #cccccc;padding:10px;background:#ffffff; > 囲みの中の文章</div>

枠の線が1pxのグレー（#cccccc）の実線、中が白（#ffffff）

<div style="border: 1px dotted #ff0000; padding: 10px; background: #f5f5f5;">囲みの中の文章</div>

枠の線が1pxの赤（#ff0000）の破線、中が薄いグレー（#f5f5f5）

<div style="border: 2px dashed #000000; padding: 10px; background: #ffffcc; >囲みの中の文章</div>

枠の線が2pxの黒（#000000）の点線、中が薄い黄色（#ffffcc）

<div style="border: 3px double #0000ff; padding: 10px; background: #99ccff;">囲みの中の文章</div>

<div style="border: 2px solid #cccccc; padding: 10px; background: #ffffff; border-radius:10px;">囲みの中の文章</div>

枠の線が2pxのグレー（#cccccc）の角丸の実線、中が白（#ffffff）

<fieldset><legend>見出し文字</legend>囲みの中の文章</fieldset> 見出しの付いた枠

<fieldset style="border:1px solid #ff0000; ><legend>見出し文字</legend> 囲みの中の文章</fieldset>

<div style= background:#000000;padding:5px;color:#ffffff;">見出し文字 </div><div style="border: 1px solid #000000; padding: 10px; background:

#ffffff;">囲みの中の文章</div> 見出しの付いた枠2

【Step2. ヘッダーを変えてみる】

Step2 では読みやさに加えて、ブログの顔ともなるヘッダーを調整していきます ヘッダーは一番見られる看板部分で重要です。 ヘッダーが凄く綺麗でも人気のないブログも沢山ありますし、ヘッダーがなくても人気の ブログも沢山あります。 自己満足のヘッダーにならないようにしましょう。 ヘッダーに使う写真がない場合や、ブログタイトルが明確に決まっていない場合、ヘッダー は後回しでも構いません。 【1】ヘッダーの役割 記事の内容がいくら良くとも、記事を読まれなければ意味がありません。 ヘッダーを見て、『何のブログか分からない』『良さが分からない』『自分とは関係 がない』と思われてしまっては、記事を読む段階に進んでくれません。 ヘッダーの役割は ・何のブログか分かる ・どこにあるか分かる(駅名や、地名、連絡先などが分かる) ・サービス、商品のメリットや特徴が分かる これらをぱっと見で伝える事です。 あまり凝ったものや綺麗なものを作ろうとしすぎると、何のブログか分かりにくくなる事 もあります。自分で作る場合は、シンプルでも良いので、この3点を明確にしましょう。 【2】画像と文字で ヘッダーは画像と文字で表現できます。 画像だけでは、何のブログかが正確に伝わらない場合がありますし、情報不足になりま す。 逆に文字だけでは、魅力に欠け関心を高めるのが難しくなります。画像と文字をうまく 使って、分かりやすいヘッダーにしましょう。

◆何のブログか分かる 何のブログか分かるタイトル(「地名 + 業種 + 関心が高まる言葉」など) 何のブログか分かる画像(タイトルと関連のある画像) 「このブログには私が知りたいことがある!』と思われることが大切です ◆どこにあるか分かる(業種によっては必要ない場合もあります) 地名や最寄駅名、電話番号などがすぐに分かる ◆サービス、商品のメリットや特徴が分かる . 良さや効果が分かるような写真や、信頼感や安心感が感じられる写真。 「○○式」とか、「自分でできる」など関心が高まるようなキャッチコピー。
 「3 倍アップする」「10 年 8000 人鑑定」など具体的な数字を入れるのも効果的です。 業種によっては、実績や肩書など見せることも有効です。 ●まずは 1 枚の写真と文字だけでも分かるもの。 例)土浦・つくばのハリウッド式小顔整顔、顎関節症も楽になる小顔矯正 /http://ameblo.jp/satoko-ryu/ 写真 1 枚と文字だけですが、タイトルと写真も合って何のブログか、どこでやっている のか分かります。 電話番号も分かりやすく、すぐにかける事ができます。

●思わず「食べたい」(利用したい)と思えるもの 例)カレーペーストとチキンカレー 手作りカレー通販の大原屋 http://ameblo.jp/curry-ooharaya/ こちらも写真 1 枚と、文字の組み合わせです。美味しさが伝り「食べたい!」と思 うよな 画像です。更にキャッチーコピーで関心を高めています。 カレー屋さんだという事が分か り、どこにあるかも分かり、通販もやっていることが すぐに分かります。 ●自分が受けているイメージが沸く(疑似体験できる) 例)長岡のアロマとシータヒーリングサロン【シアエル】 http://ameblo.jp/ciael/ 複数の写真を組み合わせていますが、シンプルです。 気持ち良さそうに施術を受けてい る女性を見て、自分が受ける姿をイメージできます。

商品、サービスを受けたらどうなるのか？どう見せたら良さや特徴が伝わるか? 考えて画像を用意しましょう。 それにあわせて写真撮影することも必要です。 他にも様々なヘッダーを見て参考にしてみてください ヘッダーで使う写真は画像素材サイトで素材を見つけることもできます。 □Pixabay http://pixabay.com/ （無料） □写真素材 PIXTA http://pixta.jp/  （有料） 使用する際は注意事項をよく読んで利用してください 検索窓にキーワードを入れると関連する写真が出てきます。ダウンロードしてお使いくだ さい。
 ※有料のスポンサー画像も混ざっていますのでご注意ください 【3】 画像編集ソフトで作成 画像編集は、photoshop などの画像編集ソフトを使う必要があります。 しかし、 photoshop など有料の専用ソフトは高価ですので、お持ちでない方が多いで す。 今回は pixlr(ピクセラー) というオンラインの無料画像編集ソフトを紹介します。 『Pixlr』 http://www.pixlr.com/editor/ ヘッダー作成をご希望の方は、デザイナーを紹介いたしますので、ご連絡ください

■2-1 ヘッダー画像を作ってみる

◆画像をヘッダー幅に合わせる 『Pixlr』 http://www.pixlr.com/editor/を開き、『新しい画像を作成』からヘッダーの 土台となるキャンバスを作ります。 『新しい画像』の幅と高さを手入力します。 新しいアメブロのブログ幅は1120pxになります。 高さは 200px 300px ほどが良いで しょう。 ヘッダーの土台となるキャンバスができます

次に、[ファイル] [画像を開く] からパソコン の中にある画像を開きます。 開いた画像が大きい場合は、 [画像] [画像サイズ] から大きさを調整します。 この例では、画像横幅いっぱいを ヘッダーに合わせたいので 1120px にします。 『縦横比を固定』にチェックを入 れると高さは自動的に変わりま す。

画像のサイズ

1120pxになった素材画像を [編集] [全て選択] 、[編集] [コピー]。

ヘッダー土台キャンバスを選択し(クリックし)、[編集] [貼付け] でコピーした画像を貼 り付けます。

この例では、ヘッダー土台キャンバスが幅1120px、高さ300pxとしていますが、素材の 画像を幅1120pxにした際、高さは300px以上になっています。 左側にある『ツール』の『移動ツール(矢印)』で、素材画像を動かしキャンバス内で位置 を調整します (画像を動かす際に、左右に余白ができないように注意してください)   ◆文字を入力してみる 左側にある『ツール』の『タイプツール(A)』から、テキスト入力でブログタイト ルや キャッチコピーを作ります。(ブログタイトルや説明文を、アメブロの基本設定 で入力し たものを表示させる場合は不要です) 『タイプツール』を選択し、文字を表示させたい位置をクリックします。 テキスト入力のウィンドウがでますので、フォント、サイズ、色を選択して入力していき ます。 ※フォントは、パソコン内に入っているフォントになります。 フォントによっては、ギザギザ感がでてしまうものもあります。複数試して選んでみてく ださい。

右側にある『レイヤー』ボックスには、素材画 像とタイトルのテキストが追加されています。 レイヤーは、複数重ねて1枚の画像を作っていき ます。重なり順を変更する事もできます。 画像やテキストを編集したい場合は、それぞれ のレイヤーを選択するようにします。 ◆文字に縁を付けてみる 文字に縁を付けて見やすくすることもできます

右側に表示される『レイヤー』 ボックスで、文字のあるレイ ヤーを選択し、右クリックを します。 次にレイヤースタイルをク リックします。 レイヤースタイルのウィンドウが出てきますので、『アウターグロー』で文字の縁を 調整 することができます。 最後に『OK』を押してレイヤーの編集を終了してくだ さい 右側にあるゲージ類が出ない場合は、「アウターグロー」のチェックボックスではなく、 「アウターグロー」の文字をクリックしてみてください ◆画像を切り抜いたり、ぼかしてみる 画像を切り抜いたり、画像の縁をぼかして使いたい場合 左側にある[ツール]の[一列選択ツール](水色の点線の四角)をクリックします。 切り抜きたい画像で範囲を決めます。左クリックボタンを押しながら範囲を広げ、離

すと範囲が確定されます。 (あらかじめ画像サイズは適度なものにしておきます)

点線で囲まれた部分が選択されました。

[編集] [コピー] で点線内の部分だけコピーすることができます。

また選択ツールで、範囲を選択する際に画面上部にある『フェザー』の数字をあげた上で る選択すると縁が丸まり、ぼかすことができます。

選択した際に、角が丸みを帯びています。その分ぼかしが効いている状態です。 [編集] [コピー] で、縁を ぼかした状態でコピーができます。 ヘッダーのキャンバス に貼り付けると、画 像を重ねることがで きます。 縁をぼかした画像を、 ヘッダーキャンバスに 貼り付けました。 右側にあるレイヤー のボックスで、レイ ヤーの重なりを調整 します 貼り付けた画像は、左側の[ツール] で[移動ツール}(矢 印)で好きな位置に移動できます。 ◆画像を傾けてみる 傾けたい画像のレイヤーを選択し、[編集] [自由変形] をクリックします すると、画像 が青色の■で囲まれた状態になります。

青い■の角にカーソルをあてる と、丸い矢印に変わります。 その状態で、左クリックを押した ままマウスを動かすと図形も傾き ます。 良いところで離すと傾きが確定さ れます。 ◆保存する ヘッダーが出来たら、保存します。 [ファイル] [保存]から2種類のファイル形式で保存します。 まず PXD で保存します。 PXD は、Pixlr 独自のファイル形式で、レイヤー情報も保 存 されます。後で編集するために必要です。 しかし、PXD はアメブロにアップロードできません。その為、 JPEG か、PNG でも保存 します。 JPEG の方がファイル容量が軽いですが画質が落ちます。 JPEG で保存する場合は、クオリティを高くしてください。

PNG の方が画質は良いです が、ファイル容量が大きくなります。 あまり大きくなければ PNG で保存しましょ う。 JPEG や PNG ではレイヤー情報が保存されない為編集できません。 再編集する場合は、必ず PXD ファイルを開きます。 ※PXD は Pixlr 上で開きます。パソコン上で、PXD ファイルを開こうと思っても 開きま せん。

編集は必ず Pixlr を開いて、Pixlr からファイルを開いてください

ヘッダーの役割は ・何のブログか分かる ・どこにあるか分かる(駅名や、地名、連絡先などが分かる) ・サービス・商品の良さや特徴が分かる
 でした。 シンプルでも良いので、上から満たせるように作ってみましょう。 ●<動画解説> ヘッダーの簡単な作り方 https://www.youtube.com/watch?v=LsZiPgCmflc ※動画内では幅 980px で解説しています。 実際は1120pxの幅で作ってみてください

■2-2 ヘッダー画像のアップロードとURL 取得の仕方

アメブロの管理画面の右上にある三本線から [すべてのAmebaサービス一覧]   [デザインの変更]   [CSS の編集] で 『ブログデザインヘッダ・背景用画像の追加』から、パソコン内にある画像ファイ ルをアッ プロードします http://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do アップロードが完了すると、アップロードされた画像が表示されます。 その下の 『この画像のパス』がヘッダー画像の URL になります。

■2-3 ヘッダー画像を入れる




(ブログタイトルと説明文を画像化せずに表示させる場合)

文字を入れない写真だけのヘッダー画像と、アメブロの基本設定で入力したブログタイト ル、説明文を表示させる場合の方法です ・こちらのCSSをコピーして貼り付けます /*ヘッダー画像*/ .skin-bgHeader {

background:url(画像の URL) #ffffff center no-repeat; /*画像*/ height: 300px; /*画像の高さ*/ } （）内の 画像のURLの部分に2-2で取得したURLを挿入します。 ・補足説明 ヘッダーの { 背景画像を: url のものにする; 高さを: 300px に; } ※ no-repeat は 『繰り返しなし』 を意味します。
 画像 URL を入れる際には ( )の中に入力してください。 (ヘッダー画像 URL はの取得の仕方は 2-2 を参照) 
 height の数字は、ヘッダー画像の高さに合わせてください

◆ヘッダー画像とブログタイトル、説明文が重なりに見にくい場合 ヘッダー画像とブログタイトル、説明文が重なり見にくい場合 先ほどの CSS を少し変更 します ・CSS /*ヘッダー画像*/ .skin-bgHeader{

background:url(画像の URL) #ffffff center bottom no-repeat; /*画像*/ height: 400px;/*画像の高さ*/ } /*ヘッダー画像のリンク設定*/ a .skin-blogMainTitle { width:1120px;/*画像の横幅*/ height:400px;/*画像の高さ*/ display:block; /*表示設定*/ position:absolute; /*位置設定*/ } /*ブログタイトル位置調整*/ .skin-headerTitle{ margin-top:20px; padding-top:0px; padding-bottom:0px; text-align:left; } /*説明文位置調整*/ .skin-blogSubTitle{ padding-top:40px; } ヘッダー範囲の

高さを 100px 大きくし、ヘッダー画像を下に寄せる

よ うにしています また、ヘッダー画像をクリックするとトップページに戻れるようにリンクの設定もしてい ます 次のページのように、ヘッダー画像の上に余白ができて、ブログタイトルと説明文が見や す くなります

これで画像とブログタイトル、説明文が見やすくなります。 環境に合わせて、 height の数字を調整してみてください。

■2-4 ヘッダー画像を挿入する

(ブログタイトル、説明文を画像化す る場合)

ブログタイトルや、説明文などを画像化し、アメブロの基本設定で入力したブログタイト ル、説明文を非表示にします。 ・こちらのCSSをコピーして貼り付けます /*ヘッダー画像*/ .skin-bgHeader {

background:url(画像の URL) #ffffff center no-repeat; /*画像*/ height: 300px; /*画像の高さ*/ } /*ブログタイトル、説明文位置初期化*/ .skin-blogMainTitle,.skin-blogSubTitle{ margin:0; /*マージン*/ padding:0; /*余白*/ } /*ヘッダー画像のリンク設定*/ a .skin-blogMainTitle { width:1120px;/*画像の横幅*/ height:300px;/*画像の高さ*/ display:block; /*表示設定*/ position:absolute; /*位置設定*/ text-indent:-9999px; /*ブログタイトルを隠す*/ } /*ブログ説明文を非表示*/ .skin-blogSubTitle{ display:none; /*表示設定*/ } ・補足説明 ヘッダーの{ 背景を: url に; 高さを: 300px に; }

ブログタイトル、説明文の{ マージンを: 0 に; 余白を:0 に; } ブログタイトルのリンクの{
 横幅を: 980px に;
 高さを: 300px に;
 表示設定を: ブロック要素に; 位置設定を: 絶対位置に; テキストインデントを: -9999px に; 文字装飾を: なしに; }
 ブログ説明文の{ 表示を: なしに; }
 画像の横幅、高さは環境にあわせて変えてください。

【Step3 各部分を変えてみる】

各部分を変えるカスタマイズです。 全体的なバランスを見ながら、必要な箇所をカスタマイズしてください

■3-1ブログタイトルの文字を変更する

(ヘッダー画像でタイトルを画像として埋め込まない場合) ブログタイトルの文字の大きさや色を変更できます ・こちらのCSSをコピーして貼り付けます /* ブログタイトルの文字*/ .skin-blogMainTitle { color: #333333; margin-bottom: 10px; font-size: 27px; } ・補足説明 ブログタイトルの{ 文字色を: 濃いグレーに; 下のマージンを:10pxに 文字サイズを: 27px に; } ブログタイトルのサイズや文字色を変更したい場合に追加します。 font-size の数字や color のカラーコードを変更してください

■3-2 ブログタイトルの位置を変える

(ヘッダー画像でタイトルを画像として埋め込まない場合) ・こちらのCSSをコピーして貼り付けます /*ブログタイトル位置*/ .skin-blogMainTitle { padding:10px 0 0 35px; /*余白 上 右 下 左 */ text-align:left; } ・補足説明 ブログタイトルの{
 余白を: 上 10px 右 0px 下 0px 左 35px に; 文字寄せを:左に; } padding(余白)の数字を変更します。 順に上 右 下 左 を表しています。 右側に少しずらしたい場合は、左の余白を広げればいいので 
 .skin-blogMainTitle
 padding:10px 0 0 55px; /*余白 上 右 下 左 */ } のように左の部分の数字を大きくします。 左上を基準に考えてみてください。 逆に左に寄せたい場合は、左の部分の数字を小さくします。 下に下げたい場合は、上の部分の数字を大きくします。 数字は環境に合わせて変えてください。0 以外は px をつけてください

ブログタイトルの位置を変更

■3-3 ブログタイトルを折り返す

(ヘッダー画像でタイトルを画像として埋め込まない場合) ・こちらのCSSをコピーして貼り付けます /*ブログタイトルの折り返し*/ .skin-blogMainTitle{ width:300px; /*幅*/ } ・補足説明 ブログタイトルの{ 幅を: 300px に; } ブログのタイトルは改行ができません。 そのため、ブログタイトルの幅を指定して折りかえします。 数字は環境に合わせて変えてください。

幅を指定して、タイトルを折り返す

■3-4 ブログ説明文の文字を変更する

(ヘッダー画像で説明文を画像として埋め込まない場合) ・こちらのCSSをコピーして貼り付けます /* ブログ説明文の文字サイズ */ .skin-blogSubTitle{ font-size: 16px; /* 字サイズ */ color:#333333; /* 文字色 */ } ・補足説明 ブログ説明文の{ 文字サイズを: 16px に; 文字色を: 濃いグレーに; } ブログ説明文のサイズや文字色を変更したい場合に追加します。 font-size の数字 や color のカラーコードを変更してください

■3-5 説明文の位置を変える

(ヘッダー画像で説明文を画像として埋め込まない場合) ・こちらのCSSをコピーして貼り付けます /*ブログ説明文の位置*/ .skin-blogSubTitle{ padding:10px 0 0 45px; /*余白 上 右 下 左 */ text-align:left; }

説明文の位置を変える

・補足説明 ブログ説明文の{
 余白を: 上 10px 右 0px 下 0px 左 45px に; 文字寄せを:左に; } padding(余白) の数字を変更します。 順に上 右 下 左 を表しています。 左上を基準に考えてみてください。 右に寄せたい場合は、左の部分の数字を大きくし、 左に寄せたい場合は、左の部分の数字を小さくします。 下に下げたい場合は、上の部分の数字を大きくします。 数字は環境に合わせて変えてください。
 0 以外は px をつけてください

■3-6 説明文を折り返えす

(ヘッダー画像で説明文を画像として埋め込まない場合) 管理画面右の三本線から[すべてのAmebaサービス一覧] [基本設定] で説明文を編集で きます。 説明文は、改行が可能ですので、改行させたい箇所で改行を入れてみてください

改行が可能

■3-7 記事タイトル背景色を変える

/*記事タイトル背景*/ .skin-entryTitle {

padding: 5px 5px;/*記事タイトルの余白*/

background-color:#eeeeee;/*記事タイトル背景*/ border-bottom: 1px solid #e5e5e5;

} ・補足説明 記事タイトルの{ 余白を:上下 5px 左右 5px に; 背景色を:#eeeeee;に 下側の枠線を: 太さ 1px 実線 #e5e5e5 に; } カラーコードはこちらを参照してください http://simpleworks.jp/color

■3-8 記事タイトルの文字を変える

・こちらのCSSをコピーして貼り付けます (※『基本CSS』にはセットされています) /* 記事タイトル文字 */ .skin-entryTitle { font-size:18px; /*記事タイトル文字サイズ*/ font-weight:bold;/*文字の太さ*/ color:#000000;/*文字色*/ } ・補足説明 記事タイトルの{ 文字サイズを: 18px に; 文字の太さを:太字に; 文字色を: #000000;に } 初期設定の記事タイトルは文字が大きいので18pxにして読みやすくします。

記事タイトル文字の大きさや色を変えられます

■3-9 記事エリアの幅をかえる

記事の幅を変更できます。 ・こちらのCSSをコピーして貼り付けます /*記事エリア幅調整*/ .skin-bgMain { padding-left: 20px!important;/*左余白*/ padding-right:20px!important;/*右余白*/ } 左右の余白を調整することで、記事幅を調整します また、 } の前に border:1px solid #dddddd;/*枠線*/ を入れると、記事エリアに枠を付けることもできます

dotted 破線 ・ solid 実線 ・ dashed 点線 ・ double 二重線 カラーコードはこちらを参照してください http://simpleworks.jp/color ◆枠を角丸にする場合 上記 CSS の } の前に -moz-border-radius: 10px; border-radius: 10px; を追加します。

■3-10 メッセージボードに枠を付ける

メッセージボードに枠を付けて目立つようにしてみます。 ・こちらのCSSをコピーして貼り付けます /*メッセージボード枠*/ .skin-message{ border:1px dotted #979797;/*枠線*/ background:#FFFFFF;/*背景色*/ } ・補足説明 メッセージボードの{ 枠線を: 1px 点線 カラー#979797 に; 背景色を: #FFFFFF に ; } 線の種類

(dotted 破線 ・ solid 実線 ・ dashed 点線 ・ double 二重線) dotted の部分を変更すると様々な枠線に変更できます。

カラーコードはこちらを参照してください http://simpleworks.jp/color

■3-11 ページ送りボタンの色を変えてみる

・こちらのCSSをコピーして貼り付けます /* ページ送りボタン */ .skin-btnPaging { border-color: #cccccc;/*線の色*/ background-color: #dedede;/*ボタン色*/ color: #333333;/*文字色*/ } ・補足説明 border-colorが線の色 background-colorがボタン内の色 colorが文字色 になります カラーコードはこちらを参照してください http://simpleworks.jp/color

■3-12 ページ背景に色を付けてみる

ページ背景に色を指定します。 ・こちらのCSSをコピーして貼り付けます /* ページ全体背景 */ .skin-page { background: #f7f7f7;/*背景色*/ padding-top: 0px/*上余白*/ } /* ヘッダー背景 */ .skin-bgHeader { background: #fff;/*ヘッダー内背景*/ padding: 0;/*余白*/ margin: 0 auto;/*マージン*/ width: 1120px;/*幅*/ box-shadow: 1px 2px 6px rgba(100, 100, 100, 0.3);/*影*/ } （続きます。）

ページの背景に色をつけてみる

/* ブログナビ背景 */ .skin-blogHeaderNav { background: #FFFFFF;/*ナビ内背景*/ width: 1120px;/*幅*/ margin: 0 auto;/*マージン*/ box-shadow: 1px 2px 6px rgba(100, 100, 100, 0.3);/*影*/ } .skin-blogBody{ background: #FFFFFF;/*記事エリア内背景*/ width: 1120px;/*幅*/ margin: 0 auto;/*マージン*/ box-shadow: 1px 2px 6px rgba(100, 100, 100, 0.3);/*影*/ } /* メインカラム、記事本文エリア */ .skin-columnA .skin-blogMainInner, .skin-columnB .skin-blogMainInner, .skin-columnC .skin-blogMainInner, .skin-columnD .skin-blogMainInner, .skin-columnE .skin-blogMainInner { padding:20px;/*余白*/ background: #ffffff;/*背景色*/ } カラーコードはこちらを参照してください http://simpleworks.jp/color

■3-13 ページ背景に画像を入れる

ページ背景に画像を入れたい場合は、3-15 の背景色を指定する代わりにこちらにし ます。

・CSS

/* ページ背景に画像 */ .skin-page {

background:url(画像 URL) no-repeat;/*背景*/ padding-top: 0px/*上余白*/ } ・補足説明 ページ全体の{ 背景画像を: 画像 URL に、繰り返さない; 上の余白:0; } ※ページ背景にしたい画像をアメブロにアップロードし、その URL を括弧内に入れてく ださい。 ページ背景に画像を入れる際には注意点があります。 ページ背景となるモニタ画面はユーザーによって環境が異なります。 背景画像の元の大きさと、モニタ画面の大きさはそれぞれ異なります。 background:url(画像 URL) no-repeat;


 この no-repeat を削除すると、それぞれの画面に応じて背景画像が画面の大きさ分繰り返して表 示されます。 背景画像を繰り返して表示させない場合は、 no-repeat 背景画像を縦に繰り返したい場合は repeat-y 背景画像を横に繰り返したい場合は repeat-x

■3-14 サイドバー見出し背景色を変える

・こちらのCSSをコピーして貼り付けます /*サイドバー見出し背景*/

.skin-widgetTitle,#calendar .skin-widgetTitle,#profile .skin-widgetTitle { padding:5px 10px;/*見出し文字までの余白*/ background:#ffcccc;/*背景色*/ } ・補足説明 サイドバー見出しの{ 文字までの余白を: 上下 5px 左右 10px に 背景色を: #ffcccc に; }

■3-15 サイドバー見出し文字を変える

・こちらのCSSをコピーして貼り付けます /*サイドバー見出し文字*/

.skin-widgetTitle,#calendar .skin-widgetTitle,#profile .skin-widgetTitle { color:#FFFFFF; /*文字色*/ font-size:13px; /*文字サイズ*/ font-weight:bold; /*文字の太さ*/ }

サイドバーの見出し背景を変える

サイドバーの見出し文字を変える

・補足説明 サイドバー見出しの{ 文字色を: #FFFFFF に; 文字サイズを: 13px に; 文字の太さを:太字に; } カラーコードはこちらを参照してください http://simpleworks.jp/color

文字の太さの font-weight では  太字 bold  標準 normal

■3-16 サイドバーの項目に枠をつける

サイバーの項目に枠を付けてみます ・こちらのCSSをコピーして貼り付けます /*サイドバー項目枠*/ .skin-widgetInner{ border:1px solid #ccc;/*枠*/ padding:5px;/*余白*/ } ・補足説明 サイドバー項目の{ 枠線を;1px 実線 グレーに; 余白を:5pxに; }

◆各項目を角丸にする サイドバーの項目を角丸にする場合 先ほどの /*サイドバー項目縁*/ .skin-widgetInner{ border:1px solid #ccc;/*枠*/ padding:5px;/*余白*/ } の } の前に border-radius:10px; を追加します。

■3-17 サイドバー見出し背景を画像にしてみる

・CSS

/* ワイドサイドバー見出し背景を画像化*/

.skin-widgetTitle,#calendar .skin-widgetTitle,#profile .skin-widgetTitle { background:url(画像 URL) no-repeat;/*背景画像*/

padding:5px 10px;/*余白*/ height:30px;/*高さ*/ } サイドバーの幅が左右で異なります。 
 ワイドなサイドバー 300px 幅が狭い方 200px それぞれ幅に合った背景画像を用意します ボタンメーカーで背景画像は簡単に作れますし、 ヘッダー作りでも使った『Pixlr』で作 ることも できます。

Buttom Maker http://box.aflat.com/buttonmaker/ 3-21でも使い方を説明しています。

■3-18 サイドバー各項目を画像化したい場合




(見出し文字も画像に)

・CSS /*読者*/

#readers .skin-widgetTitle {

background:url(画像 URL) no-repeat;

text-indent:-9999px;/*見出しタイトルの非表示*/ height:30px;/*高さ*/

}

/*お気に入り*/

#favorites .skin-widgetTitle {

background:url(画像 URL) no-repeat; text-indent:-9999px;

height:30px;/*高さ*/ }

/*最近の記事*/

#recentEntries .skin-widgetTitle {

background:url(画像 URL) no-repeat; text-indent:-9999px;

height:30px;/*高さ*/ }

/*プロフィール*/

#profile .skin-widgetTitle {

background:url(画像 URL) no-repeat; text-indent:-9999px;

height:30px;/*高さ*/ }

/*テーマ*/

#theme .skin-widgetTitle {

background:url(画像 URL) no-repeat; text-indent:-9999px;

height:30px;/*高さ*/ }

/*コメント*/

#recentComments .skin-widgetTitle { background:url(画像 URL) no-repeat; text-indent:-9999px;

height:30px;/*高さ*/ }

/*アーカイブ*/

#archive .skin-widgetTitle {

background:url(画像 URL) no-repeat; text-indent:-9999px;

height:30px;/*高さ*/ }

/*ランキング*/

#ranking .skin-widgetTitle {

background:url(画像 URL) no-repeat; text-indent:-9999px;

height:30px;/*高さ*/ }

/*ブックマーク*/

#bookmarks .skin-widgetTitle {

background:url(画像 URL) no-repeat; text-indent:-9999px;

height:30px;/*高さ*/ }

/*カレンダー*/

#calendar .skin-widgetTitle{

background:url(画像 URL) no-repeat; text-indent:-9999px; height:30px;/*高さ*/ } 元々表示される見出しタイトル文字を非表示にし、画像で見出しタイトルを作る場合 の方法です。それぞれの画像 URL を変えてください。 ※またサイドバーの幅が左右で異なります。 どの項目を左にするか、右にするかで画像の作り方に注意が必要です。

ワイドサイドバー 300px 、通常サイドバー 200px 高さ 30px 程度 全てを画像化する際は慎重に行ってください

■3-19 「読者になる」ボタンを目立つように変える

読者になるボタンの色を変えて目立たせます ・こちらのCSSをコピーして貼り付けます /*プロフィールのボタン変更*/ .skin-btnSidePrimary { border-color: #404040;/*線の色*/ background-color: #3970B5;/*ボタン色*/ color: #ffffff;/*文字色*/ }

■3-20 『NEW!』や『更新!』の文字色を変える

投稿した時に記事日付横に表示される『NEW!』 サイドバーの『お気に入りブログ』で、更新したブログ横に表示される『更新!』 これらの色を変えたい場合は、次の CSS を追加します。 ・こちらのCSSをコピーして貼り付けます /*記事日付の『New』、お気に入りブログの『更新』*/ .skin-textLoud,.skin-sideTextLoud { color: #ff3399;/*文字色*/ } それぞれカラーコードは変更してください カラーコードはこちらを参照してください http://simpleworks.jp/color

■3-21 各種ボタンを作ってみる

サイドバー見出し画像や、読者ボタン、メニューボタンなどが簡単に作れます Buttom Maker http://box.aflat.com/buttonmaker/

●<動画解説> ボタンメーカーの使い方 https://www.youtube.com/watch?v=v-Nt8S7UdJM (1) ボタンの縦、横サイズを入れます (2) ボタンの色を決めます。 スペースにカーソルを移動すると色が選択できま す。 (3) ボタンに表示される文字になります (4) フォントを選びます。(J)となっているのが日本語対応のフォントです。 (5) 文字のカラーと大きさを決めます。 (6) 設定が終わりましたら、 create ボタンをおします。 すると、7の位置にボタンがプ レビューされます。 (7) 良ければ、ボタン上で 右クリック 名前を付けて画像を保存 します。

①

②

③

④

⑤

⑥

⑦

■3-22 サイドバーに画像やリンクを簡単に入れる

サイドバーに画像を貼り付けたい場合、「フリースペース」を利用します。 フリースペースを左上に配置し、サービスや商品の情報、メニュー記事へのリンク、お客 様との写真などを並べておくと、高い反応を得ることができます。 フリースペースの編集ページでは、記事投稿のように画像フォルダから直接画像の貼り付 けることができません。その為、フリースペースに画像を貼るのが難しく思えて しまいま す。 そこで、通常の記事を書く画面で編集すると簡単にできます。

フリースペースを使って画像やリンクを設置

◆タグ編集エディタの場合

『画像』ボタンから、挿入する画像を選びます

するとこのようにHTMLタグが挿入されます。

これだけ見ると拒絶してしまう人もいますが、こんな構造になっています

<a href="リンク先画像URL"><img src="表示画像URL" /></a>

アメブロの場合、画像にリンクがついている状態で挿入されています

ですから、リンク先画像URLの部分を、リンクさせたい記事のURLに変更すればOKです。

次に画像サイズをサイドバー幅に合わせます。

今のアメブロのサイドバーは、ワイドのサイドバー幅が300px、もう一方が200pxになっ ています。 フリースペースを設置しているサイドバーの幅に合わせます。

<a href="リンクさせたい記事のURL"><img src="表示画像URL" width="200" /></a>

このように  表示画像URL  の後に半角スペースを入れて width= 200  を付け足し ます。 （200px側のサイドバーの場合）

赤線の部分が変更部分、青線の部分が追加箇所です あとは、このHTMLタグをコピーし、フリースペースに貼り付ければOKです。 ◆新しエディタの場合 右側にある画像の部分で、画像をアップロードし、『小さいサイズで貼り付ける』のチェッ クを外して、画像を挿入します。 挿入した画像の上 にカーソルをあて ると、幅を変えら れるパネルが出て きます。 サイドバーに合わ せて300pxまたは 200pxにします。  幅を変更すると高 さも自動的に変更 されます。

『HTML表示』に切り替え、タグ編集エディタの場合と同じように、リンクさせたい記事 のURLを変更します。

変更後はHTMLをコピーし、フリースペースに貼り付けます。

サイドバーの配置設定で、フリースペースは左上に配置します。

◆カスタマイズで見栄えを変える際の注意点 ステップ 3 では各部分の見栄えを変えてみました。 ここで注意点があります。

全てを目立たせようとすると、逆に全てが目立たなくなったり、 バランスを

崩し見づらいブログになってしまうことがあります。

カスタマイズを覚えてくると色々変更したくなり、どれもこれも色をつけて、カラフ ルになることが多々あります。 教科書でも、蛍光マーカーを引きすぎると、どれを強調しているのか分からなくなり ますよね。 ですから、見栄えを変えようとする際には以下を意識してみてください。

・全体的なバランスや統一感を考える

・どれが一番目立って欲しいか考える

シンプルですが、読まれやすい、バランスの取れた見栄えになります。 使うカラーも3色に抑えると統一感がでてきます。

【Step4 便利な機能をつけたカスタマイズ】

■4-1 メニューバーの設置

メニューバーは、画面上部に常に表示されていますので、クリックされやすいです。 1 日あたりのクリック数は多くなくとも、長期的にみるとクリックされやすくなります。 設置すべき項目は ・商品やサービスの特徴(導入記事) ・メニュー・料金表 ・お客様の声(実績) ・お店までの道のり 地図 ・お問合せ お申込み ・よくある質問 ・プロフィール などです。 リンク先の記事は、予め投稿しておきます。過去の日付で投稿しても構いません。 記事の URL は、記事タイトルをクリックして、個別ページで画面上部のアドレス バーに 表示されます

メニューバーは、 1、フリースペースへ メニューバーの HTML コードを設定 2、フリープラグインにコード追加 3、CSS の追加 
 の 3 段階の作業があります。 ※『基本CSS』をお使いの場合は、メニューバーの CSS が既にセットされています。 フリースペースにメニュバー HTML を設定するとメニューバーが表示されます。 『基本CSS』のメニューバー部分の●の箇所を編集して色などを変更してください まず、メニューの元となる HTML タグをフリースペースへ書き込みます。 ※ダウンロードした、『メニューバー用』からコピーすることもできます メニューバー用HTML タグ <div id= headermenu ><!-- --><ul><!--

--><li><a href="リンク URL" class="menu1">メニュー 1</a></li><!-- --><li><a href="リンク URL" class="menu2">メニュー 2</a></li><!-- --><li><a href="リンク URL" class="menu3">メニュー 3</a></li><!-- --><li><a href="リンク URL" class="menu4">メニュー 4</a></li><!-- --><li><a href="リンク URL" class="menu5">メニュー 5</a></li><!-- --></ul><!-- --></div> 5 項目のメニューを作るパターンです。

1

、上記 HTML タグをメモ帳などで開きメニュー 1 などの 部分を 『料金表』や『お客様の声』などの項目の名前に変更します。

2

、上記 HTML タグの リンク URL を飛ばしたいリンク先の URL へ変更します。 外部サイトへリンクをはるのは、出口になってしまします。 ホームページなど活用できていれば良いですが、通常はブログ内の記事にリンクしま しょう。 リンク先の記事(料金、アクセスなど)は、過去記事で(日付を古くして)予め用意します。

<投稿の日付を変える>

投稿の日付を変更することができます。 ※日付は半角で書きます。

3

、 書き換えが終わりましたら、HTML タグを コピーします 例)

<div id= headermenu ><!-- ̶><ul><!--

--><li><a href="http://ameblo.jp/inakadenetlife/○○" class="menu1">サービスに ついて</a></li><!--

--><li><a href="http://ameblo.jp/inakadenetlife/○○" class="menu2">メニュー 料 金・</a></li><!̶

--><li><a href="http://ameblo.jp/inakadenetlife/○○" class="menu3">アクセス</ a></li><!--

--><li><a href="http://ameblo.jp/inakadenetlife/○○" class="menu4">お客様の声 </a></li><!--

--><li><a href="http://ameblo.jp/inakadenetlife/○○" class="menu5">メルマガ</ a></li><!--

--></ul><!-- --></div> ※URLは例です。

※フリースペースには、メニューバーのコード以外のものも書くことができます。 フリースペースへ追加したらフリースペースは左側に設定してください。 まだこの段階では、フリースペース内にリンクが 挿入されているだけです。 メニューバーの形にはなっていません （「基本CSS」を入れた場合は表示されます） CSSで、メニューバーの形にしていきます。

５

， フリープラグインに以下のコードを追加します <!-- jQuery -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/ jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#headermenu").insertBefore(".skin-blogHeaderNavMenu"); } ); </script>

6

, CSS でメニューとなる項目がヘッダー下に来るように調整します。 以下のコードを CSS に追加します。 ※ダウンロードした、『メニューバー用』からコピーすることもできます ※『基本CSS』には既に入っています。(カラーを変更する必要はあります) ・CSS (※『基本CSS』にはセットされています) /* メニューバーCSS */ [amb-layout="headerNavMain"]{ widht:1120px; } .skin-blogHeaderNavInner { padding-left:0!important; padding-right:0!important; } .skin-blogSearch{ display:none; } li a.skin-topNavText{ display:none; } /*メニューエリア*/ #headermenu{ position:absolute; width:1120px; margin:0; padding:0; } /*メニューリスト*/ #headermenu li { float:left; width:224px; /*●メニュー 1 項目の幅*/ } （続きます）

/*メニューリストリンク*/ #headermenu li a{ font-size:15px; font-weight:normal; color:#000000; /*●文字色*/ background-color:#ffffff; /*●背景色*/ display:block; text-decoration:none; /*項目の文字装飾*/ text-align:center; /*項目の文字寄せ位置*/ line-height:72px; } /*メニューリストリンク マウスオーバー時*/ #headermenu li a:hover{ color:#000000; /*●文字色*/ background-color:#CCCCCC; /*●背景色*/ } ※背景色、文字色ともに変更できます 必要に応じて、●の箇所を変更してください カラーコードはこちらを参照してください http://simpleworks.jp/color ◆項目を 6 項目に増やす場合 メニューバーを 5 項目から 6 項目にする場合のやり方です。 まずは、フリースペースのメニューバーの HTML を編集します。

6 項目目の

--><li><a href="リンク URL" class="menu6">メニュー 6</a></li><!̶

を追加し ます。

<div id= headermenu ><!-- ̶><ul><!--

--><li><a href="リンク URL" class="menu1">メニュー 1</a></li><!-- --><li><a href="リンク URL" class="menu2">メニュー 2</a></li><!-- --><li><a href="リンク URL" class="menu3">メニュー 3</a></li><!-- --><li><a href="リンク URL" class="menu4">メニュー 4</a></li><!-- --><li><a href="リンク URL" class="menu5">メニュー 5</a></li><!̶ --><li><a href="リンク URL" class="menu6">メニュー 6</a></li><!-- --></ul><!-- --></div> のようにし、リンク先や表示される文字を変更します。 次に項目が増えた分、1項目の幅を変更します。 ブログ幅が 1120px の場合、186px。 4-1 で追加した CSS の メニュー 1 項目の幅を変更します。 /*メニューリスト*/ #headermenu ul li { float:left; width:186px; /*●メニュー 1 項目の幅*/ height:72px; } ただし、1120は6 項目の場合、割り切れないので、次の CSS を追加し微調整します。 #headermenu ul { padding-left:2px; } これで6項目になります ただし、メニューバーの項目が増えるとクリックも分散しますので、基本は 5 項目が良い です。 必要なものを絞って設定してください

◆サブメニューを追加し、プルダウンメニューにする

サブメニューを作り、プルダウンで表示させる方法です。


4-1 で設置したメニューバーをさらに階層化し、プルダウンで表示できます。

フリースペースに入れたメニュバー HTML の1項目目を次のように階層化します。

例)メニューバー HTML の1項目目

̶><li><a href="リンク URL" class="menu1">メニュー 1</a></li><!-- を次のように編集します

--><li><a href="リンク URL" class="menu1">メニュー 1</a><!-- --><ul><!--

--><li><a href="リンク先 URL">サブ 1</a></li><!-- --><li><a href="リンク先 URL">サブ 2</a></li><!-- --></ul><!-- --></li><!-- それぞれリンク先、サブ 1、サブ 2 の箇所の表示される文字を編集します。 さらに CSS に次を追加します #headermenu:after{ content: ."; display:block; height:0; clear:both; visibility:hidden; } /*サブメニューリスト*/ #headermenu li li{ float:none; padding:0px; margin:0px; width:224px; /*●メニュー 1 項目の幅 */ height:72px; }