開設で既定で選ばれるデザインから変更した話です。
ブログデザインはいつも悩む
何度も経験してくると、だんだん分かってくる訳です。アメーバブログにも、デザインがたくさんありました。
「シンプル」、「ナチュラル」、「かわいい」、「キレイ」、「ポップ」、「おしゃれ」、「クール」、「季節・イベント」、「写真」、「イラスト」、「動物」、「キャラクター」、「和風」、「ピグデザイン」、「カスタム可能」とカテゴリがあります。
プレビューして、どれも「いいな」と思うんですが、良いデザインのテンプレは、たいてい他のブログと被るんですよね。
CSS編集デザイン
結局、CSSを直接編集できるデザインにしました。アメブロの場合にはレイアウトが「スタンダード」、「タイル」、「リスト」の３種類から選べる形だったので、ホームページに記事がたくさん並ぶ「タイル」デザインを選択しました。
他の無料ブログでも共通ですが、「CSS編集用のデザイン」の利点は、シンプルで質素なので、記事で勝負ができるということです。
過度なデザイン化されたブログだと、読む側も疲れてしまう可能性があるので、白（または黒）基調で、なるべくシンプルなデザインの方が記事を最後まで読んでくると思います。
それでも、他ブログと差別化するために、ロゴくらいは配置したいので少しだけカスタマイズしました。
CSS編集方法
アメブロの管理画面で、簡単に編集できました。
- ［ブログ管理］画面で［デザインの設定］を選択します。
- ［CSS編集用デザイン］が適用されていない場合には、［デザインの変更］画面で［CSS編集用デザイン］を探して［表示を確認する］（デザインのサムネイルを選択）してから［プレビュー］画面で［適用する］ボタンをクリックします。
- ［CSS編集用デザイン］が適用されたら、改めて［CSSの編集］リンクを選択します。
- 表示された［ブログデザインのCSSの編集］画面で、ロゴ画像をアップロードします。
- 画面を下に移動して［現在使用中のブログデザインCSS］部分から（ヘッダー背景）部分を探してスクロールします。下の画像を参考にしてください。
- ヘッダー背景の部分を次のように編集します。
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
background-image: url(アップロードした画像の場所);
background-repeat:no-repeat;
background-position:center 10%;
} - ［表示を確認する］リンクをクリックして、変更を確認します。
- ブログタイトルや説明文と重なってしまう場合には、同様に（ブログタイトル）（ブログ説明文）の場所を探して、記載されている［margin-bottom］や［padding-top］、［padding-bottom］などの数字を編集します。
※CSSに関する情報は、別途検索してください。 - ［保存］ボタンをクリックして、CSS編集をブログに反映します
こんな感じでブログデザインの編集ができます。汎用的なデザインでは気がすまない方や、他のブログと差別化したいような場合には効果的だと思います。CSS自体はそんなに、難しい話では無いので勉強にもなると思います。
最後までご覧いただき、ありがとうございました。