スタイルシートの記述位置について
Bloggerテンプレートでは<head></head>の中にある<b:skin> </b:skin>内にCSSを記述するのが一般的だと思うのですが、最近のブラウザでは<body>内に記述してもきちんとスタイルが適用されるようですので、xmlテンプレートファイルの<body>内や、Bloggerの記事編集画面にCSSを書いてしまっても、スタイルがちゃんと反映されています (今後の仕様変更で使えなくなってしまうリスクも万一にないとは言えませんが...)。ですから、そこまでCSSの記述位置について厳密に考える必要はないかも知れません。
MateriapolloではMaterializeとjQueryを外部リンクから読み込むのではなく<head></head>内に直接ベタ貼りしているため、コードの視認性が大変悪くなってしまっていますが、<b:skin> </b:skin>はテンプレートXMLの<head>タグの中、materialize.cssとjquery.jsのコードの長い塊のあとにあります。
また、materialize や jQuery を直接ベタ貼りしたのが ｱﾀﾞとなりコードが長すぎるためなのか、BloggerのテンプレートHTMLカスタマイズ画面では、ブラウザのページ内文字列検索を使っても入力したCSSのクラス名などに飛んでくれないことがありました。別のページでも書きましたが、このテンプレートをカスタマイズするときは、コード編集用のテキストエディタを使って編集し、その後ブラウザに戻ってから、Blogger のメニューの テーマ ＞ 右上の バックアップ/復元 からその XMLファイルをアップロードするというやり方がおすすめです。
追記：直接ベタ貼りをやめてテンプレートをすっきりとさせたい場合は、外部から Materialize の CSS ファイルなどを読み込む方法もあります。
ChromeやFirefoxなどのブラウザで、Windowsをお使いの場合はF12キーを押すと表示される「開発者ツール」でElements (インスペクター) から確認すると分かりやすいです。
開発者ツールでは現在開いているページのコードを見ながら、デザイン等を試しに追加・変更・削除することが可能なので、納得のいく色やフォントサイズなどを少しずつ探っていくこともできます。また、要素に指定されているクラス名や、CSSのセレクタ(適用先)が分かるので、そのクラス名やセレクタの文字列をコピーしてテンプレートのXML内で文字列検索をかけることで、テンプレート内でカスタマイズしようとしている箇所が見つけやすくなり、とても便利です。
開発者ツールの基本的な使い方については、Chromeをお使いの場合には、こちらのサイト
が参考になると思います。
スムーススクロールと他の機能との衝突を回避
Materialize の Modalsや Tabsといった機能では aタグにhref="#○○"などとidを指定して使うため、そのままだと、ページ上のリンクへと移動するスムーススクロールの機能と衝突してしまい、Materialize の方の機能が上手く働きません。
そのためaタグにhref="#○○"のようにリンク先を指定する必要があり、スムーススクロールを作動させたくない場合には、そのaタグのclassにno-scrollを追加してください。
例えば、Modalsでは...
<!--Initialization コード-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.modal').modal();
});
//]]>
</script>
<!--Initialization コードここまで-->
<!-- Modal Trigger (直下のaタグの classに no-scroll を追加)-->
<a class="waves-effect waves-light btn modal-trigger no-scroll" href="#modal777">ModalのDEMO</a>
<!-- Modal Structure -->
<div id="modal777" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>ここにコンテンツが入ります。</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Disagree</a>
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
</div>
</div>例えば、Tabsでは...
<!--Initialization コード-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('ul.tabs').tabs();
});
//]]>
</script>
<!--Initialization コードここまで-->
<div class="row">
<div class="col s12">
<ul class="tabs">
<!-- aタグのそれぞれの classに no-scroll を追加-->
<li class="tab col s3 yellow"><a class="no-scroll" href="#test1">Test 1</a></li>
<li class="tab col s3 yellow"><a class="no-scroll" href="#test2">Test 2</a></li>
<li class="tab col s3 yellow"><a class="no-scroll" href="#test3">Test 3</a></li>
<li class="tab col s3 yellow"><a class="no-scroll" href="#test4">Test 4</a></li>
</ul>
</div>
<div id="test1" class="col s12">Test 1の内容がここに入ります。test1-4のaタグのトリガーそれぞれにno-scrollクラスを追加しています。</div>
<div id="test2" class="col s12">Test 2のコンテンツです。</div>
<div id="test3" class="col s12">OK! 次に進みましょう!</div>
<div id="test4" class="col s12">文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列テスト</div>
</div>
<style>.widget .post-body ul,.collapsible li{margin:0!important; padding:0!important;}
.widget .post-body li{margin-bottom:0 !important;}
</style>Bloggerテンプレートのカスタマイズに参考になりそうなサイト
・BloggerテンプレートのXMLに書かれている<b:○○>タグについて解説されています。
・トップページや、特定のページのみに表示させたい内容がある場合には、Bloggerテンプレート内のみで使うことのできる<b:if>タグが便利です。
(<b:if>を使ってテンプレート上に書き込むのではなく、Bloggerの記事編集画面のHTMLにCSSやJavaScriptを書いて、その記事ページにだけ適用されるコンテンツやスタイルを無理くり設定するという手もあります。あまりおススメしていい方法ではないかも知れませんが...)
Related Posts
