新米ブロガー：bloggerのデザインをカスタマイズするにはどうしたらいいのかな？背景色や見出しのデザインを変更したい。
こんな疑問にお答えします。
結論から言うと、方法は次の2種類があります。
- bloggerのテーマから編集する方法
- cssを追加する方法
私はbloggerの日本語テンプレートを【zelo】、【QooQ】の2つを使用していて、このブログで使用している【QooQ】はそれなりにカスタマイズして使っています。
この記事を読んでわかること
- bloggerのデザインをカスタマイズする2つの方法
- bloggerのHTMLを編集する方法
- cssはコピペでOK！
bloggerのデザインをカスタマイズする2つの方法
前述の通り、2通りあります。- bloggerのテーマから編集する方法
- cssを追加する方法
bloggerのテーマから編集する方法
bloggerの投稿ページのサイドバーから「テーマ」-「カスタマイズ」-「上級者向け」を選びます。ここからブログの背景色や文字の色、ラベルの色等を変更することができます。
もっとデザインにこだわりたい方は、cssを追加・変更する必要があります。といっても、基本的にcssはコピペでOKです。プログラミングの知識はあるに越したことはないですが、注意点さえ押さえておけばなくても問題ありません【経験済み】。
bloggerでcssを追加する方法
cssとは？上記同様に、bloggerの投稿ページのサイドバーから「テーマ」-「カスタマイズ」-「上級者向け」を選びます。
文字にマーカーを引いたり、文字サイズ、フォント、行間や文字と文字の隙間など、様々なデザインを変更するのに使用します。
表示される画面の一番下にcssの追加とあるのでこちらにcssをコピペします。
ただ、これで変更できるのはあくまでも【追加】したい項目だけで、文字のフォントを変更する場合などは、【HTML】の編集が必要です。これも基本的にはコピペでOKです。
bloggerのHTMLを編集する方法
今度はbloggerの投稿ページのサイドバーから「テーマ」-「HTMLの編集」を選びます。HTMLは初めて見るときは、受け入れがたいかもしれませんが、英語を基本とする言語なので、そのうち慣れてくると思います。
注意点：
HTMLの編集をする前に、「テーマ」の右上にある「バックアップ/復元」-「テーマのダウンロード」と進み、テーマのバックアップをしておきましょう。バグが発生してどうしようもなくなった時に、ダウンロードしたデータを適用すると復元できます。
HTMLの編集をする前に、「テーマ」の右上にある「バックアップ/復元」-「テーマのダウンロード」と進み、テーマのバックアップをしておきましょう。バグが発生してどうしようもなくなった時に、ダウンロードしたデータを適用すると復元できます。
今回はフォントを変更する場合を例にあげて説明します。
使用しているテンプレートは【QooQ】です。
【QooQ】について詳しく知りたい方はこちらの記事で解説しています。
【2019年最新】Bloggerのおすすめ無料テンプレートは？【新作あり】
HTMLの編集
次のような流れで編集していきます。1. 変更箇所をキーボードショートカット「command ＋ F」又は「Ctrl + F」で検索
2. コードを編集
3. テーマを保存
4. 確認
1. 変更箇所を検索
HTML編集画面をどこでもいいのでクリックして、キーボードショートカット「command ＋ F」又は「Ctrl + F」で検索窓を表示させましょう。
検索窓に”h2 “ と入力し、Enterキーを押すと、h2を含む箇所が順番に表示されます。今回は、single-content h2が表示される箇所を探してください。h2の場所はテンプレートごとに異なるので、今回は【QooQ】というテンプレートを前提に進めています。
2. コードを編集
{ } 内を任意のcssコードに入れ替えると、見出しのデザインを変更することができます。参考までに、以下のコードをコピぺすると私の設定と同じになります。h2タグは見出しの一番大きなサイズで、SEOのキーワードを入れる重要な見出しです。#single-content h2 {
font-size: 115%;
font-weight: 700;
padding: .4em 1em;
margin: 2em 0 ;
background: $(single.hback);
color: $(single.hfont);
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
}
注意点
{ } や: ; を消してしまわないように注意しましょう。
cssが反映されない場合はこれらが消えていないか確認してください。
{ } や: ; を消してしまわないように注意しましょう。
cssが反映されない場合はこれらが消えていないか確認してください。
font-size:
フォントの大きさです。見出しの大きさを本文の文字サイズに対して何%にするか指定できます。又は、20pxなどpixel（ピクセル）数で指定することもできます。font-weight:
フォントの太さです。数字が大きいほど太くなります。padding:
文字の周りの余白です。上記のコードは上下 0.4em（1emは1字の意味）、左右 1emの設定です。margin:
見出しの外側の余白です。上下に 2em, 左右に0emの設定です。単に 2emだけ書くと上下左右全てに適応されるので2em 0 と書いています。background: $(single.hback);
背景色です。ブロガーでは、 $がついている場合、前述の「テーマ」-「カスタマイズ」から変更できることを表しています。ここを変更するとカスタマイズからは変更できなくなりますので、要注意です。ただ、ここで色を変えてしまっても、再度色を変える場合はHTMLから編集すれば変更することができます。慣れれば、どちらでも問題ないと思います。color: $(single.hfont);
文字の色です。border-radius:
radiusは”半径”という意味で、見出しの角を丸くする設定です。四角のままで良い場合は、このコードを消せばOKです。box-shadow:
見出しに影を作り、浮き上がるようにする設定です。3. テーマを保存
「テーマを保存」ボタンを押して、HTMLを保存します。4. 確認
サイトを表示して思った通りのデザインになっているか、確認しましょう。うまく表示されていない場合は、もう一度HTML編集に戻り、コードに謝りがないか確認してください。前述しましたが、: や; などの記号が抜けている場合が多いので注意してみてください。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。