siriusでスマホサイトの作成がどうしてもうまくいかない。
iphonサイト同時作成にしているし、プレビューではちゃんと表示される。
しかし、自分でスマホで見てみた際にPC版と同じサイトが表示される。
コレはこれでいいのだが、やはりせっかくなので、スマホサイトもしっかり作りたい。
何がいけないのか、悪戦苦闘しながらたどり着いた結論。
「これ、テンプレートがおかしんじゃね。」もしくは、<head></head>の部分はスマホで同時生成されないんじゃないか。
SIRIUSの上のタグにテンプレートというのがあるので、そこに、iphoneサイトHTML編集をクリックすると、iphone用のサイトのHTMLテンプレートが出てくる。
PC版と同じように、トップページ・カテゴリーページ・エントリーページとそれぞれのHTMLがある。
そこにPC版と同じように、修正が必要なところがある。
このページの先頭に戻る
JavaScriptでびゅんとページの先頭に戻る。
PC版よりスマホの方がこの機能は必要がある。
ていうかスマホの為のような気もする。
<!-- jquery読み込み -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!--トップに戻るボタンを追加 -->
<p class="pagetop"><a href="container">このページの先頭へ</a></p>
<!-- スムーズスクロールの記述 -->
<script type="text/javascript">
$(document).ready(function() {
var pagetop = $('.pagetop');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
各種スライダー
SIRIUSの場合、モジュールの挿入でも、JavaScriptの部分は差し込むことができるのだが、PCとスマホ両方に対応するには、それぞれのHTMLのヘッダー部分にJavaScriptは書いた方がいい。ていうか、そこに書くしかない。
なので、PC版とスマホ版でスライダーの内容を変えたりするのは可能になる。
一応bxsilderとflexskider両方使ってると想定してある。
>
JavaScriptとCSSの保存場所に注意。
矢印の画像は表示しないにしても、JavaScriptのなかに入ってるので、一応画像の入ってるフォルダごとアップロードしよう。
じゃないとちゃんと表示はされるが、エラーがある為SEO的にまずいらしい。
あと、さんざん悩んだ矢印の画像はスマホでは表示しない方がいいかも。
スマホではフリックでスライドさせた方が画像もすっきりするし、自然だ。
ヘッダーがトップへのリンクになるようにする
これはスマホ版では絶対に必要のものなので、必ず修正しよう。
<!-- ★ヘッダーここから★ --> <div id="jump"> <% freeSpace1 %> <!--<% iphoneHeaderImage %>--> <div style="text-align:center"> <a href="<% pageDepth %>"> <img src="<% pageDepth %>img/header.jpg" alt="" /> </a> </div> <!-- ★ヘッダーここまで★ -->
もうここまで、修正するとHTML編集した事全部じゃないかという気もする。
要は、HTML編集したら、スマホ用のHTMLも編集しようということか。
スマホサイト生成の仕組み
SIRIUSでiphoneサイト同時生成するには「iphoneサイトHTMLテンプレート編集」でトップのHTMLを修正するのだが、仕組みとしては、SIRIUSのdataというフォルダのTOP.htmlが上書き保存される。
さらにサイト生成で、サイト生成先にコピーされる。
この際、サイト生成先のiphone用のフォルダのなかのindex.htmlはPC版のindex.htmlとiphoneフォルダのTOP.htmlを参照し生成される。
実際、アップロードされるのは、このhtmlなので、編集する時は、この一連の作業は必ずやっておこう。
ボリュームのあるサイトを作ってる時は、長い時間がかかるアップロードがめんどくさくて、サイト生成先のindex.htmlを直接編集し、iphone用のフォルダのみをアップロードしていると、次にサイト生成する時は、編集したことを忘れて上書きされるので、せっかく編集したのも消えちゃうので注意が必要。
自分も「？？」ってなったのはいい思い出・・・。
後、クロームで実際のサイトを確認する時、反映するのに時間がかかる事もあるので、じっくり時間的な余裕を持って挑もう。
まとめ
結局、こうやって書き出してみると、HTML修正したところはほぼ全部です。
要は、JavaScriptを記述した場合は、すべて、「スマホ用のテンプレートも修正しましょう」ということのような気がする。
つまり、「HTML編集する場合は、最初からスマホ用テンプレートのことも考えて修正しないといけない。」という事になるのかな。
