Stinger7『SNSソーシャルボタン』を横幅に合わせて広げる

アパート

アパート

 テーマ『スティンガー』のカスタマイズをしているサイトを、よく見掛けます。

しかし『7』でのカスタマイズ情報が少ないので、旧テーマを参考に色々試しています。
通用するものもあれば、ダメなものあります。

今回はSNSソーシャルボタンのカスタマイズ表示の確認が出来たので、記述したいと思います。



変更シミュレーション

_2016-03-22-12.45.10

デフォルト表示は、こんな感じです。

20160309-001

それが、こうなります。

20160309-002

こちらは『iPhone』での表示です。

20160309-003

横幅を縮小したり液晶を縦から横に切替えた際には、上記のような表示になることもありますが、基本的に安定感は抜群です。

sns.phpコード

『外観』⇒『テーマの編集』⇒『sns.php』へと進みます。

現在表示されているソースコードは、コピーして保存して下さい。
すでにカスタマイズしている方は、消してしまわぬよう注意が必要です。

56行目の真中辺りに『自分のアドレス』という記載があります。
ここには『自分のドメインURL』と入替えて下さい。

『ファイルを更新』をクリックします。

stile.cssコード

続いて『外観』⇒『テーマの編集』⇒『stile.css』へと進みます。

現在表示されているソースコードは、コピーして保存して下さい。
すでにカスタマイズしている方は、消してしまわぬよう注意が必要です。

まずは上記のコードを『stile.css』内から探して下さい。

発見したら、その直ぐ下に下記のコードを追記します。

『ファイルを更新』をクリックします。

これで、記事ページの記事下部分のソーシャルボタンが、変更になりました。

トップページ(記事一覧)のボタンも変更したい

現在の状態だと、記事ページのボタンは変更されましたが、トップページはデフォルトのままなので変更します。

続いて『外観』⇒『テーマの編集』⇒『sns-top.php』へと進みます。

現在表示されているソースコードは、コピーして保存して下さい。
すでにカスタマイズしている方は、消してしまわぬよう注意が必要です。

83行目の真中辺りに『自分のアドレス』という記載があります。
ここには『自分のドメインURL』と入替えて下さい。

『ファイルを更新』をクリックします。
これでトップページのソーシャルボタンも、変更になりました。

変更して直ぐはキャッシュの影響だと思いますが、ズレて表示されることがあります。
特に端末はズレてしまいましたが、少し経つと正しく表示されましたので、焦らず待ってみて下さいね。





コメントを残す

メールアドレスが公開されることはありません。