虹色の人生を目指すグアバがお届けしますAndroidAndroidアプリWeb・インターネットブログMr.ChildrenEvernoteiPhonePC関連WordPressガジェットビジネス・仕事ビジネス・仕事に関する記事です。ライフハック生活サイトマップContactAboutAndroidAndroidアプリWeb・インターネットWordPressライフハックaboutContactサイトマップホームブログモバイルファーストな今だからこそやっておきたいブログのスマホ向けカスタマイズブログTwitterFacebook10はてブ0Pocket13LINE2014.01.26スポンサーリンク「モバイルファースト」という言葉をご存じでしょうか。残念ながらWikipediaでは見つけられなかったので、別のサイトから引用します。「モバイルファースト」というコンセプトは読んで字の如く、Webサイトを作る際に、まずモバイルサイトから作成するというものです。サイト制作に限ったものではなく、ビジネス戦略においても、存在が大きくなっているモバイルから考えることは重要な意味を持ちます。言葉を言い換えれば、モバイルとデスクトップという境がなくなってるとも言えます。Web担当者Forumから引用Webサイト構築時に、PC向けではなくモバイル(スマホ)向けサイトを優先して作るというコンセプトですね。今やスマホに最適化されていないサイトなんて考えられないくらい、スマホ比率は高まっています。本ブログのアクセス状況を見ても、PCとスマホ(タブレット含む)の比率は今やスマホのほうが高い状況です。そこで今回は、ブログにおけるスマホ向けカスタマイズについてご紹介したいと思います。私はWordPressの無料テーマ「STINGER3」を使っているのでそれを例に説明します。別のテーマを使っていても参考になるかと思います。参考にしたいサイトまとめモバイル(スマホ)の特性を理解するカスタマイズをする前に、モバイル(スマホ)環境の特性を理解しておきましょう。画面が狭いスマホは物理的に画面が小さいので、PCと較べて表示面積が狭くなります。従って、表示するコンテンツを厳選する必要があります。通信速度が遅い最近ではLTEなどの4G回線もかなり整備されてきましたが、それでも光の固定回線に比べるとやはり通信速度は遅いです。タッチ操作であるスマホはタッチ操作です。タッチを意識した画面構成や文字の大きさを検討しなければなりません。スポンサーリンクスマホ向けのブログカスタマイズでは、上記のようなスマホの特徴を踏まえた上で、私が行っているカスタマイズを説明していきます。表示するコンテンツを絞り込むまずは、表示するコンテンツを絞りこみましょう。やり方はあると思いますが、私の場合はサイドバーにあった「新着記事」の表示をやめました。常連さんならそんなとこ見ずにトップページを見るでしょうし、検索やSNSからの一見さんはそもそもそんなとこ見ないと思ったからです。他にもいろいろあると思います。ツイート一覧だとか、自己紹介とか、タグ一覧だとか。スペースがもったいないからとか、そんな理由でなんやかんや表示させてませんか?よくあるレスポンシブデザインの場合、サイドバーは記事下に配置されることがほとんどです。下までスクロールして見る確率はかなり低いはずです。それならなくてもいいのでは?PCではともかくスマホでもそのコンテンツは必要なのか?PCだけ表示にするとか、一度考えてみましょう。検索フォームをトップに配置するSTINGERはデフォルトだとサイドバーの広告下に検索フォームがあります。PCだと使いやすい位置ですが、スマホだと相当下のほうになります。検索フォームは私自身がよく使うので、使いやすい位置に配置しています。具体的にはブログ最上部のアコーディオンメニューの中にしました。ほんとはタイトル横あたりに検索アイコンを置きたかったんですが、うまくできなかったのでこの位置に。これは一例ですが、最上部のわかりやすい位置に検索アイコンを配置するのがいいと思います。ちなみに、検索フォームはGoogleカスタマイズ検索を設置するのがおすすめです。Adsense(アドセンス)。PCと同じ感覚で配置していたらポリシー違反で広告停止とかになっちゃいますよ。私がスマホでやってる広告配置は以下の記事を参考にしてください。Adsenseのポリシーも知っておきましょう。文章量が多くなると、スマホの場合どうしても下のほうまでスクロールしないといけません。記事を読み終えてからブログのトップ(画面最上部)まで戻るのは結構苦痛です。「TOPへ戻る」ボタンは設置しておくと親切です。STINGERはデフォルトでこのボタンが画面右下に表示されます。WordPressであれば同機能を実現できるプラグインもあるのでググってみましょう。文字の大きさ、隙間を最適化するこれは好みもあるのですが、限られた画面スペースを有効に使うために文字の大きさ、余白を調整しています。STINGERのデフォルトでも結構読みやすいのですが、私はもう少しスペースを有効に使いたかったので若干文字サイズを小さくし、余白も狭めています。やり過ぎると今度は読みにくくなるので注意です。適切な余白は大事です。Youtubeの動画埋め込み時のサイズ調節これはカスタマイズというかちょっとしたコツになります。本ブログでは時々Youtube動画を埋め込んで紹介しています。その際、スマホはディスプレイサイズがまちまちなのでやってるのが「埋め込みサイズ」の調整です。Youtubeの埋め込みコードは以下の方法で取得できます。埋め込みたい動画を開き、「共有」→「埋め込みコード」をクリックすると埋め込みコードが取得できます。「埋め込みサイズの調整」はこの埋め込みコードを若干修正することを意味します。上記の例だと、「width=”560”」となっています。このまま貼り付けると、スマホで表示するとはみ出してしまいます。これに対処するため、「width=”100%”」と数値部分を書き換えます。スマホで見たらきちんと画面幅に収まっているのがわかると思います。(@Nobuo_Create)さんからもっといい方法を教えていただきました。cssでmax-widthを使う方が、貼り付けコードを取得する時も何もしなくていいので便利じゃないかな?とPrinciple的には思います。26確かに、いちいち値を修正するよりCSSで制御したほうが楽そうです。ちなみに、NobuoさんはWordPressのテーマ「Principle」を作成・配布されています。興味のある方はどうぞ。テーマ『Principle』というわけで、CSSに記述することにしました。私が使用しているSTINGERは、PCとモバイルでCSSが分かれています。モバイル向けのCSSファイル「smart.css」に以下を追記します。iframe{max-width:100%;max-height:auto;}数値はお好みです調節してください。PC向けはCSS編集しなくても大丈夫だと思いますが、もし追記するなら上記と同じでものを「style.css」に追記しましょう。スポンサーリンク参考にしたいサイトブログのスマホ向けカスタマイズについては以下の記事が非常に参考になります。私の書いたこの記事より遥かに高等テクニックが盛り沢山なので、より高いレベルの高速化を狙いたい人は読んで損はないです。<参考>【ブログ術】スマホ表示の高速化!pagespeedで93点達成の攻略方法まとめ以上、私がスマホ向けにやっているカスタマイズの内容でした。これがベストだとは思っていません。改善の余地があると思っていますし、「いや、このほうがいいでしょ」っていう意見もあると思います。2013-06-21AmazonKindle楽天ブックスブログスポンサーリンクシェアするTwitterFacebook10はてブ0Pocket13ラブグアバをフォローする26スポンサーリンクグアバラブグアバ関連記事ブログブログ記事のカテゴリー整理は絶対にやるべし!それだけでアクセスアップに繋がるよ!ブログのカテゴリーはかなり重要なので絶対やりましょう。どんな良記事でも、カテゴリー分けが適当だとPVアップの機会を逃していると言えます。カテゴリー分けする理由と方針について書きます。ブログラブグアバが開設二周年を迎えました。ブログ運営を続けるためのコツを教えます当ブログ「ラブグアバ」は、本日で開設二周年を迎えました。730日間ブログ運営が続いたってことですよ(記事の連続更新が続いたわけではありません)。前回の一周年記念の記事を書いてから本日ま...ブログブログ名にTwitterアカウントを含めると意外と便利なのではないかという考察ブログ名にTwitterアカウントを含めると意外と便利なのではないかと思いました。理由は、記事をTwitterでシェアしてくれたときにメンションが飛んでくるからです。ブログブロガー達とGoogleハングアウトでブログ談話したらめちゃくちゃ楽しかった件!スマホでもできる!普段Twitterなどで絡んでいるブロガーの皆さんとGoogleハングアウトでブログ談話してみました。するとブログの裏話とか聞けてめちゃくちゃ楽しかったんです!このときの話を書こうと思います。ブログブログ開設5周年!そして恒例の同期ブログの現在を調べてみた2018年2月26日で当ブログ「ラブグアバ」は開設5周年を迎えました。恒例となっている「同期ブログの今」を調査したので結果をご報告します。ブログを5年間続けている人ってどのくらいいるのか?必見です。ブログ約11ヶ月続けてきたブログの毎日更新が途絶えました。アクセス数の変化は?私の心境は?気づいた方がどれくらいいらっしゃるかはわかりませんが、つい先日、約11ヶ月続けてきたブログの毎日更新が途絶えてしまいました。頑張って1年間続けたらハクがついたのにな...と我ながら思います(笑)。一年間には届かなかったもの...ブログ2016年のブログ総括と2017年のブログ運営について2016年のブログ運営を振り返っての総括と、2017年に向けての抱負です。2016年はあまり目立ったトピックスはありませんでしたが、なぜか収益は過去最高となりました。ブログあなたが本当に良いと思った商品やサービスは絶対ブログで紹介すべき!あなたも読者も幸せになれるよあなたが本当に良いと思った商品やサービスは絶対ブログで紹介すべきです!その記事を必要とする人はどこかに必ずいますし、書いたあなたも収益が得られたりしてお互いが幸せになれるはずです。ブログWordPressブログ「ラブグアバ」をSSL化(HTTPS化)しました!思ったより簡単でしたWordPressブログをSSL化(HTTPS化)しました。思ったより全然簡単で表紙抜けしましたが、少し問題点もありました。HTTPS化するためのやり方と注意点をご紹介します。ブログ自作の画像をパクられて初めてわかった「著作物を無断で使われること」の不快感は相当だった実は先日、私の書いた絵がネット上で勝手に使われていることに気づきました。これまでもブログの文章をパクられるということはありました。私のブログ記事がパクられて無料アフィリエイト教材になってるんですが。これはこれでいい気...スポンサーリンクスポンサーリンクラブグアバを検索ラブグアバをフォロー!ラブグアバをフォローする26ブログ更新をメールで受け取る!メールアドレスを記入して購読すれば、更新をメールで受信できます。人が購読中です!※メールアドレスは管理人には知られませんメールアドレス購読ブログ更新をプッシュ通知で受け取る!ラブグアバが更新されたらプッシュ通知でお知らせします。人気記事Windowsで「別のプログラムがこのフォルダーまたはファイルを開いているので、操作を完了できません。」と表示されて削除やリネームできない場合の対処方法2016.01.232019.05.18拡張子「WebP(ウェッピー)」のファイルをJPEGやPNGなどに変換する方法2013.10.312018.04.18AndroidスマホのバックアップはGoogleに任せておけばほぼ問題なし。設定方法をご紹介します2017.03.052019.02.17Twitterに足跡機能はあるの?→ありません。これをするとバレちゃう行為はあります2017.05.022018.12.301ヶ月で6kg減量した私のダイエット方法。Auto対応カーオーディオを使ってみた感想。これがあればほぼカーナビは不要ですね2019.07.032019.07.03GalaxyスマホならLINEを2つのアカウントで利用できる!デュアルメッセンジャーの使い方をご紹介します2018.12.012019.08.06Amazonプライム・ビデオがChromecastで視聴できるようになった!これで簡単にTVの大画面で見られます2019.08.042019.08.04Excelファイルを読み取り専用で開く方法。loveguavaこのブログについておっさん管理人グアバが執筆しています。私が気になったこと(主にスマホ/Webサービス/生活/ミスチル/たまにトイレ)について書いています。2017年3月時点で月間38万PV。Reserved.メニューAndroidAndroidアプリWeb・インターネットブログMr.ChildrenEvernoteiPhonePC関連WordPressガジェットビジネス・仕事ライフハック生活サイトマップContactAboutホーム検索トップサイドバースポンサーリンクラブグアバを検索ラブグアバをフォロー!ラブグアバをフォローする26ブログ更新をメールで受け取る!メールアドレスを記入して購読すれば、更新をメールで受信できます。人が購読中です!※メールアドレスは管理人には知られませんメールアドレス購読ブログ更新をプッシュ通知で受け取る!ラブグアバが更新されたらプッシュ通知でお知らせします。人気記事Windowsで「別のプログラムがこのフォルダーまたはファイルを開いているので、操作を完了できません。」と表示されて削除やリネームできない場合の対処方法2016.01.232019.05.18拡張子「WebP(ウェッピー)」のファイルをJPEGやPNGなどに変換する方法2013.10.312018.04.18AndroidスマホのバックアップはGoogleに任せておけばほぼ問題なし。設定方法をご紹介します2017.03.052019.02.17Twitterに足跡機能はあるの?→ありません。これをするとバレちゃう行為はあります2017.05.022018.12.301ヶ月で6kg減量した私のダイエット方法。Auto対応カーオーディオを使ってみた感想。これがあればほぼカーナビは不要ですね2019.07.032019.07.03GalaxyスマホならLINEを2つのアカウントで利用できる!デュアルメッセンジャーの使い方をご紹介します2018.12.012019.08.06Amazonプライム・ビデオがChromecastで視聴できるようになった!これで簡単にTVの大画面で見られます2019.08.042019.08.04Excelファイルを読み取り専用で開く方法。loveguavaこのブログについておっさん管理人グアバが執筆しています。私が気になったこと(主にスマホ/Webサービス/生活/ミスチル/たまにトイレ)について書いています。2017年3月時点で月間38万PV。グアバラブグアバをフォローする26。