最終更新日:2015/03/06スマートフォン対応(スマホ最適化)したテーマを選んでも投稿する記事内のhtmlタグの書き方によっては表示が想定外って事もありますよね、画像を複数横並びしたい時にtableタグとか使うと画面に収まらなかったり文字が重なったりと難儀な話です。ccスポンサードリンクスマートフォン対応テーマとはスマホ対応テーマとはデバイスの画面サイズに合わせて最適化したテーマのことスマホやタブレットの解像度とブラウザサイズスマートフォンやタブレットは次から次へと新機種が生まれてきます。今後も高解像度化は進むでしょうがブラウザサイズに関してはデバイスピクセル比で割り算した値ですから、代表的な機種の値を意識していればよいでしょう。ブラウザサイズは360×640pxです。WordPressでのスマートフォン対応方法スマホ最適化プラグインの「WPtouch」使うレスポンシブデザインを採用したテーマにするスマホ用のCSSを作り画面サイズでCSSを切り替えるテーマを端末種別で選ぶ事ができるプラグインを使う利用テーマ内のphpでCSSを切り替えて条件分岐でHTMLを制御するWordPressでのスマホ最適化方法はいろいろありますが、スマホ最適化テーマではCSSで工夫し画面に収まるようにフォントサイズを小さくし横幅はパーセント指定します。大きい画像に関しては画面からはみ出さないようにCSSで最大横幅を100%にしています。既存記事のHTML記述内容は適切か?既に記事投稿している場合は記事内のHTMLタグの書き方によってはスマホ対応はしない方がいいです。無理して行っても、かえって見づらい事になり投稿記事内のHTMLタグを全て修正する羽目になります。※数値指定とは横幅やフォントサイズなど「tableタグのwidth=”600′′やfontタグでのsize=”5′′」の事です。他にもありますが...スマホ対応テーマ記事内での画像表示について通常の画像表示イメージブラウザサイズがiPhoneなら横幅:320px、androidスマホなら横幅:360pxですからマージンや余白を差し引いて画像サイズが横幅より大きい場合は100%で表示され、それより小さい場合は、右寄せ・左寄せ・中央とありますが指定した画像サイズで表示されます。ブログのスマホ対策としてはこれで充分ですが、下図の様に画像を横並びしたい時がでてきます。そんな時はどうしましょう?画像を横に3個づつ表示する方法1.単純にIMGタグを並べる指定した画像の大きさと表示場所にスペースがある時に横並びされます。2.align属性を利用して並べるalign=”left”/align=”right”で横方向の位置を指定する。最後に解除タグを記述3.tableタグを利用して並べる表組を利用し行列を作る。画像の位置はalign、valign属性などで調節する。4.cssを利用して並べる画像の並びをfloatやmarginを使い行う。文字の大きさや色の指定もできる。ブラウザサイズが横幅:320pxのiPhoneに3個づつ画像を表示するとなると1個100px位で並べる事になりますが、スマートフォンを横向きにした時でも大きい画面のディスクトップパソコンでもタブレットでもバランス良く表示したい時はCSSで対応する事になります。画像横並びのCSSを書いてみた長々と書いてきましたがイメージ図の様な「画像と文字が上下で横並びできる」CSSを自分で書いてみました。我流ですので記述が正しいかは?ですが、一応スマホで確認しても想定通りの表示になってくれました。0px;font-size:100%;font-weight:bold;}inline-blockを利用すると改行が半角スペースと表示されるので、ul定義部分をletter-spacingで文字間を詰めて、li定義部分をletter-spacingをノーマルに戻しています。記事内HTMLこの記事で使っている画像を並べてみました。文字もじ1文字もじ2文字もじ3文字もじ4縦に長い画像です文字もじ5長い文字もじ6まとめ他にもCSSの記述方法は沢山あるのでしょうが出来るだけ簡素なコードを書いてみました。今回は全て3個づつの表示で考えましたが、PCなら6個、タブレットなら4個、スマホなら3個を並べるような場合はcss内でメディアクエリを使いデバイス(幅:ブレークポイント)単位にパーセント記述を変える事にします。人気のWordPress無料テーマ「Stinger3」に変えてみたブログのテーマをスマホ対応済の人気無料テーマ「Stinger3」に変更しました。CUBIC記事を読むWordPressの仕組みを理解するWordPress(ワードプレス)は、深く仕組みを知らなくても簡単にブログやWebサイトが作れるようになっています。CUBIC』を少しカスタマイズしてみた現在はStinger3で運用しています。いうテーマを使っています。テンプレートを追加する方法このブログで使っているテーマ「Stinger3」はメインコンテンツ領域(横幅)が550pxとやや狭いです。Pack』は機能が豊富すぎて使いきれないので、メタタグのDe記事を読むレスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触ってみたので少し解説含む覚書メモです。コメントをキャンセルメールアドレスが公開されることはありません。!!などなど、諸々かきつけていきます。