初めのスタイリスト

　英語で聞こうのページのスタイリストを変更したので、ここにまとめたいと思います。

　スタイリストは、「名前を付けてページの保存」でセーブして確認ください。
　注意：これは、firefoxでしか出来ないかもしれません。

　メニューがスタイリストだけで、３列タイプの２つに分かれるのと２列の一つにまとまるのが気に入って、「HPテンプレート素材処QPLO-無料」から、テンプレートをダウンロードした。
　現在、「HPテンプレート素材処QPLO-無料」は存在しない。

初めに変更したスタイリスト

　このテンプレートを改良して良いかどうかは、「HPテンプレート素材処QPLO-無料」のページが存在しない為不明だが、フッターの削除しないと書かれている所を変更しない限り、問題ははいと考えている。
　２列タイプを使うことにし、初めにヘッダー、リンク、画像枠、幅のサイズ変更を行ったのが次のリンクです。

　幅のサイズは、メインを５００pxから５１２pxのサイド合わせて７１２pxとした。

スマートフォン対応

　スマートフォン対応（モバイルフレンドリー）に５２０pxの一列タイプにし、文字サイズを変更うしたのが以下のリンクです。

このスタイリストを以下の方法で、PCとスマートフォンに切り替えている。
　下の一行目のviewport指定は、スマートフォン対応には、必要です。

    <meta name="viewport" content="width=device-width">
<!--上がスマートフォン、下がPC-->
<script>
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf('iPhone') > 0 || _UA.indexOf('iPod') > 0 || _UA.indexOf('Android') > 0) {
document.write('<link href="css4.css" type="text/css" rel="stylesheet"/>');
}else{
document.write('<link href="css3.css" type="text/css" rel="stylesheet"/>');
}
})();
</script>

上の方法で切り替えたのが以下のスタイリストです。

参考ページ

モバイル フレンドリー テスト

17-04-20追記

スクロールしても右側が固定されるスタイルシート

　右上に固定されていて、スクロールしてもずっと同じところに配置してあ... - Yahoo!知恵袋
上のページを参考にして、本文の74行目の<div id="menu" >を
<div id="menu" style="position:fixed;top:10px;right:0px;">に変更した。

2列タイプは不要なので一列タイプスタイリストを以下に作った。

css5とcss4をスマートフォン切り替えスタイルシートで行うと問題が出る。
その問題を解決するために、本文の88行目を以下のようにする。
<!--上がスマートフォン、下がPC-->
<script>
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf('iPhone') > 0 || _UA.indexOf('iPod') > 0 || _UA.indexOf('Android') > 0) {
document.write('<div id="menu">');
}else{
document.write('<div id="menu" style="position:fixed;top:10px;right:0px;">');
}
})();
</script>

上の方法で切り替えたのが以下のスタイリストです。

Page Top