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

TCDテーマ共通:トップページに自由にコンテンツを追加できるスペースがほしい

Q.トップページに自由にコンテンツを追加できるスペースがほしい

TCDテーマSOURCEなどのテーマでは、自由にコンテンツを作成できる「フリースペース」がありますが、この機能がないテーマにもコンテンツを追加したい。

A.該当ファイルを編集してください

今回は、MAGテーマに追加する方法をご案内致します。
テーマによって横幅などのCSS調整や追加する位置の調整が必要ですので、適宜、ご編集ください。

編集ファイル:index.php

 <?php get_template_part('navigation'); ?>
 <?php }; ?>

←ここに入れてください。

</div><!-- END #main_col -->

 <?php get_template_part('navigation'); ?>
 <?php }; ?>
<div id="index_free_content">
<h2 class="p_catch">見出しが入ります</h2>
<p>文章が入ります。</p>
</div>

</div><!-- END #main_col -->

すると下記のようになります。

続いてスタイルの調整を行います。
TCDテーマオプション→基本設定→カスタムCSSに下記のように記載し、適宜、調整してください。

■コンテンツの背景色やスペースの調整
#index_free_content { background: #eeefef;}
#index_free_content {text-align: center;}
#index_free_content { width:555px; margin:50px auto 50px; }
#index_free_content  { padding: 100px; }

■見出しデザインの調整
.p_catch { border-bottom:1px dotted #ccc;  }
.p_catch {font-size:20px; }
.p_catch {padding:0 0 0 0px;} 
.p_catch {margin:0 0 25px 0; }

CSSを反映後が下記になります。

上記CSSを1行づつ追加し、プレビューをする事で編集内容がわかりやすく把握できると思います。

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

■TCD独自機能の便利なカスタムCSSについては、下記をご確認ください。
http://design-plus1.com/tcd-w/2015/12/custom_css.html

■コンテンツを追加したい場所がわからない場合は、下記の記事をご参考にお調べください。
WordPressテーマの編集したい箇所のファイル名がすぐにわかるプラグイン「WhatThe File」

そのファイルのコンテンツ箇所の指定するクラスをお調べになるには、下記をご活用ください。
サイトのカスタマイズが劇的に捗るFirefoxアドオン「Firebug」
サイト検証・カスタマイズに便利なChromeデベロッパーツールの基本的な使い方

ダッシュボード→設定→表示設定→フロントページの表示→固定ページのテーマは、下記をご覧ください。
TCDテーマのトップページに、テキストや画像などを挿入する方法

テーマによっては、フリースペースを標準装備しているテーマもございます

下記も合わせてご確認ください。
TCDテーマSOURCE:フリースペースの位置を調整したい

The following two tabs change content below.

ワッチー

楽しいことが大好きな30代です。 弁当も持参するほどの料理付きです。たまには料理レシピも掲載したいと思う時があります。

関連記事

TCD LABO ご利用上の注意

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

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

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