１〜３カラムまでレイアウト自在、ガッツリいじりたい方向け。WP無料テーマ「Exray」

「Exray（エクスレイ）」は１〜３カラムまで簡単にレイアウトを変更することができ、色要素以外にはデザイン性がほぼないシンプルなWordPress無料テーマです。

こういう装飾のないテーマを探していたという方にとっては、あるいはご自身でテーマのカスタマイズをバリバリ行える方には使い勝手の良いテーマでしょう。

レスポンシブWebデザインなのでスマホ、タブレットPCでも表示が最適化されます。シンプル、１〜３カラム、レスポンシブという点で、「Exray」をもとにWordPressのテーマを作るというのも有りだろうと思います。

最近のWEBデザインの流れとして情報をあまり詰め込みすぎない、シンプルにコンテンツを主役にというデザインが主流となってきました。

しかし、そうはいっても３カラムのレイアウトはやっぱり便利です。「情報をどう並べるか？」という視点は大事ですが、情報量の多いブログなんかにはやっぱり３カラムは「良い」と思います。

テーマの使い方そのものはとっても簡単です。ぜひチェックされてみて下さい。

試作サイトを作ってみたのでご参考にどうぞ。ただし、デモサイト用のデータを流しこんだだけでほとんどいじっておりませんので、あくまでご参考までに。

Exray 試作サイト

目次

1. テーマの特徴
2. テーマのデザイン・レイアウト
3. テーマの導入方法・使い方・カスタマイズ

１. テーマの特徴

１）デザイン・仕様 ・・・・・・・・・

• とってもシンプル、カスタマイズしやすいプレーン・デザイン
• モバイル端末対応レスポンシブデザイン：スマホ、タブレットもOK
• 見出しタグの最適化：各ページ毎に最適化！SEO対策に効果的
• 広告スペース：ウィジェットエリアが豊富で、広告掲載用のウィジェット有
• 日本語化ファイル内蔵：テーマをインストール後、すぐに使用可！

２）カスタマイズ・オプションメニュー ・・・・・

• テーマ独自のオプションメニューあり
• ロゴ・アップロード機能：サイトロゴも設置簡単
• メニュー・カスタマイズ機能：トップメニュー、メインメニューの２種類を編集
• ウィジェット・カスタマイズ機能：ウィジェットエリアが多いのでとっても便利
• 独自ウィジェットパーツ：広告掲載用の独自ウィジェットパーツ有り
• カラーオプション：各種カラーを簡単設定
• CSSカスタマイズ：CSS追記メニューあり
• アイキャッチ画像サポート：ブログ一覧ページで表示
• カスタムレイアウト：１〜３カラムまでレイアウト自在
• 全幅（横幅フル）ページ用テンプレート：固定ページから作成可能

３）その他 ・・・・・・・・・・

• 英語サポート：配布元サイトのコメント欄から質問
• テーマ・アップデート：バグ修正、WPアップデート対応、セキュリティ向上に
• WordPress公式サイト配布テーマ：安心です

２. テーマのデザイン・レイアウト

１）トップページのデザイン

テーマ外観、トップページからチェックしていきましょう。

まずヘッダー部分ですが、最上部にトップメニュー、タイトル、画像・広告掲載用のヘッダーウィジェットエリア、メインメニューです。

下におりるとヘッダー下ウィジェットエリア、こちらも画像など掲載するのに良いですね。プラグインを使えばスライドショーにすることなんかもできますね。

■ 参考記事：WordPressで簡単にスライダーを設置するプラグイン「Soliloquy」

レイアウトは１〜３カラムまで変更できますが、デモサイトは３カラムの仕様。左右がサイドバー、真ん中がメインエリアでブログ記事一覧が表示されます。

トップページ下部は、ページナビゲーション、４カラムのフッターウィジェット、クレジット表記、地味にうれしい「トップへ戻る」ためのリンクがあります。

２）ブログ一覧部分のアイキャッチ画像サポート

トップページ、カテゴリページ、アーカイブページで表示されるブログ記事一覧ではアイキャッチ画像が表示されます。正方形に加工されます。

３）投稿ページ / 固定ページのデザイン

投稿ページ、固定ページは共通デザインです。記事下に著者情報が表示されます。テキストはダッシュボードから編集できますが、画像は「Gravatar」、もしくはプラグインなどで設定します。（面倒な方は画像表示をOFFにすることもできます）

４）レスポンシブWebデザイン

レスポンシブ仕様なので、モニター、ブラウザのサイズに合わせて流動的に表示が切り替わります。

３. テーマの導入方法・使い方・カスタマイズ

１）テーマのインストール

まずはテーマのインストールです。「Exray」はWordPress公式サイトで配布されているテーマなので導入は簡単です。

1. WordPress ダッシュボードに移動
2. 外観 > テーマ > テーマのインストール > 検索
3. 「exray」と検索すると表示されます
4. 【いますぐインストール】をクリック
5. 【有効化】をクリック

以上でテーマの導入完了、サイトを表示してみます。

２）テーマ全体設定

ダッシュボード > 外観 > Theme Options

次に初期設定として、テーマの全体設定を行います。

上から順にメニューの表示 / 非表示、フッターの右下にある「トップに戻る」ボタン（リンク）の表示 / 非表示、ブログ一覧表示部分で記事の抜粋文のみを表示するか、全文を表示するか、そして最後にレイアウトを設定します。

たとえばレイアウトで、右サイドバーの２カラムを選択すれば簡単にレイアウトが変更されます。

こちらのオプションページには「Custom CSS」というメニューがあります。そちらからCSSを追記することもできます。

３）テーマのカスタマイズ

ダッシュボード > 外観 > カスタマイズ

カスタマイズメニューではプレビュー画面を見ながら、各種のカスタマイズをすることができます。

タイトル（ロゴ）、キャッチフレーズの設定、ヘッダーウィジェットエリアの広告スペース、各種カラー、メニューの表示設定、フロントページの選択が行えます。

 色の設定画面では、７か所編集することができます。プレビュー画面を見ながら変えてみてください。

４）メニューのカスタマイズ

ダッシュボード > ユーザー > あなたのプロフィール

記事下のプロフィールを編集します。

プロフィール画像については「Gravatar」で設定するか、表示そのものをOFFにしてしまいましょう。OFFにする場合は

ダッシュボード > 設定 > ディスカッション設定 > アバターの表示

該当箇所のチェックを外し【変更を保存】ボタンを押せばOKです。

５）メニューのカスタマイズ

ダッシュボード > 外観 > メニュー

トップメニュー、メインメニューを編集します。表示 / 非表示そのものは初期設定「Theme Options」で行います。

６）ウィジェットエリアのカスタマイズ

ダッシュボード > 外観 > ウィジェット

ウィジェットエリアが８か所あります。初期設定で選択したレイアウトに合わせて、左右のサイドバーが必要な方は「Primary（左サイドバー）」「Secondary（右サイドバー）」それぞれ設定します。

ヘッダー下ウィジェットに「テキスト（ウィジェットパーツ）」を挿入し、「Soliloquy」などのプラグインを使えばスライドショーにすることもできますね。

■ 参考記事：WordPressで簡単にスライダーを設置するプラグイン「Soliloquy」

また、「Custom Widget : Image Banner」というウィジェットパーツが用意されています。このパーツを使えば広告（画像バナー）などを簡単に設置することができます。

フッターは４カラム、それぞれ設定しましょう。

さて、WordPress 無料テーマ「Exray」はいかがでしたでしょうか？わたしとしてはこのまま使うというよりも、色々とカスタマイズして使ってみたいテーマだなぁという印象です。

３カラムのWordPressテーマは数が少ない上に、こういったシンプルなものは多くありません。というわけでなかなか重宝されるべきテーマじゃないかなと思います。変な日本語です（笑）

「 無料テーマ × 無料プラグイン 」の組み合わせはとってもパワフルです。他の記事もぜひ参考にされて魅力的なWebサイトを構築されてください。

• Tweet
•