Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
PC表示
BEFORE
![カスタマイズ前](https://for-men.jp/wp-content/uploads/2018/11/fd3a3a9eace7e52055d69ed300901ebe.png)
AFTER
![カスタマイズ後](https://for-men.jp/wp-content/uploads/2018/11/268e3667d75c66081fde1d535a7dc311.png)
スマホ表示
Before
![カスタマイズ前(スマホ)](https://for-men.jp/wp-content/uploads/2018/11/1a2628cc8d91e39cb0e44c76b4856990.png)
After
![カスタマイズ後(スマホ)](https://for-men.jp/wp-content/uploads/2018/11/858cc5a16424a28ad65f0313c0b9ce81.png)
カスタマイズは自己責任でやろう
自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。
![](https://for-men.jp/wp-content/uploads/2019/04/jikosekininn-160x160.png)
カスタマイズするための
準備
CSSコードの追加方法
おすすめは追加CSSからコードを追加する方法です。
はじめてカスタマイズする方は、こちらの記事を読んでくださいね。
![カスタマイズを加速させる追加CSS](https://for-men.jp/wp-content/uploads/2018/09/カスタマイズを加速させる追加CSS-160x160.png)
追加方法 | 難しさ |
---|---|
追加CSS | |
テーマエディター | |
FTPソフト |
複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。
カスタマイズに必要な
CSSコード
![ãã®ç»åã«ã¯ alt å±æ§ãæå®ããã¦ãããããã¡ã¤ã«å㯠kopinosikata.png ã§ã](https://for-men.jp/wp-content/uploads/2018/08/kopinosikata.png)
コメントありのカスタマイズコード
/*-------------------------------------- 記事下のカテゴリーとタグ部分 --------------------------------------*/ .footer-meta {/*カテゴリーとタグを含めた全体*/ padding: 10px 5% 10px;/*内側の余白*/ font-size: .9em;/*文字の大きさ*/ font-weight: 500;/*文字の太さ*/ background: #f4f4f5;/*背景色*/ margin-bottom: 15px;/*外側下の余白*/ } .footer-meta_title {/*CATEGORYとTAG部分*/ display: inline-block;/*幅と高さを調整できるように*/ width: 100px;/*幅*/ padding-right: 0px;/*内側右の余白を削除*/ background: white;/*背景色*/ text-align: center;/*中央揃え*/ margin-right: 5px;/*外側右の余白*/ } .meta-tag {/*TAG部分のみの設定*/ margin-top: 8px;/*外側上の余白*/ } @media only screen and (min-width: 768px){/*PCでの設定*/ .meta-tag {/*TAG部分のみの設定*/ margin-top: 0px;/*外側上の余白*/ display: inline-block;/*幅と高さを調整できるように*/ margin-left: 20px;/*外側左の余白*/ }}
コメントなしのカスタマイズコード
.footer-meta { padding: 10px 5% 10px; font-size: .9em; font-weight: 500; background: #f4f4f5; margin-bottom: 15px; } .footer-meta_title { display: inline-block; width: 100px; padding-right: 0px; background: white; text-align: center; margin-right: 5px; } .meta-tag { margin-top: 8px; } @media only screen and (min-width: 768px){ .meta-tag { margin-top: 0px; display: inline-block; margin-left: 20px; }}
「:」を削除したい場合
![コロンが気になる人](https://for-men.jp/wp-content/uploads/2018/11/2e39652d80f78935c1ac848b98237abf.png)
![](https://for-men.jp/wp-content/uploads/2018/08/huki-u-n.png)
この「:」部分を削除するには、entry-footer.phpを編集する必要があります。
子テーマにentry-footer.phpをアップロード
子テーマ(またはPORIPU)にもentry-footer.phpは入っていません。
自分で作成して、ファイルをアップロードする必要があります。
FTPソフトを使っているなら、親テーマからコピってくればOKです。
1.ファイルマネージャーにログイン
2.親テーマのentry-footer.phpをダウンロード
3.子テーマにentry-footer.phpをアップロード
singleのフォルダ内に先程ダウンロードしたentry-footer.phpをアップロードします。
これで完了です。
ワードプレスのダッシュボードに戻って、外観>テーマの編集で見てみると、先程のentry-footer.phpが追加されていると思います。
![entory-footerのある場所](https://for-men.jp/wp-content/uploads/2018/11/64f484fcd3a9d576b7f32a1295e08f43.png)
変更する場所
![変更箇所](https://for-men.jp/wp-content/uploads/2018/11/478c0b55d436679783cc9a9a67cae75d.png)
8行目と13行目にあるコロンを削除すればOKです。
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kirakira.png)
確認する際は必ずキャッシュを削除してから見てください。
確認方法 |
---|
「Ctrl」+「F5」(キャッシュ削除) |
カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。
Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。
![](https://for-men.jp/wp-content/uploads/2019/04/kyassyusakujo-160x160.png)
くまからのお礼
本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)
もっとカスタマイズしたい人はこちらの記事を見てください。
![](https://for-men.jp/wp-content/uploads/2019/09/84c53e12efdc94956cb14977175bad0f-160x160.png)
まとめ
![追加CSSのまとめ](https://for-men.jp/wp-content/uploads/2018/09/自作まとめ.png)
記事下にある「カテゴリー」と「タグ」部分のカスタマイズをしてみました。
全体に背景色を追加して、タイトル部分だけ背景を白にすることでしっかりと強調できるデザインになっています。
スマホとPCでは1列と2列に切り替わるように設定しました。
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kirakira.png)