公開日：5/12/2020
    シェア：

    Bloggerのテーマを自作する②CSSを導入する

    　

    この記事は更新されていますので、下のリンクをご確認ください

    かっこいいホームページを作る上で、CSS（スタイルシート）は大切ですね。
    そこで「空白のテーマ」にCSSを導入します。

    でも、CSSを全て自分で作るのは大変。しかも、SEOの観点からも、モバイル端末（スマートフォンなど）にも対応させないといけせん。そこで役に立つのがCSSフレームワークです。有名なものだと「BootCamp」があります。

    もちろん、BootCampを導入しても良いのですが、せっかくGoogleのサービス「Blogger」を使っているので、GoogleのサービスっぽいデザインのCSSフレームワーク「Materialize」を導入します。

    公式サイト：https://materializecss.com/

    では、さっそく「Materialize」を導入します。

    CSSはCDN経由で使う


    CDN（コンテンツデリバリネットワーク）とは、コンテンツをネット経由で配信するために最適化されたネットワークのことで、本来は同じサーバー上に置かなければいけないCSSのファイルをネット上で呼び出して使うことができます。
    「Materialize」をCDNで呼び出すには
    【コード】
     <!-- Compiled and minified CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"></link>
     <!-- Compiled and minified JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    を<haed>~<hard>の中に入れてあげればOK。
    実際にコードの中に入れると次のようになります。
    【ここまでのコード】
    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
	<head>
		<title><data:blog.pageTitle/></title>
		<b:skin></b:skin>
		<!-- Compiled and minified CSS -->
    	        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"></link>
   		<!-- Compiled and minified JavaScript -->
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
	</head>
	<body>
      <b:section id='main'>
        <b:widget type='Header' id='Header0'>
          <b:includable id='title'>
            <h1><data:blog.pageTitle/>
            </h1>
          </b:includable>
        </b:widget>
      </b:section>
	</body>
</html>
    通常であれば「</link>」は必要ないのですが、Bloggerの場合ではエラーになるため入れておきます。では、プレビューを確認してみましょう。
    スタイルシートを適用する前と、見比べてみましょう。フォントが変わったのを確認できると思います。
    スタイルシート適用前

    「Materialize」では、他にも、かっこいいボタンやレイアウト枠などを準備しています。まずは公式サイトを見て、イメージにあったデザインを探してみましょう。見ているだけでも結構楽しめます！