ブログのUIを改善(？)しました！

動機

情報系なので当然HTML, CSSが書ける。¹
→書こう

概要

HTML, CSSを完全に理解した。²

やったこと

フロント知識がほぼない無課金ユーザーの状態で、何とかスマホのUIを弄り、はてなブログに抗った。³
以下詳細

ブログを開設する

はてなブログ開設ページ から、とりあえずホイホイと言われるがままに作りました。

スマホのレスポンシブデザイン⁴に対応しているテーマをインストール

パンピーなので、今回は無難に「ひつじの雑記帳」さんが公開している Minimalism というテーマをインストールしました。
上に貼ったリンク先で「ひつじの雑記帳」さんが書いてくれていることを全部やりました。(説明放棄)

背景とアイコン画像用のドット絵作り

「Neutral」さんが公開しているドット絵描画Webツール ミニドット絵メーカー２ を使用してアイコンと背景に使用するドット絵を作成しました。
どう森でもドット絵を作ったことあるけど、ツールとか使ったのは地味に初めて。可愛い…可愛くない？

作成したドット絵。かなり飼いたい。

なぜか寄り道してヘッダ部分にCSSを書き込んで「私のアカウント」ボタンたちを配置

情報系として高い意識を持っているぼくは、ブログを開設した直後からすでに、ブログとSNSとの連携を目論んでいました。
テキトーにググっていたところ、 このブログ を発見し、早速ここに書いてあるコードをコピペし、各種SNSのマイアカウントに飛ぶボタンをヘッダに付与しました。天才。⁵

背景を設定。。。

「設定」->「デザイン設定」->「カスタマイズ(レンチマークのとこ)」->「背景画像」 にて、上で作って保存したjpg画像をアップロード！もちろん繰り返し設定はオン！
すると。。。

ああああああああああああああああああ

どうして…⁶
とりあえずこのまま進めました(は？)

疲れたのでもういいですか？

シンプルにもう書くのが疲れたので、実装した箇所と参考にしたWebページを列挙します。ごめんなさい。
技術系のブログ書いてる人、精神力ハンパないですね笑　以下、列挙。

• プロフィールカード作成、埋め込み：はてなブログの記事下にプロフィールカードを表示するカスタマイズ
• Twiiterタイムライン埋め込み：はてなブログにTwitterのタイムラインを埋め込む方法
• 右下の「ページ上に戻るボタン」と「ドップページに戻るボタン」：うっすら透明な「上に戻る」ボタンのはてなブログ設置法
• お問い合わせGoogleフォーム埋め込み：【無料版】はてなブログにお問い合わせフォームを設置する方法
• コピーライト埋め込み：俺
• タイトルをボヨヨーンとバウンドさせる：俺(ここ3時間くらいかかった。馬鹿か？)
• その他：たくさん

とりあえず完成！W

PC版

スマホ版

いいんじゃないですか？

最後に

まじで、書くの疲れました。絶対実装よりブログ書くほうが体力使います。
まあ案外楽しかった部分もあるので、これからも気が向いたらぼちぼちいじっていきたいと思います。
後、ほんとにどうでもいいんですけど、最後に今日の夢日記の概要を以下に貼っておきます。(なんで？)

今日の夢日記です。Twitterにもあげます。最近支離滅裂気味で心配。

それでは、今日はこの辺で！(毎日は更新しません。体力的に死)

---

1. 書けません。↩

2. してません。コピペです。ごめんなさい。↩

3. はてなブログはPC版のUIは直接いじれるけど、スマホ版のUIは課金しないと直接は無理。うんこ。なので、スマホのレスポンシブデザインをオンにして、PC版の方でCSS記述してゴリ押す。↩

4. これに対応していないテーマはスマホでUIがありえん崩れる。悲しいね。↩

5. よく考えたら絶対必要ないので後から消しました。↩

6. ブログのほぼ全てのコンテンツ(「記事」とか「サイドバー」とか「メニューバー」とか、そういった要素)の背景はデフォルトで無色です。ぼくは解決方法として、「CSSデザイン」の中で、背景以外の全てのコンテンツを四角い枠で囲って背景を白に設定しました。(絶対頭悪い)↩