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

  • アメブロ
  • このエントリーをはてなブックマークに追加

当記事は他サイトへ移動しました。最新情報は以下のリンク先ページをご覧ください。
アメブロカスタマイズの最初の一歩「CSS編集用デザイン」にする方法


アメブロには、自由に選んでそのまま使える豊富なデザイン(スキン、テンプレート)がたくさんありますが、その中で、ユーザーがCSS(スタイルシート)を利用して自由にデザインをカスタマイズするベースとして用意されているデザインがあります。

CSS編集用デザイン」というデザインです。

(CSS編集用デザインには、大きく分けて、2016/03/08以後使えるようになったタイプと、それ以前から使えていたタイプがあります。当ブログでは前者、つまり、新しいタイプのCSS編集用デザインを「CSS編集用デザイン」と呼び、以前のタイプを「旧CSS編集用デザイン」と呼びます。)

(カスタマイズできるのは基本的にPC向けページのみ。当記事を執筆している時点で、アメブロではスマートフォン向けおよびガラケー向けのページをCSSでカスタマイズするためのベースデザインは用意されていません。)

これから新しくアメブロのデザインをカスタマイズする場合、この「CSS編集用デザイン」を選択するのが一般的で必須となると言って良いと思います。

(旧CSS編集用デザインを選択できる間はそちらでも可能ですが、当ブログで取り上げる方法のほとんどは旧CSS編集用デザインでは使えません。)

当ブログで紹介しているアメブロカスタマイズ方法も、基本的には、この「CSS編集用デザイン」を利用しているアメブロを対象としています。

そこで当記事では、アメブロのデザインを、カスタマイズ可能なデザイン「CSS編集用デザイン」に変更する方法をご紹介します。

アメブロカスタマイズのスタート地点とも言える内容のですので、ぜひマスターしておいて下さい。

なお、アメブロでは、

  • 利用中のデザイン(スキン、テンプレート)を別のデザインに変更したり
  • レイアウト(サイドバーの位置や数)を変更したり

すると、ヘッダー画像の設定や背景画像の設定など、それまでのカスタマイズ内容が破棄されてしまいます。

既に、アメブロのデザインに何かしらの変更を加えている場合は、十分にご注意ください。

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

それでは、以下に、アメブロのデザインを「CSS編集用デザイン」に変更する手順をご紹介します。

「マイページ」から「デザイン変更」ページを開く

まず、アメーバのマイページの右上にあるメニューアイコン(「すべてのAmebaサービス一覧」を開く横三本線のアイコン)をクリックし、開いた小窓の中にあるデザインの変更をクリックします。

「デザインの変更ページ」から「カスタム可能」なデザインのページを開く

デザインの変更ページが開いたら、ページを下の方にスクロールして・・・、

「カテゴリから探す」という一覧の中にある「カスタム可能」というリンクを見つけ、そのリンクをクリックして下さい。

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

「カスタム可能」デザインの一覧の中にCSS編集用デザインがあります。

CSS編集用デザインは、トップページの記事の表示内容の違いによって3種類あります。

  • 記事内容がそのまま表示されるスタンダードタイプ
  • 大きめの画像とタイトルがタイル状に表示されるタイルタイプ
  • 画像、タイトル、内容の一部がタイムライン風に表示されるリストタイプ

これらのどれを使うか一つ決めて、クリックして下さい。

(本記事を執筆している時点で、別ページにもう一つ「CSS編集用デザイン」という名前のデザインが存在していますが、それは「旧CSS編集用デザイン」です。)

レイアウトを選択する

ブログデザインの表示確認・レイアウト変更」の画面が開いたら、PC向け画面のサイドバーのレイアウト選択を行います。

まず、表示されている5種類(タイル表示のタイプは2種類)のレイアウトの選択肢から、マウスでクリックして希望のレイアウトを一つ選択します。

希望のレイアウトが選択できたら「適用する」ボタンをクリックして下さい。

CSS編集用デザインへ変更完了

デザイン適用完了というページに変わり、「CSS編集用デザイン」を適用しましたと表示されれば成功です。

ここで、ブログを確認するボタンをクリックすると、実際にアメブロを表示できますので、どのようになったか確認してみてください。

CSS編集用デザインへになったかどうかを確認

この画像は、スタンダードタイプを選んだ場合ですが、このような、とてもシンプルなデザインになっていると思います。

タイルタイプを選んだ場合はこのように(赤い点線の枠はありません)

リストタイプを選んだ場合はこのようになります(赤い点線の枠はありません)

これで、アメブロのデザインをカスタマイズ可能な「CSS編集用デザイン」に変更できました。

まとめ

以上の手順で、アメブロのデザインをCSS編集用デザインに変更することができます。

そして、これにより、CSSを使った様々なアメブロのカスタマイズを行うことができるようになります。

CSS編集用デザインへのデザイン変更は、アメブロをCSSでカスタマイズしたい場合のスタート地点ですので、ぜひ覚えておいて下さい。


当記事は他サイトへ移動しました。最新情報は以下のリンク先ページをご覧ください。
アメブロカスタマイズの最初の一歩「CSS編集用デザイン」にする方法


関連記事

  • アメブロ
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

--

コメント

  1. ならちゃん より:

    カンタンにできました!!
    ありがとうございます!

コメントを残す