アメブロをカスタマイズ可能なデザイン「CSS編集用デザイン」にする方法

  • これからアメブロのカスタマイズをしようと思っている。
  • アメブロをカスタマイズするには何からすれば良いかわからない。

CSS編集用デザインとは?

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

アメブロにはデザインの選択肢がたくさんありますが、その中で唯一、ユーザーが自分で編集してデザインをカスタマイズするのための「ブログデザインCSS」(以下、単に「CSS」と呼びます)が用意されているのが「CSS編集用デザイン」です。

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

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

なお、CSS編集用デザインで提供されている「CSS」でカスタマイズできるのは、誰でも見れるよう一般公開されているページのパソコン(およびiPad)向け画面のみです。

非常に残念ですが、CSS編集用デザインの「CSS」を編集するだけでは、スマートフォン向け画面やアメンバー限定記事をカスタマイズすることはできませんのでご注意下さい。

スマートフォン向け画面の個別記事ページやアメンバー限定記事のカスタマイズは不可能ではありませんが、専用(一般公開記事と兼用も可能)のCSSを記事内に埋め込む必要があります。
「CSS編集用デザイン」以外のデザインをベースとしてカスタマイズすることも不可能ではありませんが、例えば、一瞬カスタマイズ前の状態が見えてしまうなどの面倒な問題がいくつもありますので、カスタマイズする場合は、ぜひ「CSS編集用デザイン」を選択することを強くお勧めします。
既に何らかのカスタマイズ済みのアメブロを当記事の方法で「CSS編集用デザイン」に変更すると、カスタマイズ内容(編集済みの「CSS」の内容)が消えて初期化されてしまいますのでご注意下さい。記事やフリースペース、メッセージボードの内容などは消えません。

アメブロを「CSS編集用デザイン」にする手順

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

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

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

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

アメブロ管理のトップページである管理トップが開きますので、左側に縦に並んでいるアイコン付きボタンの中から「デザインの変更」というボタンをクリックしましょう。

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

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

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

というわけで、ページをスクロールし、ページのもっと下の方を見てみましょう。

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

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

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

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

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

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

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

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

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

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

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

4つの「CSS編集用デザイン」のうち、3つは大部分が共通ですがトップページなどが異なり、1つは全くの別物です。

なので、こちらで4種類の「CSS編集用デザイン」の違いなどについて確認しながら、ご自身のアメブロに適した「CSS編集用デザイン」を4つの中から1つ決めてクリックしましょう。

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

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

サイドバーのレイアウトは、どの「CSS編集用デザイン」を選択するか?によって、5種類または2種類の中から選ぶことができますので、ご自身のアメブロに合う適切なレイアウトを選択して「適用する」ボタンをクリックして下さい。

ブログの表示を確認

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

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

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

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

まとめ

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

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

関連記事

アメブロをカスタマイズ可能なデザイン「CSS編集用デザイン」にする方法” に対して1件のコメントがあります。

  1. tonton より:

    こんにちは。
    凄く参考になりました!
    確かりました。ありがとうございます。
    少しづつ仕上げて行こうと思います!

    1. 松本 より:

      tontonさん
      コメントありがとうございます。
      お役に立てたようで良かったです。

コメントを残す

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

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。