本日は、ブログのカスタマイズを行いました。

■ブログのカスタマイズ

さくらのブログ、管理画面から、デザイン、デザイン設定を選択。

画面下のほうの「超シンプル(両サイドバー)」を選択するとcssが表示されます。

この画面で直接cssを修正しても良いのですが、バックアップを取るために全てを選択し、Bracketsで新規作成したファイルに貼り付け保存します。

コピーしてバックアップとして残しておきます。

さくらのブログの画面で直接cssを編集する場合、文字の色が黒一色ですが、Bracketsで編集することでcssに合わせた色分けがされるのでわかりやすく、ミスも防げます。

修正箇所が分からない場合、ブラウザ上で2本指タップ、検証(chromeの場合)で修正箇所を探します。

大きく下記のような構成になっています。

 全体:body

 コンテンツ横幅:#container

 タイトル部分:#banner

 サイドバー左:#links-left

 中央:#content

 記事:.blog

 サイドバー右:#links

cssを修正するときは、もともと書かれている内容と混ざってしまわないよう、一番下に追加していきます。

サイドバー部分は背景の色を変えても、要素が(内容が)何もなければ色がつきません。

要素(内容)を入れていくか、手っ取り早くcssで高さを指定すれば色がつきます。

リンク部分にマウスカーソルが重なったときの色は、hoverという擬似クラスで指定します。

hover以外にも以下の擬似クラスがあり、下記の順番で指定します。

 a:link { color: red; }

 a:visited { color: green; }

 a:hover { color: blue; }

 a:active { color: orange; }

修正が終わったら全てを選択しコピー、さくらのブログのcssの画面へ貼り付けます。