質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1489閲覧

Wordpress、画像を投稿、レスポンシブ表示はhtml&css,phpをどのように組めば良いでしょうか?

may88seiji

総合スコア79

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/04/30 01:20

初歩的な質問で恐れ入ります。
###前提・実現したいこと
Wordpressのコンテンツ部分に「Shotoku」のように画像を3列で投稿、レスポンシブで表示するためのhtml,phpはどのように組めば良いでしょうか?

###試したテンプレートタグ

<?php if(have_posts())while(have_post()):the_post();?> <?php endwhile;endif;?>

add_theme_support($feature,$params)
the_post thumbnail($size,$attr)

###補足情報(言語/FW/ツール等のバージョンなど)
Shotoku
http://wp-shotoku.com/

ご指導いただけたら幸いです。
どうぞよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

写真をグリッド配置したいということでしょうか。
ところで、参考サイトってフリーテーマなんですよね。
実際にダウンロードして、ソースコード見るのが早いと思いますよ。
すいません。答えになってなくて。

投稿2016/04/30 08:05

capella

総合スコア45

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

may88seiji

2016/04/30 08:41

回答ありがとうございます。 はい、グリッド配置したいと思っています。 ソースコードはダウンロードしたんですが、どこがどう動いているのか...というのが今の私の技量です苦笑 色々とコードを分解して組み立ててみます!
guest

0

ベストアンサー

ソースをチラっと見たところ、Masonryを使ってるみたいですね。
http://masonry.desandro.com/index.html

ブラウザの幅に応じてレイアウトをきれいに整列してくれるjQueryライブラリです。

投稿2016/04/30 10:11

ucan-lab

総合スコア888

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

may88seiji

2016/04/30 12:13

回答、そしてソースを見て頂いてありがとうございます。 リンク先、参照いたしました。jQueryの効果だったんですね。 レスポンシブデザインはclearfix程度の技術しか頭にありませんでが、Bootstrapなどのフレームワークを選択肢に入れてみます!
ucan-lab

2016/04/30 12:46

質問文をちゃんと読んでなかったですが、Masonryはブラウザの幅を狭めた時に、3列から1列になるときのアニメーション効果の部分ですね。Bootstrapだけだとアニメーションなしでパパっと切り替わりますね。アニメーション効果とかは後から実装して良いとお思います。 それで、本題の3列表示はコメントで言われているBootstrapで簡単に実装できます。 例を挙げると次のようになります。 <div class="container"> <div class="row"> <div class="col-md-4">image1</div> <div class="col-md-4">image2</div> <div class="col-md-4">image3</div> <div class="col-md-4">...</div> </div> </div> これで1行3列表示で、タブレットサイズに幅を狭めれば1行1列表示のレスポンシブになります。 ただ、Shotokuサイトを真似するならSkeletonフレームワークを使うと良いと思います。 ShotokuサイトはSkeleton使っているのでソースをそのまま参考にできるかと思います。 Skeleton http://getskeleton.com/
may88seiji

2016/04/30 15:32

Bootstrapの例にSkeletonの情報とありがとうございます。 初めての投稿でしたが、starlod様に回答いただいて良かったです。 制作の次の段階にいけそうです。 次の機会もどうぞよろしくおねがいいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問