Blogのデザインの変更…といいますか、改修といいますか……
兎にも角にも、デザインを弄り始めたのでそのご報告です。
以下、自分用の作業日報的にザックリと書いていきます。
まずはデザインテーマの変更！
自分が利用しているこの『はてなBlog』をスマホ表示に対応させるのは結構簡単です。
デザイン設定でレスポンシブデザインに対応させるように設定すればいいだけなので…
だがしかし！
引用した上のページにもあるとおり、デザインの基礎となっている『デザインテーマ』がレスポンシブデザインに対応している必要があります！
んで、自分が今まで愛用していたのは『Mono』というデザインテーマだったんですが…
Monoはそれに対応していないのです orz
どうにかならないかをグーグル先生に相談していたのですが、その最中に、はてなブログでは2023年8月に記事に最終更新日を表示する機能が追加されていることを知りました(；⌒∇⌒)
更に更に、デザインを弄る際の最大の懸念材料として「はてなブログは新しいデザインテーマを導入すると、少しずつせこせこと積み上げてきたデザイン設定（デザインCSSのこと）がリセットされる」という、ある意味とんでもねぇ～仕様があったんですが……
なんと！今年8月にこの問題が解決されていました！Σ(￣□￣;)!!
ディモールト！ディモールト！いいぞ！
これで失敗を恐れずにガンガンと弄れる！！(￣□￣)ｑ
作業開始！
つーことで、レスポンシブデザインと更新日表示の両方に対応したデザインテーマ『Reach』を導入～！！
わ～♪どんどんぱふぱふ～♪
今まで使っていたMonoと同じシンプル系のテーマなので、背景の設定を同じにしてやれば見た目は殆ど変わらないですね！d(≧▽≦)
ただ、標準だとサイドバーが左側なので…
↓こちらを参考にして右側へと動かしました。
あと、記事が表示される部分の横幅を広げたかったので…
↓こちらを参考にして広げてみたんですが……
残念ながらスマホで表示した際に文字が画面外に飛び出す状態になってしまったので、この設定の採用はひとまず断念しました orz
いずれリベンジしてやるぜ……うごごごご。
最終更新日の表示について
記事に更新日を表示させるのも、テーマが対応していればデザイン設定からチェックボックス1つをクリックするだけなので超簡単です(b^ｰﾟ)
んで、その設定をONにしてみた図がコチラ↓
……う～ん、微妙？ｗ
そのマークだけじゃ、この日付の意味がわからくね？
…と思ったので、色々と調べて、いじってみた結果がコチラ！↓
よ～しよし！
これならわかりやすい！ヽ(´▽`)ノわーい
やり方としては、デザインCSSに『.date-last-updated:before {content: "更新日";}』を加えるだけでした。
参考にした記事はコチラ↓
Blogタイトル部分で悩む
あとはBlogタイトルの文字色を変えたいな～
いや、そもそも、今までと違ってタイトル部分の空間が横にいっぱい広がってて、なんか勿体ないスペースになってるなぁ…
とか考えながら、試しにテキトーな画像をヘッダ背景にしてみたところ……
↓こんな表示になりましたｗｗ
俺、大爆笑！ｗｗｗ
本当に何の考えも無しにポチった画像だったんですけどね！
兎にも角にもひとしきり笑った後で、さすがにコレはどうかと思い、この設定はキャンセルしましたｗ
でも、背景画像を適用するとタイトル部分の横幅や文字の色が変化することが分かったので、まぁ実験としては大変有意義な結果となりましたｗｗ
あ～、腹筋痛ぇ～ｗｗｗ
戦いは続く！
…という感じで、今週はデザイン関係で遊んでおりました(；⌒∇⌒)
あとはタイトル部分とその下の謎スペース（Blogデザイン調整中と表示されてる部分）のデザインが決まれば、改修作業もひと段落…って感じですね。
……ただ、今のところ完全にノーアイデア状態なので困っていたりします。
う～ん、タイトル画像。上のヤツにしちゃおうかなぁ～( ;´Д｀)
