今回紹介する無料のテーマはNobuoさんが作った『マテリアル』
かゆい所に手が届くような多機能テーマです。
シンプルにして多機能なので非常に使いやすく、マテリアルデザインを採用してありUIも◎。
最初から必要な機能がそろっていて余計なプラグインを入れなくてよいので、動作がもっさりしにくいです。
さらにあったらいいなとなるプラグインとも連携が取れているので、初めてwordpressを扱う人にも優しいテーマです。
[sp_note note_color="#f9f9f9" text_color="#000000" radius="2"]
このマテリアルと同じ制作者のノブオさんが作ったマテリアル２となるテーマが公開されているのでそちらも要チェックです。
詳しくは→http://wp-material2.net/material2-1-0/
[/sp_note]
スポンサーリンク
そもそもマテリアルデザインとは？
フラットデザインと似ていて、平面的なデザインとなっておりますが、マテリアルデザインはZ軸の概念をとりいれており、エレメントが重なっているデザインをイメージしてください。
NEVERまとめ（Googleマテリアルデザインとフラットデザインは結局何が違うの？）より
重なり合うことでできる影、小さく濃い影であったり、大きく淡い影があり、真上から見た時にそのエレメントとエレメントの位置関係が分かるようなデザインです。
そして一つのエレメントが立体的な物体ではなく髪のような平面的な物体で構成されています。ですので図のように少し髪が浮遊したような表現で影が付きます。
パッと見でマテリアルデザインかフラットデザインか見分けがつきにくいこともあると思いますが、キレイに見れればいいと思うのでそんなに気にせずテーマを使いましょう。
無料のテーマ「マテリアル」
冒頭に書いたように、シンプルかつ多機能ですのでムダなプラグインが省けるメリットがあります。またアドセンスに関しても登録さえしておけば適所に自動的に配置され収益化しやすいように工夫されています。
本家のページも見てみてください。
[sp_button url="http://wp-material.net/about-material/" target="blank" style="flat" background="#ff3338" color="#ffffff" size="5" radius="0" icon="icon: external-link" text_shadow="0px 0px 0px #000000"] DEMO ＆ ダウンロード[/sp_button]
マテリアルの特徴
標準機能
- SEO対策
- レスポンシブデザイン
- パンくずリスト
- ページネーション
- OGP自動出力
- Twitterカードの自動出力
- シェアボタンの設置
- フォローボタンの設置
１．SEO対策
ブログやホームページを運営するうえで必須事項。これが最初から上手に構築されているので、初めての人でも困ることはないでしょう。
２．レスポンシブデザイン
現在スマートフォンの普及により、モバイルサイズ対応のサイト表示が求められております。探せばテーマは山のようにありますが、キレイに各ディスプレイサイズに対応してくれるものはありがたいです。
３．パンくずリスト
現在のページがどこの階層にあるのかを分かりやすく表示するもの。プラグインで表示させるものもありますが、マテリアルには標準で入っているので必要ありません。
４．ページネーション
○ページ目の位置情報です。情報量が増えるとページも増えますのでページ送りにも使えて便利です。
５．OGP自動出力
Open Graph ProtcolはFacebookなどのSNSでシェアされた際にそのページのタイトル・概要・画像・URLなどがシェア先に正しく表示されるためのmeta情報です。
６．Twitterカードの自動出力
webページからTwitterでツイートしたときにそのページ情報を出力する機能です。
７．シェアボタンの設置
本文の上部と下部に配置され、シェアされやすいようななっております。
８．フォローボタンの設置
このように管理人（サイト）をフォローすることができるボタンが設置されます。
独自の機能
- カテゴリーごとに記事を露出
- アドセンス広告の自動最適化
- テーマカスタマイザー
- SNS Count Cacheとの連携
- WordPress Popular Postとの連携
- LINE@対応
- タブレットサイズにも対応のレスポンシブ
- マテリアル風デザイン
１．カテゴリーごとに記事を露出
トップページや各記事の下にカテゴリーで分けられた最新記事が表示されます。これによりユーザーの周回性を高めます。
２．アドセンス広告の自動最適化
テーマカスタマイザーからアドセンスの設定ができます。ビッグバナー・レクタングルなどにアドセンスコードをあらかじめ入れておくことにより、収益性の高い位置に広告がおかれます。
トップページは最新記事の上・カテゴリーごとの露出の間、投稿ページでは最初のh2タグの上・記事本文の下、共通ではサイドバー下部の計３ヵ所に設置されます。もちろんレスポンシブデザインになっておりますので広告のサイズも自動的に変わり、余計な手間をかけなくてもよくなっております。
３．テーマカスタマイザー
ブログタイトルとキャッチフレーズ
ブログのタイトルとその下のキャッチフレーズの変更ができます。キャッチフレーズは表示・非表示を切り替えることができます。
カラーデザインの変更
変更できるのは背景色・メインカラー・サブカラーです。
実際の変化を見ながら変更できるので、気に入った色で調整してください。
ヘッダー画像
何も設定しなければタイトルはテキスト表示ですが、画像を入れることができます。
マテリアルの推奨はPNGで背景色を透明にすることだそうで、テーマの背景が活かせるからだそうです。
ナビゲーションメニュー
グローバルナビゲーションを設定できます。
SNS設定
Twitter・Facebook・LINE@を設定しておくことでフォローボタンを置くことができます。
各ボタンの表示・非表示も選択できるので必要なものを設定してください。
アドセンス広告の設定
- ビッグバナー（７２８*９０）
- レクタングル（３３０*２８０）
- ラージスカイスクレイパー（３００*６００）
- レスポンシブ
上記の４種を設定しておけば自動的に最適な配置にしてくれます。
アナリティクスの設定
アナリティクスコードを入力しておけば自動的にbodyタグ内に出力されるので、phpなど難しいものに触れなくても大丈夫です。
プロフィール欄の編集
- プロフィール欄のタイトル
- 名前
- プロフィール画像
- 自己紹介
- プロフィールページがあればURL
- Twitter・Google+のフォローボタンの設置
- Facebook Like Boxの設置
以上が編集可能です。ブログの運営で必要なところだけ編集してください。
ロゴ・ファビコンの設定
- ロゴ画像
- ファビコン画像
- iPhone用アイコン画像
の３つを登録・設定できます。
UI設定
グローバルナビゲーションを画面をスクロールした後も一番上に残しておくようにするかを選べます。
もう一つはページ下部にいた時に、最上部まで一気にスクロールしていくボタンとホームボタンを表示するかを選べます。
表示記事数の設定
トップページに出てくる新着記事数を３件・６件・９件・１２件・１５件の中から選べます。
カテゴリーごとの表示数は１～１０件まで。関連記事の表示数は３～１０件まで選べるようになっているのでお好きなようにカスタマイズしましょう。
関連記事は同タグ・同カテゴリーの中からランダムに表示されるようです。
アイキャッチの表示設定
サムネイルの高さは新着表示のアイキャッチの最大高さの設定になります。
タイトル下・本文直前にアイキャッチで使用している画像を表示するかどうかの設定ができます。
４．SNS Count Cacheとの連携
ソーシャルボタンのシェア数を自動的に収集してDBに貯蓄してくれるプラグインです。
「SNS Count Cache」とプラグインの検索でインストールしたらあとは有効化するだけで以下のように表示されるようになります。
５．WordPress Popular Postとの連携
人気記事を集計してアクセスランキングを表示してくれるプラグインです。
マテリアルではサイドバーにウィジェットとして設置すれば自動的にcssが当たるようにできているらしいですが、一つだけ注意点があります。
ウィジェット管理画面でpost settingができるのですが、ここでサムネイル画像サイズの設定だけは自身でお願いします。
マテリアル本家のサイトでは画像サイズは７０*７０で設定しているようですので参考にしてみてください。
６．LINE@対応
読者にLINE@を登録してもらうことでメールマガジンのように直接記事の配信が可能となります。
また必要とあれば普通のLINEのトークのようにやり取りができるので登録してもらえると大変便利な機能であると思います。
７．タブレットサイズにも対応のレスポンシブ
パソコン・スマートフォンなど様々なサイズのディスプレイサイズがありますがマテリアルではタブレットのディスプレイサイズにも対応しています。
６つのブレークポイントがあるので各サイズの縦・横であっても最適な表示になるのでSEO対策であるモバイルフレンドリーにも良いと思われます。
８．マテリアル風デザイン
冒頭で書いたようにシンプルなデザインですので、使っている方も飽きにくいでしょうし、カラーの変更も簡単なのでぜひ使い続けていただければと思います。
スポンサーリンク
最後に
まるで自分が作成したテーマのように一生懸命紹介してしまいました。
なかなか凝った作りになっていてSEO対策的にも効果の高めなテーマになっておりますので、wordpressでブログをやり始めたような初心者の方には特におすすめしておきます。
[sp_button url="http://wp-material.net/about-material/" target="blank" style="flat" background="#ff3338" color="#ffffff" size="5" radius="0" icon="icon: external-link" text_shadow="0px 0px 0px #000000"] DEMO ＆ ダウンロード[/sp_button]
おすすめ：最強のWordPressテーマ「AFFINGER」の特徴と使い方