Cafi Netつながる情報技術

アメブロをCSSで無料カスタマイズ

アメーバブログ(ameblo)のデザインを、無料でカスタマイズする方法です。

2011年8月以降のアメブロカスタマイズ

【カスタム可能】ベーシックの終了

これまでアメブロのカスタマイズに利用してきた、「【カスタム可能】ベーシック」の利用が 2011年9月 に終了しました。アメブロの公式アナウンスはこちらです。【ブログ】CSS編集デザインについて|スタッフブログ

当方で確認した内容は以下の通りです。※アメブロのシステムが変更されるケースもございますので、予めご了承下さい。(2011年9月確認)

現在適用している「【カスタム可能】ベーシック」は、別のデザインに変更しない限りそのまま使用出来ます。

現在「【カスタム可能】ベーシック」を適用している方は、CSS の編集も可能です。当サイトのテンプレートも設置することができます。

これより以下の記事は、「【カスタム可能】ベーシック」を前提とした記事です。2011年8月以降に提供が開始された「CSS 編集用デザイン」には当てはまらないケースもございますので、予めご了承下さい。

アメーバブログのカスタマイズ(ステップ1~8)

例1「自動車販売をイメージしたカスタマイズ」

自動車販売をイメージしたアメブロカスタマイズ

アメーバブログのデザインをカスタマイズ

アメーバブログ用の無料テンプレート

初めて CSS を編集される方へ

CSS(カスケーディングスタイルシート)とは、レイアウトやデザインに関する記述をまとめたスタイルシートのひとつです。シーエスエスや単にスタイルシートと呼ばれることもあります。

アメブロのカスタム可能デザインを適用する

アメーバブログでカスタマイズや CSS の編集をするには、予め用意されてるスキンを選択するのではなく、カスタム可能デザインを適用する必要があります。

デザインのカスタマイズとCSSの編集

カスタム可能デザインを適用すると「デザインのカスタマイズ」と「CSSの編集」が可能になります。

デザインのカスタマイズでは、CSS を直接編集しなくてもブログのヘッダーイメージを挿入したり、ブログ全体の背景色をそれぞれ変更できます。CSS を直接編集することで、更に詳細なカスタマイズが可能になります。

アメブロの現在使用中のブログデザインCSS

CSS の編集をクリックすると「現在使用中のブログデザインCSS」が表示されます。この CSS 内の数字やカラーナンバーを変更すると、ブログのデザインをカスタマイズできます。

CSS の設定を間違えると、ブログのデザインが崩れますがアメブロではすぐに設定を戻すことができるので安心です。

アメブロの CSS の編集では、保存する前に「表示を確認する(プレビュー)」で変更を確認することができます。

CSS を変更しプレビューしてみて、変更が失敗していれば「右クリック」-「取り消し」で元の CSS へ戻ります。

数えきれない変更を加えた場合でも「編集前の状態に戻す」をクリックすれば、CSS は元の設定に戻ります。

CSS を「保存」した後に元に戻したい場合は、ブログデザインを再適用すれば初期設定へ戻ります。同じデザインの同じカラム数を適用する場合は、一度他のデザインか他のカラム数を適用してから再適用してください。

何日かに分けてカスタマイズする場合など、1日の終わりに CSS を「全て選択」してメモ帳に保存しておけば、いつてでもコピー&ペーストでその日のカスタマイズ状況に戻すことができます。

「アメブロ内の CSS を全てコピー」-「CSS を全てメモ帳に貼り付け」-「メモ帳に日付など名前を付けて保存」-「デザインを戻す場合は、メモ帳の CSS を全てコピーして、アメブロ内の CSS へ貼り付け」という簡単な手順です。

CSS の編集はよく分からないルールが沢山あって困ることもあるかも知れませんが、いつでもやり直すことができますし、当サイトでも画像付きで解説すると共に、なるべくコピー&ペーストでそのままご利用頂けるよう作成しますのでカスタマイズにチャレンジしてみて頂けたらと思います。

※アメブロのシステムが更新された場合、若干の操作の違いが生じるケースがございます。その際は管理画面をご確認の上、調整をお願いいたします。