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
こんな感じに変更
BEFORE
 カスタマ前.png)
AFTER
 カスタマイズ後.png)

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

カスタマイズするための
準備
ショートコードを挿入
WordPressのテーマでSANGOを使用している方は、ショートコードで関連記事を3パターン出力することができますよね。
そのなかで今回は関連記事(横長)をカスタマイズしていきます。
[kanren id="ID" target="_blank"]
こちらのコードにIDを入れれば簡単に関連記事を出力できます。

SANGOサポーターならURLだけでとっても簡単に挿入できます

PORIPUならIDは投稿一覧でパッと確認
CSSコードの追加方法
おすすめは追加CSSからコードを追加する方法です。
はじめてカスタマイズする方は、こちらの記事を読んでくださいね。

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

style.css(追加するコード:関連記事 横長)
/*-------------------------------------- 関連記事(横長) --------------------------------------*/ .linkto {/*全体*/ position: relative;/*疑似要素の基準に*/ max-width: 600px;/*最大の横幅*/ } .linkto:before {/*疑似要素(前)*/ position: absolute;/*基準を元に*/ content: "関連";/*挿入する文字*/ top: 10px;/*上からの位置*/ left: 125px;/*左からの位置*/ display: inline-block;/*縦横設定できるように*/ width: 47px;/*横幅*/ height: 27px;/*縦幅*/ text-align: center;/*中央揃え*/ vertical-align: middle;/*縦の中央揃え*/ background: #ff525290;/*背景色*/ font-size: 14px;/*文字の大きさ*/ line-height: 28px;/*行の高さ*/ color: white;/*文字色*/ letter-spacing: 3px;/*文字間隔*/ padding-left: 3px;/*内側の余白*/ border-radius: 2px;/*角丸*/ } .linkto:after {/*疑似要素(後)*/ position: absolute;/*基準を元に*/ display: flex;/*中の要素を動かせるように*/ height: 100%;/*背景の高さ*/ padding: 0px 15px;/*内側の余白(左右15px)*/ content: "\f138";/*アイコン*/ font-family: "FontAwesome";/*アイコンを表示できるように*/ top: 0px;/*上からの位置*/ right: 0px;/*右からの位置*/ font-size: 2.8em;/*フォントサイズ*/ color: #fff;/*文字色*/ background: #eaedf2;/*背景色*/ align-items: center;/*中央揃え*/ } .linkto .tbtext {/*テキスト部分*/ padding: 30px 62px 0px 10px;/*内側の余白(上右下左)*/ vertical-align: top;/*上揃えに*/ font-size: .95em;/*文字の大きさ*/ }
style.css(追加するコード:関連記事 横長)
/*-------------------------------------- 関連記事(横長) --------------------------------------*/ .linkto { position: relative; max-width: 600px; } .linkto:before { position: absolute; content: "関連"; top: 10px; left: 125px; display: inline-block; width: 47px; height: 27px; text-align: center; vertical-align: middle; background: #ff525290; font-size: 14px; line-height: 28px; color: white; letter-spacing: 3px; padding-left: 3px; border-radius: 2px; } .linkto:after { position: absolute; display: flex; height: 100%; padding: 0px 15px; content: "\f138"; font-family: "FontAwesome"; top: 0px; right: 0px; font-size: 2.8em; color: #fff; background: #eaedf2; align-items: center; } .linkto .tbtext { padding: 30px 62px 0px 10px; vertical-align: top; font-size: .95em; }
style.css(追加するコード:関連記事 横長)
.linkto { position: relative; max-width: 1600px; } .linkto:before { position: absolute; content: "関連"; top: 10px; left: 125px; display: inline-block; width: 47px; height: 27px; text-align: center; vertical-align: middle; background: #ff525290; font-size: 14px; line-height: 28px; color: white; letter-spacing: 3px; padding-left: 3px; border-radius: 2px; } .linkto:after { position: absolute; display: flex; height: 100%; padding: 0px 15px; content: "\f138"; font-family: "Font Awesome 5 Free"; top: 0px; right: 0px; font-size: 2.8em; color: #fff; background: #eaedf2; align-items: center; } .linkto .tbtext { padding: 30px 62px 0px 14px; vertical-align: top; font-size: .95em; }
直感的にわかりやすい感じになりました。
確認する際は必ずキャッシュを削除してから見てください。
確認方法 |
---|
「Ctrl」+「F5」(キャッシュ削除) |
カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。
Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

くまからのお礼
本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)
もっとカスタマイズしたい人はこちらの記事を見てください。

まとめ


ちょっとオリジナル感がでたわ