496

ブログテーマのカウンターを改造した

カウンター付きのテーマ

今使ってるテーマはSimple Daysという物なのですが、これにはテーマ純正のカウンターがあります。

こんなの。

でもなんかしょb…地味

テキストベースだし、数字と文字の間にスペースないし、なんかスペース広いし、どうにも地味というのが感想でした。(作者さんすんません

なら改造してみよう!となったのです。

そうだ改造しよう

まずはテキストベースで改造を試みたのですが、そもそもいくらどう文言を変えたところでイマイチ納得できませんでした。

じゃあなんかリッチな装飾を入れるか!?といえば、それも違うよなぁという感じで…。

閃き

そこでふと、そういえば昔のカウンターって画像だったよねってことを思い出し、そうだカウンターは文字でなく画像にしようとなりました。

画像にしてみた

という訳で、サクッと画像にしてみて見栄えは問題なかったのですが、ちょっと納得できない部分がありました。

一枚の画像にしたい

そう、画像と言っても0-9のカウンタ画像を羅列してるだけだったので一枚の画像になっていなかったのです。

そこで一枚の画像にするにはどうすればいいか調べました。

GDとかImageMagicという単語は知っていたので、この辺りで出来るのではないかという筋です。

GDを使ってみよう。

ImageMagicは2016年あたりで更新が止まっている?のと、クリティカルな脆弱性があるようなので、どちらかといえばPHPオフィシャル?のGDを使ってみることにしました。

正直ImageMagicの脆弱性関係ない気がするんですけどね。まぁほら、GD使ってみたかったんですよ。

透過処理が難しい!

ここはぶっちゃけ最後まで妥協しました。

どうにもアルファブレンディングは出来るのですが、アルファ値そのものを扱うことはできない?ちょっとここ調査不足なんですが…w

昔の透過GIFって255, 0, 255を背景色にして、それを透過色として扱ってたじゃないですか。あれをやりました。

実現方法

予め幅高さを設定した背景色255, 0, 255を透過した矩形画像(キャンバス)を生成して、その上にカウンタ画像をのっけていきました。

取り敢えず合計カウンタを画像で出したかったので、widget-page_view.phpの27行目で指定しているところを空文字に

45-46行目を以下で書き換えました。割と力技な気もします。

yahman-add-ons/assets/images/counter/というフォルダは私が勝手に作ったので標準だとありません。ここにカウンタ画像を突っ込んでます。

ついでにカウンターの値も旧サイトから継承したので立派になりました(ぉ

いやー、ねこみみカウンターいいですよね。大好きです。

りこ🍥
  • りこ🍥
  • 🌌ネトゲ廃人を経てWeb漂流物に成り果てた何か。さて次へ向かう先はどこやら。えっちらほっちら。

コメントする

メールアドレスが公開されることはありません。