このブログはSANGOというWordPressテーマを使っているのですが、細かいところでいろいろとカスタマイズをしています。わかる人にはわかるかな？普段はデザイナーの仕事をしてる、NORI（@norilog4）です。
メインは商品レビュー記事ブログなのですが、このブログでWordPressのカスタマイズ方法などを、たまに紹介していきたいと思います！すぐにでもカスタマイズができるようにコピペで使えるソースコードも置いておくので、コピペして使ってね！
今回紹介するのは、＼SHARE／ と書かれた記事の下にある部分を別のテキストに変更する方法です。
SHARE（シェア）の文字を別の言葉に変更する
FTPで修正するファイルを開く
今回このカスタマイズで修正するPHPファイルは以下にあります。
wp-content themes sango-theme library functions の中にあるshare-buttons.phpです。
PHPの修正
上で紹介したPHPファイルを開き、以下のソースコードを丸っとコピーして貼り付けて保存！
このコードをshare-buttons.phpにコピペ
あっという間に修正が完了します。キャッシュクリアしてチェックしてみてください。
多少知識がある人であれば3分以内には終わってしまうと思います。
SHAREの文字の色を変更する
通常は文字の色がグレーになっていますが、テーマのstyle.cssにある以下の部分、または子テーマのstyle.cssに追記で色やフォントサイズを変更が可能です。
スマホで見たときの大きさなども見ながら適宜フォントサイズなどを修正しましょう。
テーマのCSSの以下の部分を変更するか、子テーマのCSSにコピペでこのブログと同じ色とサイズになります。
このコードをstyle.cssに追記コピペ
レスポンシブデザインチェッカー
自分のサイトがパソコン、タブレット、スマートフォンでどういう風に見えるのか、ブラウザ上でチェックできます。
SHAREの両端の線＼／の色を変更する
上記で文字の色を変更してしまった場合、両サイドの線の色が変更されないので、同じ色を以下のCSS部分で変更しましょう。
テーマのCSSの以下の部分を変更するか、子テーマのCSSにコピペでこのブログと同じ色とサイズになります。
このコードをstyle.cssに追記コピペ
カスタマイズの反映確認
コピペでコードを追加したあとはブラウザのキャッシュクリアをして確認しましょう。
Google Chromeなどでのキャッシュクリアコマンドは以下になります。
- Mac shift+⌘+R
- Windows Ctrl+F5
