mokmal time

日常感じたことや、考えたことなどを忘れないようにメモするブログ。

STINGER3カスタマイズ 消すのはもったいない!追尾するSNSボックスをおしゃれにカスタマイズ。

   

medium_9733284483

追尾式のSNSボックスってスマホで見た時に記事にかぶるから消してたんですが、復活させました。
※最新のSTINGERではスマホでは表示されないようになっています。

理由は単純に画面の左側がミョーに寂しいから(笑)。 記事幅を広げたりして、間を埋めることも考えたのですが、せっかくデフォルトで装備されているSNSボックスを使わない手はないと思い復活させました。

そのまま復活させるのも面白くないので、少し手を加えてましたので忘れずに備忘録します。

SPONSORED LINK



photo credit: ePublicist via photopin cc

簡単にできる!追尾式SNSボックスを復活させる方法

SNSback

footerにSNSボックスのコードを記述する

自分の使っているSTINGERはVer20130925ですが、元データのバックアップをとっていないので、最新のVer20140124から拝借します。

最新のVerは【footer.php】に追尾式のコードが記述されていますので、それを自分の使っている【footer.php】追加します。

下記のコードが追尾式の記述になります。最新Verではスマホでみた場合は表示しないようになっていますのでそのままコピーします。


自分は一番最後の、“/html”の直前に設置しました。

これでデフォルトのSNSボックスが表示されます。

新しいsns.phpファイルを作成する

先ほどの記述で

の箇所がありますが、これは【sns02.php】ファイルを読み込む記述なのですが、ボクの使っているVerにはsns02.phpのファイルはないので新たに作りました。

これも最新のVerから拝借します。最新のVerの【sns02.php】にはホーム画面とページ画面に表示するコードが書かれています。両方に表示したい場合はそのままでいいですが、どっちかに限定する場合はどちらかを消すこと必要です。ボクはとりあえずTOPに表示したかったのでページ画面の記述は消しました。

真ん中あたりからある下記のコードを削除します。

これで表示はTOPページのみになりました。



SNSボタンの画像を変更する

SNSchange1

SNSのアイコンはググって探せばたくさんでてきます。スクエアよりサークルがよかったのでここを参考にしました

参考:circle Icons Pack

feedlyのコードを取得して変更する

feedlyのホームページから取得します。
feddlyボタンの取得

取得すると下記コードが出力されます。


出力された内下記のコードを



これに書き換えます。

簡単に言うと読み込む画像をfeedlyからサーバーに変更すると言うことです。保存する場所によってはコードも変わりますが、ボクはimagesに保存しました。

Twitter、Facebookのボタンのコード

基本はすべて同じ、それぞれのページリンクを記述してそのあと画像を読み込むという流れです。



横から縦へ変更するCSS

参考記事:STINGERのスクロールしてもついてくるSNSボタンを縦にしてみた

まとめ

以外と邪魔にならないので、復活させてよかったです。同じようなもの初めから作るのは大変だけど、デフォルトで付いているSNSボックスを利用すれば簡単にカスタマイズできます。 応用もいろいろできますので、今後はいろいろ試してみようかな。

 - stinger, WordPress ,

SPONSORED LINK

SPONSORED LINK

SPONSORED LINK

SPONSORED LINK
  • このエントリーをはてなブックマークに追加
  •  
  •  

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

Stinger3カスタマイズ 初心者でも簡単にできるPocketボタン追加

当ブログはstinger3を使用して作成しています。 SEOに非常につよく作られ …

ブログテーマをSTINGER5に変更してすぐに変えたアドセンスの位置について

いかがお過ごしですか。@mok7malです。 タイトルがメールの表題みたいですが …

知識がなくても簡単にできる。Inkscape(無料ソフト)でタイトルロゴをデザインしてみた。

ブログのタイトルロゴをカッコよくオリジナルにしたいなと思っていたのですが、ようや …

Favicon(ファビコン)を作ってみました。

Favicons / loozrboy こんにちは。 ブラウザのアドレス欄によく …

WordPressブロガー必須のブログエディタ「MarsEdit」を購入して最初の設定とやるべき3つの設定

MarsEdit – the blog editor for Wor …

初めてでも簡単にできる!WordPressでFacebookのLikeBoxを設置してみました。

こんにちは。 「WordPressの教科書」という本をネットでみつけたので、早速 …

3人に1人はスマホで見てる!?スマホだけに表示される“Lineで送るボタン”を設置してみた。

スマホの進化でここ3年の間で一気にネット環境はガラッと変わり、右も左もスマホだら …

【STINGER3/WordPress】初心者のワタシが簡単にできたカスタマイズをまとめてみる

このブログで使用しているテーマ「STINGER3」 カスタマイズした箇所をより良 …

WordPressで一番最初にしたこと

    こんにちは。 記念すべき初投稿です、まずこのブログを …