サイトデザイン変更の報告書

<!-- markdown-mode-on --> <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzIo8_GLDL2Yz-hZyTzph0MkI4tD_syOFvFGqDjty8xGS1NKWfpn0nPyg-SQtFDvAwfDVsAljAxqOtzTsCgfJuVXcarMJdyGgt4mQfdG3r4PmeIVsxMG6Sij4zo_XowlmiQPcaMZNhcHwMSMUSe5z5PnXS211VpE02_T87tPJGs21Z3ciweuHfbaQrWqg/s1200/1000086081.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="630" data-original-width="1200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzIo8_GLDL2Yz-hZyTzph0MkI4tD_syOFvFGqDjty8xGS1NKWfpn0nPyg-SQtFDvAwfDVsAljAxqOtzTsCgfJuVXcarMJdyGgt4mQfdG3r4PmeIVsxMG6Sij4zo_XowlmiQPcaMZNhcHwMSMUSe5z5PnXS211VpE02_T87tPJGs21Z3ciweuHfbaQrWqg/s400/1000086081.png" width="400"/></a></div> あるいは、逃亡、空白の9か月。 キリよく10か月って書こうとしてたのに今11月だった。終わりです。 いい感じのことを言いたいと言い出すと行き詰るタイプでした。 今日の反省文はこの部分だけとする。なげつです。 書きかけの感想まとめ記事はもう燃やすとして、やる気が起きない理由つぶしを行いました。 具体的に言うとブログのカラー変更・追加・内部的機能追加です。 ## 変えたところ 主目的を「自分にとってより気分の上がるサイトにする」としました。 手を入れたところは大きく3点になります。 1. テーマカラー 2. トップレイアウト 3. シェアボタンの追加(Bluesky・Misskey) あとはこまごました数値部分です。以降は覚書。 ### 問題点の洗い出し 変更するには何が問題なのかを考える必要があります。 ここを明文化できないとモヤモヤは継続すること必定。なので妥協せずに問題点を上げていくことにします。 以前のテーマで気になっていた点 - **背景色の濃さ** - ライトテーマでも背景色が濃いと感じられる色 - 全体的に色同士のメリハリが足りないためぼんやりして見える とにもかくにも見た目が重要ということで、まずは色に手を入れるべきと判断。 テーマカラーの変更は要検討。 その他の気になった点 - **機能面** - Bluesky、Misskeyへのシェアボタン追加の必要性 - 投稿のハードルが下がる工夫 多様化していくSNS全部追うのは難しいですが、使っているサービスに繋がる窓口は必要であると判断。 投稿までにやることが多ければ動かなくなるのが人間、というか自分の特性…… その部分のハードルが下がるような工夫を一さじか二さじ。 ### 実際に実装する ある程度することを決まったので、バックアップを取ってから実際に手を入れる。 バッグアップ大事。プレビュー大事。 #### カラー変更 使用しているテーマ**F-light**にはテーマデザイナー搭載版があるのでそちらから編集。 保存しては各所の巡回を繰り返す。 |変更箇所|色合い|採用理由| |:--:|:--:|:--:| |背景|青緑系のグレー|明るすぎず、ぼやけない| |メイン|紺色|明るすぎず、暗すぎない| |サブ|くすみピンク|青と喧嘩しない| **人類は青と7の数字が好き**という普遍的な考えに素直になることからはじめました。 ピンクは自分の逆張りをなだめすかすための一種の処置。 様々なグラデ配色サイトで眺め、分かりやすくWEBデザインのUIっぽい色は「うちそういうんじゃないんで……」と感じたのでそこは避けました。 <p style="background-image: linear-gradient(to right, #FA8BFF, #08AEEA, #2AF598); color: #FFF; text-align: center;">UIっぽい配色、こういう鮮やかな色の組み合わせのこと</p> #### トップレイアウトの変更 テーマカラー変更中に思い至った追加の変更点。 感覚のアップデートにより、カード型への変更を決定。 合わせて、テーマのバージョンアップも実施。 [F-light の最新アップデートについて | ふじろじっく](https://fujilogic.blogspot.com/2024/07/f-light-update-without-jquery.html) #### 各CSSの調整 デベロッパーツールを活用、変更箇所が不明な場合はChatGPTを活用。 - 注目の投稿の表示幅/RECOMMEND表示位置の調整 - 記事一覧のカテゴリ表示を常時化 - グラデーションを一方向化 - 各見出しデザイン - 記事内リンクデザイン - 文字サイズ/行幅レイアウト - ソースコードの色分け(シンタックスハイライト)導入 参考元 [BloggerでMarkdownのシンタックスハイライト](https://djeeeno.blogspot.com/2018/01/20180113-01-blogger-markdown-highlight-01.html) [【Blogger】コードのコピー用にボタンを作成してみました【highlight.js + Copy Button】](https://sutasutashiki.blogspot.com/2021/07/create-highlight-js-copy-button.html?m=1) #### シェアボタンの追加 Misskey在住のためMisskeyを追加。 またちょうど移住がホットだったためBlueskyも追加。 MisskeyHubを利用したシェアボタン導入の先達の知恵を拝借するも、なぜかうまくいかず。 参考にしたサイト： 違いを調べるためにXのシェアボタンからURL関連部分をコピーしたところ、それでうまくいったというオチがつく。 ``` <!-- Misskey共有ボタン --> <script>/*<![CDATA[*/ function Misskey_btn(){const w = 550, h = 500;window.open("https://misskey-hub.net/share/?text="+encodeURIComponent(location.href)+"&text="+encodeURIComponent(document.title),"_blank","width=" + w + ",height=" + h + ",left=" + (screen.width - w) / 2 + ",top=" + (screen.height - h) / 2 + ",scrollbars=yes,resizable=yes,toolbar=no,location=yes");} /*]]>*/</script> ``` ### 投稿のハードルが下がる工夫 操作の煩雑さも原因の一つと考え、Markdown記法での投稿方法を導入。 <figure class="blogcard"><a href="https://mizunosame.blogspot.com/2024/11/blogger-markdown-editor.html" target="_blank" rel="noopener noreferrer" aria-label="記事詳細ページを別タブで開く"><div class="blogcard-content"><div class="blogcard-image"><div class="blogcard-image-wrapper"><img alt="Blogger の投稿エディタを Markdown エディタに改造する" height="100" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj60qc5kpeRApV8VLLcKnS7VmNLLIVTIc4wqlzS18t5IS_Q6_ZSYCu_kdatXv3QxAHE_wgFPSv6aARDyihA5kjs8a4BQSMF4sCThN94FrPFPRqJQLCMpjb6P6_aussmtOkkpkBm2ytTr-yRjBTqQZAQ1D3nPIK09cSJTGajWwYTtyC7tW-ON00ZY3UKFdg/w1200-h630-p-k-no-nu/blogger-markdown-html.png" width="100"/></div></div><div class="blogcard-text"><p class="blogcard-title">Blogger の投稿エディタを Markdown エディタに改造する</p><blockquote cite="https://mizunosame.blogspot.com/2024/11/blogger-markdown-editor.html"><p class="blogcard-description">Markdown で記事を書くことが多いのですが、現在お世話になっている Blogger の投稿エディタは残念ながら Markdown に対応していません。</p></blockquote></div></div><div class="blogcard-footer"><img alt="ファビコン" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://mizunosame.blogspot.com/2024/11/blogger-markdown-editor.html" width="16"/>mizunosame.blogspot.com</div></a></figure> mizusameさんの記事に従い、問題なく変換されてることを確認。 変換後のHTMLの確認ができないので何かが競合してるんでしょうが、いつか改善に挑戦します。保留事項。 #### Markdownはいいぞ 今、Markdownがアツい。自分の中で。 グッバイOffice！！~~MOS取得者がOfficeと縁切り出す始末~~ Markdownの良さについてプッシュすると、文法ルールの簡単さです。 ``` # 見出し1 **太字** - リスト ``` これ覚えたらそれなりのものが出力できるようになるので大助かり。 Bloggerに実装したものは、書いたものをプレビューや投稿時にHTMLに変換するものなので、入力補助などはありませんが断然書きやすくなりました。 本格的な装飾やらを多用する長文書くときはVScodeを使用すればいいかな…… ブログとほぼ同じCSS適用したプレビューを用意したので使い分けていきたいと思います。 12月にはまたアドカレ企画に参加するので、それまでにもう2本くらい追加出来たらいいなと思ってます。 それでは。