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

   

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

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

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

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

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

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

スポンサードリンク

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

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

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

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

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

カスタマイズ

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

CSSを振り分ける

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

角を少し丸く

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

PC版の文字を少し大きく

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

まとめ

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

シェアしていただけると助かります。

 - Stinger7, カスタマイズ ,