２０１７年５月５日
モバGoogleから、モバイル端末に優しくないサイトと指摘されて久しいのですが、Wordpressを使っている「きまっし金沢の雑記帖」やMovableTypeを使っている各ブログについて、モバイルフレンドリーなサイトへの対応をしたので、ホームページの改造も着手しました。
受験勉強もしないといけないし時間に余裕がないので、とりあえず「きまっし金沢」のトップページだけ改造しました。
随分苦労しました。ソフトを入手すれば、簡単に変換できるのかなと思っていたのですが、モバイルフレンドリーに対応したソフトというのは、ほとんどがテンプレートを利用してホームページを作るといった感じで、今までのホームページをモバイルフレンドリーにするというようなソフトは見当たりませんでした。
ネットも随分探したのですが、対策方法を簡単に理解できるサイトが見つかりません。
レスポンシブデザインに対応するためには、メディアクエリとビューポートという設定が必須となるとの事ですが説明を読んでも何が何だか分かりません。
なんとか苦労して対応に参考になるサイトを見つけました。
http://www.webcreatorbox.com/tech/flexbox-layout/
flexbox というコマンドを使用すると良いようです。
おかげで無事、モバイルフレンドリーなページになりました。
現在使っているホームページビルダー１６では改造した内容を確認しながら編集する事ができないのでホームページビルダー２１を買おうかなと思います。あんまり役に立ちそうも無いのに勿体ないです。
まあ３台のパソコンにインストールできて８０００円くらいなのでいいかな。
２０１７年５月６日
「俊の玉手箱」と「福井観光ｗｅｂ」と「きまっし金沢」のトップページを改造しました。
３列のメニューがモバイル環境の場合、1列のメニューの２列目のメニューが表示され、2列目のメニューの下に3列目のメニューが表示されるようにしました。かなり苦労しましたが、満足なものになりました。
特にページを左右の中央に表示するのにてこずりました。
http://shared-blog.kddi-web.com/webinfo/169
</head>より上に
<style type=”text/css”>
<!–
.item{
background: #fff;
margin: 0.2%;
text-align: center;
}
img{
max-width: 100%;
height: auto;
}
p{
text-align: left;
}
/* Responsive */
@media ( min-width : 600px ){
.flexbox {
display: -webkit-flex;
justify-content: center;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.item{
width: 30%;
}
}
–>
</style>
を記入して
3列のメニューを独立した３つのテーブルに分割して
<body>より下に
<div class=”flexbox”>
<div class=”item”>
1列目のメニューのテーブルを入れる
</div>
<div class=”item”>
２列目のメニューのテーブルを入れる
</div>
<div class=”item”>
3列目のメニューのテーブルを入れる
</div>
</div>
でPCの場合には３つのテーブルが3列に表示され、モバイルの場合は縦に３つのテーブルが並びます。
根本的な事が判っていなくて、試行錯誤で改造したのですが、これからが思いやられます。
基本的に表を多用した昔ながらのホームページの成型方法を用いているのですが、モバイルフレンドリーにするにはwidh での幅を指定はやめて、その幅の画像（高さ１ピクセル）を埋め込んだ場合のほうが綺麗になります。
widh で指定するとモバイルだと、その指示が反映されて、均等に縮尺しませんが、画像を入れておくと適度に縮尺してくれるんです。幅の画像（高さ１ピクセル）を使うのは最低限に抑えたほうが良いのは言うまでもありません。
幅の指定を全く無くしても、それなりに見える場合は、そのほうが良いです。
２０１７年５月７日
ホームページビルダー２１が届きました。地図製作ソフトが意外と使えそうな感じです。
編集時のプレビュー画面が、体験版と違って、flexboxが反映されません。つまり改造した内容を確認しながら編集する事ができないのです。これでは購入した意味が無いので、メーカー（ジャストシステム）に問いあわせしました。
ジャストシステムへメールしたら、ピント外れな返答が来て、サポートは電話でして下さいということでした。
ジャストシステムのサポートは東京と大阪への固定電話しか無いようです。しかも購入して２回までは無料ですが、それ以上は有料です。めっちゃくちゃ不便です。
一応、該当のhtmファイルをメールで送っておきました。
サポート時間の１８：００を過ぎていたので、自分でいろいろ調べたのですが、プレビューのブラウザがInternet Explore 7になっていたようです。Internet Explore 10に変更したら正常に表示するようになりました。
２０１７年５月１１日
ジャストシステムから返事が来ました。
編集画面では1列表示ですがプレビューで3列表示されることを確認しているとの事でした。
２０１７年５月１３日
きまっし金沢の全ページにおいて size=”-1″ を削除しました。Dreamweaverでは指定したフォルダ内の一括置換が可能なので変換はあっという間です。
Dreamweaverが無くても、フリーソフトGrepReplace!でも一括変換ができます。
「４６１９８個が１１７０個のドキュメント内で置き換えられました。」との表示がありました。
Googleの広告をレスポンシブ型に一括変換しました。
「９２７個が１１７０個のドキュメント内で置き換えられました。」との表示がありました。
デザイン的には変になった部分も多いとは思うので、少しずつ確認しながらアップロードしていこうと思います。
当面はwith を削除して、必要であれば幅の画像（高さ１ピクセル）を何種類か作成して挿入することが必要だと思います。
２０１７年５月１４日
一括変換をしたので、作業の手間は随分減っていると思います。
大きな地図（gifファイル）のあるページのモバイルフレンドリー対策をしてみました。
with を削除してモバイリフレンドリーテストでチェックしてみました。
「ビューポートが設定されていません」「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」「コンテンツの幅が画面の幅を超えています」
との解析結果が出ました。
</STYLE>の下で</HEAD>の上に
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
を挿入しました。
すると、「ビューポートが設定されていません」「テキストが小さすぎて読めません」は解決しました。
「コンテンツの幅が画面の幅を超えています」の原因は地図の画像です。
地図はgifファイルなのですが、全く縮小されないで表示されています。
リンクの相互間の間隔を少し（全角のスペース３個分）あけたら「クリック可能な要素同士が近すぎます」は解決しました。
きまっし金沢の全ページにおいて
</STYLE>の下で</HEAD>の上に
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
を一括挿入しました。
何故かレスポンシブ型に入れ替えたGoogleの広告が表示されません。
Googleに問い合わせしました。
２０１７年５月１７日
Googleから返答が来ました。
「現在のレスポンシブ広告コードではご希望どおりの広告ユニットを作成できていない場合は、レスポンシブ サイトの要件を満たすように広告コードを修正してください。」
ということでした。
https://support.google.com/adsense/answer/6307124?hl=ja#exact
スタルシートの設定の部分
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
は</HEAD>より上部に挿入しなければいけません。
黄色の部分は自分に合った名前をつけます
説明通りに広告コードを書き換えて、スタイルシートの要素を加えたら正常に動作しました。
全ページを一括で変換しました。
上記をそのままCOPY&PASTすると、「”」が全角にPASTされるようです。PASTする際には半角に戻してからにして下さい。
広告コードの書き換えは９２７個、スタイルシートの追加は１１０１個でした。ちなみにドキュメント数は１１７０個でした。
つまりページは全部で１１７０、Googleの広告を入れたページは９２７個、スタイルシートの設定をしているページが１１０１個ということです。
「きまっし金沢」だけでの数字です。他にもサイトがあるので総ページは１５００程度はあると思います。
２０１７年６月７日
次は画像のモバイルフレンドリー対策です。
画像が１列に配置している場合のモバイルフレンドリー対策は比較的簡単です。
<style type=”text/css”>
p.resizeimage { max-width: ***px; }
p.resizeimage img { width: 100%; }
</style>
を</HEAD>より上に配置します。
最大の大きさ（デスクトップ環境での大きさ）を***pxに設定してモバイル環境では縮小させます。
<p class=”resizeimage”>
<img src=”aaa.jpg”>
</p>
画像のファイル名がaaa.jpgの場合の記述です。
https://allabout.co.jp/gm/gc/400630/ を参考にしました。
２０１７年６月９日
俊の運営しているサイトではテーブルを使って幅７２０pxの画像の下の行に幅２４０pxとの画像を３列並べているページが多いので、スタイルシートを記入するところ（</HEAD>より上）に
<style type=”text/css”>
<!–
p.resizeimage1 img{
width: 100%;
}
p.resizeimage2{
max-width: 240px;
}
p.resizeimage2 img{
width: 100%;
}
p.resizeimage3{
max-width: 720px;
}
p.resizeimage3 img{
width: 100%;
}
–>
</style>
を配置しました。
望み通りのページになりましたが、ページを編集するモードで画像が全く見えなくなりました。プレビューモードにすると、ちゃんと表示されるのですが編集がしにくいです。
編集する時には上記の記述を削除して編集が終わると戻してアップロードする事にしました。
関連ページへのメニューは「クリック可能な要素同士が近すぎます」と指摘されているので、画像からのリンクから文字からのリンクに変更しました。
モバイルフレンドリーテストすると合格しました。これで、ほとんどのページのモバイルフレンドリー化のメドがたちました。
２０１７年６月１０日
サイトのモバイルフリー化について全ページ一括変換する項目をまとめてみました。
size=”-1″ を削除しました。size=1も削除しました
Googleの広告をレスポンシブ型に一括変換しました。
<style>
<!–
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
p.resizeimage { max-width: ***px; }
p.resizeimage img { width: 100%; }
p.resizeimage1 img{
width: 100%;
}
p.resizeimage2{
max-width: 240px;
}
p.resizeimage2 img{
width: 100%;
}
p.resizeimage3{
max-width: 720px;
}
p.resizeimage3 img{
width: 100%;
}
–>
</style>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
を</HEAD>より上部に一括挿入しました。
黄色の部分は自分に合った名前をつけます
２４０×１８０PXの画像と７２０×５４０PXの画像が圧倒的に多いので、
width=”240″ height=”180″ と width=”720″ height=”540″ を一括削除しました。
このページのコマンドをそのままCOPY&PASTすると、「”」が全角にPASTされるようです。PASTする際には半角に戻してからにして下さい。
エデイターを利用して自分で打ち込むことをお奨めします。
おのおののページで
画像の最大の大きさ（デスクトップ環境での大きさ）を***pxに設定してモバイル環境では縮小させるため720pxの画像には
<p class=”resizeimage3″>
<img src=”aaa.jpg”>
</p>
240pxの画像には
<p class=”resizeimage2″>
<img src=”aaa.jpg”>
</p>
を挿入します（挿入するのは赤文字の部分です）。
その他、ページ毎のwithコマンドを削除したり、バランスの悪い部分を修正します
２０１７年８月２６日
モバイルフレンドリー対策のために、widthの指定を削除すると、パソコンでの表示で文字の表示する幅が画面いっぱいになるので格好悪いです。Tableを多用しているのが原因なのですが今さらTableを使わないページに替えるのは自分のノウハウでは不可能です。
なんとかならないかなと、ネットで探していたのですがなかなか見つからず、更新意欲も湧かなかったのですが、今日やっと見つかりました。
スタイルシートの設定で
<style>と</style>
の間に
body,html{
max-width:800px;
margin-right: auto;
margin-left : auto;
}
を入れると、表の幅が８００pxで中央に配置できるようになりました。
tableを縦に並べるようにするには
<style>と</style>
の間に
@media screen and (max-width:600px) {
table, tbody, tr, th, td{
display: block;
max-width: 100%;
}
}
を入れると対応できます。
２０１８年４月２９日
ホームページのフォントの大きさが標準通りというのは、文字が大きすぎて、スタイルシートでパソコンでは小さめでスマットフォンでは大きめに表示できるようにならないかと、いろいろ調べると、ありました。とりあえず９５％で設定しました。
https://coliss.com/articles/build-websites/operation/css/font-size-used-responsive-scales.html
を参考に、スタイルシートに
body, th, td{
font-size: 95%;
// 600px以降から、100pxごとに1px大きくなる
@media (min-width: 600px) {
font-size: calc(112.5% + 4 * (100vw – 600px) / 400)
}
// 1,000px以上は、22pxに
@media (min-width: 1000px) {
font-size: calc(137.5%)
}
}
を加えました。すっきりしました。
２０１８年５月１２日
モバイルフレンドリー化にあたって、画像が横に並んでいる場合、モバイル環境に対応する方法として、画像を縮小する方法と、横並びの画像を自動的に縦並びにする方法の２種類あります。
自分は、tableを多用して、１つのセルに１つの画像を挿入していたのですが、１つのセルに複数の画像を並べる方式にするとモバイル環境では自動的に縦並びになります。
ただしHTMLソースで画像と画像の間に<br>を入れなく改行して記述しないと自動的に縦並びになりません。HTMLソースで改行しないで画像を横並びにすると自動的に縦並びになりません。
但し、画像に<p class=”resizeimage”>などで縮小させていると自動的に縦並びになりません。
<IMG src=”gazou1.jpg” border=”0″>
<IMG src=”gazou1.jpg” border=”0″>
上記のように記述すると自動的に縦並びになります。
<IMG src=”gazou1.jpg” border=”0″><IMG src=”gazou1.jpg” border=”0″>
上記の場合は横並びのままです
<IMG src=”gazou1.jpg” border=”0″><br>
<IMG src=”gazou1.jpg” border=”0″>
上記の場合は最初から縦並びのままです
<p class=”resizeimage”><IMG src=”gazou1.jpg” border=”0″></p>
<p class=”resizeimage”><IMG src=”gazou1.jpg” border=”0″></p>
上記の場合は最初から縦並びのままです
２０１８年５月２０日
トップの位置に題名が表示され、メニューは左側に、メインの内容は右側にある最も一般的なページのモバイルフレンドリー化に着手しました。
トップの位置の部分は独立したテーブルを設置します。
メニューの部分とメインの内容の部分はおのおの独立したテーブルに分割します。
２０１８年５月３０日
ここのところ２か月ほど、朝５時前から起きて、夜は寝るまで、日中も時間が空いたら、ホームページの全ページ更新をしています。
休日は早起きして、寝るまでずっとやっています。まあ、テレビを見ながらでの作業ですけど。それに加えて、ブログの更新もしているので結構大変です。
頭が疲れると、ダイエット系のコーラを飲んでいるので、カフェイン中毒になりそうです。
モバイル対応に加えて、スタイルシート設置や、色、文字の配置、リンク先一覧など各ページの共通化を徹底しています。
全体的な統一感を出すという面と、一括変換がしやすいというメリットがあるのです。
それに加えて、GoogleMapのアドレスの入れ直しもしています。昔のままだと、リンク先のマップで目的地が隠れてしまったり、色が付かないただの黒丸で表示されたりするのです。
それで、１つ１つ地点の設定をしていたのです。でも最近気づいたのです。
地点を文字で検索すると、ほとんどの地点が特定できるようになっているのです。しかもそれでアドレスを埋め込むと、地点に赤文字で地点名や説明文も表示されるようになるし、該当地点が地図の中心に表示されるのでわかりやすいのです。びっくりしました。しかもアドレスが簡単に記憶できます。
GoogleMapのアドレスの入れ直しは、ほとんど終わりかけていたのですが、再度やりなおそうと思います。
２０１８年６月７日
テーブルを使用したページで、モバイル環境で見ると画面からはみ出て、横スクロールしないと全画面を見れないページがあって、原因を探すのに苦労しました。
結局原因は、原稿（文）の中に全角スペースが連続して何文字も挿入されていたのが原因だったのです。全角スペースが続くと、全角スペースを単に文字の一部として判断せずに、空白を意図的に挿入してあると判断して、表示の時に勝手に途中で改行しない処理がされるようです。
数字は全角だと画面表示が崩れます。数字は半角を使うのが良いです。
２０１８年６月１０日
きまっし金沢のモバイル化が、大きな地図のサイトと宿のサイトを除いて完了しました。
２０１８年６月２４日
福井観光ｗｅｂを「きまっし金沢」内に引越すると同時にモバイル対応も完了しました。
２０１８年７月６日
飛騨高山観光ｗｅｂを「きまっし金沢」内に引越すると同時にモバイル対応も完了しました。
２０１８年７月１０日
京都紅葉ｗｅｂを「きまっし金沢」内に引越すると同時にモバイル対応も完了しました。
２０１８年７月１６日
俊の玉手箱のモバイル対応を完了しました。
フレームのあるサイトのモバイル可をするにあたって、デザイン的にかなり、いろんな事を試してみました。
２０１８年７月２１日
金沢お葬式情報を「きまっし金沢」内に引越すると同時にモバイル対応も完了しました。
２０１８年８月９日
金沢のお医者さん情報を「きまっし金沢」内に引越すると同時にモバイル対応も完了しました。
２０１８年８月２５日
モバイル対応で基本的には表の中でｗidthを使えないのですが、
<STYLE>
<!–
p.resizeimage{
max-width: 810px;
}
–>
</style>
を</HEAD>の上に記入して
<td><p class=”resizeimage”></p></td>を使えば
PCでは810pxの幅で、モバイルでは縮小できます。
地図は、縮小されると文字が見えなくなるので、頭の痛いところです。
地図は「まっぷっぷ」で作っていますが、「まっぷっぷ」というソフトはWindowsXPの時に購入したソフトなのですがWindows10になっても、なんの支障もなく使える優れものです。
PCでもモバイルでもそれなりに見える地図を作るには、幅２１ｃｍの大きさで文字のサイズ１０pxで製作し、文字は太めにしないほうが良いです。８００pxのgifで保存（線と境界だけアンチエイリアス）すると良いようです。
フレームを使ったスクロールマップを使用していますが、
<iframe src=”https://kimassi.net/scrollmap/insyokutentizuscroll.html” style=”width:100%; height:480;” frameborder=0 ></iframe>
のようにwidthを％で入力するとフレームの大きさをモバイル対応にできます。
フレーム内のスクロールマップはマップの基本になる画像をモバイルでは半分くらいの大きさになるように調整しました。
<STYLE>
<!–
@media(min-width: 600px){p.resizeimage1{
width: 3600px;
}
}
p.resizeimage1{
min-width: 1800px;
}
p.resizeimage1 img{
width: 100%;
}
body,html{
max-width:800px;
margin-right: auto;
margin-left : auto;
}
.dragme{
position:relative;
}
–>
</style>
を</HEAD>の上に記入します。
元のマップの画像は3600pxなのですが、PCの時には最大 つまり3600PXに、モバイルの場合では1800pxになるという設定です。
<p class=”resizeimage1″><IMG src=”syokuall.gif” class=”dragme” ” border=”0″></p>
をソースファイルの本文に記入します。
syokuall.gifという元のマップの画像を先に設定した大きさで使うという命令です。
resizeimage1は自分で好みの名前で良いです。
class=”dragme” はスクロールできるようにするための命令です。
2列のTableで、1列目に画像を入れて、2列目に長文の文字を入れた場合に、レスポンシブ型にするとPCでも画像が小さくなってしまいます。
PCでは大きさを変えないで、モバイルの時だけ画像を小さく方法を探すのに苦労してたのですが、方法を見つけました。
<STYLE>
<!–
@media(min-width: 600px){p.resizeimage6{
width: 160px;
}
}
p.resizeimage6{
min-width: 80px;
}
p.resizeimage6 img{
width: 100%;
}
–>
</style>
を</HEAD>の上に記入します。
600px以上の幅の環境（PC)では画像を160pxの幅で表示して、モバイル環境でも80pxよりは小さくならないという設定です。
ソースファイルの本文には
<p class=”resizeimage6″><IMG src=”notoall.jpg” border=”0″ “></p>
のように記入します。
notoall.jpgという画像のファイルを上記の設定で表示します。
イル対応で表の幅を画面をはみ出さないようにするための注意点を発見しました。
テキストで半角（スペースでも）を連続して入力すると改行にならなく必要以上に幅が広くなって横スクロールしないと全面が見れないようになるようです。
原因を見つけるのに苦労しました。
でも数字は半角を使った方が見栄えが良いのですよねえ。
２０１８年９月３日
tableで桁数の大きい半角数字をたくさん並べるとモバイル環境で画面に収まらなくなる不具合に遭遇しました。
最初、table全体を縮小する方法を探したのですが見つからず、結局そのtable内の文字だけを小さくすることで対応しました。
<STYLE>
<!–
p {
font-size: 3vw;
}
@media(min-width:700px) {
p{
font-size: 12px;
}
}
–>
</style>
を</HEAD>の上に記入し、縮小したい文字を<p> </p>で囲みます。
font-size: 3vw;の部分はfont-size: 9px;でも良いのですが、「ビューポートの幅の3/100」のフォント大きさというのを使ってみました。
２０１８年９月８日
「きまっし金沢」のトップページはPCでは３つのテーブルが３列に表示されてモバイルでは３つのテーブルが縦並びに表示されるようにしていますが、PCにおいて3列の高さがバラバラで揃っていないのが気になっていたのです。
<table height=”100%”>
を使えばなんとかできるのではないかと思って試してみたのですが、うまくいきません。
試行錯誤して、
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
を
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
に変更すると3列の高さを揃える事ができました。
でもテーブルの高さを拡大すると同時に、行の高さが拡大されてしまうのです。
行によっては見出しに使うため色を変えているので、出来れば見出しに使っている行の高さだけは固定にしたいという事で方法を探しました。
高さを34pxに固定したい行には
<STYLE>
<!–
td.container > div{
width: 100%;
height: 100%;
overflow:hidden;
}
td.container{
height: 34px;
}
–>
</style>
を</HEAD>の上に記入し、
class=”container”を挿入するとうまくいきました。
<td align=”left” class=”container”> </td>
https://code-examples.net/ja/q/1fee98
２０１８年９月９日
地図はgifファイルを使っていますが、そのままホームページ上で表示すると綺麗なんですが、
<STYLE>
<!–
p.resizeimage{
max-width: 720px;
}
p.resizeimage img{
width: 100%;
}
–>
</style>
を<head>より上に記述して地図を<p class=”resizeimage”> </p>
で囲むと地図内の文字がぼやけてしまうのが気になっていました。いろいろ試行錯誤して
<STYLE>
<!–
@media(min-width: 600px){p.resizeimage{
width: 720px;
}
}
p.resizeimage img{
width: 100%;
}
–>
</style>
を<head>より上に記述して地図を<p class=”resizeimage”> </p>
で囲むと綺麗に表示できるようになりました。
２０１８年９月１２日
上記の @media(min-width: 600px) を使って縮小すると意外なメリットがあることに気づきました。
ホーメページは基本的にホームページビルダーを使っていますが、ページ編集をする際には縮小した画面が見えなくなることがあったのです。
それが、ちゃんと画像が見える状態（縮小もされない状態）で編集できるようになりました。このメリットは大きいです。
サイト全部のp.resizeimageを一括変換しようと思います。
@media(min-width: 600px) の６００という数字は、何も考えなく使っていたのですが、全体の幅を設定した
body,html{
max-width:800px;
margin-right: auto;
margin-left : auto;
}
の数字に合わせたほうが良いのではないかと気づきました。そのほうが、より多くの環境で縮小されない画像がそのまま表示されるのではないかと思います。
２０１８年９月１3日
数字と：と％とアルファベットの全角文字を一括して半角文字に変換する事にしました。
エディタの秀丸でも１ページ毎の変換はできるのですが全角のスペースも半角に変換するので具合悪いので、すべてのページを対象にDreamWeaverで1文字ずつ全角から半角に変換する事にしました。
対象はテキストの文字だけで、大文字と小文字を区別するの条件で行います。
アルファベットは全角と半角の区別がつきにくいので、変換対象の文字を入力する時には注意が必要です。全角で入力した際に全変換のキーを入力すると全角とか半角とかの表示が出るので間違いがないと思われます。