ルームをCSSでカスタマイズ~まずはじめに編~ | アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開!

アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開!

カスタマイズ,アクセスアップ,カスタム,スキン,依頼,料金,スキン作成,スキンのデザイン,オリジナル,CSSの編集,HTML,JavaScript,ヘッダー,ヘッダーデザイン,広告,非表示,フリープラグイン,フリースペース,メッセージボード,改造,オリジナルデザイン

【アメブロのルームをCSSでカスタマイズ~まずはじめに編~】

ルームの改造は、とても重要です!

長い間、アメブロをされていらっしゃる方は既にお気づきかと思いますが、
いろんな場面で あなたのルームは、いつも見られていますぎく

ルームにはじまり、ブログで終わる。
これはもう、アメブロをやっている限り逃れられません。

ルームを見た方に、ブログへ入っていただけるように、これまたブログ同様ユーザに印象付け、あなたがどんなブログを書いているのか?お知らせする必要があります。

CSS編集を使ってカスタマイズすると言うことは、ブログと同じタイトル画像を付けたりタイトル画像下のメニューを付けたり、できるわけです。

今回はその基礎ともなる、「どうやってルームでCSSを使うの?」ってとこをやりますね。


1管理画面の [ルームの編集] をクリックします。

ルームカスタマイズ1


2[ルームをつくる] ― [配置の変更] をクリックし、使用する機能 に「フリースペース」が入っていることを確認します。

$アメブロを魅せるブログデザインに変身。アメブロカスタマイズ、裏技スキンCSS編集方法公開!


3[ルームをつくる] ― [フリースペース] をクリックします。

$アメブロを魅せるブログデザインに変身。アメブロカスタマイズ、裏技スキンCSS編集方法公開!


4タイトルを記入します。
※編集していくうちに消しちゃいますが、ここではブログのタイトルでも入れておいてください。

<style type="text/css">
この間にタグを書きます。
!タグを書く際は、一切の隙間、および改行を排除してください。

</style>


$アメブロを魅せるブログデザインに変身。アメブロカスタマイズ、裏技スキンCSS編集方法公開!


5画像を見ると改行してあるように思えますが、これはアメブロの仕様で1単語ずつ読み取れるように自動で改行してあるだけで、実際には全て詰めて書きます。

[CSSを詰めずに書いた NG 例]

<style type="text/css">
#header li,
#freeSpace .subTitle {
display:none;
}
#rightArea #freeSpace,
#rightArea #blogSpace,
#rightArea #amemberList {
border:none;
}
</style>


[CSSを詰めて書いた OK 例]

<style type="text/css">#header li,#freeSpace .subTitle{display:none;}#rightArea #freeSpace,#rightArea #blogSpace,#rightArea #amemberList{border:none;}</style>


$アメブロを魅せるブログデザインに変身。アメブロカスタマイズ、裏技スキンCSS編集方法公開!


こんな感じで、ルームの「フリースペース」にCSSを記入していくことで、ルームが変身をとげます!


アメブロをカスタマイズ 魅せるブログデザインを作ろう!アメブロのカスタマイズ本を出版しました!

[ 出版キャンペーン ] をおこないます!
9月16日(木)~9月17日(金)


たくさんの特典をご用意しておりますので、振ってご参加ください♪

やじるし「アメブロでカスタマイズ 魅せるブログデザインを作ろう!」詳細
やじるしAmazonでのご購入はこちら