CSSの編集はメモ帳で

内藤です

「アメブロでCSSを編集する際には、アメブロ上で直接行うのではなく、メモ帳などにコピーしてパソコン上で編集しましょう。」と僕は勧めています。

どうしてかと言うと、
「アメブロ上で編集作業をしていて、いざ保存しようとしたらエラーで保存できなかった」
という事が多々あるからです。

それに、メモ帳などにコピーしておくとバックアップにもなります。

以外に『メモ帳ってどこにありますか?』というご質問が多いので、場所の確認です。

windowsのスタートボタン ⇒ すべてのプログラム ⇒ アクセサリ ⇒ メモ帳

でたどりつけます。



はじめてCSSの編集作業をする場合には

1.アメブロのCSSをコピー

カスタム可能の『CSS編集用デザイン』を選び、『CSSの編集』からCSS編集ページへ

既存のCSSを全て選択し、コピー

2.メモ帳へ貼り付け



編集はこのメモ帳上で行います。
編集後は、メモ帳のものをコピーし、アメブロのCSS編集ページで上書きするようにします。

*IE(インターネットエクスプローラー)で、CSSをコピーし、メモ帳に貼り付けた場合、文字が全て一列になってしまう場合があります。

IE以外のブラウザ(GoogleChrmeやFireFox)で行うか、もしくは、メモ帳以外のテキストエディタを使ってみてください。

ちなみに僕は、Meryを使っています。

新カスタム可能デザインの「CSS編集用デザイン」と、旧カスタム可能デザインの「ベーシック」

今アメブロで、[スキンCSSの編集]からカスタマイズができるデザイン(スキン)は、

  • CSS編集用デザイン
  • ベーシック
  • ピーチ、グリーン、ブルー、グレイ

があります。

このうち、今新たに選択できるデザインは、CSS編集用デザインのみとなっています。

ベーシック、ピーチ、グリーン、ブルー、グレイを既に選択済みの場合は、そのまま[スキンCSSの編集]でカスタマイズが可能です。
※ただし、デザインを変更してしまうと、再度選択することができません。

2011年8月から、CSS編集用デザインのみとなりましたが、ベーシックやピーチ等とはCSSが異なります。

ベーシックで入れていたCSSを、CSS編集用デザインに入れてもうまく反映されません。

ここら辺で戸惑っている方が凄く多いので、ご注意くださいね。

CSS編集用デザインの新しいデザインと、ベーシックなど旧デザインとの違いを、簡単に書きますね。

◆ブログ幅(ヘッダー幅)

【新】 980px
【旧】 800px (ピーチ等は760px)

◆サイドバー

【新】 1つがワイド


【旧】 左右同じ幅

◆ページ送り

【新】


【旧】


◆個別記事へのリンク

【新】記事タイトルから


【旧】記事下の『記事URL』から


ご自分のデザインがどちらなのか、覚えておいてくださいね。

※『基本設定からカスタマイズまで アメブロ 逆引きQ&A 101 』は、新デザイン対応版です。

アメブロのカスタマイズ手順 デザイン変更から

カスタム可能を選択します

アメブロでカスタマイズをするには、まずはカスタマイズが可能なデザインを選ぶ必要があります。

昔は”デザイン”ではなく、”スキン”と呼ばれていましたが、いつの間にか”デザイン”に変わっています。
管理画面のところどころでは”スキン”の表記が残っていたりしますが。

今CSSを編集してカスタマイズが出来るのは、『CSS編集用デザイン』だけになっています。
以前は、『ベーシック』や『ピーチ』『ブルー』など数種類ありましたが、1つだけになってしまいました。

アメブロでは2011年の7月末に、デザインの大幅な切り替えがありました。
7月以前のデザインを使っている場合、今デザインの変更をしてしまうと7月以前のデザインに戻すことができなくなります。

では、デザインの変更の手順です。

(旧管理画面)
管理画面のマイページ上にあるクリックリンクを開きます
マイページ上のクリックリンクが便利です

[クリックリンク] ⇒ [スキンCSSの編集]をクリック
クリックリンクからスキンCSSの編集をクリックします

カスタム可能を選択
カスタム可能を選択します

(追記)
管理画面右上の三本線から、 ブログデザイン ⇒ デザインの変更


画面の下部にある カスタム可能を選択


CSS編集用デザインを選択
CSS編集用デザインを選択します

これで、[スキンCSSの編集] からCSSを編集してカスタマイズすることができます。

今あるデザインで[スキンCSSの編集]ページが表示されるのはこの『CSS編集用デザイン』だけとなっています。

最初は、何のデザインも入っていない状態で殺風景ですが、読みやすい、利用されやすいアメブロを作るならば、CSS編集用デザインでカスタマイズしていく必要があります。

カスタマイズのCSSコードはまた今度アップしますね。