ワードプレス無料テーマ「LION BLOG/ライオンブログ」に変更!

Advertisement

ご無沙汰しております、東田ダダーンです。
約5年ぶりに当サイトをリニューアルしました。

サイトリニューアルの経緯

今年は、この「ネット上ではゴミのような存在のサイト」をなんとか、再利用したいという気持ちがあり、サイトリニューアルを進めていました。
途中までは作成を進めていたのですが、テーマ作成はやはり大変です。。。

デザインに関しては、Kendrick Lamar、SZAの「All The Stars」のPVに憧れて、あんな感じで星をちりばめたサイトを作成したいと思っていたのですが。。。

そんなスキルねぇわ!

と、気づいてしまい。。吐血。
サイトの作成まではすんなりいくんですが、コメントページとかめんどくせーってなるんですよねぇ。。
これはやはり、世の中は素晴らしいテーマがあふれてるじゃんと、使うしかないじゃんと。

そこで調べた結果、すごく評判のいいテーマを発見。
FITさんが提供されている「LION BLOG」でした。

LION BLOGの特徴

癒されますね。ネコ科。

ライオンはさておき、このテーマ、無料なのに多機能すぎます。
レスポンシブ、AMP対応、表示速度が速く、SEOも最適化。
カスタマイズ性も高く、触った感想としては本当に良いテーマだと思います。

Advertisement

LION BLOGの良いところ

  1. デザインがシンプルでかっこよく、見やすい
  2. カスタマイズ性が豊富、htmlやphpの知識がなくてもカスタマイズできる
  3. プラグインなしでお問い合わせ、関連記事、ランキング等が使える
  4. AMP機能が備わっている
  5. 表示速度が速い

表示速度が速いというのも、基本的には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送信系はしょうがないかなと思いますが、リンクカード等は今後のアップデート等で追加されるかもしれませんし、現在、有料版が開発中とのことで、そちらで実装されるかもしれませんね。
ただ、デフォルトでこれだけの機能がついてるのはありがたいです。すごいです。

気になったところ

2018/7/27 「一覧ページなどで表示される画像について」、「AMP対応について」の一部に追記

一覧ページなどで表示される画像について

トップやカテゴリー等の一覧ページに標示されるアイキャッチ画像が、フルサイズで表示されており、それをCSSで制御しているのが、気になりました。
GoogleのPageSpeed Insights等で速度チェックして引っかかる項目がこの画像関連ですね。

AMP対応について

気になったところというより、長くブログをされている方は気をつけた方がいいことなのですが、
AMP対応させると、Google Search Consoleからエラーが来まして、、、

AMP対応に関して、私自身まだ無知なところも多く原因をしっかり把握できておりませんが、
おそらく過去の記事にAMP対応していないタグが入ってるが為のエラーかと。。。

AMPページのデザインもほぼ変わらず表示されるので、プラグインで無理やりAMP表示させるものより、ぜんぜん良いと思います。
各記事に埋め込んだコンテンツ(YouTube、ツイッター、iframe等)のScript設定をしないといけないようなのですが、過去記事全てとなると、大変ですよね。。
まあテーマ変更する場合はつきものですが!

ですが、リッチカード式のニュース等の検索結果などに対応させるJSON-LDも記述されており(当たり前なのかもしれませんが。。!)ただただ、AMP形式に変換しているというテーマではなく、その先も考えられてるテーマだなと思いました。

以下の記事にAMPについてまとめました。

AMP対応って必要なの?導入のメリットなど実際に運用して感じたこと
どうも、東田ダダーンです。 ところで、雷のマーク(⚡)を見ると何を思い浮かべますか? 単純に天気予報を思い浮かべる方もいれば、 マイティ・ソーやフラッシュなどの雷を使うヒーローを思い浮かべる方もいると思います。 僕...

カテゴリーについて

LION BLOGでは、カテゴリーを複数選ぶ事ができません。。
おそらく、カテゴリーがゴチャゴチャにならないように、あえてそういう仕様にされているのかと。
デザインもサムネイル画像に「カテゴリー名」を乗せる形なので、複合するとどちらを優先するかとか、いろいろ問題がでるからなのでしょうか。
SEO的にも一つに絞った方が、閲覧者もより理想の答えに近づきやすいかもしれませんね。

カスタマイズ性

デザイン性も見やすくて分かりやすくかっこいい「LION BLOG」。
このライオンブログ、子テーマにも対応しています。
ですので、テーマのバージョンアップが行われても、カスタマイズした内容が上書きされずに済むわけなんですね。
なので、本来のテーマを直接触らなくても、カスタマイズできます。
当ブログもちょこちょこいじってますので、紹介できる内容は随時、紹介していこうと思います。

CSSをリロードでランダムに表示(スタイル)を変える方法【ワードプレス】
どうも、東田ダダーンです。 人の気持ちの変化とは一瞬の刹那。 次の瞬間には、違う色がいいと、そんな気分屋さんも多いはず。 そんな世知辛い世の中だから。。。
スクロールで遅れて表示、5分でできるパララックスの実装方法ちょちょいのちょい
どうも、東田ダダーンです。 私だけでしょうか?パララックスって聞くと、なんかポリリズムみたいですよね? あとパララックスという言葉を聞くと90年代の音楽シーンを思い出すんです。 記憶たどったら、ガンダムWでお馴染みTWO-MIXでした...

LION BLOGの有料版にあたるテーマもある

ライオンブログテーマの有料版テーマともいえる「THE THOR(ザ・トール)」というテーマもあります。
評判は良いみたいで、ライオンブログが良いテーマなだけ納得できます。

キャッチコピー等、決まったところにテキストや画像入れるだけである程度サイトができちゃうみたいで、さらにPWAも対応してる、もはややばいテーマですね。

あとテーマ内で着せ替えもできるみたいなんで、HTMLやCSSにあまり詳しくない人でも簡単にカスタマイズできそうですね。
【圧倒的にSEOに強く・上位表示されやすいWordPressテーマ】 THE・THOR(ザ・トール)

まとめ

ということで、高機能な無料テーマ「LION BLOG」をベースに今回のリニューアルをしました。

とにかく、今年はこのサイトを動かしたいということで、
これからは、どこでどういう機能を使ったやHTML、CSS、JavaScriptなども紹介していければと思います。

玩具に関しては、生活が変わりなかなか、、、、
ただ、ありがたいことに僅かですがアクセスもありますので、残させていただきます。

また、後日、過去のサイトの紹介や、まだロゴが完成してないので、アップしていきます。

今後とも、東田ダダーンをどうぞよろしくお願いします!

Advertisement
WordPress
東田ダダーンをフォローする
このブログを購読する
当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可をしてください。 東田ダダーンが更新された際、更新した旨、通知されます。
東田ダダーン

コメント

  1. よしたか より:

    こんには。東田さん。

    私も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のデフォルトの表示からカスタマイズしております。
            ですので、通常のヘッダーの表示とは違います。
            (スマホサイズ表示時は、スクロールすると上からヘッダーがスライドする)

            端末によって表示が異なってしまったのであれば不本意ですが、よしたか様がご覧いただいた環境では、ヘッダーが重なって途切れてるように見えたのではないでしょうか。

            私の環境では、その現象が確認できないため、なんとも言えませんが、テーマのバグではないと思います。