投稿者天宮司 Bloggerカスタマイズ

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;
}

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

次（前）ページ移動ボタンの色変更

#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>

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

トップページの記事リストのボックスに

影がつけてあるのは好みが分かれるところ

影を消したい場合は、

.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回ほどカスタマイズ講座を書きます。

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

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

ヘッダーナビの色を変更

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

サイドバー見出しの変更

記事見出しの変更

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

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

次（前）ページ移動ボタンの色変更

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

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

自己紹介

このブログを検索

Twitter

注目されている記事

カテゴリー

月別アーカイブ

人気コンテンツ