匿名の方からのご質問で、「スマホ対応のサイトは、どう作るのか」と尋ねられたのですが、もしも文字(小説とか)をメインとするのならば、個人的にはブログやpixivを使われた方が、楽だと思います。
というのは、運営側がPC用、スマホ用、ガラケー用と、勝手に判断して表示してくれるから。
ではなくて、個人サイトをスマホ対応にどうしてもしたい!と思われているのなら色々と複雑なことになりますが、当サイトのやり方は、この幅以上はPC用のcssファイルを、この幅未満はタブレット・スマホ用のcssファイルを読み込むようにと、<head>の中で宣言しております。
こちらのページを右クリックして「ソースを読む」でご確認ください。
で、とりあえずPC用では、このような表示ですが、
大まかに、一番上のロゴ部分のheader、横長の青のメニュー、左メニュー、右側のメイン、一番下のCopyrightのfooter、5つに分かれてます。
これをタブレット用のcssにすると、
横長の青のメニューと左メニューが消え(cssファイルで、「display: none;」と指定しているため)、上部にスマホなどで使われるハンバーガーメニューが現れます。
このハンバーガーメニューは、「SlickNav」というjQueryを使ってますが、設置方法はググっていただいた方がよろしいかと…;
で、タブレット用cssではあるけれど、スマホまで幅を縮めると、
こうなります。
二つ並んでいるのが、一つずつ縦長になっているのは、cssファイルで「float」指定をして回り込ませているからです。
で、写真関係は、
p.resizeimage img {
width: 100%; height: auto;
}
p.resizeimage {
max-width: 600px; /* 最大幅 */
}
のように、cssに書いておいて、<p>で挟んでます。
こちらと
こちら、管理人の別サイトで3カラムの構成で、PC用、タブレット用、スマホ用と全く表示が異なりますが、cssファイルで指定すれば、こういうこともできます(PCでご覧でしたら、幅を狭めていってください)。
ただ、他にも微妙な調整を入れたりしてますので、はっきり言いまして、面倒くさいです。
必用なのは根性かもしれません。
スマホ対応サイトでググると、色々とやり方が出てくると思いますので、そちらにてご検討ください。
拍手、ありがとうございました。