とりあえず備忘録としてyomi-searchのスマートフォンテンプレート対応の仕方についてメモ。
１ iphone専用のテンプレートを用意する。わたしはバナーブリッジさんのテンプレートをお借りしました。
シンプルですごく使いやすかったです。マジおすすめ。
小説サイトはみんな、スマホテンプレートに変えるといいよ。
ケータイサイトは作りづらいけど、スマホサイトは要するに横幅が狭くて、リンクはdivを指タッチさせるｐｃサイト、のことだもんね。
２ トップページをがしがし作る。サーチ内部のテンプレートとしても使えるので、きっちり。
３ 今回は、得票順ランキングのみスマートフォン対応にしたので、スマートフォン対応モード名を決める。たとえばrev_sとかにする。
４ rank.cgi内、
&form_decode();
if(!$FORM{page}){$FORM{page}=1;}
if($FORM{mode} eq "link"){&link;}
elsif($FORM{mode} eq "r_link"){&r_link;}
elsif($FORM{mode} eq "keyrank"){&PR_keyrank;}
elsif($FORM{mode} eq "rev" || $FORM{mode} eq "rev_bf" || $FORM{mode} eq "rev_rui"){&PR_rev;}
elsif($FORM{mode} eq "rev_s"){&PR_revs;}
#このelse{&PR_rank;}
#人気ランキングexit;
ーーーーー（#の行を追加する）
＋同じくrank.cgi内、
sub PR_revs{
#(1.1)アクセス(IN)ランキング表示画面(&PR_rev)
if(!$EST{rev_fl}){&mes("アクセスランキングは実施しない設定になっています","エラー","java");}
require "$EST{temp_path}rev_rank2.html";
print "Content-type: text/html\n\n";
&print_rank($FORM{kt},"rev",$FORM{page});
}
上をまるまるコピペ。テンプレート名をrev_rank2.htmlにしてあるのは任意で変更可能。
５ とりあえずテンプレートフォルダの内部、rev_rank.htmlをコピーしてrev_rank2.htmlを作る。アップロードして属性を変更。
６ rank.cgiをアップロードし直して、モードがrev_sでも動くことを確認。
７ あとはrev_rank2.htmlをトップページと同じ、スマートフォン対応のテンプレートに書き換えるだけです。
ここが一番苦労するところだけどｗ
各データをぐるぐる書いているところを、カテゴリリストのsectionタグとliタグでうまくくくってやることが大事。そうすると、サイトごとにテキストではなく、説明文もいっしょにリストタグでくくった全体をリンク領域にかえてやることができます。
以上です。
スマホサイトの使い勝手は、１画面にごちゃごちゃ詰め込めない、というのもあって、かなりよくなってるんじゃないかと思います。サーチの機能としては削ってますけど、それはｐｃでやればいいことだし、そもそもｐｃで見られないサイトは登録不可能なわけだから。
でもスマホでみると１ミリぐらいの文字がどあーーーーって出てくる小説サイトもまだまだ多いので、そこはどんどん対応していってくれると、新しい読者さんも増えるんじゃないかなあと思います。
新しい読者さんはみんなスマホ持ってて当たり前で、いつでもどこでも小説を読みたい人がいて、スマホだから画面が小さい、んじゃなくて、スマホだから逆に字が大きくて読みやすい、ぐらいの気持ちで考えるのが妥当かな・・・
無料デザインテンプレート集 | スマートフォン（iPhone・Android） / WordPress / HTML 対応
スマートフォン（iPhone・Android）対応のデザインテンプレートを無料で配布しています。WordPress版、HTML版も取り扱っています。商用利用可。ぜひご利用下さい。
