イクライフログ

旅好きクリエーターいくらによる旅・バイク・仕事雑記 since 2005
new最新記事
<< バイクカバーをAmazonで購入 | トップ | レディース ライディングブーツ購入 >>
Jugem(ロリポ)ブログのレスポンシブ化

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

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

JUGEM無料版でレスポンシブにする方法

 

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


<script>javascript:pcview_on();</script>

 

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

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

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

 

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

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

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

<meta name="viewport" content="width=device-width,initial-scale=1">

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

 

完成。

 

これはいいぞ。

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

長年の悩みが解決。

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

http://tabi.ikuranet.chu.jp/

 


| いくら | Webライフ | comments(0) | - | 23:17
コメントComment





▼Facebookページ「シングルトラベラー」Let'sジョイン→
著者/運営者

運営WEBサイト
レコメンド
レコメンド
レコメンド
■OTHERS

更新カレンダー << August 2020 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
RSS1.0Atom0.3Powered by ロリポブログスマホ版管理者ページ
いくら運営サイト> ブログ-旅メモ シングルトラベラー-海外一人旅 マタタビ 一生に一度は行きたい場所したい旅 海外個人旅行のはじめ方