2016年3月27日

BloggerテンプレートのCSS入力位置はどこ?HTMLコードは?初心者向け解説。

スポンサードリンク

 Bloggerのテンプレートについて。

CSS記入欄はどこ?
html記入欄はどこ?をご説明します。

他のブログサービスと違い、
Bloggerは一つの画面上で入力するので、記入時に混乱しやすいのですね。
独特の仕様なのです。

Blogger同じテンプレート画面にCSSとhtml両方記入


 メールで問合せが来ました。


お問い合わせ頂いた内容:

お問い合わせページを作る。ガジェットではなく、ページに設置する。

のページを見られた上で、
CSSはテンプレート上のどこに記入すれば良いのだろうか?
という内容。


 直接お返事をしましたが、
同様の疑問をお持ちの方もいそうなので、ブログ作成しました。

BloggerのHTMLとCSSカスタマイズ


 では、テンプレートを見ていきます。

Blogger管理画面→

テンプレート→

HTMLの編集→

へ移動しましょう。

各々、様々なテンプレートをお使いだと思うので、
大体同じようなコードを探しながら、参考にしてください。


 Bloggerでは、htmlとCSSを同じ画面で入力する仕様です。
ただし、入力箇所は当然分かれています。

テンプレート内のCSS記入部分は、以下のようになっています。


    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     ○○
Designer: △△
URL:      http~
----------------------------------------------- */



ここにお使いのテンプレートのCSSが記入されている



.mobile {○○}
モバイル関連のCSSが記入されている


☆追加位置☆

]]></b:skin>


☆追加位置☆のあたりに、
私はCSS追加していきます。

別に決まっている訳ではありませんが、
後で見やすいようにしています。

こんな時どうする?Bloggerテンプレートカスタマイズ


 もし、カスタムしたいCSSが元々のテンプレート上にある場合は、
該当CSSを書き換えます。

例えば、

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

などなど。
元々テンプレート上にあると思います。
{  }の中身はそれぞれ違いますね。


 元々のテンプレート上には無いCSSは、
CSSの下の方に追加した次第です。

そこが追加位置と決まってはいないですが、
後で自分が見て分かる位置に。

元々あるCSS{
  ○○:●●;
}

この{  }中に記入してはダメですが、
{  }の後ならおそらくどこでも問題ないです。


]]></b:skin> がCSSの区切りコード。

これより下はダメです。


 テンプレート上では、
HTMLはCSSより後の方に記入されていると思います。

お使いのテンプレートでご確認下さい。


 Bloggerはクセのある仕様ですが、
使いこなすとむしろ便利です。

楽しくカスタム出来ると思います。

私ももう一つサイトを作りたいくらい。
でも時間がなかなか無くて、進んでいません(笑)



 こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。


 当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。

必ずデータは最新のバックアップを取っておいて下さい。


 WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。

当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。

詳細はWordPressヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク