アメブロをカスタマイズ
魅せるブログデザインを作ろう！　改訂版

■プチカスタマイズで見た目だけではなく「集客数」「アクセス数」が劇的に変わる！　読みたいテーマにすぐにアクセスできるデザインに！　アメブロユーザー必見！

こんなアメブロガー必見です！

・アメブロを自身でカスタマイズしたいと思っていた人
・自身のアメブロのデザインを一新したいと思っていた人
・CSSが書けないからといって、アメブロカスタマイズを諦めてしまっている人
・アメブロを運営しているけど、アメブロに見えないデザインにしたいと思っている人
・アメブロを営業ツールにできたら、したいと思っている人 ・アメブロでビジネスを始めたいと思っている人
・すでに運営中のアメブロがあるけど、アクセスが伸びずに困っている人

Chapter.01
アメブロカスタマイズのための第一歩

Section01 なぜ、ブログのカスタマイズをするのか？ ・・・・ 12
ブログのカスタマイズはすべての読者へ与える「第一印象」のため ・・・・・12
パーソナル・ブランディングをしよう ・・・・ 13
アクセスアップしよう（ファンを作ろう） ・・・・ 14
アメブロのカスタマイズの流れ ・・・・ 14
Section02 カスタマイズするためにマイページを確認しよう ・・・・・16
マイページの機能をすべて把握しておこう ・・・・ 16
Section03 カスタマイズの元となるブログスキンの設定をしよう ・・18
アメブロのカスタマイズはスキンの選定から ・・・・ 18
Section04 カスタマイズするために
サイドバーメニューの設定と配置変更をしよう ・・・・ 20
ブログ機能を拡張する「サイドバーメニュー」 ・・・・ 20

Chapter.02
ヘッダ画像を作ろう！

Section01 「PictBear」をインストールしよう ・・・・ 22
まずはフリーソフトで画像の加工に慣れていこう ・・・・ 22
Section02 「PictBear」のプラグインをインストールしよう ・・・・・24
ダウンロードしたPictBearを起動してみよう ・・・・ 24
ドロップシャドウをインストールしよう ・・・・ 24
Section03 ヘッダ画像を作ろう ・・・・ 26
ヘッダに使う素材を用意しよう ・・・・ 26
ヘッダ用画像を指定サイズにしよう ・・・・ 27
ブログタイトル、サブタイトルを入力しよう ・・・・ 29
別の画像を貼り付けよう ・・・・ 31
画像を水平方向に反転しよう・・・・・・32
ダウンロードしたドロップシャドウを使用する ・・・・ 33
ヘッダ画像を保存しよう ・・・・ 35

Chapter.03
ブログスキン編集のための予習

Section01 CSS ってなに？ ・・・・ 38
HTMLが身体、CSSが装飾品と考えよう ・・・・ 38
アメブロの構成要素「スキンとCSS」 ・・・・ 39
CSSの記述方法とルール ・・・・ 39
編集できるのはCSSだけ ・・・・ 40
id（アイディー） と class（クラス） ・・・・ 41
Section02 アメブロ内部（HTMLとCSS）解説 ・・・・ 42
アメブロの構成要素 ・・・・ 42
Section03 CSS編集方法と手順を学ぼう ・・・・ 44
本書【付録】のCSSを使用する ・・・・ 44

Chapter.04
ブログの看板となるヘッダ画像とスキンの装飾をしよう！

Section01 CSSの全体を確認してみよう ・・・・ 48
まずは記述項目の確認から ・・・・ 48
Section02 CSSでヘッダ画像の設定をしよう ・・・・ 50
ブログの第一印象を左右するヘッダ画像 ・・・・ 50
画像内にある不要な文字を削除する ・・・・ 52
Section03 CSSとフリースペースを使って
ヘッダにメニューを設置しよう ・・・・ 54
ブログの欠点をカバーするヘッダメニュー ・・・・ 54
ヘッダメニューの文字色を変更する ・・・・ 57
ヘッダメニューの背景画像をマウスオーバー時に変更させない ・・・・ 58
ヘッダメニュー名を画像で設定する ・・・・ 59
Section04 CSSでブログ背景を設定しよう ・・・・ 60
背景の設定方法 ・・・・ 60
Section05 CSSでサイドバーメニューのタイトルを装飾しよう ・・・・62
サイド部分の装飾も重要なデザイン的要素 ・・・・ 62
Section06 CSSでサイドバーの一覧にリストマークをつけよう ・・・66
サイドバーの工夫が差を生み出す ・・・・ 66
Section07 CSSでサイドバーの「読者登録」ボタンを変更しよう ・68
読者登録ボタンを目立たせるメリット ・・・・ 68
Section08 CSSで記事タイトルと日付、
テーマ表示欄の装飾をしよう ・・・・ 70
記事の始まりを明確にする ・・・・ 70
日付、テーマ欄のCSSを装飾する ・・・・ 74
Section09 CSSで記事背景や記事枠の装飾をしよう ・・・・ 76
記事を際立たせて注目してもらうには ・・・・ 76
記事本文に背景画像を設定しよう ・・・・ 77
記事本文に背景色を設定しよう ・・・・ 77
記事タイトルを含め背景色を設定する場合 ・・・・ 78
記事タイトルを含め枠を設定する場合 ・・・・ 79
Section10 CSSで読みやすい文字サイズ、行間の設定をしよう ・・80
文字の大きさをCSSで調節する ・・・・ 80
行間を広げる方法 ・・・・ 81
Section11 CSSでリンク文字の装飾をしよう ・・・・ 82
本文との違いを明確にする必要がある「リンク文字」 ・・・・ 82
Section12 CSSでメッセージボードの装飾をしよう ・・・・ 84
メッセージボードの特徴と利用法 ・・・・ 84

Chapter.05
プラグインでブログをパワーアップしよう！

Section01 プラグインの設置方法を学ぼう ・・・・ 88
プラグインとは ・・・・ 88
「プラグインリスト」と「フリープラグイン」の違い ・・・・ 89
プラグインリストを使ってみよう ・・・・ 90
フリープラグインを使ってみよう ・・・・ 91
Section02 Twitterのつぶやきを設置しよう ・・・・ 92
Twitterとは ・・・・ 92
Twitterに登録しよう ・・・・ 93
Twitterのプラグインを探そう ・・・・ 94
Twitterのソースを取得しよう ・・・・ 95
Twitterのソースをブログに設置しよう ・・・・ 96
Section03 まぐまぐ（メルマガ）フォームを設置しよう ・・・・ 98
まぐまぐ（メルマガ）とは ・・・・ 98
まぐまぐに登録しよう ・・・・ 99
まぐまぐの登録用フォームを取得しよう ・・・・ 100
発行許可から登録フォームの取得まで ・・・・ 101
まぐまぐの登録フォームをブログに設置しよう ・・・・ 102
Section04 Googleマップを設置しよう ・・・・ 104
Googleマップとは ・・・・ 104
Googleマップのプラグインを取得しよう ・・・・ 104
Googleマップをブログに設置しよう ・・・・ 105
Section05 FC2のプラグインを取得しよう ・・・・ 106
FC2とは ・・・・ 106
FC2のIDを取得しよう ・・・・ 107
FC2アクセス解析のプラグインを取得しよう ・・・・ 108
FC2アクセス解析をブログに設置しよう ・・・・ 109
Section06 忍者TOOLSのプラグインを設置しよう ・・・・ 110
忍者TOOLSとは ・・・・ 110
忍者TOOLSに登録しよう ・・・・ 111
忍者メールフォームのプラグインを取得しよう ・・・・ 112
忍者メールフォームをブログに設置しよう ・・・・ 114
Section07 ACR WEBの人気記事ランキングを設置しよう ・・・・・116
ACR WEBとは？ ・・・・ 116
ACR WEBに登録しよう ・・・・ 117
ACR WEBのページランキングを設置しよう ・・・・ 118
ACR WEBのページランキングをブログに設置しよう ・・・・ 120
ページランキング設置後の管理 ・・・・ 120
Section08 i2iアクセスランキングを設置しよう ・・・・ 122
i2iアクセスランキングとは ・・・・ 122
i2iに登録しよう ・・・・ 123
i2iアクセスランキングのプラグインを取得しよう ・・・・ 124
i2iアクセスランキングを設置しよう ・・・・ 126
i2iランキング設置後の管理 ・・・・ 127
Section09 「人気ブログランキング」を設置しよう ・・・・ 128
ブログランキングとは ・・・・ 128
人気ブログランキングに登録しよう ・・・・ 129
人気ブログランキングのリンクバナーを取得しよう ・・・・ 130
人気ブログランキングのリンクバナーを設置しよう ・・・・ 130
人気ブログランキング登録のメリットを活用しよう ・・・・ 131
いろいろなブログランキングサイトに登録してみよう ・・・・ 132
Section10 プラグインサイトの紹介 ・・・・ 136
プラグインサイトの紹介 ・・・・ 136
Section11 個性的なプラグイン紹介 ・・・・ 138
使用者が少ない、個性的なブログパーツを手に入れよう ・・・・ 138

Chapter.06
読者がリピーターになり、アクセスアップする設定をしよう！

Section01 読者目線のアメブロを作ろう ・・・・ 140
アメブロの運営目的を明確にする ・・・・ 140
目的を達成するためには誰に読んでほしいのか？ ・・・・ 141
Yahoo!、Googleから集客できる記事とは？ ・・・・ 142
読者が喜ぶ記事とは？ ・・・・ 143
読者とコミュニケーションをとる！ ・・・・ 144
リピーターになってもらえるアメブロとは？ ・・・・ 145
記事タイトルは２つのパターンを使ってアクセスを増やす！ ・・・・ 147
Section02 Yahoo!、Googleからアクセスを集めるには
PDCAを実行！ ・・・・ 148
アクセスは最終的な目的ではない ・・・・ 148
集客できる人はPDCAサイクルを何度も回している！ ・・・・ 148
Plan：記事タイトルを決める ・・・・ 150
Do：紹介される記事を書く！ ・・・・ 152
Check：アメブロアクセス解析をチェック！ ・・・・ 153
Act：検索サービスで上位表示を狙う検索語を練り直す！ ・・・・ 155
Section03 読者を迷わせない工夫をしよう！ ・・・・ 156
UUとPVの違い ・・・・ 156
クリックさせる場所は明確に！ ・・・・ 156
パンくずリストを作ろう ・・・・ 157
読者にわかりやすいように目次を作ろう ・・・・ 158
読者の参考となるような記事を関連記事リンクしよう ・・・・ 159
Section04 もっとアクセスアップ！これがSEO対策 ・・・・ 160
アメブロの本格的なSEO対策とは ・・・・ 160
Yahoo!、Googleは文字しか読めない ・・・・ 160
たくさんのリンクをもらおう！ ・・・・ 161
被リンクが増える記事とは？ ・・・・ 162
自作自演でリンクをつけるのも有効 ・・・・ 163
Section05 狙った検索語でアメブロを上位表示させるSEO対策とは 164
SEO対策は技術より根気が大切 ・・・・ 164
時間を割いておこなう価値があるSEO対策 ・・・・ 164
いろいろな無料サービスに登録しよう ・・・・ 166
あらゆるネットサービスからリンクを貼る ・・・・ 166
アメブロに無料でリンクを送るいろいろな方法 ・・・・ 167
リンクの貼り方のコツ ・・・・ 168
１つ記事やページで狙う検索語は１つ ・・・・ 168

Chapter.07
アメブロカスタマイズの成功事例

脱! 恋愛依存症　あなたの幸せ恋愛応援ブログ ・・・・ 170
三重県発! 社労士×経営コンサル　小岩広宣のブログ ・・・・ 170
カラーのチカラで自分をもっと好きになる ・・・・ 171
モテない色って？3時間で上品モテ！30歳からの「なりたい！」を叶えます。
桜井もえの人生が変わる美色ファッションスタイリング ・・・・ 171
35歳までに天職を探す「転職」の教科書 ・・・・ 172
自信をもって歩いてゆける! 愛のスピリチュアルリーディングで魂が500倍輝く方法 ・・・・172
出版の方法を知って、ベストセラー出版を目指そう！ ・・・・ 173
食べられるスキンケアでアトピーも肌老化も卒業！ ・・・・ 173
美容界が変わります｜StarStylistオフィシャルブログ ・・・・ 174
どんな悩みも解決可能！もう大丈夫。ひとりで悩まないで。
占い師まゆらがあなたの孤独な心を癒します。 ・・・・ 174
伸びる会社には理由がある！「本気で仕事を楽しむ会社にする方法」
活性化コンサルタントの流儀 ・・・・ 175
好きなことで起業（ビジネス）ってできるの？はい、簡単です。あなたにも出来ますよ！ ・・・175
就業規則・助成金コンサルタント定政晃弘の「異業種7社で学んだ労務管理のツボ」 ・・・・176
1万円で買えるパチンコ・パチスロ！快適に自宅で遊べる「家パチ」購入＆改造情報 ・・・・176
鉄ビズ ・・・・ 177
リサのLOVEハワイ ・・・・ 177
神戸・住吉ハワイ生まれのドーナツ”マラサダ”「Mr.MARASADA」 ・・・・ 178
尾張旭市のまつげエクステパーマ専門店 Ma’cherie ・・・・ 178
Hanako Garden 北海道のすずらんを全国に！ ・・・・ 179
恋するBODYの作り方　女性専用プライベートサロン「BEAUTY EVER」 ・・・・ 179
さっぱりとした南仏系・欧風料理のレストランシェフが綴る街の洋食屋の裏話 ・・・・ 180
ロジウラ〜 Rojiura 〜東京・木場のフレンチダイニング ・・・・ 180

Appendix　付録

Section01 Webセーフカラーのカラーチャート ・・・・ 182
OSやブラウザなどの環境に左右されないWebセーフカラー ・・・・ 182
Section02 ブログカスタマイズ便利ツール ・・・・ 184
ツールを使いこなせば作業効率は格段に上がる ・・・・ 184
Section03 ブログカスタマイズ便利サイト ・・・・ 190
カスタマイズの考え方を広げよう ・・・・ 190
Section04 CSSダウンロード ・・・・ 198
アメブロ専用サンプルCSSのダウンロード ・・・・ 198
ダウンロードしたCSSファイルをアメブロに設置 ・・・・ 199
ダウンロードしたfreespaceファイルの使い方 ・・・・ 201