Materiapollo カスタマイズのツボ

色のカスタマイズ

Materialize が用意しているカラーチャートからクラスを指定して、背景や文字の色を設定することもできます。
【 Color 】

背景色を指定したい場合は、上の図の色の場合は ~~class="light-green accent-4"~~ というように記述すればOKです。

文字の色を指定したい場合は、上の図だと、~~class="light-green-text text-accent-4"~~ というようにクラスを追加します。

　ただ、このやり方だと、hover 時も同じ色のままで変化しなくなってしまうので、マウスオーバー等で色を変化させたい場合には、あまり向かないかもしれません。

要素の横幅のレスポンシブな指定

　~~<div class="row">…</div>~~で囲んだその内部の要素 (子要素) のクラスに ~~"col s☆"~~ (☆部分には1から12までの自然数が入ります) を指定すれば、その要素の横幅を大まかに設定できます。【 Grid 】

　例えば子要素に ~~col s6~~ と指定すれば、 ~~class="row"~~ を持つ親要素に対して半分の横幅に、 ~~col s3~~ と指定すれば 4分の1の横幅になります。

　上の画像を~~<div class="row">…</div>~~の中にいくつか並べ、ひとつには ~~col s6~~ 、あとの二つには ~~col s3~~ を指定すると以下のようになります。

 code <div class="row">

<img class="col s6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuzwdsqnElvAtpEGwE8sRUN6hGIgX8_ZjC-lNSyQdbJCBIt9gbnzkXuwOgB7HTxdyRIMbOSyjqOoSBD-oKyr6bLVvmuf5HHa8Lkh0KsswBHMjzfoyYTdTdNYaqRcX7AyW1LL-HIOfHXjQ2/s1600/col-s6.png" />
<img class="col s3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji8l-91OPvRj-Azki0pdQUeMWjSCwOGmvypDaEXnj0rra23l3gbLfepeX243-YP25GOB_Ym-tDMIUlj-igECTNMegmFc8EcPiU5OiWXT4K0EF3hNZMlGWP5f16AH-8pexu6Ltv3iB94yYk/s1600/col-s3.png" />
<img class="col s3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji8l-91OPvRj-Azki0pdQUeMWjSCwOGmvypDaEXnj0rra23l3gbLfepeX243-YP25GOB_Ym-tDMIUlj-igECTNMegmFc8EcPiU5OiWXT4K0EF3hNZMlGWP5f16AH-8pexu6Ltv3iB94yYk/s1600/col-s3.png" />

</div>

　タブレットやPCで見るとき、スマートフォンとは異なる横幅の比率にしたい場合は、 m☆ や l☆ といったクラスを追加します (☆部分には1から12までの自然数を入れてください)。m☆ は画面の横幅が 600pxよりも大きい時に、l☆は画面の横幅が 992pxよりも大きい時に適用されます。

先程の画像に今度はそれぞれ ~~col s6 m8 l3~~ 、 ~~col s3 m4 l6~~ 、 ~~col s3 m12 l3~~ を指定してみると、このようになります。

　スマートフォンの画面の場合は左の赤い画像が、タブレットの場合は紫の画像が、PCの場合は真ん中の青い画像が、一番大きく表示されているはずです。

PCでご覧の方は、このページのウィンドウの横幅を狭めてもらえれば分かりやすいと思います。

 code <div class="row">

<img class="col s6 m8 l3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNOlHcVhL9mzCXIVgK2vC6s_3t7Bfjhb_m4JMbtfRD1bpcF27U9CoBVhur_s7XOgE5C4McnPgqPQ1Fd5VAcNTrL7re1eFt07YGR45llBoPQT9Ogmy32OOuSUAZ_Y7OSwKbigva6d7RkHPZ/s1600/col+s6+m8+l3.png" style="margin-bottom:1.5rem;" />
<img class="col s3 m4 l6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGgHV2vjKe856FPBLmI0UFyhow9ZHeRXKLZd-PgyUE3X8Yh9F-ESpaFD7U2migIliPYfbUFn0u0VVjhzxUUiTBos55_3_0ZXieJScgzNh36UiuKM6LsdabjZxfCHVKoIIh5LwmYajUVUz5/s1600/col+s3+m4+l6.png" />
<img class="col s3 m12 l3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp2m02tIl9nA62vmLzYQIB-B-lw2h-jXpvUNe8g0HEjF4tavLi4PVBORTQbnKN2TKqYirryCK1iY0UflO0oI2pGg24WrXdeUjRZ_PhPHd5LCnCotvHcJOI_8EphG-h7s4IKtcuET4ogMBC/s1600/col+s3+m12+l3.png"/>

</div>

Materializeで使える機能について

Materialize の一部の機能は、JavaScript での初期化を行わないと使えません。

Blogger テンプレートのxml ファイルもしくは、記事やページの html 部分に以下のように記述します。

 code <script type='text/javascript'>
//<![CDATA[

$(document).ready(function(){
    //この文の直下に、Materialize 公式ページの JavaScript の各項目にある Initialization コードを入れてください

  });

//]]>
</script>

・例えば... Tooltips を使う場合

マウスを乗せるかタップをしてね！

 code <!--Initialization コード-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $('.tooltipped').tooltip({delay: 50});
  });
//]]>
</script>
<!--Initialization コードここまで-->


<a class="btn tooltipped" data-position="top" data-delay="50" data-tooltip="Tooltip! 長い文章はこのように表示されます... 長い文章はこのように表示されます... 長い文章はこのように表示されます...">マウスを乗せるかタップをしてね！</a>

・例えば... Full Width Slider を使う場合

button

一つ目のパネルです

一つ目のパネルの文章です。

二つ目のパネルです

二つ目のパネルの文章です。

三つ目のパネルです

三つ目が通ります。

四つ目のパネルです

さあ、始めましょう！

 code <!--Initialization コード-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
   $('.carousel.carousel-slider').carousel({fullWidth: true});
});
//]]>
</script>
<!--Initialization コードここまで-->


<div class="carousel carousel-slider center" data-indicators="true">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">button</a>
    </div>
    <div class="carousel-item indigo lighten-1 white-text" href="#one!">
      <h2>一つ目のパネルです</h2>
      <p class="white-text">一つ目のパネルの文章です。</p>
    </div>
    <div class="carousel-item teal lighten-1 white-text" href="#two!">
      <h2>二つ目のパネルです</h2>
      <p class="white-text">二つ目のパネルの文章です。</p>
    </div>
    <div class="carousel-item brown lighten-1 white-text" href="#three!">
      <h2>三つ目のパネルです</h2>
      <p class="white-text">三つ目が通ります。</p>
    </div>
    <div class="carousel-item green lighten-1 white-text" href="#four!">
      <h2>四つ目のパネルです</h2>
      <p class="white-text">さあ、始めましょう！</p>
    </div>
</div>
<style>.carousel-slider h2{padding: 1rem 0; color: #fff;}</style>

記事中のh1-h6タグから目次を生成

　記事中の h1-h6の見出しから目次を自動生成できます。個別の投稿記事が表示されるとき、目次を生成したい箇所に、以下のコードを一度だけ入れてください。

 code <div id="toc"></div>

一例ですが、記事中にCard型で表示させたいときは、

 code <div id="toc" style="float: none;" class="card col s12 m10 offset-m1"></div>

このようにしても良いかも。

上のような目次が生成されます。

要素の影の調節

　クラスに ~~z-depth-★~~ (★には0, 1, 2, 3, 4, 5 のいずれかを入れてください) を指定します。 z-depth-0 は影なし、数値が大きくなるほど影が広がります。

　Materialize のカードやボタンにはデフォルトだと影がつきますが、クラスに~~z-depth-0~~を追加することで影を消すことができます。

z-depth-0

z-depth-1

z-depth-2

z-depth-3

z-depth-4

z-depth-5

April 27, 2018