WordPress.com ブログ

WordPress.com 日本語ブログ

Oxygen テーマカスタマイズ事例: BeatRoute マガジンサイト

無料テーマ Oxygen を使ったカナダの音楽情報サイトのケーススタディをご紹介します。有料アップグレードなしでも、たくさんのカスタマイズ機能をご利用いただけます。

今月のはじめ、「レスポンシブ・デザインのテーマを紹介する一週間」として、Cheri がカナダのローカルミュージックを取り上げるオルタナティブ月刊誌、BeatRoute のサイトを紹介しました。私達はもちろん、読者の皆さんも BeatRoute が無料の Oxygen テーマをカスタマイズして独自のサイトを作っていることにかなり感心してしまったため、このサイトをもう少し掘り下げてテーマの機能をご紹介したいと思います。大胆なレイアウトかつナビゲーションしやすいオンラインマガジンサイトの秘密を探ってみましょう。

ホームページのレイアウト

それではまず、デフォルトの Oxygen テーマと BeatRoute マガジンのホームページを比べてみます。

Oxygen と Beatroute のホームページレイアウト

Beatroute ではホームページスライダー、カスタムメニューといった Oxygen の標準機能をカスタマイズし、独自性を出しています。

おすすめ投稿スライダー

デフォルトでは、Oxygen テーマのホームページには通常のブログスタイルで投稿が表示されますが、マガジンスタイルに投稿を表示できる「スライダー」オプションもあります。最大6件の投稿を先頭に固定表示することで、スライダー内に含められます。BeatRoute の例のように、スライダーを利用することで最新のおすすめコンテンツを読者に注目してもらうことができます。

Oxygen テーマでこのレイアウトを使うには、テーマカスタマイズ画面で固定フロントページを有効化する必要があります。

カスタムヘッダー

サイトのタイトルやタグラインを Oxygen テーマの標準形式とフォントで表示することもできますが、BeatRoute のようにカスタムヘッダー画像でロゴを使い、より強力にブランディングするのもいいでしょう。

BeatRoute ヘッダー画像

画像ロゴをデザインする方法が分からないという方は、Oxygen テーマのビルトイン英字フォント9種、投稿タイトルのカスタム配色といった機能を活用してみましょう。Beatroute はデフォルトのブルーの代わりにオレンジを使っています。

カスタムメニュー

Oxygen がマガジンサイトに使いやすい理由のひとつとして、 このテーマには3つのカスタムメニューエリアが含まれているという点があります。サイトタイトルまたはカスタムヘッダー画像の下、左サイドバーの下、そしてフッターにメニューをそれぞれ配置できます。

BeatRoute では2ヶ所にカスタムメニューを配置しています。メインメニューは「About」ページやお問い合わせページなどといった常に表示しておきたい情報にリンクしており、2つめのメニューは各セクションのコンテンツを表示しています。

画像ウィジェット

画像ウィジェットBeatRoute マガジンサイトはカスタマイズの仕上げとして、ホームページにウィジェットを追加することで視覚的にも魅力あるコンテンツを加えています。シンプルな画像ウィジェットを使い、両脇のサイドバーに印刷版のマガジンの表紙や、地元のラジオ局やイベントの宣伝などを組み込んでいます。

画像ウィジェットは、サイトにアクセント加えられる簡単な方法です。画像をアップロードしてその URL をコピーし、ウィジェットをサイドバーにドラッグしたあとに URL をペーストしてください。Beatroute のように外部サイトにリンクしたり、ソーシャルネットワークのアカウントにリンクするのも良いでしょう(画像の著作権や利用条件にはご注意ください)。

これらのカスタマイズはすべて無料でご利用いただけます。スライダー、カスタムヘッダー画像、カスタムメニュー、画像ウィジェットは WordPress.com および Oxygen 無料テーマの機能としてすべてのユーザーに提供されているものです。

Oxygen の機能をもっと知りたい方は、テーマショーケースをご覧ください。カスタマイズのサポートは、サポートフォーラムでも受け付けています。

この記事は michelle w. が WordPress.com 英語版ブログに投稿した「Customizing Oxygen: BeatRoute Magazine」の訳です。機能について不明な点があればコメント欄または日本語フォーラムでご質問ください。

翻訳: 高野直子


WordPress.com の開発状況について最新情報を知りたい方は、以下の欄にメールアドレスを入力して今後の告知をメールで直接受け取りましょう。通知を開始する前に確認メールをお送りします。見つからない場合はスパムフォルダーをご確認ください。

現在158,661人フォロワーがいます。

%d人のブロガーが「いいね」をつけました。