TCD LABOをリニューアルしました!

レスポンシブ

12
  • SOURCE(TCD045)

TCDテーマSOURCE:トップページのフリースペースにGoogle Mapをレスポンシブ対応して埋め込む方法

Q.トップページのフリースペースでGoogle Mapをレスポンシブ対応させたいトップページのフリースペースにGoogle Mapを埋め込むと、スマホ閲覧時にブラウザの幅に対応せず表示が崩れてしまいます。レスポンシブ対応させることはできますか。A.下記の方法で対応してください

  • テーマ共通

テーマ共通:スマホ表示時にコンテンツが左側に寄って表示される際の対処方法

Q.スマホで表示すると、コンテンツが画面の左側に寄って表示されてしまいます。トップページのフリースペース、あるいは記事詳細ページでYouTubeやGoogle Mapの埋め込みタグ等のiframeタグを使用した場合にお問い合わせを頂く事象です。基本的には、iframeタグはそのままの記述では

  • BIRTH(TCD057)

TCDテーマBIRTH:レスポンシブのブレイクポイントを調整する

Q.BIRTHでのブレイクポイントを調整したいMacBookで開いた時にハンバーガーメニューで表示されてしまうので、ブレイクポイントを調整したいのですが変更することはできますか?A.下記ファイルの該当箇所を編集します1. CSSの読み込みを変更する編集するファイル:functio

  • STYLY(TCD052)

TCDテーマSTYLY:パソコン用⇄スマートフォン用でグローバルナビゲーションが切り替わる画面幅を変更する。

Q.1280px以下の画面ではスマートフォン用のグローバルナビゲーションとなりますが、1200pxまでPCのグローバルナビゲーションを表示したいA.該当ファイルを編集してください編集するファイル:functions/head.php※※1280pxの値を任意(例では1200p

  • IZM(TCD034)

レスポンシブのブレイクポイントを調整する

Q.PC用レイアウトとモバイル用レイアウトのブレークポイントを調整したいレスポンシブデザインのブレークポイントを調整することはできますか?A.下記ファイルの該当箇所を編集します①編集するファイル:functions/head.php編集する箇所:※max-widthの

  • VIEW(TCD032)

TCDテーマVIEW:GoogleMap(iframe使用)をレスポンシブ対応させる

Q.GoogleMapをレスポンシブ対応させるにはどうすれば良い?iframeでGoogleMapを記事内に挿入すると、レスポンシブ対応にならずスマホではみ出して(表示崩れして)しまいます。簡単に解決する方法はありますか?A.iframeをレスポンシブ対応するためのスタイル(CSS)を追

  • Precious(TCD019)

TCDテーマPrecious:スマホサイトとパソコンサイトで表示を分ける方法

Q.スマホのみバナーを非表示にしたいPCサイトでは、バナーを表示してスマホサイトではバナーを非表示にする方法はありますか?A.下記のファイルをご編集ください非表示する部分をif(!is_mobile()){・・・}で囲むとスマホでは非表示になります。スライダー下のバナーの場合

  • テーマ共通

埋め込み動画のレスポンシブ対応方法(YouTube等)

弊社テーマ自体は、ほとんどがレスポンシブ対応(一部未対応)となっておりますがYouTubeの埋め込み動画のサイズをレスポンシブに変更する機能はございません。その為、アップしたYouTube動画をスマホで見た場合、画面がはみ出てしまう事がございます。その場合は、下記のようにご編集ください。

  • SWEETY(TCD029)

スマホでTCDテーマSWEETYを表示した際のロゴの調整方法

Q.ヘッダーロゴとフッターロゴのサイズを均一にしたいのですが?スマホで閲覧時にヘッダーロゴは小さく、フッターのロゴは大きく表示されてしまいます。どこか設定でロゴサイズを均一に表示させる方法はありませんか?A.下記のphpファイルの該当箇所を編集します当テーマでは、ヘッダー部分には設定

  • Opinion(TCD018)

TCDテーマのスマホ表示時にスマホ用のヘッダーロゴ画像を表示する

Q.スマホ閲覧時にヘッダーロゴを表示させたいPC閲覧のときにはテーマオプションで設定したヘッダーロゴが表示されるのですが、スマホ閲覧時にはサイトタイトルのみの表示になってしまいます。スマホでもヘッダーロゴ画像を表示できるようにはならないでしょうか?A.下記の手順でカスタマイズしてください

  • Opinion(TCD018)

TCDテーマのレスポンシブ機能を無効(解除)する方法

Q.レスポンシブ機能の解除をするにはBlogPressを使用しているのですが、スマートフォン対応の必要がなくなったのでレスポンシブデザインを解除したいのですが、どのようにすればできますか。A.下記のphpファイルの該当箇所を編集します①編集するファイル:header.php編集す