このブログでも使用している高性能でシンプルなレスポンシブウェブデザインのStinger3なんですが、自分のような初心者でもいろいろ弄くりやすい構成になってるとはいえ、Stinger3でホームページのようなサイトを作るとなんとなくレスポンシブウェブデザインが邪魔になってきます。

調べてもイマイチわからなかったので適当に修正してみました。
stinger3-header2

レスポンシブウェブデザインが邪魔!

レスポンシブウェブデザインとは、スマートフォンやPC表示にそれぞれ最適化した表示をしてくれるデザインです。

このブログみたいな、普通のブログだとレスポンシブウェブデザインが見やすくて良いんですが!固定ページで組み立ててあるホームページとかだと、レスポンシブウェブデザインだとどうしても見難いんですよね。

例えば、いつもPCで利用しているサイトがあってそれがスマホからだとスマホビューしか見れないとかだとすごく不便に感じると思います。切り替えボタンがあったらいいんですけどね。

ということで自分が大好きなStinger3で非レスポンシブ化してみたいと思います。

スポンサードリンク

Stinger3を非レスポンシブ化

言い方がこの「非レスポンシブ化」で合ってるのか間違っているのかすら解らない、さっき自分で考えた言葉ですが、とりあえず非レスポンシブ化の方法を説明します。

因みに自分はCSSのことを全く知りません。知識はほぼ0です。

ということで、なんとなくこうすればいいんじゃねーの?wって感じにやっただけなのでどうなっても知りませんよ♪。。と。

改変する部分はheader.phpです。

変更前

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="all" />
<?php } ?>
<?php wp_head(); ?>

初期のstyle.cssと違いますが

CSSが反映されない!CSSを即座に反映させるコードを入れる方法

この記事で一行変更してあるだけなのでコチラの記事もあわせて読んでください。

それはさておき改変後はこの様になります。

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="all" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="all" />
<?php } ?>
<?php wp_head(); ?>

8行目を3行目と5行目にペーストすればOKです。

つまり、スマホのsmart.cssを指定する部分全てにstyle.cssをペーストすればスマホの読み込み時にもpc用のcssが読み込まれるってコトですか?ね。解りませんけど!

ということでこんな感じです。

絶対他にこれの数倍良いやり方があると思いますが、css初心者の自分にはコレが限界でした。

最初にsmart.cssを削除してみたけど結局スマホビューがぶっ壊れただけで非レスポンス化は出来ませんでしたよ。。と。