キャリコ

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

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

      2014/10/11

Photo credit : instagram, muradosmann

Photo credit : instagram

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

アイディアっていうのは一体どこから湧いてくるんですかね?あっと驚く写真を見つけたときには感嘆の声をあげてしまいます。だからキャリコも Instagram やりたいなって思ったんだけど、PC じゃ出来ないことを知ってへこみ中です。持ってる iPod touch は CPU が非力だし、どうせなら一眼レフで撮った写真をアップしたいしなぁ… そろそろガラケーからスマホに切り替え時なのかな?

さぁ、今日もラテに頑張ってもらいましょう。全5回の連載はこの記事で最後となります。それじゃあラテ、よろしくね♪

こんにちは、ラテにゃ。

全5回の連載ということで昨日は Feedly のフォローボタンのコードをゲットしたにゃ。

  1. Facebook のファンページを作成してプラグインの Like Box を設置しよう
  2. Twitter のフォローボタンとタイムラインプラグインを設置しよう
  3. Google+ ページを作って Google+ バッジを設置しよう
  4. Feedly のフォローボタンを設置してブログの購読者を増やそう
  5. STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法

今日は『 STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法 』ということで… 第5回目いくにゃー!

Ads by Google

各 SNS のフォローボタンを配置する

sns.php ファイルに配置する

第1回から第4回までに保存したコードを sns.php ファイルに貼り付けるんだけど、キャリコでは facebook 、Twitter 、Google+ 、Feedly の順番に並べたにゃ。今回は美しく綺麗に配置するということで、ブログ更新時間の装飾を流用したにゃ。

んん~、色々と問題があるにゃ( 笑 )まずはコメント欄との間に余白を入れるにゃ。

コメント欄との間に余白を入れる

コメント欄との間に余白が入って外側の問題はこれで解決にゃ。次は内側でフォローボタンの左側を Facebook の位置に揃えるにゃ。

フォローボタンの左側を揃える

フォローボタンの左側が綺麗にそろって、Google+ バッジも一列に並んだにゃ。そしたら次は Google+ バッジの上下に余白を入れるにゃ。

Google+ バッジの上下に余白を入れる

これで完成と言ってもオッケーにゃ!キャリコの場合これにもうひと手間かけて『 SNS でフォローする 』というタイトルを付けてみたにゃ。

タイトルを付ける

タイトルにアンダーラインを付けて太文字にして余白の調整をしたにゃ。さらにコメントを付け足して完成にゃ!

コメントを付け足す

まとめ

全5回に渡ってお届けした STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法はわかったかにゃ?この記事を書いてる間に Twitter のフォロワーさんがひとり減ったにゃー!!( 泣 )

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

ライター紹介

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

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

 - STINGER5 , ,

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

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

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

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

猫画像なら負けませんw
これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

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

STINGER5 の新着記事をトップページだけ非表示にする方法

イギリスの寒さが厳しくなってきました、キャリコ( @calicocatxyz ) …

STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する

○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …

Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと
Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと

決して暇人ではない、キャリコ( @calicocatxyz )です。 新しいブロ …

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

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

1
ファビコンを設定したならアップルタッチアイコンも作ろう

iPhone の Safari に自分のブログをブックマークしたキャリコ( @c …

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

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

これでスッキリ!コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

ハニーナッツクランチにハマってるキャリコ( @calicocatxyz )です。 …

STINGER5 で CSS をカスタマイズ可能にする子テーマの作成

病院で出される食事が日本食で驚いてるキャリコ( @calicocatxyz )で …