「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

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

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

この記事は役に立ちましたか?

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

同じテーマのカスタマイズ記事