タグ: レスポンシブ

iOS版SafariでPCサイトを表示するには 2015年08月28日

image image

いやー、iPhoneやらiPadやらのiOSデバイスでsafari使ってる時、レスポンシブデザインのスマホ向けのページを表示してても、PC版のサイトを表示させたい時があると思います。

僕の場合、このFlickrのサイトでBlogの各記事の一番最初に置く画像の埋め込みのタグを取得したいときにPC版のサイト表示をする必要があるのです。

ただ、いろいろとユーザビリティを優先して作ってるiOSデバイスの割にこれをやるにはどうしたらいいか全然わからない。以前なんかのサイトでPC版のサイト表示できるというのは読んだので覚えているのだが、いざ必要なときにやり方がわからない。。。iOSデバイスではこんなことはほとんどない。。。

というわけでググってみると実際にすぐに答えはわかったんですが、ホントiOSにしてはわかりにくいやり方であります。

1. <画像左上> PC版サイトを表示させたいURLを一度開き、スマホ版のサイトでいいから表示させ、URL入力欄をタップ

2. <画像右上> URLにフォーカスがあたるのでここでURLのフォームの下のブックマークされたサイトのアイコン表示領域を下にドラッグ

3. <画像左下> 「デスクトップ用サイトを表示」をタップ

4. <画像右下> これでPC版サイトが表示されます。

これは頑張っていろいろ自分でやり方探したけど、結局見つけられなかった。。。こんなところにあるとは思ってなかった。。。

image image

yamagiwa2000.com のトップページ差し替えてレスポンシブなサイトへ 2015年08月18日

y2k_top

長らくほったらかしだったyamagiwa2000.comのトップページを差し替えました。

今年の春先あたりからGoogleがその検索アルゴリズムの中でスマホ、タブレット対応を重視するようになって、スマホでウェブ検索をする際にも検索結果に「スマホ対応」と出るようになった。

ASCII.jp:Google検索順位が変わる!スマホ対応の最終チェック法

以前からブログのWordPressのほうはレスポンシブ対応のPlug-inを入れていてちゃんとGoogleの検索結果にも「スマホ対応」が出ていた。でもトップのシングルページがどういうデザインのものにするか?どういうふうにレスポンシブにするか?とグダグダ迷ったままほったらかし。。。

Make your WordPress website mobile-friendly with WPtouch

というわけでこれからはフリーランス的に生活していくので自分のウェブサイトはとっても大事なのでまずはシンプルなデザインのレスポンシブデザインのテンプレートをどっかで入手してそれを時間をかけてちょこちょこ弄っていこうという考えに。

HTML5 UP! Responsive HTML5 and CSS3 Site Templates

ちゃんと探してみるとそれなりにレスポンシブのシングルページテンプレートって結構いろいろあってその中でも特にシンプルなデザインのものを選定、Creative Commonsで個人利用、商用利用可のテンプレートを拾ってきて、自分の作品や実績紹介のところも適当に今までのウェブコンテンツへのリンクで埋めてあとは内容を大幅にコメントアウト!

これですっきりとまとまりました。とりあえずMacユーザーなので懐かしの90年代まだまだAppleがレインボーアップルのロゴだった時代の「Made with Macintosh」バナーを貼ったり(でも実はこのページのHTML修正はWin10マシンでやった)、せめてウェブ上、ブログ上だけでもはっきりした物言いに変えていかなきゃならないからとりあえず「Blogger」なんて書いてみたり。。。

image

今日iPhoneで再度検索かけて見てみたらやっと自分のトップページも「スマホ対応」が出てました。実を言うと今年の春ぐらいからじわじわと訪問ユーザー数が減ってきてたんよね。。。改めてトップページのスマホ対応って大事なんだろうなと思い直してやっと対応した次第です。。。

普段はブログの更新は文章とリンク貼ってとかの追加情報だけ気にしてるけど、こうやってトップページからブログや他記事への構成やデザインの検討とかやっぱり弄ってて楽しい。大学生の頃インターネット初めて最初の頃、ずっと自分のサイトの変更ばっかかけてた頃を思い出しました。