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

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

こんな感じで変更

Before

カスタマイズ前

After

カスタマイズ後

スマホだと

Before

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

After

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

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

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

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

3つのコード追加方法

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

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

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

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

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

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

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

「:」を削除したい場合

コロンが気になる人

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)すごく好き!!