CSSを編集することで、自身のブログのレイアウトをオリジナルなものにすることが可能です。
例えば、CSSを使って記事内の文字のフォントの種類や大きさを変えたり、見出しをカスタマイズしたりなど様々なことができます。
また、こういったレイアウトを工夫することで見た目が美しく、
読みやすい・使いやすいブログになり、より多くの方にアクセスしてもらえることに繋がります。
なので、今回はブログをカスタマイズするための「初心者必見のCSS編集の基本」についてお伝えしたいと思います。
目次[非表示]
1.初心者必見のCSS編集の基本
①CSS編集前のテーマのバックアップ
まず、CSS編集の基本の中で一番大切なことは、
CSSを編集する前にテーマのバックアップを取ることです。
バックアップをとっていないと、CSSを使って何かを変更しエラーが出てしまった際に元に戻せなくなってしまうので、非常に大切です。
自身の既存のテーマのバックアップの取り方は、
Bloggerの編集画面から、
「テーマ」 → 右上の「バックアップ/復元」 → 「テーマのダウンロード」 → 「バックアップ完了」
という流れになります。
もし、わからなければ以下の記事で詳しく説明しているのでご参照ください。
②CSS編集までの道のり
テーマのバックアップが取れれば、あとはCSSを編集するところまでいき
コードを書き換えていくだけです。
CSS編集までの道のりは、
①「テーマ」 → ②「カスタマイズ」 → ③「上級者向け」 → ④「CSS追加」
⇩
上の画面までくれば、あとは右の余白部分にポチポチとコードを打っていきます。
③編集したCSSをブログに適用する
余白の部分にCSSのコードを入力するだけではないので、
入力後は「ブログに適用」をクリックする必要があります。
そうでないと、ただコードを入力しただけで終わってします。笑
なので、カコードを入力し終わったら、
しっかりと右上の「ブログに適用」をクリックしてCSS編集を完了させましょう。
「ブログへ適用」をクリックした後は、追加したコードがしっかりと適応され、
確実に変更されているかご確認ください。
④HTML編集からCSS編集
実は上で紹介した以外に、もう1つCSSを編集する方法があります。
それはHTML編集からCSSコードを追加する方法です。
HTML編集からのCSSのコード追加は、
①「テーマ」 → ②「HTML編集」 → ③「<b:skin>…</b:skin>」の横にある▶をクリック → ④「]]></b:skin>」の上にスペースにCSSのコード入力
となります。
⇩
⇩
コードの入力が終わったら、上の「テーマの保存」をクリックして完了です。
注意点として、HTML編集からCSSを追加しレイアウトを変更した場合、
「②CSS編集までの道のり」で説明した「CSS追加」の画面にコードが表示されなくなります。
なので、一度HTML編集画面からCSSを追加した場合は、それ以降もHTML編集からCSSを追加することをお勧めします。
また、バックアップを復元した際も「CSS追加」の画面からコードはなくなり、HTML編集の画面に移動しています。
⑥CSSを入力するスペースを即見つける方法
以降、HTML編集からCSSを変更する場合は、
HTML編集画面で「Ctrl+F」を押して「]]></b:skin>」を検索すれば、
CSSを入力するスペースが簡単に見つけられます。
ちょっとした時短になりますね。
⑦CSSにコメントを付ける
CSSを編集する際はコメントをつけておきましょう！
コメントをつけるには「/*」と「*/」で挟みます。
（この間の文字は機械にコードを読み取られずに「コメント」として残ります。）
例えば、上の画像にもあるように記事内の文字などを編集しているCSSのコードの前と後に
/*記事内の編集はじめ*/
～～～コード入力～～～
～～～コード入力～～～
～～～コード入力～～～
～～～コード入力～～～
～～～コード入力～～～
/*記事内の編集終わり*/
のような感じでくくっておくと、どこのCSSを変更したかが一目でわかります。
また、個別のコードの後に「コメント」を付けることで、そのコードが何を表しているのかも把握できます。
例えば、
.entry-content h4 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: #FAF5F2;/*背景透明に*/
border-left: solid 3px #7db4e6;/*左線*/
}
のような感じで書いておくことで、CSSコードを覚えていなくても簡単にどのコードが何を合わらしているのかわかるのでオススメです。
また、こうすることでコードを覚えることにもつながるかと思います。
⑧初心者は「CSS追加」から編集するべき？
「④HTML編集からCSS編集」でHTML編集からCSSを入力する方法をお伝えしましたが、
気づかないうちに他のコードをいじってしまい、取り返しのつかないことにならないように、
CSSやHTMLのコードをまだあまり理解されていない方は「②CSS編集までの道のり」で説明した方法でCSSのコード入力をしていくことをお勧めします。
2.まとめ
今回はBloggerを始めたばかりの方の為に「CSS編集の基本」をいくつかお伝えしました。
また、今回お伝えしたのはCSSを使って編集するうえでの基本中の基本ですので、
しっかりと把握しておきたいことであります。
HTMLやCSSのコードを学んで自分でブログのレイアウトを変更していくのは、とても楽しいので、ぜひご自身で色々とコードを変更してオリジナルなブログを作っていきましょう！
No comments:
Post a Comment