Jugem（ロリポ）ブログのレスポンシブ化

このJugem（ロリポ）ブログのレスポンシブ化にトライしてみました。

「jugem ブログレスポンシブ」で検索して一つ目にヒットした下記の記事を参考にさせていただきました。

方法があったんですね。早く知りたかった。意外と簡単で

これを入れてあとはCSSを調整するだけ。

CSSはブレイクポイントを下記のように設定。

@media screen and (max-width: 1024px) {}

要素のクラスは比較的きちんと設定されていたので、あとはスマホ用に書いていくだけ。PCは3カラムなのでスマホでは記事を幅100％にしてサブカラムは下に落とし、もう一つはそんな重要ではないので非表示に。

使っていたテンプレートが15年くらい前のものとかなり古いのでちょいちょい調整が必要でした。

viewportが設定されていなかったので追加。

とか。GA計測タグも古いものだったので差し替え。

完成。

これはいいぞ。

PCだけで表示されていたアドセンス広告がスマホ表示でも表示されるようになりました。

長年の悩みが解決。

同じように旅ブログも調整。