今回はWordPresテーマ【Lion Media】のカスタマイズについて紹介します。
【Lion Media】はコードなど難しい知識を知らなくても、かなりカッコイイブログが完成できるおしゃれテーマです。
ですが、「どうしてもここが気になる！！」というポイントが6つもありました。
カスタマイズというと難しいと感じられる方もいるでしょうが、HTML素人の私でもできる簡単なものばかりです。
もし、同じような悩みがありましたら参考にしてください。
Lion Mediaとは
メディアサイト向け無料WordPress用テーマ「LION MEDIA」は、FITが提供するテーマです。プラグインなしでAMPに対応しており、SEO最適化済みで表示速度も速い。そしてレスポンシブデザインを採用し、設定項目が豊富でありながらもカスタマイズが簡単な無料WordPressテーマとなっております。
FIT WEBサイトより
カッコ良く、オシャレで高性能。有料テーマとも引けを取らないとベテランブロガーの方々が称賛するクオリティー。それがなんと無料。
まだWordPressのデフォルトテーマをご使用の方は、一度試してみることをおススメします。
ちなみに、このブログのテーマは【The Thor （ザ・トール）】といい、【Lion Media】を作ったFitという会社の商品です。
使い勝手に関しても考えられたデザインですので、基本定なカスタマイズは、【外観】⇒【カスタマイズ】で対応できます。
今回紹介するカスタマイズはデフォルトのカスタマイズでは対応できない問題についてです。
Lion Mediaのカスタマイズ紹介
以下予めご留意ください。
- 【Lion Media】の更新により既に解決されている場合がございます。
- 同様に紹介する方法が通用しない場合も考えられます。
- カスタマイズは自己責任です。バックアップを忘れずに。
- CSSの更新は必ず子テーマ【LION MEDIA CHILD】で行いましょう。
※【Lion Media CHILD】については、下記よりダウンロードできます。
1.文字が小さい（字体も変更）
初期設定で一番気になったのが、文字の大きさ。ちょっと小さすぎやしませんか？ってくらい小さい。
本文の部分の文字サイズについてです。
サイト説明文を設置したのは、いいけど小さすぎて目がチカチカ、基本文字が薄いので余計に見づらいです。
【解決方法】
フォントのコードをCSSに追記しました。
追加の場所は、【外観】→【CSS編集】にて追記しました。
body
p {font-family: arial;
font-size: 16px;color:
#16160e;line-height: 1.6;
margin-bottom: 1.em;
}【結果】
するとこの通り、若干読みやすくなったでしょ？でしょ？
2.サムネイル付きのリンクカードの作成。
紹介したいサイトのURLを【カスタムHTMLブロック】に入力すると自動的にサムネイル付きのリンクカードが作成される機能があります。
例えばこのブログのURLを入力したら、こんな感じで表示されます。
この機能は、Lion mediaのものでは無く、WordPressによるものだそうです。
WordPressバージョン4.4より追加されたEmbed（埋め込み）機能で記事内にアドレスを記載すれば、自動的にリンク枠を表示する機能が追加されました。
とても便利な機能ですが、欠点があります、、、、、
URL先が埋め込みを許可していない（もしくはWordPressであればWordPress4.4以前のバージョンを使っている）と機能せず、URLがそのまま表示されてしまいます。
ちなみに【Lion Media】のサイトも対応していないのか？URLだけが表示されてしまいます。
↓こちらの記事で勉強させていただきました。
リンクカードの出現は相手サイトの状態任せとなってしまいます。
その場合は、【Lion Media公式ページ】などと文字リンクが無難でしょう。
Pz-LinkCardはおススメできない。
オススメはできませんが、未対応URLについては、プラグイン【Pz-LinkCard】で対応が可能です。有名なプラグインではあります。
表示が重くなるなど理由から私は使用しておりません。
参考までに【Pz-LinkCard】導入については下記記事をご参照ください。
尚、WordPressのリンクはサイズお任せなので、下記のように大きくなってしまう事があるみたいです。【Pz-LinkCard】はカスタマイズ可能です。
3.ｈ２上段をアドセンスを自動設置
【LION MEDIA】では記事中のアドセンスはあらかじめ設定しておいたアドセンスをコードを使用して呼び出す機能がついておりますが、機械的にアドセンスを張り付けてくれる機能はありません。
そこで、目次と同じく【h2】タグの上段に自動的にアドセンスが掲載されるようにカスタマイズしました。
参考にした記事はコチラ
4.mobile表示時の人気の記事
【LION MEDIA】には新着記事も関連記事も、もちろん人気の記事もウィジェットで掲載可能です。
デザインもすっきりして見やすく、とても良いのですが。
スマホなどで見た時の新着記事の画像がやたらデカい！！！画像が大きすぎて何番目に人気なのかよくわかりません。
プラグイン【WordPress Popular Posts】に頼ることにしました。
縮小されて見やすくなりますが、こちらはコチラで見栄えはそれほど良くありません。【WordPress Popular Posts】のカスタマイズについては、別途お調べください。
5.上へのボタンが無い。
このページの右下にある三角マークのアイツの事です。
【LION MEDIA】には最下段中央にTOPへ行くボタンが搭載されておりますが、途中でTOPへ戻るボタンはありません。
そこで、プラグインを使用せずにTOPへボタンを追加する方法を紹介しているサイトがありましたので、導入しました。
6.前の、次の記事へのボタンが無い。
実は【LION MEDIA】には通常記事下にある【前の記事）（次の記事）へのボタンがありません。
こちらもプラグインを使用せずに追加する方法を教えていただいたサイトがありましたので、紹介させていただきます。
【参考にさせていただいたブログ】
まとめ
以上【Lion Media】カスタマイズ6選でした。
無理なく自分なりのカスタマイズで楽しんでみてください。
The Thorについて
カスタマイズって楽しいですけど、ブログで一番大事なのはデザインや機能よりも記事なんですよね。そう考えるとカスタマイズに時間をかけるのは非効率という事になってしまいます。（楽しいけど）
現在このブログ使用しているテーマは【Lion Media】を作ったFITが万を持して投入した【THE THOR】です。
こちらは有料テーマですが、今回ご紹介したカスタマイズの内容が初期装備されている【Lion Media】の上位テーマとなります。
一度購入すれば複数サイトで使用でき、ベースデザインも数種類用意されておりますので、簡単にお好みのページが作れると思います。
興味がありましたら【THE THOR】のバナーをクリックしてみてください！！
