ブログのレイアウトを変更してみた その2

見易さを見直すために色々と設定を弄っているが、CSSは奥深いorz

 

取りあえず、タイトルのレイアウトと、途中のタグのレイアウトを見直すことに。

前回の記事ではイマイチわかりにくい部分があるので、もう一度最初から設定し直した部分の紹介をする。

テンプレートの変更

このブログは、bloggerを使っているので、レイアウトの変更は意外に手軽に行える。ただし、細かいところを設定する場合には、やっぱりHTMLを弄る必要がある。

画像

bloggerにログインして、「テンプレート」というところをクリックする。

すると、こんな感じの画面になる。

画像2

「ブログで使用中」というのがPCで表示されるもの。 「モバイル」と書かれている方が、携帯電話などで表示されるものだ。

それぞれの下に設定ボタンがあるが、今回は、PCの方を変更したので「ブログで使用中」の下にある「HTMLの編集」を選択する。

 

すると、警告が出てくる。

直接 HTML を編集すると、一部の機能の動作に影響することがあるので、上級ユーザーにのみおすすめします。テンプレートの HTML を編集すると、その他の Blogger の機能に予期しない影響が生じることがあります。まずテンプレート デザイナーを使用することをおすすめします([アドバンス] セクションで CSS を追加できます)。

こんな感じの警告だ。

CSSで弄るのも良いが、今回は直接HTMLを触っていくので、「続行」を選択。

 

HTMLを編集する

えー、編集前には必ずバックアップをしてください。

テキストにコピペして保存しておけば、最悪、レイアウトが崩れてしまうような事態が発生しても、対応できる。

 

で、今回は記事の部分を触るので、「Posts」という項目を探す。

/* Posts
----------------------------------------------- */
.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

こんな感じで始まるところだ。

で、その中に、h3.post-title .comments.h4 { と言うところがあるので、ここを変更。

h3.post-title {
  background: #ffffff; */背景文字色の指定*/
  border-left: 30px solid #0D3D5E; /*文字の横に付箋のようなマークを入れる*/
  padding: 10px 15px 10px 15px; */空白*/
  margin: 0px -20px 0px -50px;
  box-shadow:2px 3px 3px rgba(0, 0, 0, 0.4) , inset 0 0 5px rgba(0, 0, 0, 0.1) ;  */影を付ける*/
  font: $(post.title.font);
}

.comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

これで、見出しを変更できる。

 

ついでに、途中の見出しを変更。見出し5の設定を変更していく。

h5{
  font-size:120%;
  border-top:solid 1px #999999;            /*上に線を入れる設定*/
  border-left: 9px solid #0C2C4C;          /*文字の横に付箋のようなマークを入れる*/
  border-right:solid 1px #999999;         /*右に線を入れる設定*/
  border-bottom:solid 1px #999999;      /*文字の下に線を入れる設定*/
  box-shadow:2px 3px 3px rgba(0, 0, 0, 0.2) , inset 0 0 5px rgba(0, 0, 0, 0.1) ; */影を付ける*/
  width:515px;            /*見出しの横幅*/
  padding-left: 5px;   /*文字の左にスペース*/
  color:#3C333C;        /*文字の色*/
}

.select{
    padding-top:8px;
    padding-left: 5px;/*文字の左にスペース*/
    font-size:10px;
    color:#999999;
    display: block;
}

ついでに、引用のデザインも変更。

.post blockquote {
   border-left:5px solid #669933; /*文字の横に付箋のようなマークを入れる*/
   padding:0px 10px 10px; /*余白設定*/     
   margin: 1em 20px;  
   background-color:#F3FFF3; /*引用内の背景設定*/
  color:#004080; /*文字の色を変更*/
}

細かい説明をすると長くなるので、今回は覚え書き程度の話で勘弁願いたい。

 

見易さの改善

こんな感じで色々と手を入れていくと、ブログが読みやすくなると思う。

ただ、アフィリエイト用のブログとしてはまだまだやることがある。それは今後の課題としよう。

コメント





このブログの人気の投稿

ハンドブレンダーをオススメ

エーハイム2213、呼び水でホースを口で吸うのが嫌な人の為に