サイト内検索とサブメニュー
アメブロをCSSで無料カスタマイズ
アメーバブログ(ameblo)のデザインを、無料でカスタマイズする方法です。
2011年8月以降のアメブロカスタマイズ
-
CSS を編集しないデザインの変更
- オリジナル画像や透明なヘッダーを設定
- タイトルと背景画像のデザイン設定 CSS 編集用デザインのカスタマイズ
- CSS でオリジナルのヘッダー画像を設置
- CSS でオリジナルの背景画像を設置
- CSS で文字の太さやフォント(書体)を編集
- メッセージボードのデザインを編集
スポンサーリンク
【カスタム可能】ベーシックの終了
これまでアメブロのカスタマイズに利用してきた、「【カスタム可能】ベーシック」の利用が 2011年9月 に終了しました。アメブロの公式アナウンスはこちらです。【ブログ】CSS編集デザインについて|スタッフブログ
当方で確認した内容は以下の通りです。※アメブロのシステムが変更されるケースもございますので、予めご了承下さい。(2011年9月確認)
現在適用している「【カスタム可能】ベーシック」は、別のデザインに変更しない限りそのまま使用出来ます。
現在「【カスタム可能】ベーシック」を適用している方は、CSS の編集も可能です。当サイトのテンプレートも設置することができます。
これより以下の記事は、「【カスタム可能】ベーシック」を前提とした記事です。2011年8月以降に提供が開始された「CSS 編集用デザイン」には当てはまらないケースもございますので、予めご了承下さい。
アメーバブログのカスタマイズ(ステップ1~8)
例1「自動車販売をイメージしたカスタマイズ」
アメーバブログのデザインをカスタマイズ
- カスタム可能なブログデザインを適用
- デザインのカスタマイズから変更
- webセーフカラーの一覧(色見本)
- 基本設定(コメント欄・Ping 送信先一覧など)
- 背景用画像の追加(リピート設定もあり)
- ブログ全体のフォント(書体)の変更
アメーバブログ用の無料テンプレート
- 無料テンプレート10「サツキ(皐月)」
- 無料テンプレート9「アジサイ(紫陽花)」
- 無料テンプレート8「ガマズミの花」
- 無料テンプレート7「山」
- 無料テンプレート6「渓流」
- 無料テンプレート5「蓮の花」
- 無料テンプレート4「桜の花」
- 無料テンプレート3「夏の花火」
- 無料テンプレート2「ひまわり(向日葵)畑」
- アメブロテンプレートの設置方法
初めて CSS を編集される方へ
CSS(カスケーディングスタイルシート)とは、レイアウトやデザインに関する記述をまとめたスタイルシートのひとつです。シーエスエスや単にスタイルシートと呼ばれることもあります。
アメーバブログでカスタマイズや CSS の編集をするには、予め用意されてるスキンを選択するのではなく、カスタム可能デザインを適用する必要があります。
カスタム可能デザインを適用すると「デザインのカスタマイズ」と「CSSの編集」が可能になります。
デザインのカスタマイズでは、CSS を直接編集しなくてもブログのヘッダーイメージを挿入したり、ブログ全体の背景色をそれぞれ変更できます。CSS を直接編集することで、更に詳細なカスタマイズが可能になります。
CSS の編集をクリックすると「現在使用中のブログデザインCSS」が表示されます。この CSS 内の数字やカラーナンバーを変更すると、ブログのデザインをカスタマイズできます。
CSS の設定を間違えると、ブログのデザインが崩れますがアメブロではすぐに設定を戻すことができるので安心です。
アメブロの CSS の編集では、保存する前に「表示を確認する(プレビュー)」で変更を確認することができます。
CSS を変更しプレビューしてみて、変更が失敗していれば「右クリック」-「取り消し」で元の CSS へ戻ります。
数えきれない変更を加えた場合でも「編集前の状態に戻す」をクリックすれば、CSS は元の設定に戻ります。
CSS を「保存」した後に元に戻したい場合は、ブログデザインを再適用すれば初期設定へ戻ります。同じデザインの同じカラム数を適用する場合は、一度他のデザインか他のカラム数を適用してから再適用してください。
何日かに分けてカスタマイズする場合など、1日の終わりに CSS を「全て選択」してメモ帳に保存しておけば、いつてでもコピー&ペーストでその日のカスタマイズ状況に戻すことができます。
「アメブロ内の CSS を全てコピー」-「CSS を全てメモ帳に貼り付け」-「メモ帳に日付など名前を付けて保存」-「デザインを戻す場合は、メモ帳の CSS を全てコピーして、アメブロ内の CSS へ貼り付け」という簡単な手順です。
CSS の編集はよく分からないルールが沢山あって困ることもあるかも知れませんが、いつでもやり直すことができますし、当サイトでも画像付きで解説すると共に、なるべくコピー&ペーストでそのままご利用頂けるよう作成しますのでカスタマイズにチャレンジしてみて頂けたらと思います。
※アメブロのシステムが更新された場合、若干の操作の違いが生じるケースがございます。その際は管理画面をご確認の上、調整をお願いいたします。
スポンサーリンク