yuichi.co

ゆういちのノートブック

【Stinger7】トップページの抜粋文字をなくしてタイトルの上に投稿時間をつける方法

 1659

Stinger7トップページの抜粋文字をなくしてタイトルの上に投稿時間を実装

@yuichico_です。今回はトップページのカテゴリとタグと抜粋文字をなくして、タイトルとその上に投稿時間をもってきて、見栄えよくする簡単な方法です。

ブログを運営するにあたって、トップページは大事な部分です。サイト訪問者にとって見やすい画面を提供することを進めます。コピペでできますので、初心者の方でも簡単にできます。PC版は最終的にはこんな形になります。

【Stinger7】トップページの抜粋文字をなくしてタイトルの上に投稿時間をつける方法 PC版

スマホ版は文字の大きさは変わりませんが、タイトル上に投稿時間がきます。

【Stinger7】トップページの抜粋文字をなくしてタイトルの上に投稿時間をつける方法 スマホ版



ダウンロードしてインストール

リンク Stinger7親テーマと子テーマのダウンロードとインストールのやり方

子テーマへファイルをアップロード

itiran-thumbnail-on.phpをアップロードをしてください。指定のファイルを子テーマへアップロードするという記事は以前書きました。そちらを参考にしてください。

リンク Stinger7で特定の親テーマのファイルを子テーマへアップロードする方法

カスタマイズ

アップロードしたら、外観→テーマ編集→itiran-thumbnail-on.phpへ以下をすべてコピーして貼付けて ファイルを更新 ボタンを押してください。抜粋文字とカテゴリとタグがなくなり、タイトルの上に記事の投稿時間がくるはずです。

<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<dl class="clearfix">
			<dt><a href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
						<?php the_post_thumbnail( 'thumbnail' ); ?>
					<?php else: // サムネイルを持っていないときの処理 ?>
						<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
					<?php endif; ?>
				</a></dt>
			<dd>
                                <div class="blog_info <?php st_hidden_class(); ?>">
					<p><i class="fa fa-clock-o"></i>
						<?php the_time( 'Y/m/d' ); ?></p>
				</div>
				<h3><a href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a></h3>
			</dd>
		</dl>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>
	<?php endif; ?>
</div>

CSSを振り分ける

外観→テーマ編集→style.cssの一番下へコピペ

.kanren dt img {
    border-radius: 10px;
}
@media only screen and (min-width: 781px) {
dd h3 a {
    font-size: 22px;
    line-height: 28px;
}
}

角を少し丸く

border-radiusで画像の角を少し丸くしました。丸くすることでやわらかいイメージをあたえます。

PC版の文字を少し大きく

@media only screen and (min-width: 781px) { } は、この括弧 {} に記述してあるCSSはPC版のみ反映されますよ。という意味です。ですのでスマホ版やタブレット版は反映されません。もし反映されたいのであれば、@media only scr......を削除すれば反映されます。

まとめ

以外と簡単でしたね。トップぺージの見た目は他のブログと差をつけるのであればカスタマイズしとくべきです。参考にしてください。

Stinger7 カスタマイズ