追記あり
こことは別の旧デザインシステムで運用しているブログがあるのですが、そこでちょっと実験的に試していることがあります。
今日は、壁にぶつかっている嘆きを聞いてください～。
うまくいかないときもあるんです～。
旧システムのスマホテンプレートの困るところ
旧デザインシステムだと、PCはPC用テンプレートで表示され、スマホはスマホテンプレートで表示されます。
スマホテンプレートはCSSもHTMLもカスタマイズできないようになっています。まったくいじれないって、不自由なんですよねー。
そして、今までにも書いている問題。
スマホテンプレートだと広告が多すぎる。数えてみたら、8こ表示されました。広告枠ではなく、広告の個数ね。さらに、今は全面を覆う広告も出るようになってしまったでしょ。困ったものだ…。
広告を入れるなとは言いません。無料で使わせてもらっているのですから。でも、ユーザーにとって適切な量というものはあると思うんです。
スマホテンプレートはカスタマイズできないので、この多すぎる広告をどうにもできません。
今やスマホでの閲覧が多い時代だから、ここに広告を詰め込むし、カスタマイズさせないんでしょうけど、節度はほしいところですよねー。これじゃ閲覧している人に不快感しか与えないでしょうから。
テンプレートをいじれない以上、どうにもできません。
そうか、スマホテンプレートを使わなければいい
新デザインシステムのほうだと、レスポンシブデザインを選べば、PC↔スマホでテンプレートが切り替わりません。サイドカラムが落ちるようになっているだけ。同一テンプレートを使うので、カスタマイズも管理もラクです。管理者としてのメリットがそれ。
広告がスマホテンプレートほど入ってこないので、たぶん閲覧者にもストレスが少なくて済むと思います。
自分でアドセンスを貼ることもできますしね。
あるとき、旧システムでも、新システムのように同じテンプレートを使うことはできないか？と思い立ちました。
ググれば、同じことを考えるセンパイがたくさんいたようで、いろいろな方法が見つかりました。
なぜか一筋縄ではいかなくて、試行錯誤中です。
少しずつ思う形に近づいていって、暗闇から抜けられるかも～♪と思ったのもつかの間、問題にぶち当たりました。
PR
「スマートフォン専用ページを表示」が消えない
私が取った方法は、スマホの場合でも、スマホテンプレートに飛ばされないようにする方法です。
それから、スマホの場合にサイドカラムが落ちるようにして、コンテンツの幅を調節して、フォントの指定を変更し、だいぶいい感じになってきました。
ここまでも、何回も失敗して大変だったんですよ。そこは、ほら、知識が足りないから…。
現時点での一番の問題は、画面の一番上に表示される「スマートフォン専用ページを表示」が消えないこと。しかも、以前より文字が大きく表示されていて、ジャマ！
こういうやつ。
文字が大きすぎて、全文入りきらないという事態。
CSSに、
#iphone-link { display: none !important; }
これを追加すれば、消えると言うんですね。
新システムではこれで消えてくれました。
旧システムのほうはダメ。
なんでだろうなー。
これがねー。うーん。
a要素にmin-widthって…？？
今日も最後まで読んでくれてありがとう！
【追記】2017.09.04
この記事の阿部シンイチSEさんのコメントを読んでください！
CSSをHTMLヘッダー内に記述すれば良いのですって！
成功しました。阿部シンイチSEさん、ありがとうございました。
この記事へのコメントが 2 件あります
阿部シンイチSE
ウチのホームページは旧システムテンプレートなのですが、CSSではなくて、HTMLにタグで囲んで、#iphone-link・・・や、レスポンシブ用のCSSのコードを追加したら、「スマートフォン専用ページを表示」が消えて、レスポンシブ化も成功しました。
もも
ご親切にありがとうございますっ！！
他のブログでレスポンシブ化がうまくいったりいかなかったりしているので、さっそく試してみます！