Lazy BlockでBlog Cardをリニューアル

2024-09-21

Contents

1. とあるブログの惨状
2. デザイン
3. コード

とあるブログの惨状

これを見てくれ！

激しく下降していますが一体なんのグラフでしょうか！？

2024年冒頭付近の当サイトのアクセス数にゃー

えー！？
ものすごい勢いで減少しているじゃあないですか！
こんなブログに1000近くアクセスがあったこと自体も驚きですけど！！

ほぼ何もしてないのに減少にゃー
どうやらGoogle様のサイト評価アルゴリズムが変わったらしいにゃー

更新頻度も高くないし
最近はほぼFallGuysのクリエイティブ紹介ばかりだし
コンテンツはクソレベルなので妥当では！？

お前殴るぞ

いや、正しいでしょ！
今までこんなに多くアクセスがあったのが不思議
おそらく使っているWordpressテーマのLuxeritasのSEO対策のおかげでしょう

そうなんよなぁ
Luxeritas様のおかげであることは否定できないのだけど
ちょっと心配事が

なんでしょうか？

バージョン3.25から一年近くアップデートがないのにゃー

開発元のページを見ると
「頚椎症性神経根症を発症中。しばらくお休みをいただいております。」となっていますね

WordPress本体のアップデート毎に不具合があればアップデートがリリースされるけど新機能が出てこないのにゃー

まあお休み中と宣言していますのでそうでしょうね

ほぼほぼメンテナンスモードになってしまっているにゃー
今後も使い続けて大丈夫なのか心配にゃー

WordPressのアップデートに合わせて検証と不具合修正されているみたいなので当面は問題なさそうですけど

ただ特徴の一つである高速性については他のテーマに後塵を拝する結果になってきているみたいなのにゃー

そうなんですか！？

このページに年一回ぐらいで各テーマごとの平均速度ランキングを発表しているけど10位以下になっているのにゃー

2023年は12位
2024年は15位
ですか

まあ同じ環境ではないしプラグインの負荷とかによっても影響でるので微妙だけど
使っている実感としては昔よりもっさりとした動作になってきたな、という感はあるにゃー

そうなんですか

テーマ作者の見解としてはキャッシュ系プラグインはおすすめではないらしいけど
最近はサイトヘルスで遅いと判定されるからトライアンドエラーでキャッシュを試したらWP-Optimizeのキャッシュ機能がちゃんと動いているにゃー
サイトヘルスも良好の判定にゃー

そうなんですね

サーバー自体が安いプランだから遅いけど昔は体感で早かったにゃー
なんかWordpressの進化についていけてない感じがするにゃー

PHPとかのバージョンも上がってますからどれが影響しているのかわかりませんけど

あくまで推測だけど
動作環境を広く考えると遅くても動く昔のコードが良いかもしれないけど
その分、特徴である高速性が犠牲になるのはちょっと

実際のコードを見ていないのでなんとも言えないですけど
逆に古い環境だと高速性が際立つのかもしれません

あと気になるのがやはり作者の体調不良よな

こればかりは仕方がありませんね

自分もコロナ禍で家にこもりっきりで体調崩したので人のことは言えないけどデスクワークばかりだと足腰が急激に劣化するから本当に運動は大切にゃー
家から出る習慣はつけておいたほうがいいにゃー

回復には苦労しましたよね

最近も運動不足ぎみではあるのでここにまとめた運動をやっていきたいと思うの

お前の話はどうでもいいけど

で、やはり気になるのが今後なのにゃー
このまま開発が続くのかどうか
同じくWordpressテーマのCocoon作者の方も元々障害を抱えているようで将来の事業継続性を考えてエックスサーバーに譲渡しているにゃー

こればかりは作者の意向次第なのでなんとも言えないですけど

継続するかもしれないけど開発終了の可能性も否定できない中途半端な状態が今のLuxeritasかもしれんにゃー

そうなのか！？

もしLuxeritasから別のテーマに移行するとしたら結構しんどいかもしれんにゃー

Luxeritasの開発は終了で別の新テーマを開発するかもしませんしね

そうであればフルブロック対応のテーマになってほしいけど。
それでも完全互換性がなければ移行は厳しいと思うので今から依存度を少なくしておこうと思うの

というと！？

Luxeritasだけの機能は使わないようにする方向でブログをやっていこうかと

具体的には？

コンテンツはこの吹き出しがほぼ90%だからあとはブログカードがLuxeritas依存の機能にゃー

これを使わないようにするということですね

うむ
既存のところもLazy Blockでほぼ作っているのでこれを改良して独自のブログカードに置き換えようと思うの

デザイン

置き換えの楽なLazy Blockで作っておいて良かったですね

うむ
で、新しいブログカードのデザインだけど調査の結果、Claymorphismというのが流行っているらしいのでそれを取り入れるにゃー

なんですか、それ？
聞いたことないのですが・・

見ればわかるにゃー
丸っこいデザインがFallGuysのコンテンツと親和性が高いと思うの

まあそうでしょうけど
あまりそれ以外は馴染まなさそうという感じがします

ということでジェネレーターでサクッとCSSを作成にゃー
CSS Gridもつかったのでこれもジェネレーターでサクッと作成
タイトルとリンクだとわかるアイコンをつけてとりあえず完成にゃー

なんかやたらとでっかいな
これに以前はリンク先のスクリーンショットがアイコンになっていたはずですけど

そこまで実装すると大変なのでリンクとわかるアイコンで代用にゃー
後で作る、いつか

いつかっていつだよ？

いつかだよ

まあいいや

モバイル向けはこのデザインにゃー
シンプルでいいと思うの

アイコンがないのですね
シンプルすぎてリンクだと思われないのでは！？
なにかボタンのようにも見えますけど

とりあえずこれでいいでしょ
第一段階としてこれでリプレースしていくにゃー

マジかよっ！！

コード

で、Lazy Blockに書くHTMLはこんな感じ

<a class="bcv1-container1 bcv1-clay" href="{{url}}" target="_blank" rel="noopener noreferrer">
  <div class="item1 bcv1-clay">
    {{text}}
  </div>
  <picture class="item2 bcv1-clay">
    <source srcset="{{image.url}}" />
    <img loading="lazy" decoding="async" alt="{{text}}" class="lazy" src="http://possiblytrue.com/wp-content/uploads/2024/09/link5.gif" data-src="http://possiblytrue.com/wp-content/uploads/2024/09/link5.gif" data-loaded="true">
  </picture>
</a>

image.urlで一応他のアイコンに差し替えることができるのですね