STORK(ストーク)からLION MEDIAへ ワードプレステーマ移行変更点まとめ テーマの感想も合わせて

STORK(ストーク)からLION MEDIAへ ワードプレステーマ移行変更点まとめ テーマの感想も合わせて

2019年11月18日にレンタルサーバーをエックスサーバーからConoHa WINGに移行しました。
次いでワードプレステーマを2017年から約3年使用してきた「STORK(ストーク)」(ストーク19ではなく旧ストーク)から「LION MEDIA(ライオンメディア)」に変更しました。

ストークからLION MEDIAに変更後、CSSなど最低限の修正を終えています。

無料テーマ「LION BLOG」と「LION MEDIA」、その上位バージョンの有料テーマ「THE THOR(ザ・トール)」の違いをまとめたブログの記事は沢山書かれていますが、ストークからLION MEDIAに移ってどう変わるのかを書いた記事が少ないと感じたので、自分なりの感想をまとめてアップします。
ストークを使っていてLION MEDIAを検討している方の参考になればと思います。

  • ※ テーマを使って日が浅いため理解不足による間違いがある場合があります。
  • ※ 2019年現在の内容を扱っていますが今後テーマアップデートで変わる場合があります。
  • ※ 今回は感想程度なので画像はありません。
  • ※ アイキャッチ画像掲載元:http://lionmedia.fit-jp.com/

無料テーマ「LION MEDIA」にした感想とストークとの違い

LION MEDIAは有料テーマ「ザ・トール(THE THOR)」を販売している会社FITの無料テーマです。
LION MEDIAは無料テーマですがデザインが美しく非常に高機能です。
一方でストークを長く使っていると癖が強いテーマだとも感じました。
LION MEDIAの画面はPC・スマホ画面ともきれいに表示されますが、細かい箇所でストークを触っていると感触が違う箇所が多いです。
主にLION MEDIAとストークが違うと感じた箇所を述べていきます。

SPONSORED LINK

LION MEDIAのトップページ表示の種類にシンプル型がない

LION MEDIAのトップページ表示はワイド(ストークでいうビッグ型)かデフォルト(カード型)しかなく、ストークにあるシンプル型は選べません。
(「LION BLOG」ではシンプル型を選ぶ事が出来ます。)

LION MEDIAの見出しはH1がない

LION MEDIAの見出しはH1見出しがなく、デフォルトでH2がテーマ最上位の見出しです。
H1は内部的にはh1~/h1が入っていますが、見た目で普通の強調文字のようになります。
H1を装飾して表示する方法があるかもしれませんが、今のところ分かっていません。

普通にCSSでH1の指定を追加しました。

.content h1 {
font-size:2.5rem;
line-height:1.5;
margin-top:30px;
}

LION MEDIAではNewpost Catchの画像がつぶれる

ストーク使用時にNewpost Catchプラグインで表示させていた最新記事のページで、LION MEDIAでは画像がつぶれた状態になり表示出来ませんでした。
新着についてはウィジェットの標準のもので出しています。

LION MEDIAのワイド型でアイキャッチ画像が一律リサイズされる

LION MEDIAのワイド(ストークのビッグ型)の形式では、アイキャッチ画像のサイズが一律同じ大きさにリサイズされます。これはいい点です。
ストークだと、アイキャッチ画像のサイズがばらばらだったので、ビッグ型にし難かった面があります。

LION MEDIAでは目次がテーマデフォルトで付属

ストークでは目次はプラグイン(Table of Contents Plus)で出す必要がありましたが、LION MEDIAはテーマデフォルトの目次があるのでプラグインかテーマどちらかを選ぶことが出来ます。

LION MEDIAではnextpageを使ったときに前ページ・次ページリンクが表示されない

nextpageでページ分割している場合、「前のページ」「次のページ」などのリンクがLION MEDIAでは自動で入りません。
(カテゴリ表示ではprev nextというリンクが出ます。)
手動で移動先リンクを入れないとページが分断されてしまいます。
ストークではデフォルトで前後のページリンクが挿入されていました。

LION MEDIAではページ内遷移リンク形式が動作しないものがある

「a href=”” #ID名」でページ内のリンク先に飛ばす形式のリンクが動作しません。a href~a nameの形式だと飛ばせました。
ストークでは「a href=”” #ID名」の形でリンクが動作していたので、LION MEDIAに変更して記事の修正が必要な箇所がありました。

LION MEDIAのテーマウィジェットにSP(スマホ)設定の項目がない

LION MEDIAではウィジェットの設定画面に、ストークでいうSP(スマホ)表示の項目がありません。PC画面と同じ設定がスマホ画面に適用されます。

LION MEDIAのスマホ表示で自動リサイズされない画像や動画がある

スマホ画面表示の際、ストークでは全ての記事で画像やYoutube動画が適切に自動リサイズされて表示されていました。
LION MEDIAではリサイズされない記事の画像があります。
リサイズされないので不自然な大きさに見えることがあります。
但し、きちんとリサイズされる記事もあるので、原因が分かりません。
Youtube動画もiframe内でサイズを指定しているのにスマホでは真四角になりイメージと違う状態で表示されます。
ストークでは指定に従って表示されていました。

2019/12/3追記
Youtube動画はiframeで指定していますが、div classでiframeを囲ってcssで表示の仕方を制御することで、PCとスマホで見るときに上手くリサイズさせることが出来ました。
詳しくは記事末の参考にさせて頂いた記事集のエントリ先を参照。

LION MEDIA専用の広告枠ではボーダーと文字が自動で挿入される

広告については、テーマとウィジェットでそれぞれ、LION MEDIA専用の広告を入れる場所がありますが、そこに広告を入れると「advertisement」という文字とボーダー線も自動で広告枠に入ってきます。それらを非表示(削除する)ためにはPHPやCSSの編集が必要です。
自分は文字やボーダーを消すのが面倒なのでウィジェットのカスタムHTMLに広告コードを入れています。カスタムHTMLでも広告コードは問題なく動作します。

LION MEDIAではテーマ側で更新日が表示されない

ストークはテーマカスタマイズ項目に「投稿日・更新日表示設定」があり、投稿日だけ表示・投稿日と更新日表示・投稿日と更新日非表示が選べていました。
LION MEDIAはデフォルトで投稿日の表示・非表示が選べますが、更新日の表示・非表示項目はありません。
検索結果にも更新日が表示されるので出来れば更新日も表示したい所ですが、更新日表示は複数のPHPファイルにget_the_modified_dateから更新日を取って来て表示するように修正をする必要があります。
自分も更新日表示まではPHP修正で表示出来たのですが、Webフォント(IcoMoon)の追加が上手くいかず、更新日のアイコンを表示出来ていません。ブラウザのキャッシュ消すと表示出来ました。

LION MEDIAではTOPに戻るボタンがない

LION MEDIAのフッター部分にはデフォルトで「Back to TOP」という遷移ボタンがありますが、ページ追従型のボタンがないため、設定するには自分でPHPなどを修正する必要があります。
ストークではデフォルトで追従式のトップボタンがありました。

LION MEDIAの投稿画面でカテゴリーは一つしか選べない

LION MEDIAの投稿画面では記事のカテゴリーは一つしか選べません。ストークでは複数選択が可能でした。
一応、function.phpを変更する事で、カテゴリーを複数設定出来るようになるようです。(やり方については記事末エントリーを参照。)

LION MEDIAは投稿画面でSEO設定がある

ワードプレスで最初に使ったテーマ「Simplicity2」にもあったと思いますが、LION MEDIAの投稿画面で記事のSEO設定(title設定 | description設定 | meta robot設定)をする事が可能です。ストークではこうした記事に対するSEOの設定項目はなかったです。

その他(フェイタルエラー)

他に、これはLION MEDIAと関係あるかどうか分かりませんが、最初にLION MEDIAに変えた後、ストークに戻したら原因不明のフェイタルエラーになりました。
フェイタルエラーの後、ストークをテーマから一旦削除して、ダウンロードしたストークテーマをインストールして、再表示は確認出来ました。

まとめ

ストークを使っていてLION MEDIAに移行して一番違和感を感じるのは、テーマカスタマイズのウィジェットにSP(スマホ)設定項目がなく、PCとSPが同じ画面構成になることです。
ストークではPCとSPの画面構成を分けるのが普通の感覚だったので、PCとSPで見た目を同じにする事に最初抵抗がありました。慣れるとこれが普通になるのかもしれません。

全体的には、PC画面のリッチさやテーマカスタマイズ設定の多さは、LION MEDIAの方がリッチ感が強く多機能に感じます。
ストークはどちらかというとシンプルでPHPの修正も分かり易かったです。PHPやCSSの修正でフェイタルエラーが出る事も滅多にありませんでした。
逆に言うとLION MEDIAはPHPの修正も難しく感じます。
ストークの特徴はスマホ画面を表示した時に画像のリサイズなどが自動で行われるため、スマホ画面に特化した機能美ではストークが上だと感じました。

表示速度に関しては、テーマが影響する部分は少ないと思っているので、違いは感じません。
表示速度の改善はやはりレンタルサーバーとプラグイン、画像や広告などの影響が大きいと思います。
実際このサイトでもサーバー会社の変更とプラグインでかなり表示速度が改善され、サーチコンソールで低速の項目が全て中速になりました。

以上、ストークを使っていてLION MEDIAに変更した際の違いなどについてまとめました。
LION MEDIAに慣れない部分もありながら、非常にいいテーマだと感じているため、暫く使ってみようと思っています。

カスタマイズ参考にさせて頂いた記事集

自分がLION MEDIAカスタマイズの参考にさせて頂いた記事を掲載します。(有難うございます。)

ブログ・ワードプレス・レンタルサーバーカテゴリの最新記事