AMP対応・SEO最適化・高速表示の無料WordPressテーマ「LION BLOG」を公開しているFITが新作テーマ「LION MEDIA」をリリースしました。
今作の「LION MEDIA」はメディアサイト向けテーマとして制作されています。
前作と同様、AMP対応、レスポンシブ対応、SEO最適化、高機能、高速表示の良さはそのままです。個人ブログなどでももちろん利用できます。今作もJavaScriptを極力利用しない方針で、高速な読み込みを実現しています。
インデックスページは2列レイアウト
LION MEDIAのインデックスページは記事が2列に並んだ、大きめのアイキャッチ画像が特徴のレイアウトです。
プラグインを使用せず、記事ランキングページを作成
テーマの基本機能としてランキング機能を搭載しています。プラグインを使用せず、記事ランキングページを作成することができます。
トップページに人気記事をタイル状に並べた「ランキングボックス」を表示することもできます。
ランキング用ウィジェットも用意されています。
ピックアップ記事
トップページにピックアップ記事を表示することができます。ユーザーにアピールしたい記事を目立つ位置に表示することができます。
プラグインなしで関連記事を表示
プラグインを使用せずに関連記事を表示することができます。
カテゴリーには個別のイメージカラーを設定できる
カテゴリーごとにイメージカラーを設定することができます。各カテゴリーにテーマカラーを設けることで、メディアサイトらしい活気のある雰囲気を演出することができます。
注目キーワード
大手メディアサイトでよく見かける、注目キーワードを管理画面から設定することがでいます。
キーワードをクリックすると、そのキーワードでの検索結果ページが表示されます。
表示/非表示の切り替え
投稿者情報や関連記事、シェアボタンなど、投稿ページに表示する情報の表示/非表示は管理画面から簡単に切り替えることができます。
埋め込みコンテンツのレスポンシブ対応
YouTube、Twitter、Instagramなどは、URLを書くだけでページに埋め込むことができます。
もちろん、レスポンシブ表示に対応しています。
1カラム／2カラムレイアウトに対応
1カラムレイアウト、2カラムレイアウトに対応しており、テーマのカスタマイズ画面からボタン一つでレイアウトを切り替えることができます。
SEO対策済テーマ
html5の仕様に基づいた構文で設計されたSEO対策済みのテーマです。また、プラグインなしで個別ページごとにdescriptionやmeta robotの設定ができます。
AMP対応
LION MEDIAはGoogleが中心に普及を進めているモバイルでのページ高速表示、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を非同期で読み込む、といった設定が可能です。
また、固定ページと投稿ページだけで使用される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」を選択するだけです。
