Cafi Netつながる情報技術
  1. トップ>
  2. アメブロカスタマイズ>
  3. カスタム可能デザインを適用

カスタム可能なブログデザインへ変更

まず、カスタマイズと CSS の編集が可能な、カスタム可能デザインへ変更します。

アメブロ管理画面でカスタム可能デザインを選択

アメーバブログ(アメブロ)管理画面へログインし、「ブログを書く」-「デザイン変更」-「カスタム可能」の順番でクリックします。

カスタム可能ベーシック・ブルー・グリーン・グレイ・ピーチ・Leaves がありますが、ベーシックを選択しました。

カスタム可能デザインを適用する

【カスタム可能】ベーシックにカーソルを合わせると、表示を確認すると表示されるのでクリックします。ブログデザインの表示確認・レイアウト変更の画面が開いたら、適用するをクリックします。デザイン変更のトップページへ戻ります。

カスタマイズと CSS の編集が可能なデザイン

「ブログを書く」-「デザインの変更」から、カスタマイズと CSS の編集が可能になります。

デザインのカスタマイズは、背景色を選ぶだけでデザインの変更が可能です。ヘッダ・バックグラウンド、メインコラム、サイドコラムの背景色変更がワンクリックで可能です。

画像の追加からヘッダーイメージを簡単に追加することもできます。商品画像やお店の写真、趣味のブログであればペットの写真などが掲載できます。

アメーバブログの CSS の編集

文字のサイズや色など、更に詳細な変更を加えたい場合は、CSS の編集から変更します。

CSS の編集をプレビューで確認する

変更を加えたら、保存する前に「表示を確認する」で編集をプレビューして思い通りに変更出来ているか確認します。

CSS(カスケーディングスタイルシート)を変更すると、意図としない形にデザインが崩れてしまうこともあると思います。

その際は、右クリックから「取り消し」を選択してデザインを戻すか、編集前の状態に戻すをクリックするか、初期状態まで戻したい場合はカスタム可能デザインを改めて適用して下さい。

CSS の編集を開始する前に、右クリックから「すべて選択」で CSS をコピーし、メモ帳にデフォルトの CSS を保存しておくといつでも初期状態に戻すことができます。

かんたんCSS編集・その他のCSS編集ともに分かりやすくナビゲーションされていますので、文字色・背景色・リンク色などカラーコードを変更するだけで、簡単に編集可能です。