本日は、ブログのカスタマイズを行いました。
■ブログのカスタマイズ
さくらのブログ、管理画面から、デザイン、デザイン設定を選択。
画面下のほうの「超シンプル(両サイドバー)」を選択すると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の画面へ貼り付けます。