Raindrops1.331では、Google Material icons を簡単に使うことが出来るようになります。
explore Google Material icons とは
Material icons で公開されているアイコンフォントです まずは、お試しで、このアイコンを使ってみましょう。
WEBページでアイコンをクリックすると
ページの下部に、ダイアログボックスが表示されます。
explore Step1について
Raindropsの場合、投稿本文に以下のコードを記述してください。
<span class="google-font-material-icons"></span>
以上で、アイコンフォントをロードする準備は、終了です。
explore Step2について
<i class="material-icons">android</i>
好きなアイコンのコードをコピーして、投稿本文に貼り付けると、アイコンが表示されます。
次に、このアイコンを、Raindropsテーマの組み込み済みのCSSクラスと組み合わせて、実用的な表現方法を考えてみたいと思います。
Raindrops 1.331で追加されたステータスクラスと組み合わせてみます
3d_rotation 3d_rotationexplore explorenew_releases new_releases
<i class="material-icons rd-info row">3d_rotation </i>3d_rotation
<i class="material-icons rd-alert">explore </i>explore
<i class="material-icons red">new_releases </i>new_releases
rd-info row,rd-alert,rd-notice クラスを組み合わせた表現です。
explore Raindrops 1.331で追加されたステータスクラスと組み合わせてみます さらに、枠線クラスを追加してみます。
3d_rotation 3d_rotation
explore explore
new_releases new_releases
<p class="rd-info row f26"><i class="material-icons">3d_rotation </i>3d_rotation</p>
<p class="rd-alert f26"><i class="material-icons rd-alert">explore </i>explore</p>
<p class="rd-notice f26 corner"><i class="material-icons red">new_releases </i>new_releases</p>
rd-border, corner クラスと組み合わせてみました。
explore ダイアログ風のボックスを組み合わせてみましょう
explore hello world
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="gradient-2">
<h3 class="gradient-4 block pad-m" style="margin: 0;"><i class="material-icons rd-alert">explore </i>hello world</h3>
<div class="content" style="margin: 1em;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
explore gradient クラス color クラスと組み合わせた表現も可能です
以下はcolorクラスの例です。gradient クラスは、ソースを貼り付けてテストしてみてください。
3d_rotation 3d_rotation color-4
3d_rotation 3d_rotation color-3
3d_rotation 3d_rotation color-2
3d_rotation 3d_rotation color-1
3d_rotation 3d_rotation color1
3d_rotation 3d_rotation color2
3d_rotation 3d_rotation color3
3d_rotation 3d_rotation color4
new_releases new_releases
<p class="rd-info row f26 "><i class="material-icons gradient-4 pad-m">3d_rotation </i> 3d_rotation gradient-4</p>
<p class="rd-info row f26 "><i class="material-icons gradient-3 pad-m">3d_rotation </i> 3d_rotation gradient-3</p>
<p class="rd-info row f26 "><i class="material-icons gradient-2 pad-m">3d_rotation </i> 3d_rotation gradient-2</p>
<p class="rd-info row f26 "><i class="material-icons gradient-1 pad-m">3d_rotation </i> 3d_rotation gradient-1</p>
<p class="rd-info row f26 "><i class="material-icons gradient1 pad-m">3d_rotation </i> 3d_rotation gradient1</p>
<p class="rd-info row f26 "><i class="material-icons gradient2 pad-m">3d_rotation </i> 3d_rotation gradient2</p>
<p class="rd-info row f26 "><i class="material-icons gradient3 pad-m">3d_rotation </i> 3d_rotation gradient3</p>
<p class="rd-info row f26 "><i class="material-icons gradient4 pad-m">3d_rotation </i> 3d_rotation gradient4</p>
&nbsp;
<p class="rd-info row f26 "><i class="material-icons color-4 pad-m">3d_rotation </i> 3d_rotation color-4</p>
<p class="rd-info row f26 "><i class="material-icons color-3 pad-m">3d_rotation </i> 3d_rotation color-3</p>
<p class="rd-info row f26 "><i class="material-icons color-2 pad-m">3d_rotation </i> 3d_rotation color-2</p>
<p class="rd-info row f26 "><i class="material-icons color-1 pad-m">3d_rotation </i> 3d_rotation color-1</p>
<p class="rd-info row f26 "><i class="material-icons color1 pad-m">3d_rotation </i> 3d_rotation color1</p>
<p class="rd-info row f26 "><i class="material-icons color2 pad-m">3d_rotation </i> 3d_rotation color2</p>
<p class="rd-info row f26 "><i class="material-icons color3 pad-m">3d_rotation </i> 3d_rotation color3</p>
<p class="rd-info row f26 "><i class="material-icons color4 pad-m">3d_rotation </i> 3d_rotation color4</p>
<p class="rd-info row f26 "><i class="material-icons red">new_releases </i>new_releases</p>
f26は、フォントサイズをコントロールするクラスです。
以上で、コンテンツにどのような効果を与えるか、大体の事は理解していただけるものと思います。
なを、実際にサイトで運用する場合には、冒頭の
<span class="google-font-material-icons"></span>
を削除していただき
functions.phpに以下のようにコードを追加していただくと良いと考えています。
<?php
//start add material_icons
add_action( 'after_setup_theme', 'material_icons_setup' );
function material_icons_setup() {
add_action( 'wp_enqueue_scripts', 'register_material_icons' );
}
function register_material_icons() {
global $raindrops_current_data_version;
$font_url = 'https://fonts.googleapis.com/icon?family=Material+Icons';
wp_register_style( 'material_icons', $font_url, array(), $raindrops_current_data_version, 'all' );
wp_enqueue_style( 'material_icons' );
}
//end add material_icons
/**
*
*
* @package Raindrops
* @since Raindrops 0.1
*/
if ( !defined( 'ABSPATH' ) ) {
exit;
}
start add material_icons から、end add material_icons の範囲をfunctions.phpの最初に追加してください。
Note:start add material_icons 以下のコードが、間違っていましたので修正しました
