![ゾムビット](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/05/daba9f5d64042cd59cb5cfe267231ea2-1.png?w=1256&ssl=1)
こちらのアイコンをご存じですか?
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/Instagram1.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/Instagram1.png?resize=1024%2C538&ssl=1)
そう、Instagramです!
ゾムビットのインスタフォローボタンもインスタ公式のアイコンと同じような色合いをしています。
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/Instagram4.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/Instagram4.png?resize=1024%2C538&ssl=1)
これはPHPファイルを編集しているからで、何も編集しないとこんな感じになります。
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/Instagram5.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/Instagram5.png?resize=1024%2C538&ssl=1)
絶対編集後の方が可愛いですよね!!?(個人の感想です)
今回は誰でも簡単にインスタボタンの色を変える方法を解説していきます。
本記事はサーバー上のフォルダとPHPファイルを編集します。
サーバーとかPHPファイルとか聞いて「うわ、、」と思った方、筆者のPCレベルは「何もしてないのに動かなくなったぁ!」です。
そんなパソコン弱者でも秒で出来ます。安心してね。
・PHPファイルはサイトを構成している大事なファイルですので、編集をする前に必ずバックアップを取ってください。
・親テーマではなく子テーマを編集してください。
最初にバックアップを取る
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/492075e0a1af9d6f2093262cafcf7660.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/492075e0a1af9d6f2093262cafcf7660.png?resize=1024%2C538&ssl=1)
WordPressの編集画面で『Cocoon設定→バックアップ→バックアップファイルの取得』。テキストファイルを保存して終了。
因みに復元するときは、リストアで保存したテキストファイルをアップロードするだけです。
サーバー上でやること
①親テーマからフォローボタンファイルをコピーする
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/d150f2524450acf6dfcbd66452621369.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/d150f2524450acf6dfcbd66452621369.png?resize=1024%2C538&ssl=1)
お使いのサーバー(エックスサーバー、ロリポップ、さくらインターネット、ConoHa WING 等)にログイン後、Cocoon親テーマの『tmp』フォルダを目指してください。
ConoHa WINGの場合は、まず『サイト管理→ファイルマネージャー』の手順で進んでください。
進んだら『****@localhost→public_html→自分のサイトURL→wp-content→themes→cocoon-master→tmp』の順でtmpフォルダまで行ってください。
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/16bf6348584a99de5eff97908bba09ad.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/16bf6348584a99de5eff97908bba09ad.png?resize=1024%2C538&ssl=1)
『sns-follow-buttons.php』ファイル上で右クリック&コピーで、ファイルをコピーしてください。
②子テーマにフォローボタンファイルを貼り付ける
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/8d1ad0453cf061c02383b8fc597918f1.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/8d1ad0453cf061c02383b8fc597918f1.png?resize=1024%2C538&ssl=1)
『wp-content→themes→cocoon-child-master→tmp』の順でtmpフォルダまで行き、先ほどコピーしたファイルを貼り付けてください。
※画面の何もないところで右クリックをするとメニューが出てくるので『ペースト』を選んで下さい。
※tmpフォルダがない時は、、、
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/ad60cc9115629964604a8872e1f2052e.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/ad60cc9115629964604a8872e1f2052e.png?resize=1024%2C538&ssl=1)
cocoon-child-masterフォルダ内で新規フォルダをクリックしてフォルダを作ってください。フォルダ名は『tmp』で。
WordPress編集
①テーマエディター
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/62397d71671487e1e53da1546d3003db.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/62397d71671487e1e53da1546d3003db.png?resize=1024%2C538&ssl=1)
WordPressの編集画面から『外観→テーマエディター→tmp→sns-follow-buttons.php』まで行って、sns-follow-buttons.phpをクリックしてください。
『編集するテーマを選択』はCocoon childを選択してください。
②ソースコードの置き換え
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/Instagram8.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/Instagram8.png?resize=1024%2C538&ssl=1)
『ctrl+F』で出てきた検索バーに『Instagram』と入力してください。
上記の検索で出てきた列(上の画像の場合だと48、49、50)と以下のソースコードを置き換えてください。
<?php if ( get_the_author_instagram_url($user_id) )://Instagramフォローボタンを表示するか ?>
<a href="<?php echo esc_url(get_the_author_instagram_url($user_id)); //InstagramフォローIDの取得 ?>" class="follow-button instagram-button instagram-follow-button-sq" target="_blank" style="background: linear-gradient(45deg,#FFDD83, #F26939 30%, #CF2E92 60%, #4C64D3);" title="<?php _e( 'Instagramをフォロー', THEME_NAME ) ?>" rel="nofollow noopener noreferrer"><span class="icon-instagram-logo"></span></a>
<?php endif; ?>
「ファイルを更新」を押して終了です。お疲れさまでした!
targetとtitleの間に以下のコードを追加しただけです。
style=”background: linear-gradient(45deg,#FFDD83, #F26939 30%, #CF2E92 60%, #4C64D3);”
おまけ
上の記事を参考にすればインスタグラムのロゴをそのまま貼り付けることもできますが、見栄えが悪いので、本記事で紹介した背景の色を変える方法をおすすめします。
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/Instagram9.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/Instagram9.png?resize=1024%2C538&ssl=1)
![](https://www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/74d0d371fe551c701a2cc55fa11f38ab.jpg)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/74d0d371fe551c701a2cc55fa11f38ab.jpg?resize=160%2C90&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/74d0d371fe551c701a2cc55fa11f38ab.jpg?resize=160%2C90&ssl=1)
![](https://www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/9e80a082eeb3f4b5e42cc38d1839e333.png)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/9e80a082eeb3f4b5e42cc38d1839e333.png?resize=160%2C90&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/9e80a082eeb3f4b5e42cc38d1839e333.png?resize=160%2C90&ssl=1)
![](https://www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/1691426429ded55ad40ad6e24ff4f04c.jpg)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/1691426429ded55ad40ad6e24ff4f04c.jpg?resize=160%2C90&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/1691426429ded55ad40ad6e24ff4f04c.jpg?resize=160%2C90&ssl=1)
まとめ
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/09/85d73775eda606627fce001a66021746-160x90.png?ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/Cocoon-__-2-160x90.jpg?ssl=1)
はい!誰でも簡単にインスタボタンの色を変える方法を解説しました。
ただ真っ青なだけよりも断然こちらの方が可愛いですよね?(個人の感想です)
簡単に変更できるので、ぜひぜひ試してオリジナリティあふれたブログを作ってみてください!
![ゾムビット](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/05/daba9f5d64042cd59cb5cfe267231ea2-1.png?w=1256&ssl=1)
![ゾムビット](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/05/daba9f5d64042cd59cb5cfe267231ea2-1.png?w=1256&ssl=1)
ここだけの話、ブログバグらせながらめっちゃ試行錯誤して色変えたぞ
それでは今回はこの辺で。次もぜってぇ見てくれよな☆
コメント