キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

      2014/11/02

猫画像なら負けませんw

猫画像なら負けませんw

イビサの夏が恋しいキャリコ( @calicocatxyz )です。

EDM を聴いてるとついついイビサを思い出してしまいますが、それよりも初来日を予定していた Avicii の体調は大丈夫なのでしょうか… これで2回目のドタキャンということになりますが、まさか日本のことが嫌いってわけないですよね ^^;

さて、本日はずっと綺麗にしたいと思ってた SNS ボタンですが、目からうろこの記事を見つけたので紹介します。でもこれが一筋縄ではいかなかったみたいで…その辺はラテに説明してもらいます。

こんにちは、ラテにゃ。

事の発端はこの記事を見たことによって、ブログに実装したいと思ったからにゃ。

えじの自由帳
SNSボタンのデザインがばらばらだったので自作してみた。(Stinger5カスタマイズ)

えじさんのブログを見て綺麗に統一されたデザインに一目惚れして実装したんだけど、この通りにやっても上手くいかなかったにゃ… 色々と悩んでやっと実装できたから、今回はその奮闘記にゃー!

Ads by Google

綺麗に統一した SNS ボタンの実装手順

1. PHP をコピペして貼り付ける

実装コードが記載されてるから、それを丸々コピペするにゃ。しかしここで問題発生!何回やってもどこに貼っても PHP でソーシャルカウントが出力されないにゃ… 悩んだ末に見つけた原因は『 半角スペース 』で、これを消しただけで上手く作動するようになったにゃ。

その完璧なコードはこれで、Feedly の【 自分のフィードへのリンク 】って部分を変えて『 sns.php 』ファイルに貼り付ければオッケーにゃ。

2. HTML をコピペして貼り付ける

PHP の呼び出しが PHP コードと認識されず、文字列として表示されて相当悩んだにゃ… でもこれもさっきと同じで半角スペースを消したら表示されるようになったにゃ。

完璧なコードはこれで、Feedly の【 自分のフィードへのリンク 】って部分を変えて『 sns.php 』ファイルに貼り付ければオッケーにゃ。

3. CSS をコピペして貼り付ける

これもこのまま貼り付けると問題があるにゃ。リストマーカーが表示されちゃうから、次のコードの色を付けた7行目で非表示に。カラム落ちしたときの見た目を考えて5行目でトップに 10px の余白を取ったにゃ。

【 アップロードした画像の URL 】を記述したらこのコードをコピペして『 style.css 』に貼り付ければオッケーにゃ。

4. 画像を用意する

これは紹介したサイトでゲット出来るにゃ。Zip でダウンロードすればいいんだけど、この中に PHP と Style sheet も入ってるから便利にゃ。ちなみにダウンロードしたソースには半角スペースは入ってないから、素直にこれを使えば悩むことなんてなかったにゃ。

キャリコの場合はボタンの文字を黒くはっきり表示させたかったから少し手を加えたにゃ。以上の作業をしてブログを確認すれば、綺麗に統一された SNS ボタンが表示されてるはずにゃ!

まとめ

SNS ボタンはそれぞれ会社が違うからデザインを統一するというのは難しいにゃ… でも今回のやり方なら新しい SNS ボタンが増えても簡単に対応できるにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - STINGER5 , ,

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

STINGER5 にアドセンスを入れると、スマホのみ右に寄ってしまう現象の応急処置

旅ブログ移行中のキャリコ( @calicocatxyz )です。 約400ページ …

STINGER5 のカテゴリ名と件数をカスタマイズする方法

ちょいちょい英語の勉強をしてるキャリコ( @calicocatxyz )です。 …

STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法

STINGER5 も納得の形までもう少し、キャリコ( @calicocatxyz …

キャリコの誰にも気づかれない3つの自己満足カスタマイズ
キャリコの誰にも気づかれない3つの自己満足カスタマイズ

STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …

Photo credit : instagram, muradosmann
STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法

Instagram デビュー迷い中のキャリコ( @calicocatxyz )で …

STINGER5 でアドセンスを記事内に導入するときの注意点

アドセンスの最適なレイアウトを導入したキャリコ( @calicocatxyz ) …

STINGER5 の原型を崩さずに細かい部分をカスタマイズしてみた

1日に心電図と血圧と採血が3回もあって、げんなり中のキャリコ( @calicoc …

キャリコのこれはさすがに気づかれる自己満足カスタマイズ
キャリコのこれはさすがに気づかれる自己満足カスタマイズ

もうないかなって思ったけど意外とすぐの更新、キャリコ( @calicocatxy …

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …

1
キャリコの誰にも気づかれないこっそり自己満足カスタマイズ

いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …