【SANGO】SHARE(シェア)の部分の文字を別の言葉に変更するカスタマイズ

SANGO(サンゴ)のカスタマイズ

このブログはSANGOというWordPressテーマを使っているのですが、細かいところでいろいろとカスタマイズをしています。わかる人にはわかるかな?普段はデザイナーの仕事をしてる、NORI(@norilog4)です。

メインは商品レビュー記事ブログなのですが、このブログでWordPressのカスタマイズ方法などを、たまに紹介していきたいと思います!すぐにでもカスタマイズができるようにコピペで使えるソースコードも置いておくので、コピペして使ってね!

NORI

SANGOユーザーは要チェック!

今回紹介するのは、\SHARE/ と書かれた記事の下にある部分を別のテキストに変更する方法です。

カスタマイズ前
カスタマイズ後
このカスタマイズ方法について
手軽さ
(5.0)
難しさ
(1.0)
デザインの美しさ
(5.0)
総合評価
(4.5)

SHARE(シェア)の文字を別の言葉に変更する

注意
カスタマイズは自己責任でお願いいたします。カスタマイズにチャレンジしたけどテーマが壊れた場合にはサポートができません。

FTPで修正するファイルを開く

今回このカスタマイズで修正するPHPファイルは以下にあります。
wp-content themes sango-theme library functions の中にあるshare-buttons.phpです。

PHPの修正

上で紹介したPHPファイルを開き、以下のソースコードを丸っとコピーして貼り付けて保存!

このコードをshare-buttons.phpにコピペ

NORI

これで変更完了!

あっという間に修正が完了します。キャッシュクリアしてチェックしてみてください。
多少知識がある人であれば3分以内には終わってしまうと思います。

SHAREの文字の色を変更する

通常は文字の色がグレーになっていますが、テーマのstyle.cssにある以下の部分、または子テーマのstyle.cssに追記で色やフォントサイズを変更が可能です。

スマホで見たときの大きさなども見ながら適宜フォントサイズなどを修正しましょう。
テーマのCSSの以下の部分を変更するか、子テーマのCSSにコピペでこのブログと同じ色とサイズになります。
このコードをstyle.cssに追記コピペ

レスポンシブデザインチェッカー
自分のサイトがパソコン、タブレット、スマートフォンでどういう風に見えるのか、ブラウザ上でチェックできます。
レスポンシブ デザイン チェックツールサイトのレンスポンシブデザインをオンラインでチェックできる「Resizer」

SHAREの両端の線\/の色を変更する

上記で文字の色を変更してしまった場合、両サイドの線の色が変更されないので、同じ色を以下のCSS部分で変更しましょう。
テーマのCSSの以下の部分を変更するか、子テーマのCSSにコピペでこのブログと同じ色とサイズになります。
このコードをstyle.cssに追記コピペ

カスタマイズの反映確認

コピペでコードを追加したあとはブラウザのキャッシュクリアをして確認しましょう。
Google Chromeなどでのキャッシュクリアコマンドは以下になります。

NORI

ここまで来たらもう少し!最後に反映してチェック!
  • Mac shift++R
  • Windows Ctrl+F5

NORI

これでバッチリ!
WordPressのカスタマイズ依頼

WordPressのことならお任せください。サーバー設定からインストール、カスタマイズなどを有料で承っております。WordPressで作られたサイトの制作実績は以下お問い合わせページからご確認ください。

制作・カスタマイズ依頼をする

コメントを閉じる

コメントを残す