アメブロカスタマイズの最初の一歩「CSS編集用デザイン」にする方法

アメブロのカスタマイズをするには、まず最初に「CSS編集用デザイン」というデザインに変更します。

「CSS編集用デザイン」は、ユーザーが編集できるカスタマイズのためのCSSが用意されているデザインです。

このようなCSSは他のデザインには用意されていませんので、カスタマイズをするなら「CSS編集用デザイン」にすることが必須です。

(CSS編集用デザイン以外でもカスタマイズは不可能ではありませんが、例えば一瞬カスタマイズ前の状態が見えてしまうなど、面倒な問題がいくつもあります)

そこで当記事では、アメブロカスタマイズの最初の一歩、、アメブロを「CSS編集用デザイン」に変更する手順についてご紹介します。

なお、カスタマイズ済みのアメブロを当記事の方法でCSS編集用デザインに変更すると、カスタマイズ内容(CSSの修正内容)が消えて初期化されてしまいますのでご注意下さい。

(記事やフリースペース、メッセージボードの内容などは消えません)

それから、「CSS編集用デザイン」で提供されているCSSでカスタマイズできるのは、パソコン(含iPad)向け画面かつ一般公開されているページのみです。

残念ながら、スマートフォン向け画面やアメンバー限定記事はこの方法ではカスタマイズできませんのでご注意下さい。

(スマートフォン向けの個別記事ページやアメンバー限定記事のカスタマイズは不可能ではありませんが、記事内にCSSを埋め込む必要があります)

「CSS編集用デザイン」にする手順

それでは、実際にアメブロのデザインを「CSS編集用デザイン」に変更してみましょう。

マイページで「アメブロ」をクリック

まず、マイページを開き、ページの上部に並んでいるアイコン付きボタンの中から「アメブロ」というボタンをクリックしてください。

管理トップで「デザインの変更」をクリック

すると、アメブロ管理のトップページである管理トップが開きます。

管理トップでは、左側に並んでいるアイコン付きボタンの中から「デザインの変更」というボタンをクリックしましょう。

デザインの変更ページで「カスタム可能」をクリック

すると、デザインの変更というページが開きます。

ここには、アメブロで利用できるデザインのサムネイル画像が並んでいますが、残念ながら、これらのデザインにはカスタマイズをするためのCSSが用意されていません。

ページをスクロールし、ページのもっと下の方を表示して下さい。

ページの下の方を見ていくと、他のカテゴリからブログデザインを探すという欄が見つかると思いますので、その欄内にある「カスタム可能」というリンクをクリックしましょう。

カスタム可能デザインの一覧から「CSS編集用デザイン」を探す

すると、「カスタム可能」デザインの一覧ページに変わります。

ここには、カスタム可能なデザインが並んでいますが、残念ながら、ほとんどのデザインは、運営側で用意されている限定的で簡易なカスタマイズができるのみで、自由にカスタマイズするためのCSSは用意されていません。

CSSを編集してカスタマイズできるのは、あくまでも「CSS編集用デザイン」のみとなっています。

「CSS編集用デザイン」は、この一覧の下の方にありますので、ページをスクロールして「CSS編集用デザイン」を見つけて下さい

(デザイン一覧の並びは時々変わりますので、当記事公開から時間が経つと場所が変わっているかもしれません)

4つの「CSS編集用デザイン」から1つを選んでクリック

さて「CSS編集用デザイン」ですが、この名前のデザインは、実は4つあります。

一覧にも4つの「CSS編集用デザイン」が表示されていると思います。

これら4つの「CSS編集用デザイン」は、名前は同じですが異なるもので、カスタマイズに使うCSS(のコード)も違います。

(3つは大部分は共通ですがトップページなどが異なり、1つは全くの別物です。)

ですので、別記事『4種類の「CSS編集用デザイン」について理解する』などを参考に、ご自身のアメブロに適した「CSS編集用デザイン」を4つの中から1つ決めてクリックして下さい。

サイドバーのレイアウト(数と位置)を決定

最後に、サイドバーのレイアウト(位置および数)を決定します。

サイドバーのレイアウトは、選択する「CSS編集用デザイン」により、5種類または2種類の中から選ぶことができます。

ご自身のアメブロに合う適切なレイアウトを選択して「適用する」ボタンをクリックして下さい。

ブログの表示を確認

これで、アメブロのデザインを「CSS編集用デザイン」に変更できました。

念のため、「ブログを確認する」ボタンをクリックして、デザインが変わったかどうか表示を確認してみましょう。

「CSS編集用デザイン」は、CSSの編集によるアメブロカスタマイズのベースデザインですので、これといった装飾のないとてもシンプルなデザインですね。

ここから様々なカスタマイズを施してデザインを完成させていきます。

まとめ

以上、アメブロのデザインを、CSSの編集によるカスタマイズをするためのベースデザイン「CSS編集用デザイン」にする手順をご紹介しました。

操作の難しいところは特にないと思いますが、4種類のCSS編集用デザインのどれを選択するかは、ご自身のブログの目的や用途に合わせてしっかりと決めたいですね。

よろしければフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。