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

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

PC表示

BEFORE

カスタマイズ前

AFTER

カスタマイズ後

スマホ表示

Before

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

After

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

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

自己責任の意味がわからない方初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

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

カスタマイズするための
準備

目次へ戻る

CSSコードの追加方法

おすすめは追加CSSからコードを追加する方法です。

はじまてカスタマイズする方は、こちらの記事を読んでくださいね。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方
追加方法難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

目次へ戻る

この画像には alt 属性が指定されておらず、ファイル名は kopinosikata.png です

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

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

「:」を削除したい場合

コロンが気になる人
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くん
これで完璧や!

うまくできたか
確認

目次へ戻る

確認する際は必ずキャッシュを削除してから見てください

確認方法
「Ctrl」+「F5」(キャッシュ削除)

カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

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

くまからのお礼

目次へ戻る

本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)

もっとカスタマイズしたい人はこちらの記事を見てください。

【圧倒的SANGOカスタマイズまとめ】~ようこそ、沼への入口へ~

まとめ

追加CSSのまとめ

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。