スマホ対応テーマ(レスポンシブデザイン)での投稿記事内の画像横並び表示方法

公開日: 最終更新日:2015/03/06

スマホ対応テーマ 画像をtableタグで表示すると入らない時の記事に使った画像

スマートフォン対応(スマホ最適化)したテーマを選んでも投稿する記事内のhtmlタグの書き方によっては表示が想定外って事もありますよね、画像を複数横並びしたい時にtableタグとか使うと画面に収まらなかったり文字が重なったりと難儀な話です。

photo credit: Thomas Geiregger via photopin cc

スポンサードリンク

スマートフォン対応テーマとは

スマホ対応テーマとはデバイスの画面サイズに合わせて最適化したテーマのこと

スマホやタブレットの解像度とブラウザサイズ

スマートフォンやタブレットは次から次へと新機種が生まれてきます。今後も高解像度化は進むでしょうがブラウザサイズに関してはデバイスピクセル比で割り算した値ですから、代表的な機種の値を意識していればよいでしょう。

デバイス名 解像度 ピクセル比 ブラウザサイズ
iPhone5 640×1136px 2.0 320×568px
Galaxy S4 ※1 1080×1920px 3.0 360×640px
Nexus 7 1200×1920px 2.0 600×960px
iPad 1536×2048px 2.0 768×1024px

※1.Androidの人気機種 Xperia Z1 SO-01F / AQUOS PHONE ZETA SH-01F も、ブラウザサイズは360×640pxです。

スマホ・タブレットのブラウザサイズ

WordPressでのスマートフォン対応方法

  1. スマホ最適化プラグインの「WPtouch」使う
  2. レスポンシブデザインを採用したテーマにする
  3. スマホ用のCSSを作り画面サイズでCSSを切り替える
  4. テーマを端末種別で選ぶ事ができるプラグインを使う
  5. 利用テーマ内のphpでCSSを切り替えて条件分岐でHTMLを制御する


WordPressでのスマホ最適化方法はいろいろありますが、スマホ最適化テーマではCSSで工夫し画面に収まるようにフォントサイズを小さくし横幅はパーセント指定します。大きい画像に関しては画面からはみ出さないようにCSSで最大横幅を100%にしています。

スマホ対応する前に考える事と注意点

既存記事のHTML記述内容は適切か?
既に記事投稿している場合は記事内のHTMLタグの書き方によってはスマホ対応はしない方がいいです。無理して行っても、かえって見づらい事になり投稿記事内のHTMLタグを全て修正する羽目になります。

※数値指定とは横幅やフォントサイズなど「tableタグのwidth=”600″やfontタグでのsize=”5″」の事です。他にもありますが…

スマホ対応テーマ記事内での画像表示について

通常の画像表示イメージ

スマホでの画像表示イメージブラウザサイズがiPhoneなら横幅:320px、androidスマホなら横幅:360pxですからマージンや余白を差し引いて画像サイズが横幅より大きい場合は100%で表示され、それより小さい場合は、右寄せ・左寄せ・中央とありますが指定した画像サイズで表示されます。

ブログのスマホ対策としてはこれで充分ですが、下図の様に画像を横並びしたい時がでてきます。そんな時はどうしましょう?

画像を横に3個づつ表示する方法

画像を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を自分で書いてみました。我流ですので記述が正しいかは?ですが、一応スマホで確認しても想定通りの表示になってくれました。

cssコード

inline-blockを利用すると改行が半角スペースと表示されるので、ul定義部分をletter-spacingで文字間を詰めて、li定義部分をletter-spacingをノーマルに戻しています。

記事内HTML

この記事で使っている画像を並べてみました。

表示結果

  • 画像横並び表示1番目

    文字もじ①

  • 画像横並び表示2番目

    文字もじ②

  • 画像横並び表示3番目

    文字もじ③

  • 画像横並び表示4番目

    文字もじ④縦に長い画像です

  • 画像横並び表示5番目

    文字もじ⑤

  • スマホで画像と文字を上下に表示して画像横並び

    長い文字もじ⑥


まとめ

他にもCSSの記述方法は沢山あるのでしょうが出来るだけ簡素なコードを書いてみました。今回は全て3個づつの表示で考えましたが、PCなら6個、タブレットなら4個、スマホなら3個を並べるような場合はcss内でメディアクエリを使いデバイス(幅:ブレークポイント)単位にパーセント記述を変える事にします。

Post Categories: Wordpress  Tags:

AD

関連記事

meta_robots タグ設定

プラグイン「wordpress meta robots」を止めてカスタムフィールドで対応した方法

SEO対策の一つ「低品質コンテンツの対応」として、投稿ページや固定ページ単位にmeta robotsタグが設定できるプラグイン「word

記事を読む

Wordpress パソコン開発環境構築の記事

簡単に自分のパソコン(PC)にWordPress開発環境を作る方法

ワードプレス(Wordpress)で既に稼働中サイトのテーマをカスタマイズする時に直接テーマファイルを触るのは危険です。別途サーバー上に

記事を読む

wpテーマ-cubic

WordPressテーマ『mono-lab | CUBIC』を少しカスタマイズしてみた

現在はStinger3で運用しています。 このブログは(モノラボ)mono-lab | CUBIC というテーマを使っています。GPL

記事を読む

Exec-PHPを使わずに投稿ページや固定ページでphpを使う

カテゴリーページや投稿タグページに入力した説明文を反映させる方法

WordPressのテーマではカテゴリーページや投稿タグページに各々の編集画面で入力した説明文を表示するテーマは少ないのですが、今回入力

記事を読む

stinger3 1カラムテンプレートサンプル

「Stinger3」に1カラム テンプレートを追加する方法

このブログで使っているテーマ「Stinger3」はメインコンテンツ領域(横幅)が550pxとやや狭いです。いろんな方が横幅を広げるカスタ

記事を読む

Exec-PHPを使わずに投稿ページや固定ページでphpを使う

WordPress管理画面の投稿一覧にカスタムフィールドの項目を追加表示する方法

良く使うWordPress管理画面の投稿一覧ですが標準の表示項目は以下の7個です。通常のブログならカスタマイズする必要もないのでしょうが

記事を読む

メタタグセット記事のアイキャッチイメージ

プラグイン『Meta Manager』の使い方と注意点

WordPressでSEO対策用プラグインの『ALL in One SEO Pack』は機能が豊富すぎて使いきれないので、メタタグのDe

記事を読む

著作権表示が要らない素材サイト「pixabay」が使えるプラグイン

ブログにアイキャッチ画像を設定することは、魅力的な画像が記事本文へと読み進みみたくなる要素の一つでありSNSでシェアされた時に目を引

記事を読む

ワードプレステーマ wsc7

レスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説

Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触ってみたので少し解説含む覚書メモです。 2011年10月25日にリリ

記事を読む

wordpress_logo04

WordPressの仕組みを理解する

WordPress(ワードプレス)は、深く仕組みを知らなくても簡単にブログやWebサイトが作れるようになっています。大概のレンタルサーバ

記事を読む

Comment

  1. […] 参考 スマホ対応テーマ(レスポンシブデザイン)での投稿記事内の画像横並び表示方法 […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

AD

WordPress(ワードプレス)も SEO(エスイーオー)も、今一つ解らない、アラフィフおやじのWeb勉強ノート

・なんでやねん?
・忘れたらアカン!
・えらいこっちゃ !!

などなど、諸々かきつけていきます。

livedoor-reader-btn
follow us in feedly
著作権表示が要らない素材サイト「pixabay」が使えるプラグイン

ブログにアイキャッチ画像を設定することは、魅力的な画像が記事本

Wordpress パソコン開発環境構築の記事
簡単に自分のパソコン(PC)にWordPress開発環境を作る方法

ワードプレス(Wordpress)で既に稼働中サイトのテーマをカス

スマホ対応テーマ 画像をtableタグで表示すると入らない時の記事に使った画像
スマホ対応テーマ(レスポンシブデザイン)での投稿記事内の画像横並び表示方法

スマートフォン対応(スマホ最適化)したテーマを選んでも投稿する

stinger3 1カラムテンプレートサンプル
「Stinger3」に1カラム テンプレートを追加する方法

このブログで使っているテーマ「Stinger3」はメインコンテンツ

ワードプレステーマ wsc7
レスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説

Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触

→もっと見る