【WordPress】LION MEDIAの特徴と便利な機能 その1(1~5)

【WordPress】LION MEDIAの特徴と便利な機能 その1(1~5)

ワードプレス LION MEDIAの特徴と便利な機能

WordPress(ワードプレス)におすすめのおしゃれなテーマ「LION MEDIA(ライオンメディア)」。

LION MEDIAは見た目のデザインが良いだけでなく、多機能でプラグインを使わなくても便利な55の機能が備わっています。

今回はLION MEDIAの特徴と便利な機能のうち、下記の5つの項目について簡単に解説してみたいと思います。

  • NO JavaScript(CSSの非同期読み込み機能と、ヘッダーのメニュー切り替えのみにJavaScript使用)
  • W3Cの規格に基づくマークアップでエラーなし
  • モダンブラウザに最適化のため、IEは非対応(11は表示されると思う)
  • 管理画面の投稿・固定ページのビジュアルエディタは、実際に表示されるデザインとほぼ同じ
  • 管理画面の投稿一覧に、IDと閲覧数、サムネイル画像を表示

NO JavaScript(CSSの非同期読み込み機能と、ヘッダーのメニュー切り替えのみにJavaScript使用)

Webサイトは主にHTML(Webサイトの文書構造)、CSS(Webサイトの外観)+ JavaScript(Webサイトに動きを与える)によって構成されています。

Webサイトのレンダリングスピード(読み込み速度)が低下する要因はいくつかありますが、必要以上にJavaScriptを使用せず、CSSの読み込みを非同期にすることでレンダリングスピードが向上します。

Googleのデータでは、ページの反応速度が0.5秒遅くなるとアクセス数が20%低下するのだそうです。

たぶん多くの方が目的のWebページがなかなか表示されなくて、イラっとした経験があると思いますが、あまりにも表示が遅いと読み込み中のWebページは閉じて他のページを探しますよね。

このようにサイトの表示速度が遅いとユーザビリティーが悪いだけではなく、離脱率も上がります。

そういうのは良くないよね!ということで、Webページの表示速度は速くしましょう!とGoogleさんが推奨しています。

Webページの表示速度を早くするというのは、Webページの読み込み速度を早くするという意味と同じです。

LION MEDIAではダッシュボードの「外観」→「カスタマイズ」→「SEO設定[LION用]」へ進み『CSS非同期読込設定』で設定することができます。

設定するにはプルダウンで「有効」にして、下記4つの項目を好みでチェックするだけです。

設定項目は以下の4項目です。

  • メインCSS(style.css)を非同期読み込みする
  • 投稿・固定ページ用CSS(content.css)を非同期読み込みする
  • アイコンフォントCSS(icon.css)を非同期読み込みする
  • GoogleフォントCSS(Lato)を非同期読み込みする

一番上の「メインCSS(style.css)を非同期読み込みする」の項目にチェックすると、サイトを表示する際、一瞬表示が崩れた感じに見えます。

読み込み速度を重視するなら全ての項目を選択(チェック)するのがいいと思いますが、ちょっと気になるという人は「メインCSS(style.css)を非同期読み込みする」の項目はチェックしない方がいいかもしれません。

W3Cの規格に基づくマークアップでエラーなし

W3C(World Wide Web Consortium)というのは、Web技術の標準化を行う団体の名称です。

WebサイトはHTMLによって文書構造が定義され、CSSによってレイアウト(表示方法)が定義されています。

例えばHTMLの場合、ここは見出しですとか、ここは箇条書きのリストですといった具合に、サイト内のテキスト(文書)の前後をHTMLタグで囲み、文書の意味付けを行います。これをマークアップと言います。

しかしHTMLやCSSは様々な仕様が存在していて、制作者によっても使い方がまちまちです。

また、Webページを表示するWebブラウザも開発元が異なるので、各Webブラウザの仕様によって、同じWebページなのにレイアウトが変わって見えるなどの問題がありました。

HTMLやCSSなどのWeb技術に関する仕様を標準化することでこのような問題をなくし、ユーザーの使いやすさや開発者の負担軽減のためのW3Cの規格はWeb標準となっています。

W3Cの規格に基づくマークアップをすることで、Web標準規格に準拠したWebページということがいえるので、サイト品質の向上という意味でもメリットがあるのではないでしょうか。

モダンブラウザに最適化のため、IEは非対応(11は表示されると思う)

モダンブラウザとはW3CのWeb標準規格に準拠したWebブラウザのことを指します。

W3Cが勧告しているHTMLやCSSなどのWeb関連の技術に対応している必要があり、比較的新しい最近のブラウザについてはほとんどがモダンブラウザといえます。

逆にWeb標準規格に準拠していない、古いバージョンのブラウザなどはレガシーブラウザと呼ばれます。

Web標準技術に基づいて構築されたWebサイトをモダンブラウザで閲覧すればほとんど同じように表示されますが、レガシーブラウザの場合、レイアウトが崩れたりUIに実装されている機能が正常に動作しなかったりします。

そのような状況をなくすためにW3CはWeb標準規格を勧告して、誰がどのブラウザで見ても同じように表示されて正常に動作するように推奨しています。

ちなみにIEというのはInternet Explorer(インターネット・エクスプローラ)の略で、Windowsに標準搭載されていたマイクロソフト社製のwebブラウザのことです。

W3Cの標準規格に準拠したブラウザとは異なり、IEは独自規格で機能拡張を行っていたので互換性に欠け、古いバージョンのIEでは正常に表示されないなどの問題があります。

こうしたことからIEはレガシーブラウザとなってしまいましたが、既にマイクロソフトはIEの開発を終了して、W3Cの標準規格に準拠したEdgeというブラウザをリリースしています。

しかし昔からのWindowsユーザーの中には、未だIEの呪縛から解けない人もいるようです。

管理画面の投稿・固定ページのビジュアルエディタは、実際に表示されるデザインとほぼ同じ

WordPressは「ビジュアルエディタ」で編集して記事を投稿した場合、実際に表示されたデザインが少し異なって「あれっ?」ってなります。

functions.phpやCSSファイルを編集して、ビジュアルエディタ上の表示と実際に投稿された時の表示を揃える方法もありますが、LION MEDIAでは、ビジュアルエディタで編集して投稿しても、見出しデザインなどを除いて実際の表示はほぼ同じに表示されます。

このサイトでは、見出しデザインとCSSで指定した段落のインデント部分が反映されていませんが、これくらいならほとんど気になりません。

LION MEDIAの特徴と便利な機能

管理画面の投稿一覧に、IDと閲覧数、サムネイル画像を表示

ライオンメディアの特徴と便利な機能

上記画像のように投稿一覧画面にIDと閲覧数、サムネイル画像が表示されています。

ワードプレスでは記事のIDを指定してレイアウトなどに反映させることがあります。例えばLION MEDIAでもTOPページのヘッダーナビの下にピックアップ記事を設定するときに記事のIDを指定します。

管理画面の投稿一覧にIDとサムネイル画像が横並びになっていると、記事のIDを調べるにも分かりやすくて便利ですね。

Themeカテゴリの最新記事