ご無沙汰しております、東田ダダーンです。
約5年ぶりに当ブログをリニューアルしました。
サイトリニューアルの経緯
この記事は過去の内容の記事です。
今年は、この「ネット上ではゴミのような存在のサイト」をなんとか、再利用したいという気持ちがあり、サイトリニューアルを進めていました。
途中までは作成を進めていたのですが、テーマ作成はやはり大変です。。。
デザインに関しては、Kendrick Lamar、SZAの「All The Stars」のPVに憧れて、あんな感じで星をちりばめたサイトを作成したいと思っていたのですが。。。
そんなスキルねぇわ!
と、気づいてしまい。。吐血。
サイトの作成まではすんなりいくんですが、コメントページとかめんどくせーってなるんですよねぇ。。
これはやはり、世の中は素晴らしいテーマがあふれてるじゃんと、使うしかないじゃんと。
そこで調べた結果、すごく評判のいいテーマを発見。
FITさんが提供されている「LION BLOG」でした。
LION BLOGの特徴
癒されますね。ネコ科。
ライオンはさておき、このテーマ、無料なのに多機能すぎます。
レスポンシブ、AMP対応、表示速度が速く、SEOも最適化。
カスタマイズ性も高く、触った感想としては本当に良いテーマだと思います。
LION BLOGの良いところ
- デザインがシンプルでかっこよく、見やすい
- カスタマイズ性が豊富、htmlやphpの知識がなくてもカスタマイズできる
- プラグインなしでお問い合わせ、関連記事、ランキング等が使える
- AMP機能が備わっている
- 表示速度が速い
表示速度が速いというのも、基本的にはJavaScriptやプラグインなどは使わずに無駄な部分をそぎ落とし、表示を行っているからというもの。
このナチュラルな感じいいですよね。
ですが、わたくしはまぁまぁ追加でJS入れさせていただきました。
そういうところが、大人になるというか、
ナチュラルな無垢なものが、汚れていくといういうような物を感じ、
自分もあの無垢な頃から変わってしまったな、と気づかせてくれるテーマでもありました。
プラグインなしで使える
プラグインなしで使えるというと何が?という感じですが、SEOの事も考えられたテーマという事なので、All in One SEO Pack等のプラグインがなくても、metaタグなどの基本情報が入力できるようになっています。
その他、お問い合わせフォームもデフォルトで使えます。
当サイトに関しては、そもそも、お問い合わせに自体、無縁な状態なので、、、以前から一応設置しているコンタクトフォーム7そのまま置いてます。
基本的にプラグインを使いたくない私としましては、このテーマを導入する際に、いらないプラグインを断捨離しました。
デフォルト機能(プラグインなしで使える機能)
すべての機能を補えるというわけではありませんが、以下のプラグインを使わずにデフォルトで機能が備わっています。
- All in One SEO Pack(タイトル、ディスクリプションのmetaタグ設定)
キーワードや詳細な設定はできないので、気になる方はプラグインをインストール! - Contact Form 7(問い合わせフォーム)
- Table of Contents Plus(目次機能)
- WordPress Popular Posts(人気記事表示)
- Yet Another Related Posts Plugin(関連記事表示)
機能としてないもの(使用の場合は追加必要なプラグイン)
- WordPress Ping Optimizer等のインデックススピード補助する機能
- Pz-LinkCard(リンクをカード形式で表示)
WordPress Ping Optimizer等のPing送信系はしょうがないかなと思いますが、リンクカード等は今後のアップデート等で追加されるかもしれませんし、現在、有料版が開発中とのことで、そちらで実装されるかもしれませんね。
ただ、デフォルトでこれだけの機能がついてるのはありがたいです。すごいです。
気になったところ
一覧ページなどで表示される画像について
トップやカテゴリー等の一覧ページに標示されるアイキャッチ画像が、フルサイズで表示されており、それをCSSで制御しているのが、気になりました。
GoogleのPageSpeed Insights等で速度チェックして引っかかる項目がこの画像関連ですね。
AMP対応について
その前にAMPとは?と思った方は下記をご覧ください。
ライオンブログは、AMPページのデザインもほぼ変わらず表示されるので、プラグインで無理やりAMP表示させるものより、ぜんぜん良いと思います。
ですが、テーマが対応しているから安心と思っている方も多いと思いますが、適切にAMP対応させないと、Google Search Consoleからエラーが来ることがあります。
過去の記事にAMP対応していないタグが入ってると、テーマ側で変換できない物はエラーになり、AMPとして認識されません。
特にAmazonのアソシエイトタグとか、私は引っかかりまくりでした。
ライオンブログでは、各記事に埋め込んだコンテンツ(YouTube、ツイッター、iframe等)のScript設定をしないといと、AMPエラーになる可能性が高いです。
エラーが出てる場合はまず、そこを見直してもいいかもしれません。
僕の場合は追加で書いたJavaScriptが、AMPページでも表示されるという事があったので、下記の方法で修正しました。
テーマカスタマイザーに書いたJS等をAMPで表示させない方法
ライオンブログのAMPページでjavascriptの記述が吐き出される問題、子テーマに無理やり条件分岐つけました。
<?php if(!$myAmp): ?>
<?php wp_footer(); ?>
<?php if (get_option('fit_advanced_foot')): ?>
<?php echo get_option('fit_advanced_foot'); ?>
<?php endif; ?>
<?php endif; ?>
ライオンブログには$myAmpという関数があるので、それを利用します。
これでAMPページにはテーマカスタマイザーで設定した内容やプラグインで挿入されるJS等は基本入りません。
なのでJavaScriptで制御しているものがあれば注意してください。
カテゴリーについて
LION BLOGでは、カテゴリーを複数選ぶ事ができません。。
おそらく、カテゴリーがゴチャゴチャにならないように、あえてそういう仕様にされているのかと。
デザインもサムネイル画像に「カテゴリー名」を乗せる形なので、複合するとどちらを優先するかとか、いろいろ問題がでるからなのでしょうか。
SEO的にも一つに絞った方が、閲覧者もより理想の答えに近づきやすいかもしれませんね。
一応、カテゴリを複数選択できる方法はあります。
(ごにょごにょしないといけませんが)以下の記事で紹介されています。
カスタマイズ性
デザイン性も見やすくて分かりやすくかっこいい「LION BLOG」。
このライオンブログ、子テーマにも対応しています。
ですので、テーマのバージョンアップが行われても、カスタマイズした内容が上書きされずに済むわけなんですね。
なので、本来のテーマを直接触らなくても、カスタマイズできます。
当ブログもちょこちょこいじってますので、紹介できる内容は随時、紹介していこうと思います。
LION BLOGの有料版にあたるテーマもある「THE THOR(ザ・トール)」
ライオンブログテーマの有料版テーマともいえる「THE THOR(ザ・トール)」というテーマもあります。
評判は良いみたいで、ライオンブログが良いテーマなだけ納得できます。
キャッチコピー等、決まったところにテキストや画像入れるだけである程度サイトができちゃうみたいで、さらにPWAも対応してる、もはややばいテーマですね。
あとテーマ内で着せ替えもできるみたいなんで、HTMLやCSSにあまり詳しくない人でも簡単にカスタマイズできますね。
公式デモサイト
デモを見てる限り、上位互換、ただの有料版というレベルじゃないですね。
ブログを始めるにあたって、しっかり構築したいというなら、最初からトールのテーマの方がいいかもしれないですね。
公式サイト
【圧倒的にSEOに強く・上位表示されやすいWordPressテーマ】 THE・THOR(ザ・トール)
まとめ
ということで、高機能な無料テーマ「LION BLOG」をベースに今回のリニューアルをしました。
とにかく、今年はこのサイトを動かしたいということで、
これからは、どこでどういう機能を使ったやHTML、CSS、JavaScriptなども紹介していければと思います。
玩具に関しては、生活が変わりなかなか、、、、
ただ、ありがたいことに僅かですがアクセスもありますので、残させていただきます。
また、後日、過去のサイトの紹介や、まだロゴが完成してないので、アップしていきます。
今後とも、東田ダダーンをどうぞよろしくお願いします!
LION BLOGの新しいのでました、GOLD BLOG↓
コメント
こんには。東田さん。
私もlion blogの魅力に魅かれ、ブログをカスタマイズ中です。
現在、ロゴ画像を大きくするのに悪戦苦闘中です。
東田さんもロゴ画像を使用していますよネ!?
PCの方はなんとかそれなりに大きくなりましたが、スマホ表示の方が全然大きくなってくれません。
いろんなブログを検索しているうちに、東田さんのブログをスマホ拝見していたら、私がしたいと思っているロゴ画像の大きさになっているのに気付きました。
誠にすみませんが、どのようにカスタマイズをしたのか?
わたしにレクチャー
して頂けないでしょうか?
( `・∀・´)ノヨロシク
ブログはカスタマイズ中なので、テスト記事しか投稿していません。
よしたか様、
当ブログをご覧いただき、またコメントをくださり、誠にありがとうございます。
当ブログでもロゴに画像は使用していますが、ヘッダーのロゴ箇所はLion blogのデフォルトのスタイルを適用しております。
(特になにか触った記憶はございません、、、再度、確認しましたが変更した部分はございませんでした。)
先ほど、ブログを拝見させてもらいました。
大きさに関してご希望のサイズがどのようなサイズなのか、わかりかねますが、要素を確認させてもらったところ、子テーマのスタイルが上書きされていたので、スマホサイズのスタイルが当たらなくなっていたのではないかと思います。
@media only screen and (max-width: 767px){
.siteTitle__logo img {
max-width: 176px;
width: auto;
height: 40px;
}
}
上記の@mediaを子テーマのスタイルに記入し一度お試しください。
(サイズはご希望のサイズに変更してくださいね!ライオンブログのデフォルトスタイルなので!)
こんばんは。
早速のアドバイスありがとうございます。
上記の@mediaを子テーマのスタイルに貼り付けて、サイズを変更してみましたが、特に変化はありませんでした。
東田様のブログをスマホで観た時のロゴ画像のサイズは自分のより大きく感じました。
なので何かカスタマイズしたのかな~と思いました。
読者にサイトタイトルをアピールしても肝心な記事を読まれなければ意味が無い。
事はわかっています。
でも「このブログを再度訪れたい」と言う感情を持たせるためには、スマホ表示の時タイトルとヘッダー画像が重要な面があると思います。
少しでも読者離れを避けるために、ロゴ画像を大きく魅せたかった思いでレクチャーを頼みました。
お忙しいところスミマセン。
(人”▽`)ありがとう☆ ございました。
よしたか様
早速、対応されたのですね。
ご希望のようにはならなかったとのことですが、先ほど確認させていただいたところ、スタイルが適用されデフォルトのサイズに変わってました。
(デフォルトのサイズなので、縦横比の関係でかなりロゴが小さくなっていますが。。。)
おそらくではありますが、スマホで確認されたのであれば、以前のキャッシュを読み込んでないでしょうか?
どちらにせよ、お力になれず残念です。
今後とも当ブログをよろしくお願いします。
こんばんは。
どうやら、スマホのキャッシュのせいでカスタマイズが反映されていなかったような気がします。
スマホのキャッシュ削除および画像の縦横の比率を、ほぼ同率にして変更した結果、希望するサイズに表示されました。
ついでにマージンも設定しました。
結局本当の原因はわかりませんが、東田様のアドバイスによって解決できました。
感謝感激です。!!!!
(人”▽`)ありがとう☆
ここで別の質問してよろしいでしょうか?
このサイトを開くたびに、ヘッダーおよびトップページ上部のアドセンス広告が、正常に表示されたり、途切れて表示されたりします。
これって ブラウザのキャッシュのせいなのか?テーマのバグでしょうか?
ご教授お願いします。
何度もスミマセン!!!
( `・∀・´)ノヨロシク
よしたか様、
うまくいったようで、何よりです。
「このサイト」とは当ブログでしょうか?
当ブログのヘッダーはlionblogのデフォルトの表示からカスタマイズしております。
ですので、通常のヘッダーの表示とは違います。
(スマホサイズ表示時は、スクロールすると上からヘッダーがスライドする)
端末によって表示が異なってしまったのであれば不本意ですが、よしたか様がご覧いただいた環境では、ヘッダーが重なって途切れてるように見えたのではないでしょうか。
私の環境では、その現象が確認できないため、なんとも言えませんが、テーマのバグではないと思います。