ブログのレスポンシブ化に悪戦苦闘した話

こんばんは。落武者です。

今日は 稼働記事とブログのデザイン変更したことについて書こうと思ったのですが、長くなるので、ブログのデザイン変更の件についてだけ書いていきますm(_ _)m

デザイン変更の決意

昨夜、ほったらかしだったブログのデザインを変えよう！と奮い立ってやり始める事

5時間

悪戦苦闘しながらもなんとか終えた。

なるべくアクセスがない深夜に行ったのだが、その間にもブログに来てくれた方、ご迷惑おかけしました…m(_ _)m

いままでPCはPC、スマホはスマホのデザインにしていたのだが、時代はレスポンシブだ！と思い、レスポンシブデザインにいたしました(‘ω’)

とはいえ5時間もかかっているわけで、いろいろ悪戦苦闘しました…

というわけで、深夜のデザイン変更の苦行をシェアしていきたいと思います!(バイリンガール風)

レスポンシブにできない

初手からリミット解放のような大打撃です。

実は以前からとりあえずレスポンシブデザインにしよう！と思っていたのですが、何をやってもただPCのデザインを縮小しただけのデザインになってしまい、頭の血管がいくつか切れてギブアップしていました。

選んだテーマはレスポンシブ対応になっているし、CSSデザインに

Responsive: yes

もぶち込んだ。

しかしどうにも変わらず…

そのままほったらかしにしていたのだが、いい加減向き合わないけないと謎のプロ意識でブログデザインと向き合いました。

一度すべてリセット

同じことをやってもしょうがない。

そう思い立ち乱雑に描き込まれた僕のCSSデザインを一度すべて消した。

ついでにヘッダーやフッタのHTMLもすべて焼却処分した。

※バックアップはとっている

そしてその後再びレスポンシブデザインにしてみると

できた！

どうやら適当に組み上げていったCSSデザインの何かが悪さをしていたようだ。

結局何が悪かったのかはわからないがひとまずレスポンシブにできてよかった…

その後は再びいろいろなサイトを見ながら必要な要素を組み込んでいき、朝5時にようやく一段落付いた…

まだまだ見づらい所あるかもしれませんが、また少しづつ良いデザインになるよう改善していこうと思いますので、何卒よろしくお願いいたします。

おまけ

レスポンシブにするにあたってヘッダーの画像がどうしても切れてしまう現象が起きた。

下記のサイトを参考に調整したのだが、どうしても切れてしまう…

【これで解決！】スマホ表示をするとタイトル画像の左右が切れる問題【はてなブログ】 | ゆずもちろぐ。

僕の頭の血管が何本か切れたところで

「画像がでかすぎるんだ！」という致命的なミスに気付いた。

猿でも15分もあれば「画像がでかすぎるんじゃない？」と感づきそうなことに1時間程頭を悩ましてしまった…

そして画像を小さく作り直そうと思ったのだが、ふと「落ちるとこまで落ちてみた！」というタイトルに腹が立ってきた。

何様だ！

まるで「落ちる必要がなかったけど社会経験でとりま1回落ちてみました＾＾」と言わんばかりの言い方だ。しかも右わきに入っている旧デザインの落武者も気にくわない。

明け方でいろいろ情緒不安定だったのだろう…

すぐさま文言とデザインを変えた(少しだけ)

旧デザイン

新デザイン

落ちてしまいました感を出した(つもり)。ついでに落武者も泣かせといた。

一応タイトルはそのまま「落ちるとこまで落ちてみた」にしてある。

よくわからないがSEO的に悪い気がして…

という訳で落武者のデザイン変更奮闘記でした。

本当ブログのデザインって難しいですね…

やり始めると楽しんですが、壁に当たると挫折と苦悩の戦いですね。

とりあえず、変更できてよかったです(;^ω^)

ん…

あれ…

矢が刺さってない！！！！

(この記事書いてる時気づいた…ただのハゲじゃん…)