予告:Raindrops1.331 Google Material icons 使い方

Raindrops1.331では、Google Material icons を簡単に使うことが出来るようになります。

explore Google Material icons とは

Material icons で公開されているアイコンフォントです まずは、お試しで、このアイコンを使ってみましょう。    

WEBページでアイコンをクリックすると

material-icon-popup

ページの下部に、ダイアログボックスが表示されます。

explore Step1について

Raindropsの場合、投稿本文に以下のコードを記述してください。

以上で、アイコンフォントをロードする準備は、終了です。

explore Step2について

好きなアイコンのコードをコピーして、投稿本文に貼り付けると、アイコンが表示されます。

次に、このアイコンを、Raindropsテーマの組み込み済みのCSSクラスと組み合わせて、実用的な表現方法を考えてみたいと思います。

Raindrops 1.331で追加されたステータスクラスと組み合わせてみます

3d_rotation 3d_rotationexplore explorenew_releases new_releases

rd-info row,rd-alert,rd-notice クラスを組み合わせた表現です。

explore Raindrops 1.331で追加されたステータスクラスと組み合わせてみます さらに、枠線クラスを追加してみます。

3d_rotation 3d_rotation

explore explore

new_releases new_releases

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.

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

f26は、フォントサイズをコントロールするクラスです。 以上で、コンテンツにどのような効果を与えるか、大体の事は理解していただけるものと思います。 なを、実際にサイトで運用する場合には、冒頭の を削除していただき functions.phpに以下のようにコードを追加していただくと良いと考えています。 start add material_icons から、end add material_icons の範囲をfunctions.phpの最初に追加してください。 Note:start add material_icons 以下のコードが、間違っていましたので修正しました

コメントは受け付けていません