2015年2月13日金曜日

ブログのレイアウトを弄ったので

ブログのCSSを弄ったので、記録の意味を込めて記事を書いておこう。
レイアウトを初期化したらまた反映する作業が要るので、書いておかないと困ってしまうのだ。
ところで、この手の本を1冊買って読むと、結構理解が進むのだが、僕は最近はもっぱらネットで情報漁って済ませてしまう。
参考サイトは
そんな訳でいつもお世話になっているサイトを紹介しておこう。
tohooh
困ったらここである。
もう15年来、色々とHTMLを勉強したりCSSを勉強したりと、何かとお世話になっている。

このサイトにはCSSの話も書いてあるので、リファレンスとしても重宝するのだ。
タイトルの修正
とまあ、ちょっと話が脇にそれてしまったが、サイトを参考にしながら色々と弄っていく。
1つ目は、記事のタイトルである。
bloggerは、カスタマイズの幅が広いので、色々と自由度は高いのだが……、勉強しないとさっぱり触れない。
この辺りで、どんな手順でやるか、ってなことはちょっと触れているので、詳細は割愛する。
で、記事のタイトルは……、というとこちら。
/* Posts
----------------------------------------------- */
この中にある、「h3.post-title」を書き換えていく。
h3.post-title {
  background-color: #fcf7f3; /* 背景文字色の指定 */
  border-left: 20px solid #cd853f; /* 文字の横に付箋のようなマークを入れる */
  padding: 18px 30px 18px 15px; /* 空白内側 */
  margin: 0px -20px 0px -37px; /* 空白外側 */
  box-shadow:2px 5px 5px rgba(0, 0, 0, 0.4) , inset 0 0 5px rgba(0, 0, 0, 0.1) ;  /* 影を付ける */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
  font: $(post.title.font);
 font-size : 160%;
  color : #8b4513;
}
こんな感じだ。
中見出し1
文中に使うラベルは「h5」タグを利用しているので、こんな感じに書いてある。
h5{
    font-size:120%;
    border-left: 9px solid #FF8C00; /* 文字の横に付箋のようなマークを入れる */
    border-right:solid 1px #999999; /* 右に線を入れる設定 */
    border-bottom:solid 1px #999999; /* 文字の下に線を入れる設定 */
     padding: 10px;
    width:515px;/*見出しの横幅*/
    background-color: #fcf7f3; /* 背景文字色の指定 */
    padding-left: 15px;/* 文字の左にスペース */
    margin: 0px -20px 0px -20px; /* 空白外側 */
    color:#3C333C; /*文字の色*/
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}
この使い方が良いかどうかは悩ましいところだが……、WLWを使う関係で、空いている「h5」以降を使っておくのは、今のとこと問題ない感じである。

中見出し2
続いて「h6」タグについても定義されている。
h6{
    font-size:110%;
    border-left: 6px solid #bc8f8f;/* 文字の横に付箋のようなマークを入れる */
    border-right:solid 1px #999999;/* 右に線を入れる設定 */
    border-bottom:solid 1px #999999;/* 文字の下に線を入れる設定 */
     padding: 7px;
    width:480px; /* 見出しの横幅 */
    background-color: #fcf7f3; /* 背景文字色の指定 */
    padding-left: 15px; /*文字の左にスペース*/
    color:#3C333C; /*文字の色*/
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}
基本的には「h5」と「h6」を使い分けて記事を書いている。
それが見易いような気がしているからだ。

引用
引用なのだが、「blockquote」というタグを使っているが、これがどうもデフォルトだとわかりにくい気がして、少々手を加えている。
.post blockquote {
   border-left:10px solid #8fbc8f;
   padding:1px 10px 10px; /*余白設定*/     
   margin: 1em 20px;
   box-shadow:1px 2px 3px 3px rgba(0, 0, 0, 0.4) , inset 0 0 5px rgba(0, 0, 0, 0.1) ;  /*影を付ける*/
   background-color:#f3fff3; /*引用内の背景設定*/
   color:#004080; /*文字の色を変更*/
}
タイトルやら「h5」「h6」と同じデザインなので芸がない感じもするが……、取り敢えずはこのデザインを流用する方向で。
「カエレバ」のCSSも
で、ここからがようやく本題なのだけれど……、まあ、ちょっと長くなるので今回はここまでで(苦笑

ランキングへの応援クリックよろしく!
にほんブログ村 その他生活ブログへ

0 件のコメント :

コメントを投稿