FITからメディアサイト向け無料WordPressテーマ「LION MEDIA」が登場!

AMP対応・SEO最適化・高速表示の無料WordPressテーマ「LION BLOG」を公開しているFITが新作テーマ「LION MEDIA」をリリースしました。

LION MEDIA
ダウンロード | デモ

今作の「LION MEDIA」はメディアサイト向けテーマとして制作されています。

前作と同様、AMP対応、レスポンシブ対応、SEO最適化、高機能、高速表示の良さはそのままです。個人ブログなどでももちろん利用できます。今作もJavaScriptを極力利用しない方針で、高速な読み込みを実現しています。

インデックスページは2列レイアウト

LION MEDIAのインデックスページは記事が2列に並んだ、大きめのアイキャッチ画像が特徴のレイアウトです。

記事が2列に並んだレイアウト

プラグインを使用せず、記事ランキングページを作成

テーマの基本機能としてランキング機能を搭載しています。プラグインを使用せず、記事ランキングページを作成することができます。

記事ランキングページ

トップページに人気記事をタイル状に並べた「ランキングボックス」を表示することもできます。

ランキングボックス

ランキング用ウィジェットも用意されています。

ランキングウィジェット

ピックアップ記事

トップページにピックアップ記事を表示することができます。ユーザーにアピールしたい記事を目立つ位置に表示することができます。

ピックアップ記事

プラグインなしで関連記事を表示

プラグインを使用せずに関連記事を表示することができます。

プラグインなしで関連記事を表示

カテゴリーには個別のイメージカラーを設定できる

カテゴリーごとにイメージカラーを設定することができます。各カテゴリーにテーマカラーを設けることで、メディアサイトらしい活気のある雰囲気を演出することができます。

カテゴリーごとのテーマカラー

注目キーワード

大手メディアサイトでよく見かける、注目キーワードを管理画面から設定することがでいます。

注目キーワードを設定

キーワードをクリックすると、そのキーワードでの検索結果ページが表示されます。

表示/非表示の切り替え

投稿者情報や関連記事、シェアボタンなど、投稿ページに表示する情報の表示/非表示は管理画面から簡単に切り替えることができます。

表示/非表示の切り替え

埋め込みコンテンツのレスポンシブ対応

YouTube、Twitter、Instagramなどは、URLを書くだけでページに埋め込むことができます。

YouTube、Twitter、Instagramの埋め込み

もちろん、レスポンシブ表示に対応しています。

レスポンシブ表示

1カラム/2カラムレイアウトに対応

1カラムレイアウト、2カラムレイアウトに対応しており、テーマのカスタマイズ画面からボタン一つでレイアウトを切り替えることができます。

1カラム/2カラムレイアウト

SEO対策済テーマ

html5の仕様に基づいた構文で設計されたSEO対策済みのテーマです。また、プラグインなしで個別ページごとにdescriptionやmeta robotの設定ができます。

SEO対策

AMP対応

LION MEDIAはGoogleが中心に普及を進めているモバイルでのページ高速表示、AMPに対応しています。

AMP

AMPページ用の広告登録枠、Analyticsコード登録枠も用意されています。TwitterやInstagram、YouTubeなどの埋め込みコンテンツのAMP対応もバッチリです。

構造化データのマークアップに対応

構造化データのマークアップは、Googleに情報を的確に伝えるのに役立ちます。LION MEDIAはBreadcrumbList(パンくずリスト)Article(記事)の構造化データに対応しています。

構造化データ

NO JavaScriptで高速表示

JavaScriptはページの読み込み速度を遅延させる要因の一つです。LION MEDIAはJavaScriptを極力使用しない方針で開発されており、ページの高速表示を実現しています。ビジュアルエフェクトもCSSを中心に実装されています。

JavaScriptはヘッダーのメニューの切り替えと、CSSの非同期読み込みのために使用されているだけです。

CSS非同期読み込みで高速表示

CSSを非同期で読み込むことで、ページのレンダリング速度(表示速度)が向上します。

ただし、すべてのCSSを非同期で読み込むと、CSSが読み込まれるまでページのレイアウトが崩れて表示されてしまいます(通常は一瞬ですが)。

LION MEDIAでは、CSSファイルごとに非同期で読み込むかどうかを指定できるので、メインのCSSは通常通り読み込んで、アイコンフォントなどの補助的なCSSを非同期で読み込む、といった設定が可能です。

CSS非同期読み込みで高速表示

また、固定ページと投稿ページだけで使用されるcontents.cssは、固定ページと投稿ページが表示されたときだけ読み込まれるようになっているので、インデックスページなどでは余計なCSSを読み込まずに高速表示が可能です。高速表示のために細部まで作り込まれたテーマになっています。

.htaccess によるブラウザキャッシュと Gzip 圧縮

テーマフォルダには、.htaccessの記述サンプルが付属しています。.htaccessにこの記述をすることにより、ブラウザキャッシュとGzip圧縮が有効になって、ページの表示速度が大幅に向上します。

# -----------------------------------------------------------------------------
# .htaccessに以下の記述を追加すると高速化。※バックアップを行ってから作業してください。
# -----------------------------------------------------------------------------

# BEGIN ブラウザキャッシュ
<IfModule mod_headers.c>
<ifModule mod_expires.c>
	ExpiresActive On

	# キャッシュ初期化
	ExpiresDefault "access plus 1 seconds"

	# MIME Typeごとの設定
	ExpiresByType text/css "access plus 1 weeks"
	ExpiresByType text/js "access plus 1 weeks"
	ExpiresByType text/javascript "access plus 1 weeks"
	ExpiresByType image/gif "access plus 1 weeks"
	ExpiresByType image/jpeg "access plus 1 weeks"
	ExpiresByType image/png "access plus 1 weeks"
	ExpiresByType image/svg+xml "access plus 1 year"
	ExpiresByType application/pdf "access plus 1 weeks"
	ExpiresByType application/javascript "access plus 1 weeks"
	ExpiresByType application/x-javascript "access plus 1 weeks"
	ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
	ExpiresByType application/x-font-ttf "access plus 1 year"
	ExpiresByType application/x-font-woff "access plus 1 year"
	ExpiresByType application/x-font-woff2 "access plus 1 year"
	ExpiresByType application/x-font-opentype "access plus 1 year"
	ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>
# END ブラウザキャッシュ


# BEGIN Gzip圧縮
<IfModule mod_deflate.c>
	SetOutputFilter DEFLATE

	# 古いブラウザ無効
	BrowserMatch ^Mozilla/4\.0[678] no-gzip
	BrowserMatch ^Mozilla/4 gzip-only-text/html
	BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

	# 圧縮済みのコンテンツは再圧縮しない
	SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE text/js
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/rss+xml
	AddOutputFilterByType DEFLATE application/atom_xml
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE application/x-httpd-php
	AddOutputFilterByType DEFLATE application/x-font-ttf
	#AddOutputFilterByType DEFLATE application/x-font-woff
	#AddOutputFilterByType DEFLATE application/x-font-woff2
	AddOutputFilterByType DEFLATE application/x-font-opentype
	#AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>
# END Gzip圧縮

プラグインなしで簡易お問い合わせフォーム

プラグインをインストールせずに、簡易お問い合わせフォームを設置することができます。

簡易お問い合わせフォーム

設置方法は、固定ページ投稿画面のテンプレート選択で、「お問い合わせTPL」を選択するだけです。

お問い合わせTPL