記事下のタグ・カテゴリーデザインを変更する

カテゴリーとタグのデザインを変更する

こんな感じで変更

Before

カスタマイズ前

After

カスタマイズ後

スマホだと

Before

カスタマイズ前(スマホ)

After

カスタマイズ後(スマホ)

CUSTOM POINT
背景をうっすらつけて、見やすくしました。さらにPCとスマホではちょっとだけ表示が違います。

記事下のタグ・カテゴリーをカスタマイズする準備

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

コードを追記するための方法は3つ

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

記事下のタグ・カテゴリーをカスタマイズするコードの追加

コメントありのカスタマイズコード

コメントなしのカスタマイズコード

カスタマイズがうまくいったか確認

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

「:」を削除したい場合

コロンが気になる人

MENくん

う~ん、コロンが気になるなぁ

この「:」部分を削除するには、entry-footer.phpを編集する必要があります。

子テーマにentry-footer.phpをアップロード

子テーマ(またはPORIPU)にもentry-footer.phpは入っていません。

自分で作成して、ファイルをアップロードする必要があります。

FTPソフトを使っているなら、親テーマからコピってくればOKです。

1.ファイルマネージャーにログイン

エックスサーバーのページにアクセスして①ファイルマネージャーを選択します。②IDとパスワードを入力してログインします。

2.親テーマのentry-footer.phpをダウンロード

手順
ブログのURL
public_html
wp-content
themes
sango-theme
parts
single
の順にクリックします

ファイルアップデート2

この画面まで来たら、entry-footer.phpをクリックして適当な場所に保存しておきます。(後でアップロードするのでわかり易い場所に保存しておきましょう)

3.子テーマにentry-footer.phpをアップロード

この画面まで①をクリックして戻ります。②sango-theme-poripu(または子テーマ)>partsingleの順にクリックします。

singleのフォルダ内に先程ダウンロードしたentry-footer.phpをアップロードします。

ファイルアップデート4

右側の①ファイルを選択から先程保存したentry-footer.phpを選択して、②のアップロードを押します。

これで完了です。

ワードプレスのダッシュボードに戻って、外観テーマの編集で見てみると、先程のentry-footer.phpが追加されていると思います。

entory-footerのある場所
entry-footer.phpの場所
外観
テーマの編集
parts
single
entry-footer.php

変更する場所

変更箇所

8行目と13行目にあるコロンを削除すればOKです。

MENくん

これで完璧や!

記事下のタグ・カテゴリーをカスタマイズ:まとめ

追加CSSのまとめ

記事下にある「カテゴリー」と「タグ」部分のカスタマイズをしてみました。

全体に背景色を追加して、タイトル部分だけ背景を白にすることでしっかりと強調できるデザインになっています。

スマホとPCでは1列と2列に切り替わるように設定しました。

MENくん

この背景色(#f4f4f5)すごく好き!!