レスポンシブレイアウト

レスポンシブレイアウト

BLISKブラウザはPCとスマホの閲覧確認に便利なBrowser、クロームと同じように使えるのでWEB製作者だけでなくWEB担当者はインストールしておくとよい

BLISKというWEBブラウザを使い始めた。なにが便利かというと、スマホ画面とPC画面の両方が同時に表示されて、上下のスクロールも同期するので、PCとスマホの画面チェックにはとても便利なのである。利用にはダウンロードしてインストールする必要があるが、GoogleChromeと同じエンジンを使っているようなので、Chromeを使っているPCだと問題なく利用できる。基本的には無料で利用できる。ログイン...
レスポンシブレイアウト

スマホの検索結果で表示される自社サイトのスニペットに「スマホ対応」が表示されるかどうかをチェックしておこう

スマホの検索結果に「スマホ対応」という文字が表示されてるだろうか? Googleは2014年12月からスマートフォンの検索結果でスマートホン対応ができているWEBサイトには「スマホ対応」という文字を表示するようになった。スマホ対応できていないWEBサイトはなにも表示されずに従来どおりである。この変化には検索結果でもスマホを優先する姿勢が現れている。 この措置はこれから数年の過渡的なもの。いずれ、「...
レスポンシブレイアウト

レスポンシブレイアウトをチェックするのに便利な「WebDeveloper」アドオンはクロームにもあった

WEBサイトのレスポンシブデザインをチェックする便利なツールがあった。WEBサイトをパソコンやタブレット、スマフォで閲覧した場合にどのように見えるのかを一度に調べることができる「WebDeveloper」というアドオンである。これまでファイヤーフォックスでは使ったことはある。しかし、今はメインのブラウザがクロームになっているのでしばらく使っていなかった。それが、クロームのアドオン(拡張機能)に「W...
ワードプレス(WordPress)

マメジンのWEBサイトをリニューアルしスマホ対応を重視、MovableType4からWordPressへ変更しレスポンシブデザインになった、リンク切れ対策は.htaccessで301リダイレクト

マメジン「」のWEBサイトリニューアルを実施した。これまでのWEBサイトはMovableType4で構築されていたが、急増するスマートフォン(スマホ)での閲覧には最適化されていなかった。今後スマホでの閲覧はパソコンでの閲覧数を逆転すると見込まれるので、スマホ対応は必須だった。そこでスマホでもパソコンでも可変幅で表示されるレスポンシブデザインのテーマで運用することとした。選択肢としてはMovable...
ムーバブルタイプ(MovableType)

movabletype6はログイン後の管理画面がスマホにも最適化されていた

movabletype6はレスポンシブデザインに対応したブログシステムである。レスポンシブのデザインテーマを選択しておけば、スマホで閲覧したときの画面表示が可変幅なので、サイズが最適化表示してくれるのがメリットだ。実は管理画面もスマホに最適化されていた。スマフォでブラウザを開きログインしてみると、いつもパソコンの画面で見慣れたMovableType6の管理画面がスマホ用で表示された。WordPre...
レスポンシブレイアウト

sslメールフォームもレスポンシブデザインにしてPCでもスマフォでも送信しやすいようにする「スマフォファーストを念頭に」

問い合わせメールフォームを入れ替えた。これまでのメールフォームはパソコンからの送信を前提にしていたため、スマフォや携帯からだと画面が小さくて送信しにくかった。WEBサイト自体をスマフォでも閲覧しやすいようレスポンシブデザインに変更しているので、メールフォームもレスポンシブデザインに変更したかったのだが、あまりよいメールフォームが見つからなかった。今回実装したのは無料提供されているうえ、設定もわりと...
グーグルアナリティクス(Analytics)

WEBサイトへのモバイルアクセスが増加、いよいよPCよりスマフォやタブレットでの閲覧者が多い時代になった

この画像は「tohdamikio.com」のリアルタイム検索。グーグルアナリティクスでは今どれくらいのアクセスがあるかがリアルタイム検索でわかる。その内容はモバイルの増加を示している。現在10名がこのブログを閲覧していて、その内訳は、パソコンからのアクセスが5名、携帯やスマートフォンからのアクセスが4名、タブレットが1名ということである。半数が携帯やスマフォかタブレットからのモバイルアクセスだとい...
レスポンシブレイアウト

レスポンシブデザインに変えてWEBをモバイルユーザーにも見やすくする

レスポンシブWEBデザインとは、1つのhtmlでパソコンでもタブレットでもスマートフォンでも最適表示をしてくれる可変幅対応のデザインCSSである。エージェントで切り替えてパソコン用やスマートフォン用に作成された別々のhtmlを見せる方式は複数のhtmlが存在してしまうため管理がややこしい。これからはレスポンシブ対応を主にしていきたい。アクセス解析を見ていると、今年に入ってから急激にスマートフォンユ...
レスポンシブレイアウト

ドモドモコーポレーション公式サイトとPRサイトをリニューアルしてMovableType6で再構成した

ドモドモコーポレーション公式サイトとPRサイトをリニューアルしてMovableType6で再構成した。今年はパソコンからスマートフォンやタブレットへとデバイスが本格的に移転した節目の年である。いつまでもパソコン表示に照準を合わすのではなく、スマフォやタブレットでの表示でも対応可能な可変幅(レスポンシブデザイン)に転換する必要を感じていた。当ブログは9月にMovableType6のベータ版でテスト後...
シェアする