この記事では、Bloggerの基本的なHTMLの構造を図解のようにざっくり把握し、CSSを追加する場所も用途別にわかりやすく解説します！
BloggerのHTML構造をざっくり図解！
Bloggerのテンプレートは少し独特で、<b:section> や <b:widget> などの専用タグがありますが、基本の構造は以下のようになっています。
<html b:version='2'>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* この中にテーマ全体のCSSが書かれている */
]]></b:skin>
<nav id='navbar'>
<main id='main'>
<aside id='sidebar'>
<footer id='footer'>
CSSはどこに書くのがベスト？
1. <b:skin> 内に直接書く（おすすめ）
Bloggerのテンプレート内には <b:skin> という専用タグがあり、ここに書いたCSSはテーマ全体に適用されます。
color: red;
font-size: 16px;
}
・テーマ全体に適用される
・Blogger公式の正しい書き方
・管理しやすく、反映も確実
2. <head> に <style> を追加する
<b:skin> ではなく、通常のCSSのように<head>タグ内に<style> タグで書くこともできます。
<style>
color: red;
font-size: 16px;
}
・手軽にCSSを追加できる
・テンプレートによっては反映されないことがあるので注意
3. 外部CSSファイルを読み込む
自分のサーバーなどにアップしたCSSファイルを読み込んで適用する方法です。
・複数ページや複数サイトで共通スタイルを使いたいときに便利
・CSSファイルのホスティング環境が必要
まとめ
| 方法 | おすすめ度 | 特徴 |
|---|---|---|
<b:skin> |
◎ | テーマに最適、管理しやすい |
<style> in <head> |
○ | 軽く追加したいときに便利 |
| 外部CSS | △ | ホスティング環境が必要 |
補足：ウィジェットや特定記事だけに適用するには？
ウィジェットIDや <body> に付与されるクラスを活用すれば、特定のパーツやページだけにCSSを適用することができます。
以下で具体的なパターンを紹介します！
1. 特定のウィジェットにだけスタイルを適用したい場合
Bloggerのウィジェットには自動でIDが割り振られています。例えば、サイドバーにある「プロフィール」ウィジェットのIDが Profile1 の場合：
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
}
このように #ウィジェットID を指定することで、特定のウィジェットだけにデザインをあてることができます。
2. 特定の記事だけにCSSを適用したい場合
記事ページ（個別記事）には、<body> タグに item-view というクラスが付きます。たとえば：
color: crimson;
}
このように書けば、個別記事ページのタイトルだけに色を変更することができます。
さらに、記事ごとに異なる data-post-id もHTML内にあるため、JavaScriptを使えば特定の投稿IDにだけ反応するCSSを当てることも可能です。
3. 特定のページ（トップページ・ラベルページなど）の判別
Bloggerではページによって <body> に以下のようなクラスが自動で付与されます：
homepage– トップページitem-view– 記事ページstatic_page– 固定ページarchive– ラベルページや月別アーカイブ
それぞれを使って、こんなCSSが書けます：
トップページのヘッダー部分の背景色を #ffeecc（薄いクリーム色） に変更background-color: #ffeecc;
}
font-style: italic;
}
このように、ページ種別ごとにレイアウトやデザインを切り替えることができます。
おわりに
CSSを正しく使えば、Bloggerでも自由にカスタマイズが可能です！
このような条件分けや特定要素への適用方法を活用して、あなただけのオリジナルデザインを作ってみてください。
それでは今回はこの辺で。
最後までお読みいただきありがとうございました。
0 件のコメント:
コメントを投稿