Bloggerテーマ「QooQ(クーク)」の設定変更とカスタマイズ

更新日: 公開日:

t f B! P L

Bloggerのテーマ「QooQ(クーク)」の設定を変更する方法とHTMLを変更して詳細なカスタマイズを加える方法を紹介します。

Bloggerのテーマ設定画面

テーマの設定を変更する

こちらの記事で紹介した Bloggerテーマ「QooQ(クーク)」は、色などの設定を変更することができます。

おすすめのBloggerテーマ「 QooQ(クーク)」

いろいろあるBloggerテーマの中でも一番のおすすめが、無料の日本語Bloggerテーマ「QooQ(クーク)」です。Qooqの設定方法、カスタマイズ方法を設定画面と一緒に分かりやすく簡単に紹介します。

設定変更画面を表示するには、メニューの [テーマ]  - [カスタマイズ] ボタンをクリックします。

詳細設定」メニューを選ぶと、いろいろな文字の色を変更することができます。

(「QooQ」の場合、背景、幅を調整、レイアウトの変更はここからはできません。)

Bloggerのテーマ設定画面

CSSの追加

以前は、下の画面のような「Bloggerテーマデザイナー」を使って、CSSを追加することができました。

Blogger CSSを追加

現在の設定画面には、CSSを追加する場所がなくなってしまったので、直接HTMLを変更します。

HTML編集

Bloggerのメニューの [テーマ]  - 右上のその他アイコンBlogger その他アイコンをクリックします。

Blogger テーマのその他アイコン

メニューの[HTMLを編集]をクリックします。(念のため、変更する前に [バックアップ]をとっておいてください。)

Blogger HTMLを編集

HTMLが表示されますので、変更してカスタマイズしていきます。

場所は、以前の「Bloggerテーマデザイナー」のときにcssが追加された場所と同じ

<b:skin><![CDATA[
・・・
]]></b:skin>

の間がいいと思います。

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

例えば、テーブルの表示をシンプルにする場合、次のようなCSSを追加します。

table.table02 {
  border-collapse:collapse;
  margin:0 auto;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
}

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

テーブルのHTMLには、table02クラスを指定します。

<table class="table02"><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

そのほか、BloggerのカスタマイズでいろいろなBloggerのカスタマイズを紹介します。

このブログを検索

カテゴリ

プロフィール


こんにちは!

まあちゃん&うさたん のママです。


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


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


QooQ