TOP

FacebookとTwitterのリンクロゴをサイトに取り付け

シリウス機能に、Facebookいいね、ボタンを取り付ける機能はございますが、
ロゴ&リンクはどこにもない..備えございませんね

 

しかし、WPや他サイトではFacebookとTwitterのリンクロゴをサイト、ブログ
に配置している例が多く見られ、ハッキリ言ってジェラシーを感じている方、
まれにおられるのでは?
.....という趣旨での解説記事です

 

他のSNS、ミクシーとかline?はどうかしりませんけど、導入の仕組みを
(私例...登録したけどその後が理解できず放置状態)
理解すれば応用可能かと思われます?

 

まず、最初に...
ここでいうFacebook、Twitterロゴとは、シリウス機能で呼び込むような
スクリプトではなく画像ファイルとして取り込む..なんですね
ですので、サイトで反映させる主用は簡単なこと....

 

ロゴ画像程度ならあちこちに氾濫するモノでも使えるじゃん...
わざわざ読み込まんでもいいのでは...と理解する例があるかと..

 

でも、わざわざブランドたるロゴを提供しているには、知ってほしい理由も
あれば.....それは公式サイトでご確認
特殊な加工も施されています

 

文字だけ...背景は透過しているなど...サイトを色付けしていてもうまく適合
記事内...もしくはヘッダー画像上でも文字だけ入れ込める...でしょうか
その他の主要カスタムは公式サイトでご確認

 

SNSへの自己ページ誘導は?ですが.....
あなたのFacebookとTwitterリンクを張り付ければよいと思います...
自分のパソコンでリンクすると自分のSNSページに行くので..
.....多分理解はこれでよいのでは?

 

では、導入するステップへ進んでみましょう


 

Facebookから始めますね

 

以下例 facebookロゴの一例..(実物です)他にも多くございます)

 

所得は、ブランドリソースセンターから
IEで到達できない...到達してもサイト内が何も動かない..ときはグーグルさん
で入ってください
https://ja.facebookbrand.com/assets

 

他にも色々とファイルはあるのですが、よく理解してから好みのロゴを選択
...ダウンロード
zipファイル解凍して pngファイル開くと各違いサイズがございますので
シリウス機能で呼び込めば、完了

 

好みのサイズにしたい場合、小さいサイズを拡張するとぼけるので、
やや大きめを選んでシリウス画像コードで縮小して合わせましょう
例は、見本なので500を300にしてますが、実際に使う際はもっと小さく
でしょうね
リンクはシリウス機能で張り付けしてください...

 


 

Twitterへ進みましょう

 

取り付け例 当サイトに合わせ白選択(ブルー.....当然ございます)

 

ブランドセンターからダウンロードしましょう(簡単です)
https://brand.twitter.com/ja.html

 

手順は、Facebookと同じ...ですので省きます

 

いずれも使用に関する規約は、よく読んで違反しないように進めてくださいね

 


 

参考

 

画像ファイルなので、横並びする際はシリウス機能レイアウト枠を
ご使用ください

 

レイアウト枠使用例


 

どちらもスタイル違いなのでずれあり...すみません、デザインレベルが低くて
うまくできません...
センスはあなたの方が私より優れているでしょうから同じような形でうまく
並べてみてください

 

他SNSも取り込んで4つ並びとするなら、テーブル枠の横4列仕様が
良いかと思います
ただし、テーブル表示のの上か下どちらかの枠を削除...

 

取り付けは、記事上部 記事の終わりに...
フリースペースに配置...
ヘッダー内にも調整が必要でしょうけど配置可能でしょうね..多分?

 


 

 

SNS外部サービス連携用のロゴ所得と取り付け手順まとめ記事
シリウスカスタマイズ