マテリアル

テーマ

【無料wordpressテーマ】マテリアルの紹介と使い方

更新日:

今回紹介する無料のテーマはNobuoさんが作った『マテリアル』

かゆい所に手が届くような多機能テーマです。

シンプルにして多機能なので非常に使いやすく、マテリアルデザインを採用してありUIも◎。

最初から必要な機能がそろっていて余計なプラグインを入れなくてよいので、動作がもっさりしにくいです。

さらにあったらいいなとなるプラグインとも連携が取れているので、初めてwordpressを扱う人にも優しいテーマです。

このマテリアルと同じ制作者のノブオさんが作ったマテリアル2となるテーマが公開されているのでそちらも要チェックです。

詳しくは→http://wp-material2.net/material2-1-0/

そもそもマテリアルデザインとは?

フラットデザインと似ていて、平面的なデザインとなっておりますが、マテリアルデザインはZ軸の概念をとりいれており、エレメントが重なっているデザインをイメージしてください。material

NEVERまとめ(Googleマテリアルデザインとフラットデザインは結局何が違うの?)より

重なり合うことでできる影、小さく濃い影であったり、大きく淡い影があり、真上から見た時にそのエレメントとエレメントの位置関係が分かるようなデザインです。

そして一つのエレメントが立体的な物体ではなく髪のような平面的な物体で構成されています。ですので図のように少し髪が浮遊したような表現で影が付きます。

パッと見でマテリアルデザインかフラットデザインか見分けがつきにくいこともあると思いますが、キレイに見れればいいと思うのでそんなに気にせずテーマを使いましょう。

無料のテーマ「マテリアル」

マテリアル

冒頭に書いたように、シンプルかつ多機能ですのでムダなプラグインが省けるメリットがあります。またアドセンスに関しても登録さえしておけば適所に自動的に配置され収益化しやすいように工夫されています。

本家のページも見てみてください。

 DEMO & ダウンロード

マテリアルの特徴

標準機能

  1. SEO対策
  2. レスポンシブデザイン
  3. パンくずリスト
  4. ページネーション
  5. OGP自動出力
  6. Twitterカードの自動出力
  7. シェアボタンの設置
  8. フォローボタンの設置

1.SEO対策

ブログやホームページを運営するうえで必須事項。これが最初から上手に構築されているので、初めての人でも困ることはないでしょう。

2.レスポンシブデザイン

レスポンシブ

現在スマートフォンの普及により、モバイルサイズ対応のサイト表示が求められております。探せばテーマは山のようにありますが、キレイに各ディスプレイサイズに対応してくれるものはありがたいです。

3.パンくずリスト

パンくずリスト

現在のページがどこの階層にあるのかを分かりやすく表示するもの。プラグインで表示させるものもありますが、マテリアルには標準で入っているので必要ありません。

4.ページネーション

マテリアル ページネーション

○ページ目の位置情報です。情報量が増えるとページも増えますのでページ送りにも使えて便利です。

5.OGP自動出力

Open Graph ProtcolはFacebookなどのSNSでシェアされた際にそのページのタイトル・概要・画像・URLなどがシェア先に正しく表示されるためのmeta情報です。

OGP自動出力

 

6.Twitterカードの自動出力

webページからTwitterでツイートしたときにそのページ情報を出力する機能です。

Twitterカード自動出力

7.シェアボタンの設置

マテリアル シェアボタン

本文の上部と下部に配置され、シェアされやすいようななっております。

8.フォローボタンの設置

マテリアル フォローボタン マテリアル フォローボタン

このように管理人(サイト)をフォローすることができるボタンが設置されます。

独自の機能

  1. カテゴリーごとに記事を露出
  2. アドセンス広告の自動最適化
  3. テーマカスタマイザー
  4. SNS Count Cacheとの連携
  5. WordPress Popular Postとの連携
  6. LINE@対応
  7. タブレットサイズにも対応のレスポンシブ
  8. マテリアル風デザイン

1.カテゴリーごとに記事を露出

マテリアル カテゴリーごとに記事を露出

トップページや各記事の下にカテゴリーで分けられた最新記事が表示されます。これによりユーザーの周回性を高めます。

2.アドセンス広告の自動最適化

マテリアル アドセンス広告の自動最適化

テーマカスタマイザーからアドセンスの設定ができます。ビッグバナー・レクタングルなどにアドセンスコードをあらかじめ入れておくことにより、収益性の高い位置に広告がおかれます。

トップページは最新記事の上・カテゴリーごとの露出の間、投稿ページでは最初のh2タグの上・記事本文の下、共通ではサイドバー下部の計3ヵ所に設置されます。もちろんレスポンシブデザインになっておりますので広告のサイズも自動的に変わり、余計な手間をかけなくてもよくなっております。

3.テーマカスタマイザー

ブログタイトルとキャッチフレーズ

マテリアル ブログタイトル

ブログのタイトルとその下のキャッチフレーズの変更ができます。キャッチフレーズは表示・非表示を切り替えることができます。

カラーデザインの変更

変更できるのは背景色・メインカラー・サブカラーです。

実際の変化を見ながら変更できるので、気に入った色で調整してください。

ヘッダー画像

何も設定しなければタイトルはテキスト表示ですが、画像を入れることができます。

マテリアルの推奨はPNGで背景色を透明にすることだそうで、テーマの背景が活かせるからだそうです。

ナビゲーションメニュー

マテリアル ナビゲーション

グローバルナビゲーションを設定できます。

SNS設定

Twitter・Facebook・LINE@を設定しておくことでフォローボタンを置くことができます。

各ボタンの表示・非表示も選択できるので必要なものを設定してください。

アドセンス広告の設定
  • ビッグバナー(728*90)
  • レクタングル(330*280)
  • ラージスカイスクレイパー(300*600)
  • レスポンシブ

上記の4種を設定しておけば自動的に最適な配置にしてくれます。

アナリティクスの設定

アナリティクスコードを入力しておけば自動的にbodyタグ内に出力されるので、phpなど難しいものに触れなくても大丈夫です。

プロフィール欄の編集
  • プロフィール欄のタイトル
  • 名前
  • プロフィール画像
  • 自己紹介
  • プロフィールページがあればURL
  • Twitter・Google+のフォローボタンの設置
  • Facebook Like Boxの設置

以上が編集可能です。ブログの運営で必要なところだけ編集してください。

ロゴ・ファビコンの設定
  • ロゴ画像
  • ファビコン画像
  • iPhone用アイコン画像

の3つを登録・設定できます。

UI設定

マテリアル UI設定

グローバルナビゲーションを画面をスクロールした後も一番上に残しておくようにするかを選べます。

もう一つはページ下部にいた時に、最上部まで一気にスクロールしていくボタンとホームボタンを表示するかを選べます。

表示記事数の設定

マテリアル 表示記事数の設定

トップページに出てくる新着記事数を3件・6件・9件・12件・15件の中から選べます。

カテゴリーごとの表示数は1~10件まで。関連記事の表示数は3~10件まで選べるようになっているのでお好きなようにカスタマイズしましょう。

関連記事は同タグ・同カテゴリーの中からランダムに表示されるようです。

アイキャッチの表示設定

 マテリアル アイキャッチ設定

サムネイルの高さは新着表示のアイキャッチの最大高さの設定になります。

マテリアル アイキャッチ設定

タイトル下・本文直前にアイキャッチで使用している画像を表示するかどうかの設定ができます。

4.SNS Count Cacheとの連携

マテリアル SNS Count cache

ソーシャルボタンのシェア数を自動的に収集してDBに貯蓄してくれるプラグインです。

「SNS Count Cache」とプラグインの検索でインストールしたらあとは有効化するだけで以下のように表示されるようになります。

マテリアル SNS Count cacheマテリアル SNS Count cache

5.WordPress Popular Postとの連携

人気記事を集計してアクセスランキングを表示してくれるプラグインです。

マテリアルではサイドバーにウィジェットとして設置すれば自動的にcssが当たるようにできているらしいですが、一つだけ注意点があります。

ウィジェット管理画面でpost settingができるのですが、ここでサムネイル画像サイズの設定だけは自身でお願いします。

マテリアル本家のサイトでは画像サイズは70*70で設定しているようですので参考にしてみてください。

6.LINE@対応

読者にLINE@を登録してもらうことでメールマガジンのように直接記事の配信が可能となります。

また必要とあれば普通のLINEのトークのようにやり取りができるので登録してもらえると大変便利な機能であると思います。

7.タブレットサイズにも対応のレスポンシブ

レスポンシブパソコン・スマートフォンなど様々なサイズのディスプレイサイズがありますがマテリアルではタブレットのディスプレイサイズにも対応しています。

6つのブレークポイントがあるので各サイズの縦・横であっても最適な表示になるのでSEO対策であるモバイルフレンドリーにも良いと思われます。

8.マテリアル風デザイン

冒頭で書いたようにシンプルなデザインですので、使っている方も飽きにくいでしょうし、カラーの変更も簡単なのでぜひ使い続けていただければと思います。

 

最後に

まるで自分が作成したテーマのように一生懸命紹介してしまいました。

なかなか凝った作りになっていてSEO対策的にも効果の高めなテーマになっておりますので、wordpressでブログをやり始めたような初心者の方には特におすすめしておきます。

 

 DEMO & ダウンロード

 

-テーマ
-, , ,

Copyright© 美容師のためのタメになるWEB , 2017 All Rights Reserved.