アメブロのブログデザインは、
多彩なカスタマイズ可能なCSSデザイン、
配布されたスキンを使うデザインがあります
アメブロはどのデザインでも、
基本的には、カスタマイズすることができます
しかし、使っているデザインが、
通常(CSS編集用)か、CSS編集用デザインかで、
カスタマイズ方法が違ってきます
自分のブログの、デザイン確認方法
カスタマイズする場合は、
どこにカスタムコードを記載をするのか、
といった基本的な部分を説明
「CSS編集用デザイン」で、多彩なカスタマイズが可能に
どのタイプのアメブロでも、カスタマイズをすることはできます
しかし、多彩なカスタマイズをするためには、
カスタマイズのコード(文字列)を、
何千文字も書くことが必要になります
カスタマイズ用のコードを、
何の要素をどう指定してるのか、
というメモや整理用の文字も含めると、
カスタマイズで使う文字数は膨れ上がります
通常のデザインと、CSS編集用デザインとで、
どのように違うのかを、簡単に説明
通常のデザイン(CSS編集用以外のデザイン)の場合
既存のスキン付きブログを選ぶと、
カスタマイズのコードを書ける場所は、下記の2つだけ
- フリースペース 半角10000文字上限
- フリープラグイン 半角3800文字上限
アメブロで既存のデイザインでも、
カスタマイズできなくはないですが、
文字数上限が少ないので、
多彩なカスタマイズには厳しいです
それ以外にも、各ブログページに直接、
カスタム用コードを書く方法もありますが、
ブログも各ページごとに文字数制限(5万文字)あるので、
大きくカスタマイズを目指す場合は、
CSS編集用デザインを使った方が良いです
通常デザインのCSS(カスタム用コード)の書き方
フリースペース、フリープラグイン、
またはブログの各ページに書きます
フリースペースにコードを書く場合(仮です)
<style>〇〇〇〇〇〇〇〇〇〇〇△△△△△△△△△××××××××××××</style>
フリースペースに書き加える場合は、
「<style>」タグから始まり、コードをこのように、
改行をしないで書き加えて、
最後に「</style>」タグで閉じます
フリープラグイン、ブログの各ページに書く場合(仮です)
<style>
〇〇〇〇〇〇〇〇〇〇〇
△△△△△△△△△
××××××××××××
</style>
フリースペースに書く場合と違い、
各コード指定毎に改行を入れられるので、
見た目が分かりやすく、整理しやすいですが、
文字数の上限数が少ないのが難点
CSS編集用デザインを使う場合
アメブロで「CSS編集用デザイン」を選ぶと、
既存のブログスキンも無いので、
イチから自分で組み立てることが必要
基本的には、ブログ初心者には向きません
ただ、カスタム用コードを何万文字も書けるので、
その分、多くのカスタムができるのはモチロン、
コードのメモや整理もやり易くなります
CSS編集用デザインのコードの書き方
カスタマイズ(CSS編集)専用のページがあるので、
そこにコードを追加していきます
通常デザインの場合と違い、専用ページなので、
「<style>」タグなどは不要ですし、
コードを何万文字も加えられます
自分が使っているデザインを確認
リンク デザインの変更ページ
上記リンクで、現在の適用中のデザインを確認
(ブログがあるアメーバIDにログインが必要)
通常デザインなどを使っている場合

CSS編集用デザインを使っている場合
自分が使いたいデザインを選ぶ
リンク デザインの変更ページ にアクセス
一覧から、気にいったデザインやスキンから選べます
多彩なカスタマイズをしたい場合
多彩なカスタマイズをしたい場合や、
目指す場合などは
リンク デザインの変更ページ から、
「カスタム可能」リンクをクリック

そのカスタム可能デザインの一覧から、
いくつかある「CSS編集用デザイン」を選びます

CSS編集用デザインを選び、
カラム設定(サイドバーの設定)を確認後、
「適用する」ボタンを押して決定
これで、CSS編集用デザインになり、
多彩なカスタマイズができるようになります
CSS編集用デザイン以外でも、
使える文字数制限数を気にしなければ、
「<style>」タグを付けてコードを書けば、
(フリースペースなら改行無しで書いて)
カスタマイズできるわけです
CSS編集用デザインでない場合に、
カスタマイズに取り組む場合は、
これらのことを注意・忘れずに
