アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん

初心者でもかんたんに取り組めるアメブロカスタマイズ方法や正攻法でブログの読者を増やす運営方法などを紹介しています。


テーマ:

CSSを編集してアメブロをカスタマイズする方法


アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロのカスタマイズ向けスキンCSS編集用デザインでは、ブログのデザインを制御するためのCSSの編集をユーザー自身が直接することで、PCで見た際のアメブロの見栄えを自由に変更できるようになっています。

このアメブロのCSS編集用デザインで用意されたユーザーが直接編集できるCSSを、本ブログではユーザーCSSと呼んでいます。

(携帯電話やスマートフォンのモバイルモードではユーザーCSSは使用されません。また、アメンバー限定記事はPCで見た場合でも使用されません。)

このユーザーCSSの編集は、アメブロカスタマイズの基礎中の基礎で、ブログヘッダー画像や背景画像なども全てこの方法でカスタマイズします。

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

本ブログ内の、様々なアメブロカスタマイズ方法でCSSの編集あるいはCSSに貼り付け、CSSに追加などという言葉で書いてある場合は、この手順でカスタマイズするということですので、是非やり方を覚えておいてください。

それでは、以下、ユーザーCSSを編集してカスタマイズする手順の説明です。



ユーザーCSSの編集によるカスタマイズの手順




まずは、アメブロのマイページ右上にあるアイコンをクリックして「すべてのAmebaサービス一覧」を開き、その中にあるデザインの変更というリンクをクリックします。






デザインの変更ページに変わったら、ページの比較的上のほうにあるCSSの編集をクリックしてください。






すると、ブログデザインのCSSの編集というページが表示されます。

そのページに、現在使用中のブログデザインCSSと書かれた場所があり、その下のテキストボックスにたくさん設定が書かれています。

このテキストボックスの中身が、これから編集するユーザーCSSの内容です。

CSSは覚えてしまえば難しくはないのですが、知らない人には暗号文にしか見えないと思います。

なので、これを編集するなどと言っても難しくてできないと思われるかもしれません。

でも大丈夫です。

原則として、CSSは後に書いた内容が優先されるという性質があるため、多くの場合、本ブログでご紹介する内容をこのユーザーCSSの最後に追加すればOKです。

(事前のカスタマイズ内容により、それではうまくいかないことも多々ありますが)

なので、まずは、このユーザーCSSの内容が書かれたテキストボックスの右側にあるスクロールバーを一番下まで下げて、ユーザーCSSの一番最後が見える状態にします。






ユーザーCSSの一番最後が見える状態になったら、いよいよ、そこに必要な内容を追加していきます。

単にCSS貼り付け用のコード(タグ)をコピー&貼り付け(コピペ)する場合や、ご自分で記述する場合など色々あると思いますが、何れの場合も原則的に一番最後に追加するようにすると失敗が少なくなります。

なお、貼り付けなどを行う場合に、誤って元々あった内容を一部消してしまったり、逆に一部を貼り付け損ねたりする失敗がよくありますので、十分に注意して行うようにして下さい。

特に最後の閉じカッコ『}』を貼り付け損ねる失敗が多いので、くれぐれも注意して下さい。






これでユーザーCSSの編集ができたわけですが、編集が終わったら編集内容を保存する必要があります。

保存するには、テキストボックスの下の保存ボタンをクリックして下さい。







保存ボタンをクリックしてしばらく(一瞬の場合もあれば、数10秒かかることもあります)すると、保存ボタンをクリックしたときは一番最後が見えていたはずのユーザーCSSのテキストボックスの表示が、先頭が表示された状態にかわります。

これで保存は完了です。







ただし、保存後リクエストは既に処理中であるか無効ですと赤文字で表示されることがよくありますが、この場合は保存に失敗していますので、再度保存ボタンをクリックして保存をやり直すようにして下さい。

以上、CSS編集用デザインユーザーCSSを編集してカスタマイズする手順をご説明しました。

前にも書きましたが、アメブロカスタマイズの基本中の基本ですので、しっかりマスターしてくださいね。



関連記事


アメブロカスタマイズ用スキン「CSS編集用デザイン」に変更する方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ




2014/01/05 アメブロの仕様変更に合わせ画像と操作説明の一部を変更しました。
2012/11/18 再度修正&再アップしました。
2012/05/19 新マイページ対応するよう書き換え&再アップしました。
2012/03/06 2011/07/27の記事を全面書き換え&再アップしました。



いいね!した人  |  コメント(152)