chat-blog

僕の独り言が誰か一人の役に立つことを祈って

*

【wordpress】SNSシェアボタンをいわゆるバイラルメディア風にカスタマイズしてみた

   

今我が家の洗面所では洗面器の交換のために業者さんが来てくれていますが、僕はブログ更新しています。チャットです。

PR

ここ最近いいペースでブログをカスタマイズしてってます。

とくれば次はせっかく書いた独り言でも少しでも多くの方に見てもらいたいと思うのが人の性。

多くの人に見てもらうためには人から人へ、拡散してもらうのが一つの方法としてあげられます。

見てくれた人に拡散してもらうためには拡散しやすいUIを配置する必要があると考えました。

ではいきます(笑)

stinger5での話になりますがたぶんどのテーマでもやることは同じです。細かい違いは脳内変換してください。

今日のゴール

 

スクリーンショット_2015-09-05_10_25_52

こいつを、

 

スクリーンショット_2015-09-05_12_13_53

こうします。

 

 

sns.phpを編集

 

もともとこんなコードになってると思いますが全部削除します。(言うまでもありませんがバックアップは取ってください。)

削除して、

このコードと置き換えます。

※ツイッターの部分だけ自分のIDで置き換える必要があるのでご注意を。(ツイッターなんてやってねえよヽ(`Д´)ノって方は記述しなくても良いです)

すると。

スクリーンショット 2015-09-05 10.53.45

 

こんな風になると思います。

これで( ・∀・)イイ!!

って人はこの先は読む必要ありません。

では次にcssを編集してボタンっぽい感じにしていきます。

style.cssを編集

最下行に、

を追記。

※CSSは下に書かれている行を優先するので既存とかぶっても問題はありません。

以上です。

じゃじゃーん。といい感じにそれっぽくなったかと思います。

もし、2行で表示させたくば、

widthの部分を50%に変えてみるといいかもしれません。

今日の一言

洗面器屋さんですが、もともとついてた洗面器をハンマーでガシャンガシャンと割って取り替えててびびってたビビるチャットより。
※以前に取り付けた業者が強力なボンドで洗面器をつけてて普通の方法じゃ外せなかったようです。

 

 

スポンサーリンク

スポンサードリンク

スポンサードリンク

最後まで見ていただきありがとうございます。
今後とも頑張って更新していきますのでもしよろしければ
下記お一つでもシェアしていただけると幸甚です。
Facebookでシェア Twitterでシェア はてなブックマーク LINEで送る

 - wordpress

  関連記事

800__viewsample3s
stinger5でヘッダーメニューをドロップダウンにカスタマイズする方法

ブログのヘッダー部分のナビゲーションバーで、マウスオーバーと同時に、 デロロロっ …

502_01
またもこのブログ(word press)で「bad gateway 502エラー」がでました。

今日は19:30頃には会社をでて(僕の会社は10時出社の19時定時)、 早めに家 …

no image
wordpressで502 Bad gatewayがでてダッシュボードにログインできなくなった時の備忘録

久しぶりにブログを更新しようと思ったら管理者画面に入れなくなって完全に詰んでたへ …

スクリーンショット_2015-09-04_20_24_03
【wordpress】サイドバーの「最近の投稿」を記事タイトルだけ出力させる

仕事の帰りにスタジオ寄って帰ると嫁に伝えていたのですが、 スタジオは満室状態だっ …

img_0
ブログをgoogleとbingにインデックスさせた(申請した)

ブログを立ち合げたわけだしせっかくなので、 検索エンジンに引っかかるようにしたい …

スクリーンショット_2016-02-20_13_13_40
stinger5でサイドバーのnew post(最新の投稿)で特定のカテゴリーを非表示にする方法

topページから消すのはプラグインを入れて楽にできたのですが、 サイドバーのne …

profile
STINGERで、トップページの記事一覧から特定のカテゴリを非表示にする方法【wordpress】

皆からするとどうでもいい僕のゲームの日記の記事をトップページから消す方法について …

スクリーンショット_2015-08-29_20_44_27
wordpressのトップページで最近の投稿(new post)を表示させない方法

まいど。月曜から二日酔いに苛まれつつも頑張って仕事行った自分をちょこっとだけ褒め …

natu_kakore
ブログの更新を自動でツイッターで呟かせる際の改行方法

できるはずなので、色々と試してみた結果、 %0a のアスキーコードを埋め込むこと …

wordpress-logo-stacked-rgb
初めまして

晴れてwordpressのインストールに成功しました。 これからたくさん主に趣味 …

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">