🎨
はじめに 🌿
Zennみたいに、記事タイトルのそばにちょこんと絵文字が出てくるUIって、かわいいよね？
れいなは最近「自分のブログでも、記事一覧に絵文字出したらもっと親しみが出るのでは！？」と思い立ち、テンプレートを改造してみました〜！(っ´ω`)っ🎨
この記事では、絵文字表示をテンプレートで自動化したゆるい奮闘記をお届けします。
この記事でわかること ✏️
-
Zennっぽい「タグ絵文字」の発想の流れ 💡
-
HubLでの set / if / for のちょっとした罠🌀
-
「こんなこともできるんだ！」という、テンプレートの自由度感✨
結論 🎯
タグに応じて絵文字を自動表示する仕組みは、テンプレート側で作れる！
手動で毎回絵文字選ぶのは手間すぎる〜〜って人におすすめの方法です♡
模索のメモ 📝
思いつき💡
-
絵文字かわいくしたい！
-
でもCMSのモジュールフィールドで毎回選ぶのは現実的じゃない……😇
-
→ じゃあ「タグに応じて絵文字を自動表示」するロジックをテンプレートに書いちゃえばいいのでは？と思いついた！
試したこと🧪
-
最初はテンプレートの for ループの外で絵文字を set してみたけど、ループ内の content にアクセスできず、うまくいかなかった！
-
「あれ？ set って中でやらないとダメ？」と試行錯誤
-
if / elif / else の閉じ忘れでリストが全部表示されない事件も発生…（泣）
-
結局、ループ内で tag を確認して、絵文字を順番に判定する構成に落ち着いた！
うまくいった瞬間🎉
- 絵文字がちょこんと出てきたのを見たときの喜びよ……(っ´ω`)っ💕
- 最終的には "タグ名に応じた絵文字" を if 文で分岐して決定する流れに！
まとめ ✨
テンプレートでタグに応じた絵文字を出すって、ちょっとニッチだけどめちゃ楽しいアイディアでした🎀
HubL と仲良くなってくると、「ここまでできるんだ〜」って驚くような自由度もあって、開発者としても愛着が湧いてきちゃうかも！
こういう「小さくてかわいい改善」、もっと積み重ねていきたいな〜って思った🌸
あわせて読みたい 📖
☕ Share this post
💬 コメントしてみる？