• ベストアンサー

レスポンシブなホームページの作り方

レスポンシブなホームページの作り方を勉強中ですが、中々うまくいきません。 それで、Wordpressを使って、このようなカタチに似たテーマで作れないものか?と思っております。 https://www.lhouse.co.jp/ https://media-k.jp/ こんな雰囲気に近いテーマをご存じの方、是非教えて下さいませ。 また、上記のようなレスポンシブデザインを比較的簡単に作る方法を説明してあるサイトなどございましたら、よろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • 4017B
  • ベストアンサー率73% (1306/1777)
回答No.1

いわゆるレスポンシブデザインのwebサイトを完全にゼロから独力で構築するには、莫大な時間と労力が掛かり対費用効果が全く釣り合いません。従ってこういう場合、特に質問者の様にWordPressを既に利用している場合は、既に広く公開配布されているWordPress用のそういった機能を持ったテーマを用途に応じてDLして利用する事によって目的を果たします。 で、質問者が例に上げた参考サイトですが… - https://media-k.jp/ ~こちらのwebサイトは完全にこの会社が独自に開発したテンプレート、或いはCMSシステムを使って自社webサイトを運営しているものと推測されます。或いは別途に専門業者に依頼して自社専用のwebサイトデザインを依頼して、独自のデザインを作製しているものと推測されます。 もう一方の… - https://www.lhouse.co.jp/ ~こちらのwebサイトは完全オリジナルでは無く、WordPress様に開発配布されている「TCDテーマ」というテーマを適用して運営されていますね。 - TCDテーマ https://design-plus1.com/tcd-w/tcd063 ただしこのテーマは法人向けの有料テーマですので、使用するためには登録して上記のwebデザイン制作会社から購入する必要があります。少々、お高い気もしますが、まあこういったモノにはその後のアフターケア等のサービス料金も込みで入っているものなので、数年間長く使うモノであるのならば妥当な金額かなとも思います。 P.S. あくまでも個人運営の小規模webサイトであり、余り経費はかけられないというのであれば。WordPress公式サイトのテーマ紹介ページから、無料使用可能なテーマを探す手もあります。 - WordPressテーマ https://ja.wordpress.org/themes/ レスポンシブデザイン機能の有無で検索結果を絞り込む事は出来ませんが、まあ2010年代以降に開発されたテーマであればほとんどが画面サイズの変動に動的自動的に対応して表示が変化する、いわゆるレスポンシブデザイン対応のテーマになっているかと思いますので。質問者の感性に叶うテーマを色々と探してみてください。

JAZZ-NY
質問者

お礼

4017Bさん 詳しいご説明ありがとうございます。 また、サンプルで提示したサイトにつきましてもお調べ下さりありがとうございます。 やはりテンプレートを使っての制作が良さそうですね。 これからいい感じのテンプレートを探してみたいと思います。 本当にありがとうございました。

関連するQ&A

  • 初心者でもレスポンシブ対応のサイトが作れるソフト

    初心者でもレスポンシブ対応のサイトが作れるソフトを教えてください。 以前はホームページビルダーの古いバージョンでレンタルサーバーにhtmlを作ってサイトを運営していました。 スマホ対応にと去年wordpressに変えたのですがサーバが重いので、wordpressを使わないでレスポンシブにしたいです。 「SIRIUS」 「ホームページビルダー」「QHM HAIK」 「BiND」などあるようですが、おすすめを教えてください。

  • wordpressテーマのレスポンシブ無効化

    wordpressの「Twenty Fourteen」にて、サイトの制作をしております。 背景画像の関係でレスポンシブデザインを無効化したいのです。 右記URL(http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14125143629)を参考に、コードを修正しましたが、無効化できません。 詳しい方、何とかお答えいただけますようお願い致します。 解決法がなければ、CSSの不要箇所を削除するつもりです。 もしくは、 レスポンシブでないおすすめの無料テンプレートがあれば、教えていただければ幸いです。

    • 締切済み
    • CSS
  • レスポンシブがよくわからない

    ■質問1 PC、タブレット、スマホで一つのhtmlとcssでレスポンシブに変更する場合、 @media screen and (min-height: 600px) を使って変更すると説明している解説サイトが多いです。 しかし端末は年々高解像度になっていますし、解像度は端末毎にみんなバラバラですよね? 解像度が低いとスマホ、中位だとタブレット、高解像度だとPCみたいな別け方ですが、 最近のスマホはかなり高解像度でPC並だと思うのですが、なぜこのcssで 振り分けができるのでしょうか? 自分が思うのは、スマホの横解像度が1024pxだったとしてもスケールが影響して @media screen and (min-height: 600px)に収まるようになっているとかでしょうか? このへんを説明しているサイトがなく、単に@media screeを使うとしか解説していないので教えて もらえると助かります。 ■質問2 端末によって横解像度が違うのでdivブロック内の文章がどの文字でdivの右端で折り返されるかは 端末毎に変わるのは仕方のないことですよね? 取引先の担当者に、改行や右端での折り返しが端末ごとに異なると怒られたのですが、なるべく見やすく 文字をremで指定しているし、そもそもフォント自体の幅が端末毎に違うので折り返しがまちまちなのは仕方のないことなのでしょうか? それとも同じにできるのでしょうか? どうぞよろしくお願い致します。

    • ベストアンサー
    • CSS
  • レスポンシブflexsliderのサムネイル画像を

    始めまして。 レスポンシブデザインのホームページショップを構築中です。 笑い話かも知れませんがホームページビルダー15での制作です。 メインカラムでflexsliderの導入をテストしています。 現在はうまくサムネイル画像横4個の3段の12個表示で動いています。 ですが3段12個表示ではサムネイル画像が大き過ぎてスマホでは使い辛いのが現状です。 そこで質問ですが、そのサムネイル画像をメイン画像の幅一杯のサイズで サムネイル画像2段で12個の表示の改良は出来るのでしょうか。 また、横一列で6個、8個と表示するにはどうすれば良いのでしょうか。 ネット検索では解答が見つからないので申し訳ありませんが質問させて頂きました。 具体的な方が良いかと思いURLを表示させて頂きます。 素人ですがネット検索と勉強でレスポンシブショップを構築中です。 試験ページ http://www.waterplanet.jp/zzzzzflexslider.html flexslider.css スタイルシート http://www.waterplanet.jp/style/flexslider.css .js ファイルです。 http://www.waterplanet.jp/style/jquery.flexslider.js スライダーは今現在はサムネイル画像12枚3段で上手く動いています。 クローム、サファリ、IEにもレスポンシブ対応できています。 これを一段に6枚、2段で12枚のサムネイル画像にしたく思います。 また、一段だけで8枚のサムネイル表示をお教え頂ければ幸いです。 どうしても解決できずに悩み切っております。 ご教示頂けましたら幸いです。 どうか宜しくお願い致します。

  • レスポンシブwebデザインをIEに対応させる方法

    レスポンシブwebデザインのIEへの対応について質問です。 XHTMLで作成したHPをメディアクエリを使用して、レスポンシブwebデザインにしたのですが、 IE8以下で全くCSSを読み込みません。 いくつかのHPを見て、header内に <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> を記述しているのですが、それでもうまくいきません。 CSSは外部ファイルで読み込ませてあり、 <link rel="stylesheet" media="only screen and (min-width: 481px)" href="style.css" /> このような形で記述してあります。ですので、 http://www.imaginationdesign.jp/blog/html5css3/1592/ これとも違うようですし、原因がわかりません。 どなたか原因がお分かりになられる方おりますでしょうか?

    • 締切済み
    • CSS
  • このホームページはインラインフレーム?ですか?

    wordpressを勉強してる初心者です。 色々調べていると、このホームページの仕様が気になりました。 https://w3g.jp/ ナビゲーションからページ移行をしてもヘッダー部分が変わらないように見えます。 アドレスは変化していますが、、htmlをのぞいてもiframeは無いようで。。。 みなさん、よろしくお願いします。

  • wordpressでホームページ製作

    wordpressでホームページ製作をしようと考えています。 自分はカメラマンなので写真だけがカッコよく見せれて尚かつ写真を見るのに 表示が速い物をテーマに選ぼうと思っています。 ちなみにPCはMACです。 良いなと思うヤツは有料のモノが多くしかも海外のモノが多くまずこの料金って年間の料金なんですか? それとも一度購入したらもう料金はかからないモノなのでしょうか? 後、初心者的な質問なのですが よく写真が大きく使えるテーマのモノがありますが、写真ドロップすればいいだけとかではないんですか? wordpressのホーム画面のメディアとか外観とかツールとかある所からアップロードしないと使用できないんでしょうか? 詳しい方是非ご指導ください。

  • ホームページビルダー17のwordpress

    ホームページビルダー13で5バージョンあたりから10年以上使用しています。 ここ数年は、そのソフトを使い、自分自身でタグやcgiで時々修正補足などしてきた独自ドメインサイトがあります。 最近のホームページビルダー17、について、ですが、 これは、wordpressになってしまったもの、と思ってよいのでしょうか? Wordpressは、いくつか他のサイトを複数で作り、使っていますので使い勝手は分かるのですが、 ホームページビルダー17は、PCで作成修正し、それをアップロードするwordpressとなっているのか、 あるいは、wordpressそのもの、のように、ブラウザを介してネット上ですべての作業を行うもの、なのか、 その両方ができるのか、 メーカーサイトを見ても、明確によくわかりませんでした。 質問: 1.ホームページビルダー17のwordpressの上記のことを教えてください。 2.ホームページビルダー17のWordpressでパッチをちょくちょくとあてていく作業は、自動でやってくれるもの、となっているのでしょうか? 3.ある程度検索で上位に維持している多くのページあるため、 固定ページのページ名は同じにしたいのですが、固定ページはhtmlなのでしょうか? 4.もし、固定ページがhtmlでなければ、現在検索上位のhtmlページから順位が変わる恐れがあるわけですよね? 週末にゆっくり聞こうと思ったら、土日サポートセンターお休みのようなので、 こちらでおわかりの方にお伺いします。よろしくお願いします。

  • 【急募】ホームページを作成するにあたって

    「きちんとした商用ホームページを作りたい」のですが、htmlやcss、ネット(サーバー上)の仕組みなどの「一連の流れ」の知識がまだ初心者です。出来るだけ早く、そして効率的に知識をつけて、一刻も早くHPを立ち上げたいです。 ※現在Dreamweaverを所有していますが使用はまだしていません。 現在個人でWordPress.comでホームページをやっています。あまり時間をかけたくなかったので、ソフトをインストールしない方で作成しました。wordpress上のオプションで独自ドメインも取得したのですが、この手法だと、ページ下部にテーマ名が表示されたり、いろいろ細かくカスタムできないので、商用には流用できませんので、時間とお金はかかりますが、ちゃんとした形で立ち上げることにしました。 ほとんど無知の状態なので、書籍で順番に勉強したいと思いますが、知識をつける順番的に、 ・ホームページ作成の仕方(独自ドメイン取得、レンタルサーバーなどの知識、FTPやらなんやらの専門用語、サイトの構成) ↓ ・HTML/CSS の知識 ↓ ・ソフトウェアの使い方 ↓ 最後にSEO対策など。 この順番で間違いないですか? あと、この他に必要な知識はありますか?

  • ホームページビルダー体験版で

    初心者です。 ホームページビルダー体験版で作成したWordPressサイトをジオシティーズにFTP転送は終わりました。 その後、WordPressの利用手続き画面が出るそうですが、それは出なくて「ページが存在しません」とメッセージが出てしまいます。 WordPressの利用手続き画面が出ないため、インストールが完了しません。 WordPressの利用手続き画面、なぜ、出ないのでしょうか。 WordPressの転送は、「ホームページビルダーサービス」ではなく、「そのほかのプロバイダーやサーバーを使う」でMySQLをインストールして行いました。 当然、自分のURL:http://www.geocities.jp/wtkwp895/ をアクセスしても、目的のページが表示されていません。 よろしくご指導ください。