投稿者 Bloggerカスタマイズ

Bloggerカスタマイズ講座06：テンプレート「Vaster2」基本カスタマイズ（前編）



天宮です。


さあ、いよいよ「Vaster2」テンプレを
CSS編集しカスタマイズしていきます。


まずは、ココまでの現状での表示を確認

Bloggerテンプレート「Vaster2」を
カスタムしてブログデザインを変えるとき

HTML/CSS初心者が気を付けるべきなのは
いきなり多くを望まないということ、

訳わからないソースコードを目にすると
拒否反応をしめすのが普通の人です（笑）

できそうな部分を最小限イジる感じで
デザイン変更していきましょう。


それでは、私がやってる方法での
CSS変更の基本的な流れを紹介しておきます。



CSSをバックアップし編集データを作る

Blogger〔テーマ〕→〔バックアップ/復元〕

〔テーマをダウンロード〕をクリックして
分かりやすいファイル名をつけてダウンロード


このDLしたファイルは
現状に戻すためのファイルとして保存し

DLしたファイルをコピーして
そちらを編集用として使います。

編集できたら〔バックアップ/復元〕の
ファイルを選択から編集ファイルを指定し
アップロードという流れの繰り返しです。


一番最初は「Vaster2」のテンプレを
アップロードしたけど、

2回目以降は上記の手順でテーマを
DLして編集するというカタチです。


編集前にDL保存しておくことで
いざという時にその時点まで戻せます。

最初のテンプレに毎回追記していく形だと
どの影響でデザインがくるっているのか
分からない時に悩むことになります。




HTML/CSSの編集環境を用意しよう

CSSを編集するにはテキストを
書きかえるわけですが、

Windowsのメモ帳では作業性が悪いから
使いやすいエディターを用意しましょう。

今回は「TeraPad」というツールを
紹介しますが他のツールでも構いません

上記URLのダウンロードページからDL


2種類あるけど、インストーラ無しは
圧縮フォルダを解凍し分かりやすい所に
保存したらそのまま使えます。

インストーラーありは、
PCにプログラムとしてインストールして使用

どちらのタイプでも構わないです。



ダウンロードしたテーマを開いてみよう

それではDLして編集用に複製した
コピーファイルをTerapadで開いてみましょう

はじめて見る人はわけ分からんと思います。


<!--CSS-->
   <b:skin><![CDATA[/*
---------------------------
Blogger Template Style
Name:     Vaster2
Designer: Toumasu
URL:www.vaster2.com 
------------------------- */

↑この記載から下部分がおもに編集する所
　点線内は著作者表示です


どこに何を書いてあるのかスクロールして
探すのは大変だから、

エディターの検索機能を使うのが
基本と考えてください。


キーボードの〔Ctrl+F〕で
検索窓を表示させるとラクです。



テーマを編集してみよう

編集作業に入る前に、
もっとも基本の形を理解しておきましょう。


body{
    font-size:18px;
    color:#000000;
}
CSSは見やすいように段落を分けて
書いてありますが、

上記を一行であらわすとこういうこと

body{font-size:18px;color:#000000;}
これを分かりやすく説明すると、

body（セレクタ）の{文字サイズ:18pxにします;文字色:黒にします;}

こういう宣言を繰り返しているだけです

セレクタ{ プロパティ: 値 }　で一括り
となりますから}で閉じるのを忘れないようにしてください。




全体の文字のフォントを編集

「Vaster2」のテンプレートでは
メイリオフォントが設定されていません

どのフォントが読みやすいか、
というのは個人差がありますが、
編集の練習にちょうど良いので試してみましょう

Terapadの検索で、body{ を検索


font-familyという部分を書きかえると
フォントを変更できます。

body{
     font-family:Helvetica,"游ゴシック","Yu Gothic",sans-serif;
   background-color: #fff;  /*  全体の背景色  */
   margin:0;
   font-size:16px;
   line-height:1.6em;
}
↓このようにfont-familyの行を変更
body{
    font-family:'游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    background-color: #fff;  /*  全体の背景色  */
    margin:0;
    font-size:16px;
    line-height:1.6em;
}


編集できたら〔バックアップ/復元〕から
アップロードしてみましょう。


↓変更前

↓変更後

画像だと分かり難いですね（苦笑）

フォントというのはブログを見ている人の
PC/スマホの環境によりどのフォントで
表示されるのかが異なりますから、

それぞれのデバイス向けに多くのフォントを
設定しているカタチになります。



ヘッダー余白の調整とレスポンシブ対応

私のブログの場合はブログタイトル文字
「Amamiya.log 」という小さな写真を
ヘッダー画像に設定していますが、

おそらく多くの人は、
大きな写真をヘッダー画像に使いたい
画面いっぱいに表示したい

こう思うかな？ということで


今回は大きな写真を使い、
画像の上にブログタイトル文字を表示する
というケースで説明します。

Bloggerの〔レイアウト〕
〔ページヘッダー〕から画像設定した
現状の表示は、



スマートフォン表示だと

ヘッダーガジェットで大きな画像を
登録したのはスマホ用に自動で
縮小はされないみたいです。


変更したい項目をリストアップしてみると
  • ヘッダー上部の青い線を消す
  • ヘッダー画像の上下余白をなくす
  • ヘッダー画像を画面幅いっぱいに表示
  • ブログタイトル文字の色・位置を変更
こういう感じ。


ちなみに、ヘッダー画像をモニター幅
いっぱいで表示すると、

極端に大きなモニターの場合は
画像が引き伸ばされて
デザインが崩れる可能性があります。

全てのモニターで完璧にというのは
ムズカシイからテキトーにやってきます。

えぇ、私は基本的にテキトーにCSSをイジッてます（笑）

イジッて表示確認して良さ気に見たらOK


ヘッダー上部の青い線と上下余白を消す

ダウンロードしたテーマをTerapadで開き

.Header{　を検索

border-top:7px solid #008ec2;

上記が青い線を表示しているから
一行まるまる削除します。

padding-bottom: 30px;

コチラがヘッダー下部の余白
これも削除します。


次に、#header-inner{　を検索
というか.Header{　の下に見えてますね。

padding-top:20px;

コチラがヘッダー上部の余白ですから
これも削除して最終的にこうなります。

.Header{
    width:100%;
    background-color:#fff;
}
#header-inner{
    width:1040px;
    margin:0 auto;
}



慣れないうちはマメにテーマを
アップロードして表示確認してください。

ココまでの時点でこうなります。

上下の余白は無くなりましたね。


続いてヘッダーを画面幅いっぱいに表示します。

#header-inner{　を検索


ここで注意して欲しいのが、
#header-inner{　というのは2ヵ所あります

上部にあるのがPC表示用で、
レスポンシブデザインと書いてある行
以降にあるのがスマホ表示用です。


まずは上部の#header-inner{に書いてある

width:1040px;　を

width:100% !important;　に変更し


その下に下記を追加
background-size:cover !important;
background-position: center !important;


#header-inner{
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    margin: 0 auto;
}



これでPC画面上で画面幅いっぱいに
ヘッダー画像が表示されます。


background-positionは、
背景画像の中心を基準として拡大縮小
させるためのCSSです。

今回は真ん中を基準とした方が良い
写真だったのでcenterにしていますが、

2行目の記載がなければ左側が基準です、
上基準ならtop、下ならbottom、
右ならright、左上ならleft topを指定します。

縮小するときに消えては困る部分を
基準にしてみてください。

実際の表示を確認すると

小さな写真を大きく引きのばすカタチに
なってるから画像が少し粗くなってます。

どのあたりのモニターサイズでの表示を
メインに考えるかにもよりますが、

できるだけ拡大縮小が少なく済むような
画像をはじめから設定した方が良いです。

どのくらいがイイか分からなければ、
取りあえず横幅1300～1500pxぐらい。


次にスマホ表示用のCSSを編集

#header-inner{ に書いてある

#header-inner{
   width:auto;
   margin:0 auto;
   padding-left:20px;
   padding-right:10px;
}

下記に変更
#header-inner{
   width:95%;
   margin:0 auto;
   padding:20px 0 50px 0;
   min-height: 100% !important;
}

ブラウザを小さくして表示を確認

ヘッダー画像が縮小されて
横スクロールの表示が消えましたね。



ブログタイトル文字の色・位置を変更

ヘッダー画像の横幅を広げたことで、
タイトル文字も左端に移動しちゃいました

文字の位置を指定して、ある程度
イイ感じの場所に表示したいと思うけど
ドデカいモニターで見られるとキビシイかも


.header h1{　を検索

その上に下記を追加

.titlewrapper{
   padding:25px 10% 0 10%;
}

padding:上 右 下 左;　
↑こういう感じで隙間を調整します

上部からの位置をpx数で指定して
横の余白は大きなモニターの場合を考えて
％で指定してみました。


/*   ブログタイトル   
------------------------------------- */
.titlewrapper{
    padding: 25px 10% 0 10%; /* ブログタイトル文字位置変更  */
}
.header h1{
    margin-top: 0;
    margin-bottom: 0;
}
.header-title a{
    font-size: 40px !important;
    font-weight: 700;
    text-decoration: none;
    color: #000;
}
.header-title a:hover{
    text-decoration: none;
}
.header-title a:visited{
    color:#000;
}



ブログタイトル文字サイズと色は
.header-title a{　の部分の
font-sizeとcolorで指定します。

カラーコードを調べるサイトは
たくさんありますが、例えば

ブログデザイン色を変更する際には
必ずカラーコードが必要となりますから
自分が使いやすいサイトを
一つはブックマークしておきましょう。



引き続き、ブログタイトルの文字色を
変更していきたいのですが、

「Vaster2」テンプレートで
タイトル部分のCSSは
.header-title a{　で指定してありますが

確認したところヘッダーガジェットに
画像を追加した場合はセレクタ名が異なるみたい


ということで.header-titleの
下あたりに新たに #header .title a を追加


.header-title a{
    font-size: 40px !important;
    font-weight: 700;
    text-decoration: none;
    color: #000;
}
.header-title a:hover{
    text-decoration: none;
}
.header-title a:visited{
    color:#000;
}
/*   ヘッダー画像を挿入した場合のタイトル文字   */
#header .title a{
    font-size: 36px !important;
    font-weight: 700;
    text-decoration: none;
    color: #000;
}
#header .title a:hover{
    text-decoration: none;
}
#header .title a:visited{
    color: #000;
}
/*   ブログ説明   */
.header-description p{
    font-size: 13px;
    margin-top: 5px;
    padding: 0 10%;
}


すぐそばにブログ説明と書いてある
.header-description p{

下記を追加して左側の余白調整

padding:0 10%;

↑
paddingの値が2個しかない場合は
上下（左右）の値が同じということ
padding [上下][左右]

値が3個の場合は [上][左右][下]
値が1個の場合は [上下左右]


ココまでの表示を確認してみると

これでPCでの表示はOKですが、
スマホ表示でタイトルが大きすぎるので



@media screen and (max-width: 768px){を検索し


下記を追加

/*   レスポンシブデザイン
--------------------------------------------------- */         
@media screen and (max-width: 768px){
#header .title a{
    font-size: 20px !important; /* ブログタイトル文字サイズ */
}
.titlewrapper{
    padding: 0 10px;
    text-align: center; /* ブログタイトル文字を中央寄せ */
}
.header-description p{
    padding:0 10px;
    text-align: center; /* ブログ説明の文字を中央寄せ */
}


こういう感じになります。

読みやすいように文字色を
変更してみるのも良いかも知れませんね



長くなったので前編はココまでとします。

次回後編では、ナビや見出しの色変更と
細かなパーツの変更方法など紹介します。






© あまぞん神社 All Rights Reserved. （ Powered by Blogger ）