Blogger CSSを追加

Bloggerテーマデザイナー」を使うと、Bloggerテーマのいろいろな設定を変更したり、CSSを追加して詳細なカスタマイズを加えることができます。

追加するCSSの具体例を、画像と一緒に簡単に紹介します。

テーマデザイナー

Bloggerのメニューの [テーマ] >[カスタマイズ] ボタンをクリックすると、テーマデザイナー画面が開きます。

Bloggerテーマ「Qooq」の場合は、「上級者向け」をクリックして、いろいろな色の設定と「CSSを追加」のみ設定することができます。

CSSを追加する

[上級者向け] > [CSSを追加] を選ぶと、「カスタムCSSを追加」ウィンドウが表示されるので、ここにCSSを追加します。

Blogger CSSを追加

テーブルをシンプルにする

例えば、テーブルの表示をシンプルにする場合、表示された「カスタムCSSを追加」ウィンドウに、次のCSSを追加します。
table.table02 {
  border-collapse:collapse;
  margin:0 auto;
  border-top:2px solid #666;
}

table.table02 td, table.table02 th {
  border-top:1px solid #666;
  padding:10px;
  text-align: left;
}
table.table02 tr:last-child td,
table.table02 tr:last-child th {
  border-bottom:2px solid #666; 
}

テーブルのHTMLには、table02クラスを指定します。
<table class="table02" style="width: 100%px;"><tbody>
<tr><td>ホスト名</td><td>タイプ</td><td>コンテンツ</td></tr>
<tr><td>www.mydomain.com</td><td>CNAME</td><td>ghs.google.com</td></tr>
<tr><td>xxxxx.mydomain.com</td><td>CNAME</td><td>xxxxx.dv.googlehosted.com</td></tr>
<tr><td>mydomain.com</td><td>A</td><td>216.239.32.21</td></tr>
<tr><td>mydomain.com</td><td>A</td><td>216.239.34.21</td></tr>
</tbody></table>

こちらがCSSを適用したテーブルです。
縦線をなくした、シンプルなデザインになりました。

ホスト名タイプコンテンツ
www.mydomain.comCNAMEghs.google.com
xxxxx.mydomain.comCNAMExxxxx.dv.googlehosted.com
mydomain.comA216.239.32.21
mydomain.comA216.239.34.21

このブログを検索

カテゴリ

プロフィール


こんにちは!
小学生の男の子 2人のママです。

ラズベリーパイを使った簡単な電子工作とプログラミングに挑戦しています。

よかったら、詳しいプロフィールも見てください。

QooQ