STINGER7:記事下&トップページのシェアボタンをカスタマイズ!

      2016/06/12

eye_stinger7

今回はSTINGER7の記事下や、トップページにあるシェア用のボタンをカスタマイズしていこうと思います。
と言ってもボタンを押しやすいように少し大きくするのと、アイコンを入れ替えるぐらいです。

完成するとこんな感じです↓

PCでの表示
20160519a

スマホでの表示
20160519b

コピペでサクッと終わるのでSTINGER7をお使いの方は参考にしてみてください。
それじゃあいってみよう!

スポンサーリンク

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7:テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7:親テーマの任意のファイルを子テーマで編集する方法

IcoMoonのWebフォントを準備

STINGER7では最初「Font Awesome」というWebフォントが使われていますが、この中には「はてブ」や「LINE」のアイコンは含まれていません。

今回は「はてブ」や「LINE」もWebフォントで表示するので、オリジナルでWebフォントを作れる「IcoMoon」というサービズを利用します。

前回の記事で作ったWebフォントを配布していますのでご自由にダウンロードしてお使いください↓

WordPress:サイドバーにSNSやfeedlyのオリジナルボタンをオシャレに設置!
なぜか後回しになっていたSNS関連のカスタマイズをやっていきたいと思います! 本 ...

IcoMoonの導入方法も前回の記事に書いてありますので、まずはそこまで準備してくださいね。

記事下のボタンの編集

Webフォントの準備ができたらまずは記事下のボタンをカスタマイズしましょう。
「sns.php」の中身を全て以下のコードに置き換えてください↓

「この記事をシェアする!」っていう文章のところはお好きな文字に変えてもオッケーです♪

トップページのボタンの編集

次はトップページです。
「sns-top.php」の中身を全て以下のコードに置き換えましょう↓

トップページにソーシャルボタンを表示したくない場合

トップページにはボタンを表示したくない場合は「home.php」を編集します。
この1行を消すだけでボタンが表示されなくなります↓

簡単ですね!

CSSで仕上げ!

最後にcssで見た目を調整します。
以下のコードを「style.css」に追加してください↓

微妙に色々と細かい調整したら長くなってしまいました(^^;)
でもこれでPCでもスマホでもキレイに表示できると思います!

まとめ

ボタンのデザインはある程度サイズがあった方が押しやすいですよね。
STINGER7を使っている方は参考にしてみてください♪

これで少しでもシェアが増えてくれますように(笑)

STINGER7のカスタマイズ記事をまとめました↓

STINGER7:カスタマイズまとめ
このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

スポンサーリンク

この記事をシェアする!

 - WordPress