【アメブロカスタマイズ】フリースペースとフリープラグイン、CSS編集の関係

こんにちは、ドリル 鈴木です。
今回は、コメントで頂いたご質問への回答 第一弾として、フリースペースとフリープラグイン、CSS編集の違いとその使い分けについて説明します。

それぞれ、どの様な機能を持っていて、どう使い分ければ良いのか。
そこを理解する事で、やりたい事に合わせてどこを編集すれば良いのが、自分で判断できる様になると思います。

また、合わせてアメブロカスタマイズで使用する、HTML、JavaScript、CSSについても簡単にですが説明します。
アメブロカスタマイズの基本となる事なので、長くなってしまいますが、しっかりと抑えておきましょう。

それでは、スタートです。

アメブロカスタマイズで必要な知識

アメブロカスタマイズにあたり、当ブログでは「HTML」「JavaScript」「CSS」という3つを使って行っています。

これは、一般的にホームページを作るのに必要な要素となりますが、それぞれ役割が異なります。

[HTML]

HTMLはハイパーテキスト マークアップ ランゲージの略で、ウェブ上の文章を記述する為のマークアップ言語です(ウィキペディアより抜粋)。

簡単に言ってしまうと、「HTMLタグ」を利用して、テキストにブラウザが理解できる様に意味付けをしていく事ができます。

例えば、

<a href="http://hogehoge.com/">ほげほげページはこちら</a>

となっていれば、

「ほげほげページはこちら」と言うテキストに対し「http://hogehoge.com/」への「リンク」ですよ

と言う意味付けをした事になります。
また、見出しであれば「<h1></h1>」と言ったHTMLタグで括ったり、段落であれば「<p></p>」と言ったHTMLタグで括ります。

こうする事で、単なるテキストに意味を持たせ、ブラウザはその意味を理解して画面に表示させます。
通常、ブラウザは文章を上から読み込み、記述された順に画面に表示していきます。
その為、記述した場所によって表示される場所は決まってしまい、移動させる場合は記述する位置を変更するしかありません。

また、Googleの検索エンジンなどは、そうやって記述されたHTMLを分析してページの内容や構成を解析します。
それに対して、Googleに好かれる様にサイトを作ったり、HTMLを記述する事を「SEO対策」と呼びます。
※SEO対策は本当はもっと深い話ですが、取り敢えずこの様に理解しておいて下さい。

アメブロカスタマイズでは、ヘッダーメニューを作ったり、バナーを掲載したりするのに利用します。

[CSS]

CSSはカスケーディングスタイルシートの略で、HTMLで意味付けされた文章に対し、スタイル(デザイン)を指定する為の言語です。

詳しくは別の記事で記載しています。
この機能は、印刷業界にもあり、スタイルシートと呼ばれます。

本であれば、「見出しの書体と大きさや色」「本文の書体や大きさ、行間など」は本を通して統一されていますよね。
しかし、制作途中で「見出しの書体を変えたい」となった時に全てのページを編集するのはともて大変です。
そこで、「見出しの書体はＡ」と言うのをまとめて1ヶ所で設定しておき、ここを直せば全ての見出しが直る様にしておきます。

こうする事によって、本やホームページのデザインが統一され、管理や変更も楽になります。
本来はこういった目的の為に使います。

HTMLとCSSは「HTMLタグ」または「id(#)」「class(.)」で紐づいています。
修正したいHTMLの「HTMLタグ」や「id」「class」を指定して、スタイルを記述する事でデザインを変更する事が出来ます。

ただ、実はこういった事は、HTMLタグの「<font>」や「<b>」などでも行えますが、実際にはそうしない事をお勧めします。

理由は、先の項目に書いた通り、HTMLは文章に意味付けをする為の言語です。
そして、その意味をGoogleは理解してページの重要度を測り、検索結果の表示する順番を決めます。

その為、文章の意味付けとデザインの定義を別々にする事で、検索エンジンなどのシステムにも伝わり、人間にも見栄えのよいホームページを作る事ができる訳です。
さらには、デザインの修正や管理も楽に行えると、良い事ずくめになります。

アメブロカスタマイズでも、HTMLのデザインを変更するのに利用します。
ただ、CSSには優先順位と言う概念があり、書けば全て適用される訳ではないので注意が必要です。

[JavaScript]

詳しい説明は別の記事で行っていますので、そちらを参照して下さい。ここでは、簡単な説明になります。

JavaScriptはブラウザ上で動かす事が出来るプログラム言語です。
動かし方はHTMLで書かれた文章に専用のHTMLタグ「<script></script>」で括り、その間に記述します。

このタグは文章中のどこにでも記述する事が出来ますが、どこに書いても一緒と言う訳ではありません。
記述する場所によって動く動かないが変わってしまう事がありますので、注意が必要です。

当ブログの中で「JQuery」と言う物が出てきますが、こちらはJavaScriptで記述された便利なツール(プログラム)の集合(ライブラリ)です。

これを利用する事によって、本当は難しく長いプログラムを書かなければいけない様な事でも、たった1行書くだけで簡単に実装する事ができたりします。
逆に、よくわかっていないまま使っている人も多く、思い通り動かなかった場合の修正はとても困難です。

例えば、記事の中である

jQuery(function($) {

  $('form#blogSearchForm').before($('#searchArea'));

});

と書いた場合は、

jQueryの機能を使い「id="searchArea"」と書かれたHTMLタグの前に「id="blogSearchForm"と書かれたformタグ」を移動させる

と言ったプログラムをした事になります。

これによって、本来は記述した場所によって表示される位置が決まってしまうHTMLの順番を、動的に入れ替える事が出来ます。
また、これはCSSに対しても同様で、動的にCSSを編集する事が出来ます。

アメブロカスタマイズでは、主にHTMLで記述した文章やバナーの位置を移動させたりするのに使っていますが、もっと色々な機能を実装する事も出来ます。

フリースペースとフリープラグイン、CSS編集の違い

まずは、フリースペースとフリープラグイン、CSS編集の機能的な違いについて説明します。

[フリースペース]

テキストやHTMLを記述するスペースです。
文字数は半角10,000文字まで入力する事が出来ます。

注意点として、入力できるHTMLのタグに制限があります。
なので、例えHTMLだけで書かれた文章でも禁止タグを含む場合は、「フリースペース」ではなく「フリープラグイン」に記述します。

使い方としては、バナーを掲載する為のHTMLタグやメニューなどのHTMLを記述します。
すると、記述したHTMLが「フリースペース」の配置した位置に表示されます。

HTMLの項目で説明した通り、HTMLは記述した場所によって、表示される位置が決まります。
当ブログで紹介している記事の中では、この様にフリースペースに記述したHTMLをJavaScriptを使って位置を変更する様なカスタマイズをいくつも紹介しています。

[フリープラグイン]

テキスト、HTML、JavaScriptなどを記述するスペースです。
フリースペースと異なり禁止タグがなく、どんなHTMLやJavaScriptでも記述する事ができます。

しかし、その文入力できる文字数が半角3,800文字までとフリースペースよりかなり少なくなっています。
その為、何でもフリープラグインに記述すればいいとはいかず、フリースペースとフリープラグインを使い分ける必要が出てきます。

フリースペースに書ける物はスリースペースに書く様にし、JavaScriptや禁止タグを含むHTMLの場合だけフリープラグインを使い様にしましょう。

また、JavaScriptは別のファイルにまとめて保存し、他のサーバにアップロードして利用する事もできます。
別ファイルにまとめた物は文字数制限の対象にならないので、沢山カスタマイズをして文字数が足りなくなってしまった場合は、外出しにして対処する事をおすすめします。

[CSS編集]

CSSを記述するスペースです。
元のデザインを変更したい、フリースペースなどに書いたデザインを設定したいなどの場合は、ここのCSSを編集します。

元から設定されているデザインを変更したい場合は、最初から書かれているCSSを修正します。
この時、HTMLタグに記述されている「id」や「class」に合った箇所を修正する必要があります。

また、フリースペースなどに書いたHTMLのデザインのCSSを設定したい場合は、入力欄の最後に追記します。
この際も指定する「HTMLタグ」や「id」「class」を間違えない様に注意しましょう。

また、CSSの説明でも書いた通り、CSSには優先順位があります。
そして、アメブロで読込まれているCSSは「CSS編集」で書かれた物だけではありません。

例えば広告のCSSなど、アメブロが編集されたくないCSSは別に読込まれていて、編集する事が出来ません。
また、優先順位も高く、CSS編集で書いても画面に反映されない場合が沢山あります。

当ブログの記事ではこういった「CSS編集に書いても反映されない」箇所の穴を見つけて、広告などを削除しています。
その為、その穴が埋められてしまうと効果がでなくなってしまうと言った問題が発生します。

フリースペースとフリープラグイン、CSS編集の使い分け

先にも書いた通り、文字数制限や入力制限の理由から「フリースペース」と「フリープラグイン」は使い分ける必要があります。

基本的なHTMLタグだけの文章であれば、フリースペースに入力し、禁止タグを含む文章やJavaScriptはフリープラグインに入力しましょう。
また、デザイン変更用のCSSは全て「CSS編集」で設定する様にします。

基本的な編集の流れとしては以下の様になります。

[記事の上にオリジナルの読者登録ボタンを設置する場合]
(記事:記事の上にオリジナルの読者登録ボタンを設置しよう)

1. 「フリースペース」にオリジナルの読者登録ボタンを設置する為の「HTML」を記述する

↓↓↓

2. 「フリープラグイン」にJavaScriptを記述して、フリースペースに書いたオリジナル読者登録ボタンのHTMLの位置を変更する
　 この時、HTMLに書かれた「class」や「id」を指定する事で変更するHTMLの場所を指定する事が出来る

↓↓↓

3. 位置が変更されたHTMLに対して、「CSS編集」にCSSを記述してデザインを設置する
　 記事ではHTMLに記述された「class」を指定して、デザインを修正する読者登録ボタンを指定し、位置を真中揃えにしています。

この様になります。
見てわかる通り、全てHTMLに書かれた「id」または「class」によって「JavaScript ⇄ HTML ⇄ CSS」と紐づいている事になります。

ですので、フリースペースに記述するHTMLには「id」または「class」を書く様にしておくと、後でデザインを直したりなどの時に便利です。
また、この時記述する「id」や「class」は、その他の要素と被らない様に注意する必要があります。

まとめ

以上で、フリースペースとフリープラグイン、CSS編集の関係についての説明が終了しました。

かなり長くなってしまったので、うんざりした人も多いのではないでしょうか。

本当は前半と後半でわけても良かったのですが、纏まっていた方がわかりやすいかなと思い、一つの記事にしてしまいました。
ちょっと長過ぎたかも知れませんね。

簡単な図解も入れてみたのですが、それぞれの関連性をご理解頂く役に立ったでしょうか？
始めたばかりの方にとっては難しい箇所もあるかと思うので、お気軽にコメントで質問して下さい。

私としても出来るだけわかりやすく書いたつもりですが、その分長くなりすぎてしまったのを反省しています。
今後はもっとコンパクトにまとめられる様に努力していきます。

また、この記事と同様にもっと大枠の箇所でわかりにくいなどありましたら、お気軽にお問い合わせ下さい。
実は、私も記事のネタが増えるので、逆にありがたかったりします♪

以上、鈴木でした。

たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》

引用元：http://www.wcf-drill.com/2013/08/ameblo-customize-freespace-freeplugin-css-relation.html

【アメブロカスタマイズ】アメーバブログをカスタマイズする方法 - 基本的な流れ

こんにちは、ドリル 鈴木です。
今回は、これからアメブロのカスタマイズを始めたいけど、どうやったら良いのか？何から始めたらいいのか？と言う方の為に、最初の流れを説明したいと思います。

アメブロ自体も始めたばかりで、よくわからない方にとって参考になればと思います。
詳しい方は、スルーしてください。

それでは、スタートです。

アメブロのカスタマイズを始めるには

アメブロのデザインをカスタマイズする理由は「アメブロカスタマイズってなに？」に書いているのですが、やはり多くの方に見てもらう事が大切です。

しかし、アメブロをカスタマイズするには以下の３つの要素が必要となります。

• CSSを自由にカスタマイズできるテンプレート選び


• フリースペースの編集


• フリープラグインの利用

この３つの要素を全て満たす事で、アメブロを自分専用のデザインにカスタマイズする事が出来る様になるわけです。

逆にどれか一つでも欠けると、自由なデザインにカスタマイズする事が出来ない場合は出て来てしまいます。

特にテンプレート選びは重要になります。
アメーバタイアップのテンプレートなどでは、CSSをカスタマイズする事は全く出来ません。
また、テンプレートによっては「簡単カスタマイズ」しか出来ないテンプレートもあります。

この見分け方としては、テンプレートの適用後に「デザインの変更」を開いた際の表示を確認してください。
適用中のテンプレートがどこまでカスタマイズ可能なのかが「適用中のデザイン」 が記載されている下にを見ると判別する事が出来ます。
以下に３つのパターンの画像を記載しますので、参考にしてください。

これは「アメーバタイアップ」などで、CSSのカスタマイズが全く出来ないテンプレートの場合です。

これは「簡単カスタマイズ」しか出来ないタイプのテンプレートの場合です。
この場合は、CSSを直接編集する事は出来ません。

この様に、「CSSの編集」と書かれている場合は、CSSを直接編集する事が出来ます。
アメブロカスタマイズを自由に行いたい場合は、こういったテンプレートを選ぶ必要があります。

「ヘッダーの画像をオリジナル画像に変えたい」だけであれば２番目の種類のテンプレートでも問題ないのですが、しっかりと伝わるデザインでオリジナルのテンプレートを作りたいと行く場合は、必ず３番目の様になるテンプレートを選ぶ様にして下さい。

テンプレートの選択方法については「テンプレートをカスタム可能デザインに変更しよう」が参考になります。

フリースペースを利用する

CSSを編集できるテンプレートを選択したら、次にフリースペースについて説明します。
このフリースペースはその名の通り「自由に記述できる場所」になります。

簡単な例として、文章を記述すると、それがそのままブログのサイドバーに表示されます。
改行すると表示される文章も改行されます。

そしてもっと大切な事は、「フリースペースにはHTML」が記述できる点です。
HTMLを記述する事が出来るので、文章だけでなく、画像を載せたり、文章にリンクを貼ったりする事も出来ます。
実は、先程の改行は「<br>」と言う改行用のHTMLに自動的に変換されます。

しかし、注意点が５つ程ありますので、事前にチェックしておいてください。

• 文字数に制限があります(半角10000文字)


• 改行は全てHTMLに反映されてしまいます


• 基本的にはサイドバーにしか表示出来ません


• １ヶ所しか使えません


• JavaScriptは記述できません

特に２番目はHTMLを記述する際は注意が必要です。
これを知らずにHTMLを記述すると、意図しない所に改行用のタグが入ってしまい、思った通り表示されない原因になります。

また、３番目と４番目は色々やりたい方にとって致命的な問題です。
しかし、「《上級》サイドバーに２ヶ所以上にバナーを設置したい」の様な解決方法もあるので、安心してください。

また、フリースペースは最初の設定では利用する事が出来ません。
ですので、これからアメブロのカスタマイズを行いたい方は、設定を変更しフリースペースを利用できる様に設定を変更する必要があります。

まずは、サイドバーの「配置設定」を開いて下さい。
「ブログを書く」＞サイドバーの「サイドバー」の「配置設置」をクリックします。

次に、「使用する機能」の白い領域に「フリースペース」を移動させて、「保存」をクリックして下さい。
これで、フリースペースが使える様になりました。

この例では右側のサイドバーしかない場合ですが、３段ある場合はどちらに設定しても構いません。
「フリースペース」を「使用する機能」に設置する事が大切です。

フリープラグインを利用する

フリースペースも利用できる様になったので、最後にフリープラグインについて説明します。
通常、プラグインはブログにブログパーツなどを設置する事に使いますが、これは誰かが作ってくれている必要があります。

こういった物の多くは「JavaScript」と言うプログラム言語を利用しています。
JavaScriptについては「JavaScriptについて知っておこう」で詳しく説明していますが、多くのブラウザ(インターネットエクスプローラーなどの総称)上で動かす事の出来る、数少ないプログラム言語です。

つまり、プラグインと言う機能の多くは外部にある「JavaScriptで書かれたプログラムのファイル」を読込んで、「ブログ上で実行させる」為の物です。
しかしこの場合、すでに書かれたプログラムなので設定変更以外で自由に変える事は出来ません。
当然ですが、あなたのブログ用と言う訳には行きません。

そこで、フリープラグインの出番になります。
フリープラグインにはこの「JavaScript」を直接記述する事が出来ます。
先程も書いた通り「フリースペース」には記述できないので、「JavaScript」を記述したい場合は、「フリープラグイン」だけが記述する事の出来るスペースになります。

しかし、ここでも３点程注意点がありますので、チェックをお願いします。

• 文字数に制限があります(半角3800文字)


• 入力順に実行されます


• JavaScriptにエラーがあると、その他の機能にも影響があります

１番目は実際に書くと、とても少ない事がわかります。
なので、複雑な事をする場合は、外部ファイルにして読込む事をオススメします。

また、２番目と３番目はフリープラグインと言うよりも、JavaScriptの動きになります。
JavaScriptは記述されている順に実行されて行き、１ヶ所でもエラーがあると全てのJavaScriptが止まってしまいますので、注意してください。

フリープラグインも初期設定では使えなくなっています。
やはりアメブロカスタマイズを行いたい方は、以下の様に設定を変更してください。

まずは、管理画面の「フリープラグイン」を開いてください。
メニューからは「ブログを書く」→「プラグインの追加」→「フリープラグイン」になります。

ここで、何も書かなくて構わないので「保存」をクリックして下さい。次に、先程のスリースペースと同様に「サイドバー」の「配置設定」をクリックして下さい。

すると、フリープラグインが「使用しない機能」に配置されていると思います。

なので、これもフリースペースと同様に「使用する機能」に配置して「保存」します。
これで、フリープラグインが使える様になります。

この設置する位置はどこでも問題ありませんが、「フリースペース」より右側で下側にして下さい。

まとめ

以上で設定は完了です。ここまで全てを設定すれば、アメブロのカスタマイズを開始出来ます。

今回の内容は、カスタマイズの内容によっては使わない可能性もあります。
しかし、これからアメブロのカスタマイズを行うとやりたい事が広がって行く事が多いので、全ての設定をしておく事をオススメします。

面倒かも知れませんが、一通り設定を終わらせて備えておきましょう。
分かりにく所があれば、ぜひ気軽にコメントしてください。

以上、鈴木でした。

たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》

引用元：http://www.wcf-drill.com/2013/07/ameblo-customize-standard-method-basic-flow.html

【アメブロカスタマイズ】カスタム可能デザインに変更しよう

こんにちは、ドリル 鈴木です。
今回は、アメブロカスタマイズを行うにあたって最初にやらなければいけない「デザインの変更」について説明します。

アメブロは最初のままでは細かい所までカスタマイズする事ができません。
CSSを使ってメニューなどのカスタマイズをするには、デザインを専用の物に変更しなければいけません。

当サイトの「アメブロカスタマイズの教科書」は細かい部分までカスタマイズする事を前提としているので、それ様のテンプレートを選択します。
それでは、スタートです。

カスタマイズを始める前に

今回はカスタマイズを始める前に準備として、デザインの変更でカスタマイズのできる物を選択します。
ただし、このデザインの変更を行うと、今まで設定していたカスタマイズがリセット(初期化)されてしまいます。

もし、また元のデザインに戻せる様に、CSSのバックアップなどをとっておく様にしましょう。

デザインの変更を開く

まず、デザインの変更ページを開いて下さい。
変更ページには以下の様に行く事ができます。
「ブログを書く」⇒「ブログデザイン」⇒「デザインの変更」

カスタム可能なデザインを表示する

デザインの変更ページの最初に出ているデザインは「アメーバタイアップ」などカスタマイズには適さないデザインです。
カスタム可能なデザインを表示する様に切り替えましょう。

ページを下へスクロールさせると「他のカテゴリからブログデザインを探す」が出てきますので、「カスタム可能」をクリックして下さい。
すると、カスタム可能なデザインだけが表示される様になります。

カスタム可能なデザインを選択する

次に、表示されたカスタム可能なデザインの中から、好みのデザインを選択します。
カーソルをデザインの画像にあわせると「表示を確認する」と表示されるので、クリックして下さい。

選択したデザインを適用させる

すると、別の画面で変更した場合のイメージが表示されます。
最後に「レイアウト」を選んで下さい。
選んだ「レイアウト」にあわせて、下の表示も変わるので、問題がなければ「適用する」をクリックして下さい。

まとめ

以上でカスタマイズ可能なデザインが選択されました。
一度自分のページを確認してみて下さい。変更したデザインに変わっているはずです。

もし変わっていない様ならページの更新を行って下さい。
Windowsなら「F5」、Macintoshなら「command+r」でも更新されます。

それでは、これでカスタマイズを始める準備が整いました。
わかりにくい所があれば、気軽にコメントで質問して下さい。

以上、鈴木でした。

引用元：http://www.wcf-drill.com/2013/02/ameblo-castomize-change-template.html

【アメブロカスタマイズ】アメブロカスタマイズってなに？ - アメブロカスタマイズを始める前に

こんにちは、ドリル 鈴木です。
今回はこれからアメブロのカスタマイズを始めようと言う方の為に、そもそもアメブロカスタマイズとな何なのかをご説明致します。

カスタマイズの意味から、目的、効果的なカスタマイズまで、これから始める基本的な内容になっています。
何から勉強したら良いのかと言う方は、まず目を通してみて下さい。

また、「やってはいけない」「やってしまいがちな」注意も書いてあるので、チェックして下さい。

それでは、スタートです。

カスタマイズとは？

カスタマイズを日本語でわかりやすく言うと「改造」です。
最初から用意されているブログ編集機能ではなく、「デザインの変更」機能を利用するともっと自由度の高い改造が可能になります。

アメブロカスタマイズとは？

アメブロにはたくさんのブログがあります。
そんなブログの中であなたのブログを読んでもらうには、あなたの特徴をわかりやすく伝える事が大切です。

カスタマイズは「あなたのブログをあなたらしく」する手段のひとつです。

あなたのブログのデザインや機能をカスタマイズする事によって、文字の大きさやフォント、行間、太さを変えてより読みやすくしたりと言った事が簡単にできます。

また、あなたがグラフィックソフトが使えればタイトルにオリジナルの画像を使用したり、メニューをつけたりと「まるでホームページ」の様にする事もできます。

カスタマイズの目的

カスタマイズの目的は大きく分けて２つあります。

１つ目の目的は見た目の印象を変える事です。
そして、あなたの言いたい事である「テーマ」をわかり易く伝える事です。
「あなたの事をまったく知らない」そんな方が見ても「２秒で価値がわかる」そんな見た目を目指して下さい。

２つ目の目的は機能を強化する事です。
アメブロの機能やテンプレートは多くのユーザーにとって「平均的に使えるシステム」になっています。
なので、「かゆい所に手が届く」事もなければ「ビジネス向け」でもありません。
また、せっかく来てくれた読者さんには、たくさんの記事を読んで欲しいとも思いませんか？
その様な機能を追加するのもカスタマイズの目的になります。

ただひとつ、アメブロカスタマイズは慣れてくると色々とできて、とても面白いものです。
その為、逆にカスタマイズする事が目的になってしまい、本来の目的とかけ離れたカスタマイズをしてしまいがちです。

あなたがアメブロを使う目的はなんですか？
それを忘れずに、本当に必要なカスタマイズを導入する様にしましょう。
一番やらなければいけないのは、記事を書く事のはずです。

カスタマイズに必要な知識

アメブロカスタマイズで必要な知識はどこまでやるかによります。
全てのカスタマイズを行う場合に必要となる知識をあげます

• タイトルに画像を使用したい：グラフィックソフト（Photoshop/Illustratorなど）


• 文字の大きさや行間、太さを変えたい：CSS(スタイルシート)


• フッターを設置したい：JavaScript

これにあわせて、最低限のHTMLの知識が必要となります。
ただし、「アメブロカスタマイズの教科書」内にあるカスタマイズであれば、コピー＆ペーストで同じ結果を得る事ができます。

「ちょっと難しそう」と思った方もまずはコピー＆ペーストから初めてみて下さい。

読んでもらえるブログにするために

ここではブログを読んでもらいやすくする為のカスタマイズ例を紹介します。

■タイトルを目立たせる

タイトルが一番目にとまる所です。まずはここをカスタマイズしましょう。
特に画像をつかってメッセージを訴求する方法はとてもわかりやすく、伝わりやすい方法です。

■ナビメニューを設置する

特に読んでもらいやすい項目、大切な項目をメニューにしてタイトルの下に設置しましょう。

読者が読むべき記事を探しやすくなるので、見てもらえるページ数が増えます。
特に「お問い合わせ」を設置する事が大切です。

■記事のタイトルを目立たせる

記事のタイトルを他の文章と違う事がしっかりとわかる様にしましょう。
文字を大きくしたりや太くしたり、背景に色を設定したりと効果的です。

■記事の文章を読みやすくする

元々の設定だと記事の文字が小さく、行間も狭い為、読みにくい印象があります。
記事の文字を大きくし、行間も調整する事によって読みやすくなります。

また、文字の色も「黒」より「ややグレー」にした方が目にやさしく、読みやすくなります。

■デザインを統一する

全てのパーツのデザインを統一しましょう。色の使い方にも統一感が大切です。
箇所によってデザインがバラバラだと情報の信憑性に不安をもたれる原因になりかねません。
しっかりと細部まで作り込む事で安心・信頼につながります。

まとめ

アメブロカスタマイズはやればやるほど面白くなります。
まるで自分のブログを育てている様な気分になります。

しかし、やり過ぎは禁物です。
あなたの目的を見失わず、パーソナルブランディングにつながるデザインを目指して下さい。

大切な事は、「読者の視点」で読む価値があり、読み続けたくなる事です。

以上、鈴木でした。

引用元：http://www.wcf-drill.com/2013/02/ameblo-customize-what-is-ameblo-customize.html

【アメブロカスタマイズ】アメブロってなに？

アメーバとはサイバーエージェントが運営するサービスの総称です。
その中でも中心となるサービスが「アメーバ ブログ」と呼ばれに本最大のユーザー数を誇るブログサービスです。

弊社がアメブロをオススメするポイントも含めてご紹介します。

アメブロとは？

アメブロ(ameblo)とはアメーバ ブログの略称です。
アメーバ(ameba)はサイバーエイジェントが運営するすべてのサービスの総称で、コミュニケーションサービスサイトを差します。

日本最大のブログサービス

アメブロは日本最大のユーザー数を誇るブログサービスです。
2012年1月時点で、会員数2,000万人が登録しています。
芸能人や有名人のブログも多く、人が集まりやすい構造になっています。

アメブロの人気の秘密

アメブロの人気の秘密はユーザー数の多さと、初めてでも使いやすい機能にあります。

特にユーザー同士のコミュニケーション手段がたくさん用意されているため、友達やつながりを作る事が簡単にできます。
多くのユーザーとつながりを作る事によって、ブログも見てもらいやすくなります。

圧倒的にユーザーが多い

設立は2004年の9月ですが、2009年11月時点でアクティブユーザーが約115万人/月。
ユニークビジターは2009年11月時点で220万人/月。ページビューは2億3000万/月となっています。

その他の調査でも三強と言われています。
投稿記事数でも他の無料ブログを圧倒的に上回っているのがわかります。

参考：ブログ・メディア・動画界勢力図詳細 2013/2/6時点

男女比率は【男性:53%／女性:47%】となっており、年齢層も10代から60代以上まで幅広い方が利用しています。

まとめ

とても多くのユーザーが利用している無料ブログサービスです。
また、ブログだけではい「コミュニケーションツール」としての側面を持ち合わせている事がアメーバの強みです。

弊社がアメブロをオススメする理由は「人とのつながりを作れる」所が他のサービスにはなく、とても重要だと感じているからです。
ぜひ皆さんもアメブロを始めて、新しいつながりを作ってみて下さい。

きっとブログもより楽しく続けられると思います。

引用元：http://www.wcf-drill.com/2013/02/ameblo-customize-what-is-ameblo.html