Bloggerカスタマイズ講座07:「Vaster2」基本カスタマイズ(後編)



天宮です。



前回に続き、Bloggerテンプレート
「Vaster2」カスタマイズ方法を紹介していきます。



  • ヘッダーナビの色を変更
  • カテゴリーラベル色の変更
  • サイドバー見出しの変更
  • 記事見出しの変更
  • ブログアーカイブのリスト文字色変更
  • 関連記事の見出しとリンク背景色の変更
  • 次(前)ページ移動ボタンの色変更
  • 人気記事のリンク文字色を変更
  • トップページ記事リスト枠の変更

この辺りまでを基本カスタマイズとして
紹介してみます。



Bloggerテーマ「Vaster2」カスタマイズ方法


ヘッダーナビの色を変更

まずは現状の色を確認してみましょう。

メニューにオンマウスした場合の
若干濃いブルーと2色変更が必要です。

ヘッダーナビの色を変更するには、

.PageList{ を検索(2ヵ所ある上の方)


.Header p{
margin:0;
}
.PageList{
width:100%;
background-color:#4b99b5;
}
.grobal-navi{
width:1040px;
margin:0 auto;
}
/*   ブログタイトル   
---------------------------------------- */



background-color:#4b99b5;

これを好みのカラーコードに変更

background-color:#D01857;

これでナビのベース部分が変わります。


続いてナビのメニューボタンの色です

.header-nav a{ を検索(2ヵ所ある上の方)

background: #4b99b5;

この部分を同じように変更します。

background-color:#D01857;

※backgroundは一括指定用のセレクタ
background-colorでも表示は同じです。



オンマウスしたときの色はすぐ下の
.header-nav a:hover{

background-color:#008ec2; 

上記の部分を好みのカラーコードに変更

background-color:#A61345;


/*   ヘッダーナビゲーション 
------------------------------------------- */
.header-nav{
padding:0 !important;
}
.header-nav li{
   float:left;
   list-style:none;
   font-size:14px;
padding:0;
}
.header-nav a{
   padding: 10px 20px;
  font-size: 14px;
    color: #fff;
    background-color:#D01857;
    text-decoration: none;
    display: block;
transition:.3s;
}
.header-nav a:hover{
    background-color:#A61345;
   color:#fff;
text-decoration:none;
   
}

PC表示ではこのようになります。


スマホ表示を見るとメニューを開く
ボタンが青色のままなので、

.button-toggle{ を検索して

background:#008ec2; 

上記の部分を好みのカラーコードに変更
background-color:#D01857;


 /*  メニューを開くボタン  */
 .button-toggle{
 display:none;
 }
 @media screen and (max-width: 768px){
  .button-toggle{
  display:block !important;
  width:90%;
  box-sizing:border-box;
  
  color:#fff;
  padding:8px 10px;
  margin:10px auto;
  background:#D01857;
  border:2px solid #fff;
  }
  }


これでOKです。



カテゴリーラベル色の変更

続いてカテゴリーラベルの色を変更します

.list-label-widget-content ul li a:hover{ を検索

background-color:#008ec2;

上記の部分を好みのカラーコードに変更
background-color:#FBED2D;


.list-label-widget-content ul li a:hover{
color:#fff;
background-color:#FBED2D;
text-decoration:none;
}
.list-label-widget-content ul{
   list-style-type: none;
   padding:0;
line-height:initial;
}
.list-label-widget-content ul li{
  margin: 5px 2px;
   display:inline-block;
}

/*   フッター 
----------------------------------------------- */     


これはサイドバーのラべルに
オンマウスした時の色を変更してます。


次に、.post-tag{ を検索(2ヵ所ある上の方)

background-color:#008ec2;

上記の部分を好みのカラーコードに変更
background-color:#FBED2D;


.post-tag{
font-size:14px !important;
background:#FBED2D;
padding:1px 4px !important;
color:#fff;
margin-top:0;
display:inline-block;
}

/*   パンくずリスト  
--------------------------------------- */  


表示を確認してみましょう。




サイドバー見出しの変更


まずは現状の表示を確認




.sidebar h2,h3,h4{ を検索

   padding:5px 0 5px 10px;
   font-size:20px;
   font-weight:700;
   border-left: 2px solid #008ec2;
   margin-bottom: 20px;
   margin-top: 30px;

この部分が見出しのデザイン

background-color:#D01857;を追加してみると


/*   サイドバー見出し   */
.sidebar h2,h3,h4{
   padding:5px 0 5px 10px;
   font-size:20px;
   font-weight:700;
border-left: 2px solid #008ec2;
  margin-bottom: 20px;
    margin-top: 30px;
    background-color:#D01857;
}
/*   人気記事    
--------------------------------------- */

記事の見出しにも影響があります。


/*   サイドバー見出し   */
.sidebar h2,h3,h4{
   padding:5px 0 5px 10px;
   font-size:18px;
   font-weight:700;
   border-left: 5px solid #D01857;
   border-bottom: 1px solid #bcbcbc;
   margin-bottom: 20px;
   margin-top: 30px;
}
/*   人気記事    
--------------------------------------- */


取りあえずこのように少々変更して確認

サイドバー見出しの左ボーダー色変更と
下線を入れて見ました。



記事見出しの変更

記事見出しのデザインを確認するために
前もって記事投稿ですべての見出しを使い
記事を書いていたわけですね。


.entry-content h2{ を検索


/*   記事のフォント
----------------------------------------------- */
.main-outer h1{
   font-size:28px;
    line-height:1.6em;
   margin-bottom:30px;
}
.entry-content h2{
  padding: .5em .75em;
    margin-bottom: 30px;
    background: #008ec2;
    color: #fff;
}
.entry-content h3{
   font-size:20px;
  padding:15px 0 15px 10px;
   border-left: 8px solid #008ec2;
color:#008ec2;
}
.main-outer p{
   font-size:16px;
    line-height:1.6em;
   padding-bottom:24px;
}


h2の上に表示されている.main-outer h1が記事タイトル
font-sizeが少々デカいので24pxに変更

entry-contentのh2がBloggerで
記事を書く際の〔見出し〕

h3が〔小見出し〕h4が〔準見出し〕です


.entry-content h2{ の

background: #008ec2;

上記の部分を好みのカラーコードに変更
background-color:#D01857;


.entry-content h3{ 
デザインを変更してみましょう

   font-size:20px;
   padding:15px 0 15px 10px;
   border-left: 8px solid #008ec2;
   color:#008ec2;


下記のように変更してみました。

   font-size:20px;
   padding:15px 0 15px 10px;
   border-top: 1px solid #D01857;
   border-bottom: 1px solid #D01857;
   border-left:none;
   color: #333333;

h3サイドバー側の影響が出ているため
border-left:none;で左横のボーダーを消しています

これは、CSSの記述順を変えたり、
サイドバー側のCSSで対応する方が良いと思いますけど

今回は複雑になると分からない人のために
このような対処としています。


.entry-contentのh3の下部に
あらたにh4を追加します。

.entry-content h4{
   font-size:20px;
   padding:12px 0 12px 10px;
   background-color:#f4f4f4;
   border-left: solid 5px #D01857;
   border-bottom: solid 3px #d7d7d7;
   color: #333333;
}


編集をまとめると、

/*   記事のフォント
------------------------------------- */
/* 記事タイトル  */
.main-outer h1{
    font-size: 24px;
    line-height: 1.6em;
    margin-bottom: 30px;
}
/* 記事見出し  */
.entry-content h2{
    padding: .5em .75em;
    margin-bottom: 30px;
    background-color: #D01857;
    color: #fff;
}
/* 記事小見出し  */
.entry-content h3{
    font-size: 20px;
    padding: 15px 0 15px 10px;
    border-top: 1px solid #D01857;
    border-bottom: 1px solid #D01857;
    border-left: none;
    color: #333;
}
/* 記事準見出し  */
.entry-content h4{
    font-size: 20px;
    padding: 12px 0 12px 10px;
    background-color: #f4f4f4;
    border-left: solid 5px #D01857;
    border-bottom: solid 3px #d7d7d7;
    color: #333;
}
/* 記事本文  */
.main-outer p{
    font-size: 16px;
    line-height: 1.6em;
    padding-bottom: 24px;
}


表示を確認してみましょう。

見出しについては書く場所さえ分かれば
「CSS 見出し」で検索したら
参考になるコードがたくさん見つかります



ブログアーカイブのリスト文字色変更

ブログアーカイブの文字色を変えてみます

.archive-list ul a{ を検索

color:#2098a8;

上記の部分を好みのカラーコードに変更
color:#D01857;


/*   月別アーカイブ 
--------------------------------------- */  
.archive-list ul{
   padding:0 0 20px 10px;
   list-style-type:none;
   line-height:1.5em;
}
.archive-list ul a{
   color:#D01857;
}
.archive-list ul li{
   padding-bottom:7px;
}


今回はリスト文字色も同系色にしてみました。



関連記事の見出しとリンク背景色の変更

関連記事の見出しとリンク背景色に加えて
記事をシェアするの見出しも変更します。

.share-title{ を検索

background: #008ec2;

上記の部分を好みのカラーコードに変更
background-color:#D01857;



.share-title{
 padding: .5em .75em;
    margin-bottom: 30px;
    background: #D01857;
    border-left: none;
    color: #fff;
}
@media only screen and (max-width: 780px) {
.sns li{
width:47%;
}
}
/*   記事ページのリンク



左端のボーダーを消すには
border-left:none;
を追加


次に関連記事、
#related-posts a:hover{ を検索

background:#008ec2;

上記の部分を好みのカラーコードに変更
background-color:#D01857;


そのすぐ下にある
#related-posts h2{

background:#008ec2;

上記の部分を好みのカラーコードに変更
background-color:#D01857;

/*   関連記事 
------------------------------------- */
#related-posts{
    width: auto;
}
#related-posts a{
    color: #666;
    transition: 0.3s;
}
#related-posts a:hover{
    color: #fff;
    background-color: #D01857;  /* 関連記事オンマウスの背景色 */
}
#related-posts h2{
    padding: .5em .75em;
    margin-bottom: 30px;
    background-color: #D01857;  /* 関連記事の見出しの色 */
    color: #fff;
}

表示を確認してみましょう。




次(前)ページ移動ボタンの色変更

#blog-pager a:hover{ を検索

background:#008ec2;

上記の部分を好みのカラーコードに変更
background-color:#D01857;


#blog-pager a:hover{
    text-decoration: none;
    color: #fff;
    background-color: #D01857;  /* 次(前)ページボタン背景色 */
}
#blog-pager .pages{
    border: none;
}
/*   サイドバー
------------------------------------- */


表示を確認してみましょう。



PreviousとNextの文字を変更するには

Previous(Next)を検索して好きな文字に変更します。


      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#65308;Previous</a>
      </span>



人気記事のリンク文字色を変更

Vaster2のコードに記載ミスがあるので
この部分は必ず修正しましょう。



.popular-post ul li a { を検索


/*   人気記事    
--------------------------------------- */
.popular-post ul li a {
          font-size: 15px;
    color: #666;
    font-weight: 700;  
}008ec2
.popular-post ul li a:hover{
color:#008ec2;
}


}008ec2 はテンプレ記載ミスで
オンマウス時の文字色が変更されない状態でした。

} の後ろの008ec2を削除し

このように変更してみました。



/*   人気記事    
------------------------------------- */
.popular-post ul li a {
    font-size: 15px;
    color: #666;
    font-weight: 700;  
}
.popular-post ul li a:hover{
    color: #cdcdcd;
}


表示を確認してみましょう。

”リスト表示のテスト”のテキストが
オンマウス状態の色です。




トップページ記事リスト枠の変更



トップページの記事リストのボックスに
影がつけてあるのは好みが分かれるところ

影を消したい場合は、

.post-outer{ を検索


.post-outer{
background-color:#ffffff;
    border:1px solid #e5e5e5;
box-shadow:1px 1px 2px rgba(0,0,0, .4);
margin-bottom:20px;
  }
.date-outer {
    border-right:none !important;
padding-right:initial;
}


box-shadow:1px 1px 2px rgba(0,0,0, .4);

上記を削除して確認してみると







一応ここまでで一区切りとして
ブログデザインを確認してみましょう。

↓PC表示


↓スマホ表示

ここまで全7回に分けて、
Bloggerの立ち上げからCSS編集まで

はじめてCSSを触る人でも分かるような
方法で解説したつもりですけど

分かりましたかね?


基本が分かれば、あとは
変更したいセレクタがどこに書いてあるか
探して編集の繰り返しです。


Bloggerはジャマな広告も表示されず
スッキリしてるから、

無料ブログサービスのなかでも
デザイン的に優れていると思います。


7回目の今回で一応それなりのカタチに
なったので基本カスタマイズを終了し、

引き続き個別の編集ポイントなど
あと6回ほどカスタマイズ講座を書きます。







0 件のコメント :

コメントを投稿