【2018年】WordPress無料テーマLION BLOGのカスタマイズ覚書

ブログ運営

こんにちは。ビルメン米造です。

ブログを始めて2ヶ月が経過しましたが、なかなか記事も書けず、簡単に書ける電気工事士の技能試験対策記事を投稿して更新している気になっている、ブログ運営からも落伍しそうな底辺野郎が僕です。

ちょっと気分転換にWordPressのテーマを変更してみようと思い、「Wordpress 無料テーマ 2018」とかで検索してみたところ「LION BLOG」というテーマが無料とは思えないほど高機能だということでしたので導入してみました!

現在このブログに適用しているテーマはSimplicity 2ですが、ちょいちょいLION BLOGを適用して弄ってみて、デザインや表示速度がLION BLOGの方が良ければ乗り換えようと考えています。

※2018/09/13 現在のテーマは Simplicity 2 の後継テーマである Cocoon です。

今日はそんなWordPressの無料テーマ「LION BLOG」を導入したときにカスタマイズしたことの覚書と、大人気テーマ「Simplicity 2」と「LION BLOG」を比較してみて思うことなどを書いてみます!

この記事は、LION BLOGを弄ってみて何か変更を加える度に随時更新します!

スポンサーリンク
スポンサーリンク

LION BLOG 公式サイト

WordPressの無料テーマ「LION BLOG」は以下のURLからダウンロードできます。

AMP対応・SEO最適化・レスポンシブ・高機能。そして、表示速度が速い、無料のデザイナーズ WordPressテーマ

AMP対応・SEO最適化・レスポンシブ・高機能の無料WordPressテーマ│LION BLOG[ライオン ブログ] - デモサイト
ライオン ブログは、モバイル端末での表示を早くするAMPに標準対応。SEO最適化済みで、レスポンシブデザイン。カスタマイズ性にも優れ、高機能でありながら表示速度も速い無料のデザイナーズ WordPressテーマです。

LION BLOGのカスタマイズ覚書

最初に断っておきますが、僕はブログ運営やプログラミングについてはド素人なので、「とりあえずやりたいことを実現できりゃいい」という考えのもと、力技でカスタマイズを行っている可能性が高いです。

また、”カスタマイズ”なんて言っちゃっていますが、すごい表示高速化とか収益率UP!回遊率UP!とかそんなんじゃなくて、初心者がちょっと躓いちゃった程度の内容なので生暖かい目で見てあげてください。

1. 記事冒頭のアイキャッチ画像が拡大されるヤツを消したい

なんかアホな見出しだけれど、他の表現が思いつかないのでこれでいきます!

LION BLOGでは記事にアイキャッチ画像を設定すると、記事冒頭にアイキャッチ画像がトリミングされて表示されます。マウスオーバーやタップをするとグワッと近寄る効果のオマケ付き。

本記事のライオンの画像みたいなどうでもいい画像ならトリミングされても良いのですが、以下の記事のように全体を見せたい画像を載せている場合はトリミングされると困るし、グワッと近寄る効果も正直いらないかなと。

電気通信主任技術者(線路)合格!難易度や需要について考えた
1月28日に受験した電気通信主任技術者(線路)の試験に合格しました。 伝送交換は取得済みですので両種別持ちとなりましたが、ビルメンの仕事には全く関係ないので役に立つことは無さそうです。 自己採点で合格見込みとなった時点で...

そんなわけで、冒頭のアイキャッチ画像を表示している部分を消しました。

[変更内容]

WordPress管理画面 [外観]

→[テーマの編集] → 編集するテーマを選択[LION BLOG] ※childではなく親テーマのほうです

→テーマファイル[個別投稿(single.php)]を選択

→60行目~75行目あたりのコードを削除。(下図のハイライトしている部分)

画像クリックで拡大表示します。

これで消えたはず!

親テーマのファイルをいじっているので、親テーマが更新されたら元に戻る気がします。

2. モバイル端末で閲覧すると画像の縦横比がおかしい

画像を挿入した記事をスマホで閲覧すると、画像が縦に引き伸ばされて表示されてしまうので修正しました。

[変更内容]

WordPress管理画面 [外観] → [カスタマイズ] → [追加CSS] に以下のコードを追加

img{
max-width: 100%;
height: auto;
}

※2018/09/13 追記

これでは何か不具合が残っていたような気がするけれど、もう忘れました(ノ∀`)

この項は参考にしないほうが良いかもしれません。

3. 記事のカテゴリが1つしか選択できない

LION BLOGは記事投稿の際に1カテゴリしか選択できません。

SEOの観点では1記事1カテゴリが正しいのかもしれませんが、なんとなく気に入らないので複数選択ができるように変更しました!

月間30万PVオーバーのブログなどを見ても、1記事が複数カテゴリに所属していることはよくありますので、別に問題ないんじゃないかという判断です。

[変更内容]

WordPress管理画面 [外観]

→[テーマの編集] → 編集するテーマを選択[LION BLOG] ※childではなく親テーマのほうです

→テーマファイル[テーマのための関数(functions.php)]を選択

→4736行目~4760行目あたりのコードを削除。(下図のハイライトしている部分)

画像クリックで拡大表示します。

4. 記事投稿画面に記事タイトルの文字数を表示する

↑これです。

Simplicity 2ではデフォルトで表示されるので、てっきりWordPressの標準機能だと思っていましたが違うようです。

[変更内容]

WordPress管理画面 [外観]

→[テーマの編集]

→ 編集するテーマを選択[LION BLOG Child]

→ テーマのための関数(functions.php) に以下のコードを記載

//Wordpress投稿画面のタイトル文字数をカウントする
function count_title_characters() {?>
<script type=”text/javascript”>
jQuery(document).ready(function($){
//in_selの文字数をカウントしてout_selに出力する
function count_characters(in_sel, out_sel) {
$(out_sel).html( $(in_sel).val().length );
}

//ページ表示に表示エリアを出力
$(‘#titlewrap’).after(‘<div style=”position:absolute;top:-24px;right:0;color:#666;background-color:#f7f7f7;padding:1px 2px;border-radius:5px;border:1px solid #ccc;”>文字数<span class=”wp-title-count” style=”margin-left:5px;”>0</span></div>’);

//ページ表示時に数える
count_characters(‘#title’, ‘.wp-title-count’);

//入力フォーム変更時に数える
$(‘#title’).bind(“keydown keyup keypress change”,function(){
count_characters(‘#title’, ‘.wp-title-count’);
});

});
</script><?php
}
add_action( ‘admin_head-post-new.php’, ‘count_title_characters’ );
add_action( ‘admin_head-post.php’, ‘count_title_characters’ );

Simplicity 2との比較

素人視点ですが、ブログ開設から使い続けているテーマSimplicity 2とLION BLOGの機能面、ビジュアル面を比較しました。

機能面はSimplicity 2のほうが優れている

ウィジェットが挿入できるエリアの多さやカスタマイズ画面で設定できる項目の多さなど、機能面はSimplicity 2のほうが優れているように思います。

設定できる項目数が多い=機能が優れていると考えるのはいかにも素人らしい意見かもしれませんが、プログラミングとかできない僕にはかなり有り難いです!

SEOやレスポンシブ表示はSimplicity 2もLION BLOGも当然のように施策済みです。

ビジュアル面はLION BLOGの勝利

デフォルトで搭載されているスキンがめちゃくちゃ綺麗です!

カラーピッカーを使ってテーマカラーを自由に設定できるのは、個性が表現できるとても良い機能だと感じます!

2018年は新規ブログをLION BLOGで作る人やLION BLOGに乗り換える既存のブロガーが大勢現れ、大流行のテーマとなるかもしれません!

2018/09/13 追記 LION BLOG の使用をやめました

もうだいぶ前からですが、LION BLOG テーマの使用を止めています。

理由は、プログラミング素人にとっては、何かと かゆいところに手が届かない作りだからです。

この記事を読んでいただいてもわかるように、親テーマのコードをいじらなければ不要な機能がOFFにできないのが不便すぎる。

また、このような不便さを含んでいるにもかかわらず、テーマが半年以上更新されていない点も、同じテーマを長く使用することを考えるとやはり不安があります。

自分でガンガンコードを書いてカスタマイズできる人にとっては素晴らしいテーマなのかもしれませんが、僕みたいな素人には使いこなせませんでした。

WordPress無料テーマはCocoonが最強!

LION BLOGに関する記事内で別のテーマを紹介するのもどうかと思いましたが、1記事書くほどでもないのでこちらで。

現在使用させていただいているテーマは Simplicity 2の後継テーマ Cocoon です。

Cocoonはフォーラムが活発なので、疑問に思ったことをフォーラムで検索すれば大抵誰かが先に質問しているため、すぐさま解決することができます。

また、Cocoonを使用しているブロガーが多く、Cocoonのカスタマイズ方法についての高品質な記事もたくさん見つかります。

LION BLOGはあまり広く使用されていなため、この記事のような低品質な記事でも検索上位に表示されますからね…。

さらに、Cocoonは不具合の修正はもちろん、ユーザーの要望などを反映したバージョンアップが頻繁に行われるため、安心して長く使えるテーマだと思います。

Cocoonかゆいところに手が届きすぎてめちゃくちゃ快適なテーマですので、無料の高機能テーマをお探しの方にオススメです!

おわりに

素晴らしいテーマを無料で公開してくださる作者さんに感謝します!