Warning: Undefined variable $post in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

Warning: Attempt to read property "ID" on null in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

記事下のフォローボックスの背景をグラデーションにする

フォローボックスの色を変える


Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33

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

フォローボックス前

After

フォローボックス後

[wp-svg-icons icon="checkmark-circle" wrap="i"] カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

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

カスタマイズする準備

フォローボックスを表示

表示の設定をしている方はすっ飛ばしてください。

フォローボックス表示手順
  1. WPの外観>カスタマイズとクリック
  2. SANGOオリジナル機能をクリック
  3. フォローボックス(記事下)をクリック
チェックを入れる場所
チェックを入れて、フォローボックスを表示させておきましょう。

これでSANGO側の準備はできました。

3つのコード追加方法

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

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

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

カスタマイズのコードを追加する

/*--------------------------------------
  フォローボックスをグラデーションに変更
--------------------------------------*/
.sns-dif ul, .like_box {
    background: linear-gradient(to right,#dff3fd,#e3f6df);
}
@media only screen and (min-width: 768px){
.sns-dif + .like_box {
    background: linear-gradient(to right,#dff3fd,#e3f6df);
}}

グラデーション参考サイト

グラーデーションの参考サイト

出典|uigradientsより

わたしのグラデーションはTwitterの色(#7dcdf7)とLINEの色(#8ed97a)をつかいました。色はお好みで変更しましょう。

うまくいったか確認

コードを追加したあとにちゃんと反映されているか確認します。

確認の手順

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

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

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

まとめ・雑談

追加CSSのまとめ

MENくん
ほんの一部グラデーションにした、ちょっとしたカスタマイズですが、オリジナリティがでますね
くま3号
こういった細かいところをカスタマイズしていきたいね