【SANGOを自分でカスタマイズ】記事下のフォローボックスをカラフルする

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

2018年11月25日 追記

ver1.6にアップデートした用のコードを追記しました。

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

この記事では
記事下のフォロー部分の背景のカスタマイズ方法を説明。

このサイトの環境

テーマ
子テーマ
プラグイン

こんな感じに変更

Before

フォローボックス前

After

フォローボックス後

MENくん

背景の色が変わるとちょこっとだけオリジナル感がでました!


使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズする準備

まずはフォローボックスを作成します

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

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

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

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

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

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

 

ver.1.6に変更して背景が消えてしまった人用
MENくん

これでいけるはず!ハハッいけなかったら教えてネ♪

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

手順 style.cssを保存ブラウザでキャッシュを削除して更新(ctl+F5)
グラデーションはこちらのサイトを参考にしました。

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

出典|uigradientsより

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

手順まとめ

まとめ

手順をザクっと説明
フォローボックスの背景を変更
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。