人生RPGスマートフォン用の表示で見る人生RPG2児のパパで今年30歳の冒険者(サラリーマン)が日々の生活を通して勇者(自由を手に入れた者)を目指すサクセスブログです。LINKこんにちわ!冒険者Lv.1です。あなたが使っているブログのテーマはレスポンシブデザイン対応ですか?私の使っているはてなブログ(インストール型)テーマ『DUDE』は初期状態では対応していませんでした。ソースコードを追加してカスタムすることにより対応できたのでレスポンシブ化にする方法を紹介したいと思います。手順1手順2手順3確認まとめレスポンシブデザインとは私を含め初心者の方は何のこと?ってなりますよね。コードを配信しますが、画面サイズに応じて(つまり「レスポンシブ」に)表示を変えることができます。Googleという説明で、もっと噛み砕いて説明すると、PC用・スマホ用などで別々にカスタムコードを挿入しなくてもPC用のカスタム内容だけで勝手にスマホも同じようにカスタム状態になるってこと。自動でサイトサイズを調整してくれるから見た目もきれい。レスポンシブデザインかチェック<はてなブログユーザー>今自分の使っているテーマ(テンプレート)がレスポンシブデザイン対応か・非対応か確認する簡単な方法はPCで、[ダッシュボード(管理画面)]→[デザイン]→[スマートフォン]に進み一番下の項目[詳細設定]の「レスポンシブデザイン」にチェックを入れてみてください。上部にある『変更を保存する』をクリックしてください。次にスマホで自分のブログサイトを開いてみてください。バランスよくサイズ調整がされていて問題なく観覧できれば対応です。PC画面を縮小して無理やり表示しているような画面なら文字も小さいので画面を拡大しないと見えない状態になります。このような場合は残念ながらレスポンシブ非対応です。私も最初このような表示になったので諦めていたのですが、いろいろ検索していると希望の記事を見つけることができました。参考にした記事yaritakunai.hatenablog.com初心者の私には少し難しいところもありましたが素直に指示通り行うとレスポンシブ化に成功しました。ありがとうございました。上の参考記事を読んでいただいてもできますが、難しい説明文章で戸惑うかもしれないので、細かい説明を省いてやることだけこっちに書きますね。仕組みや意味もちゃんと理解したいのなら是非参考記事もご覧ください。ペースト<貼り付け>)してください。*/手順2次に同じく『デザインCSS』を開いて、以下のコードを一番下にコピペしてください。これまでカスタマイズしたことがある方は他のコードも入力していると思いますが、その続きにコピペでOKです。}}手順3最後に[カスタマイズ(スパナマーク)]の右側にある[スマートフォン(スマホマーク)]を開き、一番下の項目『詳細設定』の「レスポンシブデザイン」にチェックを入れてください。PC上の画面ではプレビュー画面がスマホ用からPCと同じ画面に切り替わったと思います。上部の「変更を保存する」をクリックして完了です。確認スマホから自分のブログサイトにアクセスしてください。画面の表示のされ方がPC画面を圧縮したような状態からサイズ調整された見やすい画面になっていたら成功です。まとめ今回私が使っている『DUDE』テーマをレスポンシブ化にしたよという記事ですが、レスポンシブ化に使ったソースコードをみてみると、「DUDE」指定はどこにも表記されていないので、他のテーマでもできるかも?と思い紹介しました。私はプログラミング初心者ですので、他のテーマで通用しなかったら本当に申し訳ありません。レスポンシブ化にすることでGoogleの巡回がスムーズになるのでそれはメリットになります。PC版とスマホ版でそれぞれ違うコード設定をしていると巡回も2度手間になるって感じですね。こんな風にGoogleにやさしい作りにしてあげてるからって検索順位には影響でないと、Googleは断言していますが。実際にやってみて私の中の一番のメリットだったのは、カスタマイズをしていくうちに、ソースコードをいろんなところに貼っていくと無料版では限界が来るのは早かったんです。有料版にならないと貼れない場所(スマホカスタマイズの記事上・下やHTML)があって、したいカスタマイズが出来ないことが多々ありました。それがレスポンシブ化してPCの方のカスタマイズだけでスマホ側も同じ様に反応してくれるので、できるカスタマイズが一気に増えました。購読する最新情報をお届けします。会社員を卒業し独立するためにブログ運営に励んでいます。将来は地元の教育制度の強化を行う組織を立ち上げ、育児・教育に優れた地域にしたい。画像加工・デザインが好きで依頼も受けています。「人生って最初から決まったレールを歩んでいるんじゃないだろうか?」そんな考えをずっと抱えていた私が自分の力でレールから飛び出すためのツールにするべくはじめたブログです。積極的に参加しはじめ、1人でも多くの人に関心を持ってもらえるように活動しています。CONTACTスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。