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

雑記

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

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

スポンサーリンク

デザイン変更の決意

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

5時間

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

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

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

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

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

レスポンシブにできない

ããããã¨ããæãã®ç»åæ¤ç´¢çµæ

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

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

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

Responsive: yes

もぶち込んだ。

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

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

一度すべてリセット

ããããã¨ãããªã»ãããã®ç»åæ¤ç´¢çµæ

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

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

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

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

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

できた!

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

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

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

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

おまけ

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

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

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

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

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

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

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

何様だ!

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

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

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

旧デザイン

f:id:otimusya24:20190130021723j:plain

新デザイン

f:id:otimusya24:20190130045252j:plain

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

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

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

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

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

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

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

ん…

あれ…

f:id:otimusya24:20190130223507j:plain

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

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

雑記
スポンサーリンク
落武者をフォローする
落ちるとこまで落ちました…

コメント

  1. nAK777 より:

    お疲れ様です
    僕も今日、半日ほどかけて設定しましたが
    全然できないです
    しっかり出来た落ち武者さんがうらやましいです

  2. otimusya24 より:

    nAK777様
    お疲れ様です(^^ありがとうございます!
    本当苦労しますよね・・・僕も相当時間費やして結局できませんでしたの連続です…笑
    ここだけを直したい!と思ってもうまくいかないんですよね…
    正直おじさんには厳しいです…笑

  3. darayawa より:

    矢が刺さってない笑いましたw
    デザイン変更、設定お疲れ様でした>< 検索して説明読んでも毎回チンプンカンプンで投げ出しちゃいますw

  4. otimusya24 より:

    ためる様
    ありがとうございます(‘ω’)
    もう矢は放置したいと思います笑
    本当にデザイン変更めんどくさいですよね(‘;’)

トップへ戻る