WordPressテーマTCDのカスタマイズを研究するサイト

TCDテーマOOPS!:フリースペースの設定について

この記事は2018年9月10日に更新されたもので、内容が古い可能性がありますのでご注意ください。

Q.OOPS!にてフリースペースの設定について教えて欲しい

TCDテーマオプション→トップページ→フリースペースにて画像を使用しているのですが、レスポンシブデザインにする方法がわからないので教えて下さい。

A.下記に編集の参考例をあげさせていただきます。

フリースペースについては、CSSなどの指定を行い
レイアウトをご調整いただくことで表示をご調整ください。

例えば、弊社デモサイトでは、下記のようなCSSを
TCDテーマオプションン→基本設定→カスタムCSSに記載しております。
ご参考にご覧くださいませ。

■フリースペース内の内容

<div class="p-freespace__inner l-inner">
<h2 class="p-showcase__catch">OOPS!を体験する!<br>30日間トライアルダウンロード</h2>
<p class="p-showcase__desc">このスペースは「フリースペース」になります。ここにお好きな文章や画像を入れてください。<br />
HTMLの入力も可なので、自由度の高いコンテンツ作成が可能です。メールフォームはご自身でご用意ください。</p>

■カスタムCSS内の内容

.p-freespace__inner { width: 88.88889%; box-sizing: border-box;
text-align: center; }
.p-freespace__inner .p-showcase__catch { margin-bottom:6px; }
.p-freespace__inner .p-showcase__desc { margin-bottom:5px;
text-align:left; font-size:14px !important; }

実際の画面

尚、HTMLやCSSについての基本知識についてはサポートの対象外です。
CSSの基本的な知識については、書籍などでご確認頂き、ご変更下さいませ。
参考サイト:http://www.htmq.com/csskihon/001.shtml

OOPS!デモ

この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施をお願いいたします。

またカスタマイズ内容は、バージョンにより異なる場合がございますこと予めご理解賜りますようお願いいたします。

お問合せ・ご要望

TCD LABOへのお問合せやご要望は
ご連絡フォーム をご利用ください。