ニュース・マガジン風レイアウトのWordPressテーマ「Magazine」

thumb_magazine

私の参加しているWordPressテーマ制作チーム、Themifyで、新しいテーマ「Magazine」がリリースされました!私はデザインと、コーディングの一部を任せて頂きました。様々なレイアウトに対応しており、BBCのような本格ニュースサイトや、さまざまなカテゴリーを扱っているはてなブックマークのような情報サイトにピッタリのテーマです!

Magazine テーマ

デモ
ダウンロード


英語による解説動画。カスタマイズの流れが紹介されています。

「Magazine」テーマの特徴

メガメニュー

カテゴリーメニューから4つの記事をサムネイル付きで表示することができます。コンテンツ量の多いサイトでは嬉しい機能じゃないでしょうか?

メガメニュー

  1. 外観→メニュー のページで、画面右上の「表示オプション」をクリック
  2. 「詳細メニュー設定を表示」の「CSSクラス」にチェック
  3. 親メニュー(ナビゲーションバーに表示されるメニュー)の設定欄の、追加された「CSSクラス」フィールドに「mega」と入力

メガメニュー

メガメニュー+リスト表示

上記と同じ方法で、親メニューの「CSSクラス」に「columns」と入力すると、メニューの一覧が5カラムで表示できます。

メガメニュー

メニュー名+アイコン

メニュー名のはじめにアイコンをプラスできます。このアイコンはアイコンフォントを使っているので、レティナディスプレイでもクッキリ表示されます。アイコンフォントはFont Awesomeを使っており、「CSSクラス」欄にお好みのアイコンコードを記入すればOK。
例:icon-twitter, icon-heart

menu-icon

ニュース速報

海外のニュースサイトで多数利用されているニュース速報欄も搭載されています。指定したカテゴリーの最新記事がアニメーションと共に表示されますよ。
ダッシュボードの Magazine→設定→テーマ設定→ニュース速報 で、表示したいカテゴリーを選択してください。

ニュース速報

スライドナビゲーション

メニューの数が多いサイトを想定しているので、モバイルデバイスでのメニュー表示に少し悩まされました。。試行錯誤の末、Facebookのアプリのようなスライドするナビゲーションメニューを採用!

スライドナビゲーション

広告スペース

メディア系サイトにはかかせない広告スペースもたっぷり用意しています!外観→ウィジェット の各ウィジェットエリアにテキストウィジェット挿入し、任意のコードを貼り付けてください。

広告スペース

関連記事

記事の下に自動的に関連記事を表示させることができます。プラグイン不要!詳細設定は Magazine→設定→テーマ設定→関連記事 から行なってください。

関連記事

カラーバリエーション

デフォルトではブルーをメインに使っていますが、他にもグリーン、ピンク、紫、黒、赤、オレンジのスキンも用意しています。Magazine→設定→スキン(上部タブ)から変更してください。デモサイトの上部バーにある「SKIN」からカラーバリエーションを見ることができます。

カラーバリエーション

他にも「ドラッグ&ドロップでカスタマイズ可!多機能WordPressテーマ – Themify」という記事で紹介したBuilder機能も搭載しています。これだけの機能がついていて$39!すべてのテーマが取り放題の年間プランは$69〜!

設定について

日本語化

日本語ファイルを用意しました。こちらのja.mo ファイルをテーマフォルダーの languages 内に置いてください。

ダウンロード

サンプルコンテンツ

テーマフォルダ内に「sample-content.xml」というファイルがあります。こちらはテーマのサンプルデータで、インポートするとデモサイトと同じコンテンツを反映させることができます。インポート手順はとっても簡単。

  1. ダッシュボード > ツール > インポート
  2. 「WordPress」をクリック(インポート用プラグインをインストールするよう言われたらインストールしてください)
  3. sample-content.xml をアップロード
  4. 添付ファイルもダウンロード・インポートするか聞かれるので、デモサイトで使われている画像も必要な場合はチェック
  5. 完了したらフロントページへ。無事反映されているはず!

20%オフ!期限なしのクーポンコード!

購入時にクーポンコード「HELLOMANA」を入力すると、20%の割引となります!多くのクーポンコードには有効期限が設定されていますが、このクーポンコードは無期限!いつでもお気軽にお使いください ;)

Themifyではその他たくさんのテーマが用意されています。無料の物もありますので、ぜひお試しください!

※テーマに関する質問はThemifyメンバー限定のコンテンツとなっているため、コメント欄や私宛のメールではお答えできません。本当に申し訳ございませんが…予めご了承ください。

シェアする

コメント

  • Kenshow

    マガジンレイアウトの美しさ。。。
    どうなんすかね、英字のタイポだから映えるのですかね?
    日本語フォントでもきれいにまとまるものですか??

    いつも新鮮で、良質なネタの提供ありがとうございます。

  • さっそくMagazine使わせていただきましたー!!!!!

    めちゃくちゃ美しいデザインやなあと思ったのと、拡張性が高いなあと感じました。
    自分のサイトなので判断できませんが、日本語でもまとまってはいると思いますよ:)

    http://roadtotheuk.com

  • Kenshow

    ほんとですね、しっかりおさまってますね。いつもマガジンスタイルは英字フォントだから映えるんだろうと思い込みを抱いていました。
    参考になりました。

  • ww

    ss

  • HR

    DLして使用させていただきました。PHPに疎くてもカスタマイズできる領域が異様に広い、この仕様に感服しました。あまり有料テーマを使用することは少なかったのですが、意識がまるで変わりました。どうもありがとうございました。

  • kazu

    WordPressの3の時代の作り方では、今適用されないのかしら?

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)