初心者でも簡単!WPでSEO対策

無料で利用できるWordPressを使って、SEO初心者でも簡単に検索エンジン上位表示できる情報をお届けします。

無料テンプレ【AFFINGER】タイトル下の投稿日・更新日を非表示にする方法

 

SEOに強く、アフィリエイトにも強いと評判のENJIさん作のWordPressの無料テンプレートAFFINGERですが、あまりの評判に使っている人が多くて、どのサイトも同じように見えます。そこで、今回はタイトル下の投稿日・更新日を非表示にして、タイトル下のボックスの表示を変更する方法をご紹介します。

 

スポンサードリンク

今回のカスタマイズは『投稿タイトル下の投稿日・更新日を非表示にする』です。

AFFINGER/タイトル下の投稿日・更新日を非表示にする

注意事項

テーマファイルを改変しますので、失敗するとサイトが表示されなくなる可能性があります。

失敗してもすぐに戻せるように、必ずファイルのバックアップを取っておきましょう。

▼バックアップに必要なファイル

  • single.php
  • style.css

環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。

▼この記事の環境

  • WordPress 4.5.1-ja
  • STINGER 5
  • Google Chrom

投稿日・更新日のソース確認

投稿記事のソースを確認すると、タイトル下の下記ソースで表示されていることがわかります。

AFFINGER/タイトル下の投稿日・更新日のブラウザで見た時のソース
 
						<p><span class="kdate"><i class="fa fa-calendar"></i>&nbsp;
                <time class="entry-date" datetime="2014-05-13T10:22:13+09:00">
	                2014/05/13                </time>
                &nbsp;
								 <i class="fa fa-repeat"></i>&nbsp; 2014/11/03                </span></p>
 
 

WordPressの管理画面で[外観]→[テーマの編集]→[単一記事の投稿(single.php)]の順に進み、単一記事の投稿編集画面を開いて変更します。

AFFINGER/タイトル下の投稿日・更新日、WordPressのソース
 
 

このソースを編集します。

						<p><span class="kdate"><i class="fa fa-calendar"></i>&nbsp;
               <time class="entry-date" datetime="<?php the_time(DATE_W3C); ?>">
	                <?php the_time( 'Y/m/d' ); ?>
                </time>

                &nbsp;
								<?php if ( $mtime = st_get_mtime( 'Y/m/d' ) ) {
									echo ' <i class="fa fa-repeat"></i>&nbsp; ', $mtime;
								} ?>
                </span></p>

投稿日・更新日の非表示

今後、一切使用しない場合は、ソースを削除して非表示にします。

ひょっとしてまた使うかもしれない…という場合はコメントアウトで非表示にしましょう。

コメントアウトで非表示にする

↓これの上を改行して

<p><span class="kdate"><i class="fa fa-calendar"></i>&nbsp;

↓これを記入。

<!--日付のコメントアウト

↓これの下を改行して

</span></p>

↓これを記入。

日付のコメントアウト-->
 
ファイルを更新]をクリックして保存。  

↓こんな風になればOKです。

<!--日付のコメントアウト
						<p><span class="kdate"><i class="fa fa-calendar"></i>&nbsp;
               <time class="entry-date" datetime="<?php the_time(DATE_W3C); ?>">
	                <?php the_time( 'Y/m/d' ); ?>
                </time>

                &nbsp;
								<?php if ( $mtime = st_get_mtime( 'Y/m/d' ) ) {
									echo ' <i class="fa fa-repeat"></i>&nbsp; ', $mtime;
								} ?>
                </span></p>
日付のコメントアウト-->
 
AFFINGER/タイトル下の投稿日・更新日のソースコメントアウト後
 

ソースを削除して非表示にする

↓このソースをまるまる削除します。

AFFINGER/タイトル下の投稿日・更新日、WordPressのソース
 
 

選択したソースを削除して[ファイルを更新]をクリックして保存。

AFFINGER/タイトル下の投稿日・更新日の非表示、ソースの削除
 
 

コメントアウトでもソース削除でも、
↓このように表示されます。

AFFINGER/タイトル下の投稿日・更新日の非表示後
 

レイアウト変更

非表示にした後が物悲しい…そんな場合は、CSSで調整しましょう。

WordPress管理画面で
外観]→[テーマの編集]の順にクリック。

スタイルシート(style.css)]を開きます。

AFFINGER/タイトル下の投稿日・更新日削除後のボックスレイアウト変更
 
 

クラス「.blogbox]が該当するCSSです。

.blogbox {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #666666;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #666666;
	margin-bottom: 20px;
	padding: 5px;
 

「border-top-style: solid;」がボックスの上線「border-bottom-style: dotted;」が下線で、値の「solid」が実線、「dotted」が点線の表示です。

 

今回は、下線を実践にして、背景色を上下の線と同じ色にします。

↓こんな風に修正して[ファイルを更新]をクリック。

.blogbox {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #666666;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
	margin-bottom: 20px;
	padding: 5px;
	background-color: #666666;
}
 

シャキッとしましたね。

AFFINGER/タイトル下の投稿日・更新日削除後のレイアウト変更後
 

このソースをいじくれば色んな表示ができます。

参考にしてください。

   
 

 - SEO カスタムテンプレ, WordPressカスタマイズ , , , , , , , , , , , , , , , , , , , ,