アメブロカスタマイズ 通常とCSS編集用のデザイン コードの書き方の違い デザインの選び方 | ティナのブログ お得なポイ情報まとめや紹介

アメブロのブログデザインは、
多彩なカスタマイズ可能なCSSデザイン、
配布されたスキンを使うデザインがあります

 

アメブロはどのデザインでも、
基本的には、カスタマイズすることができます

 

 

しかし、使っているデザインが、
通常(CSS編集用)か、CSS編集用デザインかで、
カスタマイズ方法が違ってきます

 

自分のブログの、デザイン確認方法


カスタマイズする場合は、
どこにカスタムコードを記載をするのか、
といった基本的な部分を説明
 

「CSS編集用デザイン」で、多彩なカスタマイズが可能に 

どのタイプのアメブロでも、カスタマイズをすることはできます

 

しかし、多彩なカスタマイズをするためには、
カスタマイズのコード(文字列)を、
何千文字も書くことが必要になります

 

カスタマイズ用のコードを、
何の要素をどう指定してるのか、
というメモや整理用の文字も含めると、
カスタマイズで使う文字数は膨れ上がります

 

通常のデザインと、CSS編集用デザインとで、
どのように違うのかを、簡単に説明

 

通常のデザイン(CSS編集用以外のデザイン)の場合

既存のスキン付きブログを選ぶと、
カスタマイズのコードを書ける場所は、下記の2つだけ

 

  • フリースペース 半角10000文字上限
  • フリープラグイン 半角3800文字上限

 

CSS編集用デザインでも、上記のスペースは利用可能

 

 

アメブロで既存のデイザインでも、
カスタマイズできなくはないですが、
文字数上限が少ないので、
多彩なカスタマイズには厳しいです

 

それ以外にも、各ブログページに直接、
カスタム用コードを書く方法もありますが、
ブログも各ページごとに文字数制限(5万文字)あるので、
大きくカスタマイズを目指す場合は、
CSS編集用デザインを使った方が良いです

 

通常デザインのCSS(カスタム用コード)の書き方

フリースペース、フリープラグイン、
またはブログの各ページに書きます

 

フリースペースにコードを書く場合(仮です)

<style>〇〇〇〇〇〇〇〇〇〇〇△△△△△△△△△××××××××××××</style>

 

フリースペースに書き加える場合は、
「<style>」タグから始まり、コードをこのように、
改行をしないで書き加えて、
最後に「</style>」タグで閉じます

 

フリープラグイン、ブログの各ページに書く場合(仮です)

<style>

〇〇〇〇〇〇〇〇〇〇〇

△△△△△△△△△

××××××××××××

</style>

 

フリースペースに書く場合と違い、
各コード指定毎に改行を入れられるので、
見た目が分かりやすく、整理しやすいですが、
文字数の上限数が少ないのが難点

 

CSS編集用デザインを使う場合

アメブロで「CSS編集用デザイン」を選ぶと、
既存のブログスキンも無いので、
イチから自分で組み立てることが必要


基本的には、ブログ初心者には向きません


ただ、カスタム用コードを何万文字も書けるので、
その分、多くのカスタムができるのはモチロン、
コードのメモや整理もやり易くなります

 

CSS編集用デザインのコードの書き方

カスタマイズ(CSS編集)専用のページがあるので、
そこにコードを追加していきます

 

通常デザインの場合と違い、専用ページなので、
「<style>」タグなどは不要ですし、
コードを何万文字も加えられます

 

自分が使っているデザインを確認

リンク デザインの変更ページ

 

上記リンクで、現在の適用中のデザインを確認

(ブログがあるアメーバIDにログインが必要)

 

通常デザインなどを使っている場合

 

CSS編集用デザインを使っている場合

 

自分が使いたいデザインを選ぶ

リンク デザインの変更ページ にアクセス

一覧から、気にいったデザインやスキンから選べます

 

 

多彩なカスタマイズをしたい場合

多彩なカスタマイズをしたい場合や、
目指す場合などは

 

リンク デザインの変更ページ から、

「カスタム可能」リンクをクリック

 

 

 

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

 

 

CSS編集用デザインを選び、
カラム設定(サイドバーの設定)を確認後、
「適用する」ボタンを押して決定


これで、CSS編集用デザインになり、
多彩なカスタマイズができるようになります

 

 

CSS編集用デザイン以外でも、
使える文字数制限数を気にしなければ、
「<style>」タグを付けてコードを書けば、
(フリースペースなら改行無しで書いて)
カスタマイズできるわけです

 

CSS編集用デザインでない場合に、
カスタマイズに取り組む場合は、
これらのことを注意・忘れずに