WordPress講座、サーバー情報、強力なプラグイン、綺麗なテーマ(テンプレート)の紹介

TCD製テーマ(TCD013)をカスタマイズ!サイトカラーと見出しなど

カスタマイズ

TCD製テーマ(TCD013)-サイトカラーのカスタマイズ

ちょっと恥ずかしいのですが、おいらの運営するサイトでも使っていますのでお見せします(*^^)v
HIV感染SOSでは少しだけカスタマイズしていますが原型はそのまま使用しています。
※マニアックなサイトなので売り上げは聞かないでね(^_^;)

少しだけでもカスタマイズすると雰囲気が大きく変わりますので是非チャレンジして見て下さい。
主な変更点を紹介します。

TCD013のサイトカラーは黒!このままでもセンスが良いのですが、ちょっと明るいイメージにしたかったのでサイトカラーを変えてみました。全体のイメージが崩れない様にメインカラーはデフォルトの黒(グレーぽい)
にしてサブカラー橙(#ff6347)のラインを追加カスタマイズしました。

ブルー系の色もなかなか落ち着いた感じになります。別サイトではブルー系で使用しています(^O^)

サイトカラー変更前
サイトカラー変更前

サイトカラー変更後
サイトカラー変更後

この部分の変更はstyle_pc.css、style_sp.css内のheadline1をカスタマイズします。headline1 はstyle_pc.css(PC用)、style_sp.css(スマホ用)に分かれていますので同じ変更をして下さい。PCとスマホでカラーを変える事も可能です。

変更ソース:style_pc.css、style_sp.css

変更前

.headline1 {
 margin:0;
 line-height:42px;
 line-height:42px;
 font-size:14px;
 color:#fff;
 background:url(img/common/headline1.gif) repeat-x left top;
 padding:0 15px;
}

変更後

.headline1 {
  color: #ffffff ;
  background: #353A40;
  font-size: 14px ;
  line-height: 1;
  margin:0px;
  padding: 15px 6px 15px 6px;
 box-shadow:1px 3px 7px 0px #666666 ;
 border-bottom:2px solid #ff6347;  /*ここでカラーを変える*/
 border-radius: 0px ;
}

管理人はデフォルトカラーに橙(#ff6347)のラインを入れましたがここはサイトイメージに合わせ自由に変えられます。”border-bottom:2px solid #ff6347;”の”#ff6347”に好きな色に変更すれば自由にカスタマイズできるはずです。

TCD製テーマ(TCD013)-見出しをつける

マニュアルに無かったので気が付かなかったのですが、見出しはデフォルトで2つ使用できます。news_headline1/2

ソース:style.css

使い方:見出しはh3とかh4として使用すると思いますのでこんな感じで記事内で記述します。

例:<h3 class=”news_headline1″>見出しの試験</h3>
見出しH3

.news_headline1{
margin:80px 0 25px 0;
border-left:8px solid #444;
border-bottom:1px dotted #999;
line-height:30px;
font-size:1.2em;
padding:0 0 0 14px;
}

例:<h4 class=”news_headline2″>見出しの試験</h4>
見出しH4

.news_headline2
{margin:40px 0 20px 0;
border-left:6px solid #666;
line-height:26px;
font-size:1.1em;
padding:0 0 0 12px;
}

見出しが長く2列になった場合の見栄えが良くないので下線を外したオリジナルを使っています。
サイトカラーに合わせサブカラー橙(#ff6347)で指定しました。
CSSに追加して利用できます。

例:<h4 class=”news_headline3″>見出しの試験</h4>
見出しおれ

.news_headline3 {
border-style: solid;
border-color: #ff6347; /*サブカラー指定*/
border-width: 0 0 0 8px;
padding: 5px 0 5px 8px;
font-weight: bold;
font-size: 110%;  /*文字サイズ指定*/
}

TCD製テーマ(TCD013)-文字の行間を詰めるカスタマイズ

TCD013の行間はかなり広いので狭めに設定をした方が良いと思います。
バランスを見てカスタマイズして下さい。

変更ソース:style.css

変更前

p { margin:0 0 1.5em 0; padding:0; line-height:240%; }

変更後

p { margin:0 0 1.5em 0; padding:0; line-height:200%; }

管理人は200%で設定しましたがサイトに合わせ自由に変更して下さい。数値が小さくなれば
行間も狭くなります。
※TCD製テンプレートは全て広めになっていて、変更箇所も同じなのでTCD013以外を使用している方も参考にして下さい。

TCD製テーマ(TCD013)-最終更新日のカスタマイズ

ブログ形式のサイトでアフィリエイトをしていると投稿日が古くなることが気になります。
情報商材サイトの様な常に新しい情報を求められるサイトでは投稿日が邪魔になります。

その記事鮮度を保つために定期的に記事更新をしても投稿日は変わらないので訪問者に「このサイトの情報は新しいよ~」と伝える手段がありません。

TCD013は投稿日をオプションで消す事が出来ますが、個別ページに最終更新日を追加する事で記事鮮度を保っている事をアピールする事が出来ます。

この更新日の更新はTCD013には無いので追加しました。

WP SEOブログを参考にしました。
最終更新日追加

変更ソース:functions.php

function get_mtime($format) {
    $mtime = get_the_modified_time('Ymd');
    $ptime = get_the_time('Ymd');
    if ($ptime > $mtime) {
        return get_the_time($format);
    } elseif ($ptime === $mtime) {
        return null;
    } else {
        return get_the_modified_time($format);
    }
}

functions.phpに適当に追加して下さい。

変更ソース:single.php

<?php if ($options['show_date']) : ?><li class="date">
<?php if ($mtime = get_mtime('Y-m-d')) echo '最終更新日: ', $mtime; ?>
</li><?php endif; ?>

single.phpの表示したい個所に追加して下さい。
管理人の場合は下記の箇所に入れました。

管理人の場合 個別記事

<?php if ($options['show_date']) : ?><li class="date"><?php the_time('Y-n-j'); ?></li><?php endif; ?>

<!-- 最終更新日追加 -->
<?php if ($options['show_date']) : ?><li class="date">
<?php if ($mtime = get_mtime('Y-m-d')) echo '最終更新日: ', $mtime; ?>
</li><?php endif; ?>
<!-- 最終更新日追加 -->

   <?php if ($options['show_category']) : ?><li class="post_category"><?php the_category(', '); ?></li><?php endif; ?>
   <?php if ($options['show_tag']): ?><?php the_tags('<li class="post_tag">',', ','</li>'); ?><?php endif; ?>
   <?php if ($options['show_comment']) : ?><li class="post_comment"><?php comments_popup_link(__('Write comment', 'tcd-w'), __('1 comment', 'tcd-w'), __('% comments', 'tcd-w')); ?></li><?php endif; ?>
   <?php if ($options['show_author']) : ?><li class="post_author"><?php the_author_posts_link(); ?></li><?php endif; ?>
  </ul>
  <?php }; ?>

TOPにも変更を加えると良いかも知れません。
HIV感染SOSではTOPの投稿日表示を削除しています。

精度が良くない関連記事を替えるカスタマイズ

TCD013にはデフォルトで関連記事が表示出来ますが、、、、
何か精度が良くないと感じています。プラグインで優秀な関連記事を表示させるものがありますのでそちらを使用した方が良いと思います。

オプションで関連記事を非表示にして”WordPress Related Posts”を使用する方法が一番のおすすめです。レスポンシブなのでスマホの見え方も考えなければなりませんがこれならなかなか良いですよ!
関連記事

マージンありすぎ”block quote”をカスタマイズ

デフォルトの”block quote”はPC画面でみると悪くないのですがスマホで見るとマージンがありすぎて見栄えが良くありません。style.cssを調整してスマホでも見易く調整をした方が良いかと思います。

スマホ画面(変更前)
枠付き変更前

スマホ画面(変更後)
zEMcgLrxMuja2901403582043_1403582061

変更ソース:style.css

変更前


/* block quote */
.post blockquote {
   margin:30px 15px; padding:50px 50px 40px; background:#f2f2f2;
   background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(248,248,248,1) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(248,248,248,1)));
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8',GradientType=0 );
   -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; position:relative; border:1px solid #c1c1c1;
}
.post blockquote:before { content: '"'; font-style:italic; font-size:40px; font-weight:bold; line-height:40px; width:30px; height:30px; position:absolute; top:20px; left:20px; color:#999; }
.post blockquote:after { content: '"'; font-style:italic; font-size:40px; font-weight:bold; text-align:left; line-height:60px; width:30px; height:30px; position:absolute; bottom:20px; right:20px; color:#999; }

変更後


/* block quote */
.post blockquote {
margin:5px 5px; padding:20px 20px 10px; background:#f2f2f2;
   background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(248,248,248,1) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(248,248,248,1)));
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8',GradientType=0 );
   -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; position:relative; border:1px solid #c1c1c1;
}
.post blockquote:before { font-style:italic; font-size:16px; font-weight:bold; line-height:40px; width:30px; height:30px; position:absolute; top:40px; left:20px; color:#999; }
.post blockquote:after {font-style:italic; font-size:16px; font-weight:bold; text-align:left; line-height:60px; width:30px; height:30px; position:absolute; bottom:20px; right:20px; color:#999; }

TCD013を持っていない方、TCD製のテーマに興味がある方は参考にして下さい。

WordPressテーマ!デザイン、SEO共にTCDが最高

WordPressテーマ「Gorgeous (TCD013)」

関連記事

コメント

    • 初心者
    • 2014年 10月 31日

    初めまして!
    いつも参考にさせていただいております。
    いまどき様の他サイトを拝見させていただいたのですが、おすすめ記事の日付が消えているのですが、あれはどのように設定されているのでしょうか?
    教えていただけたら嬉しく思います。

      • いまどき
      • 2014年 10月 31日

      いまどきです。

      おすすめ記事の部分はテンプレートのoption設定だけでは消す事ができません。
      この部分はphpを変更する必要があります。

      recommend_post.phpとrecommend_post2.phpの中の下記記述を削除して下さい。

      // Title of widget //
        省略
      
      <p class="date"><?php the_time('Y-n-j'); ?></p>  <--ここ
      
        省略
      

      変更は個人の責任でお願いします

    • 初心者
    • 2014年 10月 31日

    ご回答ありがとうございます。
    recommend_post.phpの記述を削除したら消せました。
    ありがとうございます。
    recommend_post2.phpにはその記述はありませんでした。

    • 悲しみのTCD013
    • 2014年 12月 30日

    こんにちは!TCD013 のカスタマイズ記事がとても参考になります。
    ありがとうございます!(^-^)

    ですが、

    このページ上に書いてある、HIV感染SOSで行っているという、
    サブカラー橙(#ff6347)のラインを追加するカスタマイズが真似してみるのですが
    どうしても反映されません。。

    そのままコピペして貼り付けても反映されないのは、TCD013の仕様変更なのでしょうかね?

    もし、お手間でなければ教えて頂けると大変に嬉しいです。。

      • いまどき
      • 2015年 1月 05日

      回答がおそくなり(^_^;)
      正月休みを満喫していました。

      キャッシュをクリアしていますか?
      ”WP Super Cache”などをお使いなら変更後にキャッシュをクリアしてみて下さい。

    • 南の島のTCD好き
    • 2015年 12月 11日

    はじめまして。凄い初歩的な質問なのですが、HIVSOSサイトで表示されている右カラムのカテゴリ欄のように、グレー背景にグレーボタンのカテゴリ表示はどういう指定でなされていますでしょうか。。当方、そこだけまだ未完成で(苦笑)カスタマイズというレベルのお話しでは無いと思われますが、よろしければご教授願います。

      • いまどき
      • 2015年 12月 11日

      はじめまして!

      TCD013のテーマオプションから設定できます。
      デフォルトで設定されていますので、もしかしたら手動で外してしまったのかも知れませんね^_^;

      ●グレーのカテゴリメニュー表示方法
      テーマオプション ->右サイドのカテゴリー一覧の設定
      カテゴリー一覧を右サイドに表示するにチェック

      ●グレーのアーカイブメニュー表示方法
      テーマオプション ->右サイドの過去の記事一覧の設定
      過去の記事一覧を右サイドに表示するにチェック

      試してみて下さい。

*



にほんブログ村 小遣いブログ アフィリエイトへ
にほんブログ村

QLOOKアクセス解析
1G4nmzdIc9r9FUV1402471565_1402471688
WordPressテーマ「BlogPress (TCD010)」
1位:このサイトのテーマ(*^^)v(TCD010)

WordPressテーマ「Gorgeous (TCD013)」
2位:PVがかなり上がるぜぃ(^O^)(TCD013)

WordPressテーマ「CUBEY (tcd023)」
3位:アドセンスのクリック率UP!(TCD023)

ボタンマルシェ - ButtonMarche
プロデザインのボタン素材完全無料!