ブログのサイドバーを最近いじったところでまた1つ気になる点がでてきた。
｢次のページ｣がシンプルすぎる。
しかもトップページでは左に寄っている。
もっとデザイン性を高くしたい！
テーマによって次のページがシンプルになる？
本ブログははてなブログのテーマundershirtを使用してトップページをカード型表示にさせているが、他にもカード表示にしているブログを拝見すると、このシンプルな次のページになっているブログが見られる。
はてなブログで選んだテーマや仕様によって、次のページボタンが端によったり、小さくなってしまうようだ。
シンプルでいいんだけども…
もっと可愛いくしたい！
飾り気が欲しい！
とカスタマイズCSSを探す日々。
でも、思い描く次のページのカスタマイズCSSを探すのに一苦労。
｢次のページ｣はページャーと呼ぶ
この事実を知ることさえ数日かかったｗ
はてなブログページャーをカスタマイズ
いざページャーのカスタマイズを探しても、前のページボタンを作るCSSばかりでさページャのデザイン自体をカスタマイズしているCSSが見つからない。
しかも多くのページャーカスタマイズCSSではデザインが崩れてしまった。
が！
やっとの思いで次のページが崩れることなく飾り気のあるデザインCSSに辿り着く。
参考にさせていただいたブログ▼
本当に感謝(´；ω；`)
ちびっこ倶楽部さんが公開しているCSSは当ブログと相性がよくページャーを綺麗にデザインすることができた。
AIで次のページのデザインＣＳＳを作る
ここからはちびっこ倶楽部さんのCSSをお借りしつつ、生成AIのGeminiに頼りオリジナルのページャーを作ってみた。
といってもやり方は超簡単∇
Geminiを開き、参考にしたいCSSを貼り付け(今回はちびっこ倶楽部さん公開のＣＳＳ)自分の好みのボタンサイズや色の変更を入力するだけ。
参考までに私がGeminiにお願いしたのは
・ボタンサイズを小さくして
・ボタンの色をピンクにして
・トップ画面の次のページを中央にして
など。
そうするとGeminiが希望に沿ったCSSを作ってくれます。
それを自分のブログのデザインCSSに貼るだけという、本当に他力本願の作業🥺
※全てのブログにおいて動作・表示の保証は出来かねます。CSSの変更時はコピーやバックアップなど慎重に作業を行ってください。
デザイン性が高まった次のページ
そして完成したオリジナルページャー✨
なんもしてねぇだろ。
シンプルな次のページから、デザイン性の高いページャーへと変貌しました。
AIの活用を使うヒントはNomuさんからいただきました。
生成AIってすごい！
簡単にCSSを作ってくれるので初心者ブロガーの人にもおすすめの方法です👍
