CSS(ブログデザインCSS)を利用してアメブロをカスタマイズする方法

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

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


アメブロでは、「ブログデザインCSS」という情報を編集することで、ユーザーが自由に自分のアメブロのデザインをカスタマイズできるようになっています。

アメブロから提供されているもの以外のオリジナルデザインを採用しているアメブロ(芸能人ブログなどを含む)は、基本的にこのブログデザインCSSを編集してそのオリジナルデザインを実現しています。

ブログデザインCSSは、アメブロで「CSS編集用デザイン」というデザインを選択するだけで、誰でも使うことができます。

(CSS編集用デザインには、大きく分けて、2016/03/08以後使えるようになった、本ブログで主に扱っているタイプと、それ以前から使えていた旧タイプがあります。当記事の方法は、新しいタイプの「CSS編集用デザイン」でも古いタイプの「旧CSS編集用デザイン」でも同じ手順でできます。)

そして、ブログデザインCSSを利用して、誰でもアメブロをカスタマイズできるようになっています。

そこで、当記事では、アメブロカスタマイズの基礎の基礎とも言えるブログデザインCSSを編集してアメブロをカスタマイズする手順についてご紹介します。

当ブログを含む多くのブログで紹介されている様々なアメブロカスタマイズ方法のうち、「CSSの編集」や「CSSに追加」「CSSに貼り付け」「CSSにコピペ」などという言葉で書かれている方法は、何れも当記事で紹介する手順でカスタマイズするということですので、是非マスターしておいてください。

(注意:CSS編集用デザイン以外のデザインを選んだ場合はブログデザインCSSは使えません。また、ブログデザインCSSを使って変更できるのはアメブロのPC向けページだけです。スマートフォン向けや携帯電話向けのページにはブログデザインCSSは適用されません。さらに、アメンバー限定記事の場合はPC向けのページにも適用されません。)

ブログデザインCSSの編集によるカスタマイズの手順

それでは、以下に、ブログデザインCSSを編集してアメブロをカスタマイズする手順についてご紹介します。

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

まず、アメブロのデザイン選択ページでCSSによるカスタマイズのベースとなる「CSS編集用デザイン」に変更しておく必要があります。

アメブロカスタマイズ用のデザイン「CSS編集用デザイン」に変更する方法についてはこちらをご参照下さい。

「CSS編集用デザイン」に変更できたら、一度アメーバのマイページに戻ってから操作していきましょう(それが迷子になりにくいと思いますので)

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

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

「CSSの編集」ページを開く

デザインの変更ページが開いたら、上の画像の位置にあるCSSの編集というリンクをクリックしてブログデザインCSSを編集できるページを開きます。

このリンクは「CSS編集用デザイン」を選択すると表示されますので、もしまだの場合は、まずアメブロのデザインをCSS編集用デザインにするところからおこなって下さい。

「ブログデザインCSS」にカスタマイズ用のコードを記述して保存する

ブログデザインCSSの編集ページが開いたら、上の画像のような文字入力をする箇所があることを確認して下さい。

ここにアメブロをカスタマイズするためのCSSのコード(当ブログでは「コード」という言葉を使っていますが、「タグ」や「設定」と書いてあるサイトもあります)を記述します。

ただ、コードをどの位置に記述すべきか分かる場合はいいのですが、ブログなどで紹介されているCSSを使ってカスタマイズするような場合は、それをどの位置に書けばいいのかわからないことが多いと思います。

このような場合、ひとまず一番最後に追加する形で記述するといいと思います。

そうすることで、失敗する可能性が低くなります(CSSは前に書いた内容が後に書いた内容で上書きされるため)

というわけで、まずは、文字入力領域を下へスクロールしていきましょう。

入力領域の一番下まで来たら、そこに、アメブロをカスタマイズするためのコードを追加します。

(ブログなどで紹介されているCSSのコードを再利用する場合、よく閉じ括弧「}」をコピーし忘れることがありますので注意して下さい)。

追加できたら、保存ボタンをクリックして保存します。

なお、「表示を確認する」をクリックして、どのようにブログに反映されるのかを保存する前に確認できるようになっていますので、こちらを利用して確認してから保存すると、より安心だと思います。

保存完了

ブログデザインCSSは、正常に保存された場合、メッセージ等は何も表示されません

保存前には一番下が表示されていた入力領域が、一番上が表示された状態になれば保存完了です。

(もしも赤い文字でエラーが表示されていた場合は事項を参照して下さい。)

「リクエストは既に処理中であるか無効です」というエラーメッセージが表示された時

ブログデザインCSSを保存した時、時々「リクエストは既に処理中であるか無効です」というエラーが赤い文字で表示されることがあります。

このメッセージが表示された時は、アメブロをカスタマイズするために修正したブログデザインCSSの変更内容が保存されていません。

ですので、もう一度保存ボタンをクリックして保存を試みて下さい。

通常は、何度か行う間に保存されます。

(時々、何度やってもこのエラーが表示されて保存されない場合があります。その場合は、保存したい内容を一度メモ帳などにコピーすることで退避させ、もう一度このページを開くところからやり直すと成功しやすいので試してみてください。)

まとめ

以上の手順で、ブログデザインCSSを編集してアメブロをカスタマイズすることができます。

各所で「CSSの編集」や「CSSに追加」「CSSに貼り付け」「CSSにコピペ」などという言葉とともに紹介されているアメブロのカスタマイズ方法は、基本的に当記事で紹介したやり方で利用できます。

アメブロカスタマイズの基本中の基本ですので、ぜひ覚えておいて下さい。


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


関連記事

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

SNSでもご購読できます。

--

コメント

  1. さくら より:

    いつも、参考にさせていただきとても助かっています。ありがとうございます。
    新しいデザインの、プロフィール下の「読者になる」ボタンの色の変更の仕方がわかりません(>_<)
    教えていただけたら嬉しいです。どうぞよろしくお願いいたします♪

コメントを残す