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ヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)
スポンサードリンク
・ツイート
Tweet
・Google+1
・夜中にも出現します(-_-)zzz
Follow @rabbitshimako
・メルマガは3時のおやつ時
フィード登録