sns フォローボタン

ブログやYouTube、ビジネスを始めるときに顔出しする気はないという方は結構いますよね。 そのままのデザインではちょっと存在感があったのと、スマホでの表示だとシェアボタンが見切れるのが気になったので、, 「カラム数」はシェアボタンの数によって変えてください。このサイトではシェアボタンを5つ表示しているのでカラム数を5列にしています。, 以下のコードを、WordPress管理画面の左サイドバーにある「外観」→「テーマエディター」Cocoon Childのstyle.cssに貼り付けます。, コメントアウトでそれぞれ何を設定しているか補足してあるので、多少は分かりやすくなっているかと思います。, 基本的には先ほどのコードをshareからfollowに変えるだけなので、コード自体はシェアボタンのとほぼ同じです。, 今回はCocoonのSNSシェアボタンのカスタマイズです。記事の拡散率が上がるように、シンプルながらもパッと目につくような丸型デザインにしてみました。Cocoonデフォルトのシェアボタンが優秀なので、後はオリジナリティを出すためにちょっとcssを加えてあげるだけ。コピペで簡単に実装できるのでぜひ試してみてください。, WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーにウィジェットで表示する「SNSフォローボタン」のカスタマイズをしてみました。サイドバーにプロフィールボックスを置いてる人は必要ないですが、プロフィールじゃな, Cocoonのsnsシェアボタンをオシャレにカスタマイズ。形を四角から丸形に、2列ではなく1列横並びに。ロゴマークの大きさやボタン同士の間隔・右寄せ中央寄せなどのCSSコード。順をおって分かりやすく説明分入れました。, 【Cocoon】アーカイブウィジェットを年別にまとめてコンパクト表示【カスタマイズ】. フォローボタンは左、メンションボタンは右になります。 ボタンのタイプを選択すると、コードが表示されるので「Copy Code」をクリックしてコピーし、自分のサイトなどに貼り付けます。 ボタンのカス … ブログにSNSのシェアボタンとフォローボタンを設置することは、SNSからのブログへの集客やSNSのフォロワーを増やすのに効果的です。, WordPressのテーマをCocoonにしている方ならば、簡単にブログにそれらのボタンを設置することが可能です。, ということで今回は、CocoonでのSNSのシェアボタンとフォローボタンの設定方法について説明していきます!, ③ページの上部にシェアボタンを設置したい場合は[トップシェアボタン]の項目を、下部に設置したい場合は[ボトムシェアボタン]の項目を設定していきましょう。, ※今回は[ボトムシェアボタン]の項目を例に出していますが、[トップシェアボタン]でも設定していく内容は全く同じです。, ④後は、自分好みに[Twitter設定]や[Facebook設定]の項目を決め、[変更をまとめて保存]のボタンをクリックして設定は完了です!, ①WordPressの管理者画面を開き[ユーザー]から[あなたのプロフィール]をクリックします。, ②下の方にスクロールしていき、Twitter URLやFacebook URLと書かれた欄が出てくるので、表示させたいフォローボタンのURLを入力していきます。, ⑤赤枠で囲われた[SNSフォロー]をクリックし下図の通り[フォローボタン]の設定を行います。, そして良かったら、私のSNSのアカウントもフォローしてくれると泣いて喜びますので良かったらぜひ(_ _), 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, MARCHの理系大学院に通う修士1年です! 体験談や就活、ブログなどについて、役立つ情報を発信しているのでぜひご覧ください!, 質問や話してみたいことなどありましたら、お気軽に下記SNSにDMを送ってみてください!, ブログを開設してから、早2ヶ月。 楽しかったこと、大変なことなどいろいろありましたが、飽きずに継続することができています! そこで今回は、実際にブログを2ヶ月やってみての筆者の感想についてまとめるとともに、ブログを始めようとしている方向けにアドバイスをしていきたいと思います!, 多くのブロガーさんの記事で吹き出しが使われていますが、吹き出しがあると記事が読みやすくなりますしポップな感じでかわいいですよね。実はテーマがCocoonであれば、吹き出しを簡単に作成することが可能です!そこで、今回はCocoonでの自作の吹き出しの作り方について説明していきます!, 皆さんはOGPの設定をちゃんとしていますか?Twitter上では、OGPが初期設定のままである人が多く見られます。しかし、Cocoonをテーマとして使っている人ならば、簡単にOGPの設定が可能です!今回は、CocoonでのOGPの設定方法について紹介していきたいと思います!. マーケティングオートメーション(MA)ソフトウェア。無料プランからプレミアムプランまで, ハブスポットはお客様のプライバシー保護に全力で取り組んでいます。ハブスポットは、コンテンツ、製品、サービスに関連する情報を配信するため、お客様から提供された情報を利用します。この情報配信はいつでも停止できます。詳細については弊社の「プライバシーポリシー」をご覧ください。, マーケティングコンテンツを多くの人にプロモーションする手段として、SNS(ソーシャルメディア)はとても効果的です。. hbspt.cta._relativeUrls=true;hbspt.cta.load(53, '2117bb38-440f-421f-a74b-4fc2d8f7e715', {}); LinkedInの企業フォロープラグインは、TwitterやFacebookのフォローボタンと同じような役割です。LinkedInの会社ページを簡単にフォローしてもらうことができ、LinkedInでのリーチ拡大につながります。, https://developer.linkedin.com/plugins/follow-companyを開き、ボタンを設定してください。ボタンのスタイルがいくつかあり、フォロワー数の表示位置(上、右、なし)のオプションもあります。あとはコードをコピーして、サイトに貼り付けるだけです。, 単なるフォローボタンではなく、自社についてもう少し詳しく紹介したい場合は、企業プロフィールプラグインはいかがでしょう。フォローの機能に加えて、会社の簡単な紹介文、所在地、ロゴ、社員数をコンパクトに表示できます。, https://developer.linkedin.com/plugins/company-profile-pluginを開いて、設定を行ってください。社名を入力し、表示モードを選択します。表示モードには、すべてをインラインで表示するモード(下の例を参照)と、シンプルなフォローボタンからのホバー表示で会社情報を表示するモードがあります。, また、LinkedInでの社員のつながりを表示するかどうかも設定できます。あとは、コードをコピーして、サイトに貼り付けてください。, 参考:パーソナルブランドの場合は、LinkedInのメンバープロフィールプラグインを同じような用途に使えます。こちらから作成可能です(参照ページはこちら:Member Profile Plugin Generator)。, LinkedInのシェアボタンを設置しておくと、ブログ記事やランディングページなど、あなたのサイトのコンテンツをLinkedIn上で簡単にシェアしてもらうことができます。Facebookのいいね!ボタンやシェアボタン、Twitterのツイートボタンと同じで、LinkedInのオーディエンスに対してコンテンツのリーチを拡大でき、あなたのサイトにトラフィックを呼び込みます。, hhttps://developer.linkedin.com/plugins/shareを開いて、対象のURLを指定し、ボタンのスタイルを設定します。企業フォロープラグインと同じで、シェア件数の表示方法(上、右、なし)を変えられます。あとは、コードを生成してコピーし、あなたのサイトでボタンを表示したい位置に貼り付けてください。, そのほかのLinkedIn用ボタン:今回の記事では、使用頻度が高い主なボタンだけを紹介していますが、LinkedInの公式ボタンはほかにもあります。http://developer.linkedin.com/pluginsでご確認ください。, Google+のフォローボタンでは、利用者があなたの会社のページやプロフィールをGoogle+のサークルにその場で追加できます。サイトにこのボタンを設置しておくと、Google+での存在感を高め、ページのフォロワーを増やすことができ、リーチの拡大につながります。, https://developers.google.com/+/web/follow/を開いて、対象のGoogle+ページかプロフィールを選択し、ボタンのサイズやフォロワー数の表示位置(上、右、なし)を設定してください。あとは、コードをコピーして、サイト上でボタンを表示したい場所に貼り付けるだけです。, Google+バッジは、LinkedInの企業プロフィールプラグインと同じような役割をするものです。サークルへの追加だけでなく、もう少し詳しい情報を表示できます。, https://developers.google.com/+/web/badge/を開いて、個人か会社のアカウントを選び、スタイルを選びます。G+マークのシンプルなアイコン(アイコンと社名のみのボタン)か、詳細なバッジかのどちらかです。, さらにバッジの場合は、レイアウトの向き(縦向きの方が多くの情報を表示できます)、幅、色のテーマ、カバー写真とキャッチフレーズの表示有無を選択します。あとは、コードをコピーして目的の場所に貼り付けるだけです。, サイトのコンテンツに+1ボタンを設置しておくと、利用者がそのコンテンツへの「+1」(共感やお気に入りの表明)を簡単に行うことができます。Google+でのシェアを促して、コンテンツのリーチを拡大でき、サイトにトラフィックを呼び込むことができます。, http://www.google.com/webmasters/+1/button/を開いて、+1ボタンをカスタマイズしてください。+1情報の表示方法(インライン、バルーン、なし)などを設定できます。+1の対象となるURLは「詳細オプション」で指定します。あとは、コードを生成して貼り付けるだけです。, Google+の共有ボタンは、コンテンツをシェアできるという意味では+1ボタンとよく似ていますが、支持や賛同の+1を表明しないという点が異なります。Google+の説明によると、このボタンは、議論を呼びそうなコンテンツやニュースなど、ユーザーが+1せずに共有したいと思うコンテンツに適しているとのことです。, https://developers.google.com/+/web/share/を開き、ボタンを設定します。+1ボタンと同じように、件数の表示方法などを指定できます。対象のURLは詳細オプションで指定してください。あとは、コードを生成して貼り付けるだけです。, FacebookやTwitterの場合と同じように、Google+でコンテンツをシェアするためのハイパーリンクも簡単に作成できます。+1ボタンと同様の働きをするテキストリンクです。ひとまとまりのコンテンツの中で紹介している個別の要素をシェアできるようにしたい場合に便利です。, Google+でコンテンツをシェアするためのテキストリンクを作成するには、下のURLでオレンジ色になっている部分を、シェア対象のコンテンツのURLに変えるだけです。あとは、下のURL全体を、テキストのハイパーリンク先として指定してください。, https://plusone.google.com/_/+1/confirm?hl=en&url=http%3A%2F%2F%20http://bit.ly/vOKpgC, 利用者がこのリンクをクリックすると、そのコンテンツに+1したことになります。さらに、+1ボタンと同じように、コメントを追加してから共有することもできます。, ほかのSNSと同じように、Pinterestにもフォローボタンがあります。Pinterestでの存在感を高め、新しいフォロワーを獲得できます。, http://business.pinterest.com/widget-builder/#do_follow_me_buttonを開いて、PinterestアカウントのURLと名前を指定します。あとはコードを生成し、サイトに貼り付けるだけです。, ほかのSNSで言うシェアボタンにあたるボタンです。Pinterestでコンテンツをシェアしてもらい、リーチを拡大できます。画像やインフォグラフィックなど、視覚的なコンテンツの横に表示するのに適しています。, http://business.pinterest.com/widget-builder/#do_pin_it_buttonを開いて、ボタンを設定します。画像を含むページのURL、画像自体のURL、簡単な説明を指定してください。ピン数の表示位置(右、上、なし)も設定できます。あとは、コードをコピーして貼り付けるだけです。, そのほかのPinterest用ウィジェット:アカウントのピンをプレビュー表示するプロフィールウィジェット、特定のボードの内容を表示するボードウィジェット、特定のピンを表示するピンウィジェットがあり、いずれもhttps://business.pinterest.com/en/widget-builderから作成できます。, HubSpot(ハブスポット)の機能ではデフォルトでSNSボタンが配置されています。実際にSNSの運用管理や投稿ツールをお探しの方はこちらへどうぞ。, また、ボタンの設置箇所についてご紹介しているブログはこちらからご覧いただけますので、ご興味のある方はご覧ください。, いかがでしたか?SNSはボタンの設置やフォロワーの拡大の必要性な行うことが多く存在します。ソーシャルアイコンを含めた無料135アイコン集もご用意していますので、デザイン制作などのお時間のない方は是非ご利用ください。. 研究ではVRを利用したリハビリシステムの開発をしています。 cocoonのsnsフォローボタンをオシャレにカスタマイズ。ブランドカラーからグレーに変えて、ボタンは丸型にして横1列に並べます。大きさや色も変えて、ボタンの配置が少し右寄りなのも中央にしました。 SNSシェアボタンって何? 私がまずつまづいたのが、これです。 「質問したくても、名称がわからない! Copyright © 2016 DREAMARK All rights reserved. SNSフォローボタンの設定方法 ①WordPressの管理者画面を開き[ ユーザー ]から[ あなたのプロフィール ]をクリックします。 ②下の方にスクロールしていき、 Twitter URL や Facebook URL と書かれた欄が出てくるので、表示させたいフォローボタンのURLを入力していきます。 ボタンの数×幅=100%以下になるように設定をします。現在は4つのフォローボタンなので各snsボタンは25%となっています。 4(ボタンの数)×25%(ボタンの幅)=100% もしも3つのフォローのボタン … hbspt.cta._relativeUrls=true;hbspt.cta.load(53, 'a62253e4-0b72-4e17-aed2-0c0d5c0017df', {}); Facebookのフォローボタンは、Twitterのフォローボタンと同じような役割のボタンです。ワンクリックで、あなたのFacebookページに「いいね!」してもらうことができ、Facebookでのリーチ拡大につながります。ボタンには、これまでに獲得した「いいね!」の数と、そのユーザーの写真が表示されますので、ソーシャルプルーフを生かしてボタンの効果を高めることができます(関連記事はこちら:10 Ways to Instantly Amplifying the Social Proof of Your Marketing)。, https://developers.facebook.com/docs/reference/plugins/follow/を開き、ボタンをカスタマイズしたら、コード(HTML5、XFBML、IFRAME、URLのいずれか)を生成して、あなたのサイトの目的の場所に貼り付けてください。, Facebookの送信ボタンは、サイト上のコンテンツをメッセージで紹介してもらうためのボタンです。Facebookのメッセージ機能で特定の友達に送るか、Facebookのグループに投稿するか、特定のメールアドレスにメールで送るかのいずれかが可能です。ボタンに設定したURLへのリンクのほか、タイトル、画像、リンクの簡単な説明を記入して送信できます。, https://developers.facebook.com/docs/reference/plugins/send/を開き、対象のURLとボタンのカスタマイズについて指定したら、コードを生成して、あなたのサイトの目的の場所に貼り付けるだけです(注:このボタンは、HTML5かXFBMLにのみ対応しています。また、JavaScript SDKを使用します)。, Facebookのいいね!ボタンでは、あなたのサイトにあるコンテンツへの支持や賛同を簡単に表明してもらい、シェアを促すことができます。あなたのサイトのブログ記事やランディングページを見たユーザーが、サイト上のいいね!ボタンをクリックすると、そのユーザーのタイムラインや友達のフィードにそのことが表示されます。, ただし、このボタンから共有するリンクには、ユーザーがコメントを加えたりはできない点に注意してください。それを可能にしたい場合は、次に説明するシェアボタンを使ってください。, https://developers.facebook.com/docs/reference/plugins/like/を開き、ボタンのカスタマイズについて指定したら、コード(HTML5、XFBML、IFRAME、URLのいずれか)を生成して、あなたのサイトの目的の場所に貼り付けてください。, Facebookのシェアボタンは、いいね!ボタンと同じように、ユーザー本人のタイムラインとその友達のフィードを通じてコンテンツを共有してもらえる機能ですが、いいね!ボタンと違うのは、リンクにコメントやメッセージを添えられる点です。また、Facebookのグループでシェアしたり、Facebookのメッセージで特定のユーザーに伝えたりといったこともできます。, https://developers.facebook.com/docs/plugins/share-buttonを開いて、対象のURLとボタンのカスタマイズについて指定したら、コードを生成して、あなたのサイトの目的の場所に貼り付けてください。(注:このボタンは、HTML5かXFBMLにのみ対応しています。また、JavaScript SDKを使用します)。, Facebookの公式シェアボタンではなく、通常のテキストのハイパーリンクからコンテンツをシェアできるようにしたい場合もあるかもしれません。実はそのようなリンクの作成は簡単です。ウェブページやブログ記事、ランディングページのほか、eBookやホワイトペーパーといったコンテンツでも使えます。, Facebookでコンテンツをシェアするためのテキストリンクを作成するには、下のURLでオレンジ色になっている部分を、シェア対象のコンテンツのURLに変えるだけです。あとは、下のURL全体を、テキストのハイパーリンク先として指定してください。, http://www.facebook.com/share.php?u=http://bit.ly/vOKpgC, そのほかのFacebook用ボタン:今回の記事では、使用頻度が高い主なボタンだけを紹介していますが、Facebookの公式ボタンはほかにもあります。https://developers.facebook.com/docs/plugins/でご確認ください。. snsフォローボタンの設定 「the thor」では、様々な箇所にsnsフォローボタンを配置することができます。 しかし、設定メニューの位置がバラバラなので、チェックしてくださいね。 メニューパネル・フッターエリアに配置 id="Facebook ID" target="_blank">, , はてなブログのURLを記述して下さい。独自ドメインを使用している場合は、独自ドメインを記述します。, これでHTMLの準備は完了しました。次はHTMLにCSSでボタンになるようにデザインしていきましょう。, /*コメント*/のように/**/に挟まれた部分はコメントです。CSSの説明をしてる部分なので、表示には関係しません。, 今回のフォローボタンでは、マウスオーバー時に背景色とロゴの色が反転します。そしてマウスカーソルを外した時には色が戻るのですが、この時はマウスオーバー時よりも変更速度を遅くしています。余韻を残しながらじんわりと変わるイメージです。実際の動作は、当ブログのサイドバーやこの記事の下についてるボタンで試して見てください。ロゴの大きさ変更やボタンの幅や高さの変更、マウスオーバー時の色の変更等自由に決めて使っていただけるように説明をしておきます。, 見出しは上下にボーダーを適用したシンプルな表示になっています。文字の大きさや色を変更するには、.sns-txt内のfont size(文字の大きさ)color(文字の色)を変更しましょう。, .主に変更をするのはsns-follow a{ }内になります。ここで変更出来るのは。font size(文字の大きさ)やボタンの幅(width)と高さ(height)になります。ボタンの幅は、一箇所変更すると、全てのボタンの幅に適用されます。この時に注意しなければいけないのは, ボタンの数×幅=100%以下になるように設定をします。現在は4つのフォローボタンなので各SNSボタンは25%となっています。, このように設定すると貼り付ける部分の横幅に合わせてSNSボタンが表示されます。高さも同じように全てのボタンに適用されますが幅ほどシビアに設定する必要がないので、見た目に合わせて変更しましょう。, 今回のように横並びにして表示させる方法としては、blockでfloatしたり、inline−blockで横並びにしたりと方法はいくつかあります。今はFlexbox主流ですね。しかし、このボタンではtableを指定しています。tableを指定出来るCSSとなりますが、使う理由するとしては、中央表示をしやすい点になります。特に、text−align(横の真ん中 vertical−align)(縦の真ん中)が簡単に指定出来るのでおすすめです。PCではIE7以下には対応していない事もありますが、スマホ等では積極的に使われてます。一応layout-grid-line:(IE独自のlineheightみたいなもの)でIE7以下にも対応をさせていますが2行になる場合等には縦長になる事もあるのでチェックしながら使用しましょう。, WEB初期頃にはtableでWEBデザインする事が全盛期な時もありました。フレームやCSS、フラッシュなんかも出る前ですね。今のように要素を自由に配置するすべもなく、入れ子状の複雑なtableを作り画像や文字をはめ込むという方法です。もちろん中身のHTMLはぐちゃぐちゃにというを多く見かけました。マークアップなんていうのは完全に無視。, 現在では表を作るtable本来の使用をされていますが、今回のように横並びの表示にしよすることもあります。, それでは作成したHTMLとCSSをはてなブログに貼り付けて設置みましょう。今回はPC版の方で説明していきます。その方法を順を追ってみてみましょう。, そして、⑤入力欄に今回のSNSフォローボタンのHTMLを貼り付けます、⑥適用をクリックします。, このままCSSを貼り付けるので、カスタマイズ画面をそのままにして、⑦デザインCSSをクリックし⑧任意の位置に貼り付けをし変更を保存するをクリックする。, プレビューを確認すると⑨CSSが適用されているのが確認出来ます。⑨これでよければ変更を保存するをクリックします。, シンプルなフラットボタンに変更する方法をご紹介してきましたがいかがでしたでしょうか?そのまま使うのも良いですし、変更できる箇所もコメントで書いてあるので、自分なりにカスタマイズしてお試しください。, はてなブログPerfect GuideBookを執筆しました。カスタマイズやデザイン、WEB系(SEOやWEBマーケティング)の事を書いていきます。, はてなブログでテーマをを公開しています。「主役はコンテンツ」をコンセプトに、おしゃれで機能的で、使いやすく見やすいテーマを作りました。グローバルメニューやフッターに加えリコメンド欄や対話式のCSSも適用済です。ヨメレバとカエレバも適用済。コンテンツ作りに集中していただけるようなテーマになっています。もちろん無料で使用出来るので、是非ご利用下さい。, 標準のフォローボタン等では味気ないと言う方やフラットデザインのフォローボタンを使いたい方はぜひ試してみて下さい。HTMLやCSSの説明はしていますが、ソースはコピペで使用していただいてもかまいません。, まずは基本的な所からいきます。はてなブログの読者になる、TwitterやFacebookのフォローやFeedryへのリンク等、ブログの更新情報をSNS等で受け取ってもらうことが出来ます。フェイスブックページやTwitterではSNSでの交流の入り口としても機能します。このようにブログとSNSを繋ぐ役割がフォローボタンにあります。, カスタマイズで見た目を変えることはもちろんですが、もう一つの理由としてあげられるのは表示を早くするという点になります。, ワードプレスユーザー等も、フォローボタンをカスタマイズをしたり、キャッシュを使用したりと試行錯誤しながら早く表示を出来るように頭を悩ませている所です。フォローボタンをカスタムする事で、通常のフォローボタンよりもカスタムボタンの方が早く表示されることもカスタムの理由の一つと言えるでしょう。, 表示速度を上げることで、ブログに訪れてくれるユーザーにストレスを感じさせなくなります。これはユーザーエクスペリエンス(UX)の向上につながります。ページの読み込みが遅くなると、ユーザーはコンテンツや記事を見ずに離れてしまうことにも繋がります。メインコンテンツではないので、そこまで気にしなくても良いとも言えますが、読み込みを感じさせないようなページを用意しておくことを心がけるのはユーザーエクスペリエンスでの面でのファーストステップと言えるでしょう。, また、SEO面で見ても、表示時間の速度がわずかではありますがSEOのポイント評価にも上げられています。, ※内容が同じページがあったとして、SERPs(検索結果)でどちらを優先するかと言えば、表示速度が早い方を優先するというレベル。, UXとは、ある製品やサービスを利用したり、消費した時に得られる体験の総体。個別の機能や使いやすさのみならず、ユーザが真にやりたいことを楽しく、心地よく実現できるかどうかを重視した概念である。, フォローボタンは既存のHTMLテンプレート部分のCSSを直接いじるのではなく、新たにHTMLの作成をしCSSを指定します。まずはHTMLを作成しフォローボタンを表示させてみましょう。その方法を説明していきます。, SNSロゴの表示にはWEBフォントを使います。はてなやTwitter、Facebookははてなブログで初期からWEBフォントのダウンロードがされているので特に指定する必要はありません。, はてなブログの用意してるWEBフォントにはFeedlyは含まれていないのでAwosomeというWEBフォントをダンロード指定をする必要があります。今回紹介するFeedlyを使用しない場合は、この項を飛ばしてHTMLの作成に進んでもかまいません。, AwosomeにはGoogle+、Instagramなども含まれている。他にもアイコンなどたくさんのWEBフォントが利用できるようになるので、興味のある方は、Font AwesomeのWEBサイトでチェックしてみてください。, 通常フォントは各自のPCに格納されているフォントのみを表示する事が出来ます。自分のPC上で見れるからと言って、自由に好きなフォントを指定してしまうと、相手のPCにフォントが入っていない場合には表示されません。, WEBフォントはWEB上に存在し、WEBに接続している状態であればダウンロードをして表示されるので、フォントがPCに入っていなくても、使用するデバイス(PCやスマホ等)が違くても、気にする事なく表示する事が可能になりました。, まずはWEBフォントを読みこませるために下記のコードを【headに要素を追加】に貼り付けます。, ③下にスクロールすると「headに要素を追加」という項があるので、入力フォームにコピーしたコードを貼り付けます, WEBフォントはサイドバーやヘッダ・フッタのHTMLを利用できる部分に下記のようなHTMLコードを記述すると表示できます。, まずは簡単にHTMLの説明をすると、見出しを作り、その下に各フォローボタンを表示させるHTMLを記述しています。各フォローボタンには自分のSNS等のIDやURLに変更する必要があります。変更する部分にしぼり、これから詳しく分かりやすく変更方法を説明をしていきたいと思います。, 見出しは読者・購読・フォローといくつかに分けて表記をさせてますが、フォローだけであっても意味は通じると思います。この部分は好きに書き換えて下さい。, <要素 class=“クラス名” >要素にクラス名を付ける事でCSSを要素全体ではなく、クラス名の付いた所にCSSを部分的に指定をする事が出来るようになります。, クラス名は class=“クラス名”と「"」「”」半角のダブルコーテーションで囲みます。基本的には任意の名前を自分で付ける事が出来ますが、後で見ても分かりやすいように、関連する語句を選んで付けておくと良いでしょう。, はてなブログPerfect GuideBookを執筆しました。 こんにちは!しがなです! 以前SNSシェアボタンのカスタマイズをやった事があるので「まぁ同じ感じだろうな〜」と舐めていましたが、苦戦&苦戦で結構時間が掛かりました。, コピペで上手くいかない場合もあるので、以降の解説も参考にしてください。念のためバックアップもお忘れなく。, 最初は何をどうやっても変化が起きなかったので、まずSNSフォロー全体のセレクタ名を探して枠線と背景に目立つ色を付けました。, この状態でカスタマイズをすると、変化がより見やすくなります。カスタマイズ終了後にこのコードは削除します。, デフォルトでは「twitterは水色」「YouTubeは赤」など、それぞれのブランドカラーになっています。その指令を無しにしました。, それぞれを同じ値にすることで綺麗な円形になります。大きくする場合は「60」小さくする場合は「40」などお好みの大きさを探してみてください。, ここで言うフォントサイズは丸の中のロゴマークの大きさです。円の大きさに合わせて調整してください。, marginとかpaddingを色々と試すも思うようにいかず・・ここが一番苦労しました。Cocoonのコードを調べてみると、一番最後のボタンにだけ適用されているmarginがあったので、その部分をカスタマイズしました。, デフォルトは[space-between]になっていて、全体の幅に対してボタンが等間隔に配置されます。今回は中央に寄せました。, 「よし、完成だ〜」と思ってスマホでボタンをタップしてみたら、ロゴマークが消えてしまいました。。どうやらマウスホバー時にロゴマークの色が白に変わる様でした。, 独自ドメインとは何か?取得すべきなのか?初心者の私にとっては難しくてメリット・デメリットが分かりませんでした。結果的に取得してよかったので、経緯や取得方法などを簡単に纏めました。エックスサーバーでサーバーと一緒に契約しました。, 商品リンクのボタンカラーをAmazon・楽天・Yahooショッピングのテーマカラーに寄せつつ、サイトにより馴染む様に前回より更にシンプルなカスタマイズ。画像を中央に配置して説明文のフォントサイズは小さく色も変更。スマホ向けカスタマイズです、, cocoonの目次デザインをシンプル・オシャレにカスタマイズ。H3見出し以下は数字では無く「・」に変更しました。フォントのサイズや色、余白や位置を調整し全体はカラム幅にして見やすくなりました。パステルカラーでスタイリッシュに。, Cocoonボックスメニューをスマホで4列表示にするカスタマイズ。アイコンやフォントの大きさ・色・位置を調整しました。どうしても下のスペースが変わらなかったが、デフォルトCSSコードを調べながら高さを調整しました。. CocoonのSNSシェアボタンとフォローボタンをカスタマイズしました。備忘録として残しておきます。変更前→変更後のデザイン変更前のデザイン。パソコンでの表示スマホでの表示そのままのデザインではちょっと存在感があったのと、スマホでの表示だと SNSフォローボタンの消し方 Coccon設定の『SNSフォロー』のタブを開きます。『フォローボタンの表示』の部分の『本文下のフォローボタンを表示する』のチェックを外して『変更をまとめて保存』します。色を変えることも可能 5 Brands That Do It Well, https://twitter.com/about/resources/buttons#mention, 10 Ways to Instantly Amplifying the Social Proof of Your Marketing, https://developers.facebook.com/docs/reference/plugins/follow/, https://developers.facebook.com/docs/reference/plugins/send/, https://developers.facebook.com/docs/reference/plugins/like/, https://developers.facebook.com/docs/plugins/share-button, https://developers.facebook.com/docs/plugins/, https://developer.linkedin.com/plugins/follow-company, https://developer.linkedin.com/plugins/company-profile-plugin, hhttps://developer.linkedin.com/plugins/share, https://developers.google.com/+/web/follow/, https://developers.google.com/+/web/badge/, http://www.google.com/webmasters/+1/button/, https://developers.google.com/+/web/share/, http://business.pinterest.com/widget-builder/#do_follow_me_button, http://business.pinterest.com/widget-builder/#do_pin_it_button, https://business.pinterest.com/en/widget-builder. PlayStation Plusに加入中なのにオンラインマルチプレイ開始時に加入を求められる, Google Search Console【登録したけど全然データが反映されない】. Cocoonで表示できるSNSフォローボタンやシェアボタンの色やデザインをカスタマイズする方法です。初期デザインカスタマイズ方法簡単なCSS追記のみです。CSS追記は以下のいずれかから行って下さい。外観→カスタマイズ→追加CSS外観→テーマ ボタンの数×幅=100%以下になるように設定をします。現在は4つのフォローボタンなので各SNSボタンは25%となっています。 4(ボタンの数)×25%(ボタンの幅)=100% もしも3つのフォローのボタンの場合は Copyright © 2018 Unity Right All Rights Reserved. ブログ画面で表示を確認します。 プロフィールとSNSのフォローボタンが表示されています。 実際のサンプルサイトはこちらです ↓↓↓↓↓↓↓ https://applired.xsrv.jp/cocoon/ これで、完了です。 WordPressテーマのストークって、初期状態で「SNSシェアボタン」はついてますけど、「SNSフォローボタン」がないんですよね。 サイドバーに「Twitter」「Facebook」「Feedly」のフォローボタンを表示させたかったので、とりあえず各SNSで用意されているシェアボタンを使ってみたんですが、縦並び … hbspt.cta._relativeUrls=true;hbspt.cta.load(53, 'a8227df2-30f6-4357-8166-958be0904096', {}); しかし、SNSはいくつもありますし、コンテンツをシェアしたりアカウントをフォローしたりするためのボタンも多種多様です。何をしたいときにどのボタンを使えばよいのか、悩んでしまう人も多いと思います。, そこでこの記事では、5種類のSNS(Twitter、Facebook、LinkedIn、Google+、Pinterest)について、ウェブサイトや作成したブログ記事に設置できる各種ボタンの役割と具体的な設置方法を紹介していきます。また、SNSのフォローボタンとシェアボタンの違いについても説明します。, どの目的で何のボタンを配置すればよいかを理解するためには、SNSのフォローボタンとシェアボタンの違いをざっくり押さえておくことが第一歩です。その大枠さえわかれば、それぞれのSNSでいくつもあるボタンの細かな違いも理解しやすくなると思います。, いずれにせよ、ボタンの存在の目的はソーシャルプルーフであったり、フォロワーやファンを増やしてリーチを拡大することです。, では実際にボタンの違いを見ていきましょう。SNSのフォロワーやファンを増やしてリーチを拡大する方法を知りたい方はこちらの記事をどうぞ。, フォローボタンは、あなたがSNSにアカウントを開設していることをサイトの利用者に知ってもらい、ファンやフォロワーになってもらうためのボタンです。, Twitterのフォローボタン、Facebookのフォローボタン、LinkedInの企業フォロープラグインなどが該当し、それぞれのSNSでのリーチ拡大につながります。, ボタンはサイト内のどこに置いてもよいのですが、少なくとも、会社概要ページと、ブログのトップページ/サイドバーには設置しておくことをお勧めします。, シェアボタンは、あなたのサイトのコンテンツを、SNS上で友達やフォロワーに紹介してもらうためのボタンです。, Twitterのツイートボタン、Facebookのいいね!ボタンとシェアボタン、LinkedInのシェアボタンなどが該当します。また、シェアのためのハイパーリンクを作成できる場合もあります。, こうしたボタンやリンクを使うと、コンテンツのリーチを拡大して新たなオーディエンスを獲得でき、新規訪問者を呼び込みやすくなります。ランディングページ、ウェブページ、ブログの各記事、メールなど、作成するコンテンツすべてにボタンを設置しておくことをお勧めします。, この2つの違いを踏まえたうえで、5種類のSNSについて、主なボタンを個別に見ていきましょう。, 難しかったり聞きなれないSNSの用語などがありましたらこちらの記事「【マーケティング担当者向け】SNS用語集」をどうぞ。, Twitterのフォローボタンを設置しておくと、あなたのサイトから離れることなく、クリック1つであなたのアカウントをフォローしてもらうことができます。フォロワーを増やす素晴らしい手段です。, https://twitter.com/about/resources/buttons#followを開いて、ボタンの対象アカウント(クリックしたときにフォローするアカウント)、サイズ、言語を設定します。あとは、表示されたHTMLコードをコピーして、あなたのサイトでボタンを設置したい場所に貼り付けるだけです。, ブログ記事、ランディングページ、そのほかのウェブページなど、あなたのサイトにあるコンテンツを、サイト利用者のフォロワーに紹介してもらうためのボタンです。これがあるとシェアが簡単になり、コンテンツのリーチ拡大につながります。実際、ツイートボタンを設置することでTwitter上の言及数が7倍にもなるとの調査結果もあります(関連記事はこちら:Using Social Sharing Buttons Leads to 7x More mentions [Data])。, https://twitter.com/about/resources/buttons#tweetを開き、ボタンの見た目、ツイートの内容とURL、言語、メンションするユーザー名、ハッシュタグなどを設定してください。リーチ拡大とフォロワー獲得につながるよう、あなたのTwitterユーザー名を含めたツイートにしておくことをお勧めします。, 設定が済んだら、表示されたHTMLコードをコピーして、あなたのサイトでボタンを設置したい場所に貼り付ければ完了です。, 現在あなたがプロモーションしているイベントやマーケティングキャンペーンに関連して、特定のハッシュタグでのツイートを促すときに役立つボタンです。対象のイベントやキャンペーンのページにボタンを設置して、その認知度とハッシュタグを広めましょう。, https://twitter.com/about/resources/buttons#hashtagを開いて、ボタンの外観やハッシュタグなどを設定したうえで、HTMLコードをコピーして貼り付けるだけです。対象のイベントのサイトや登録ページなどにボタンを設置するとよいでしょう。, Twitter上であなたのアカウントに対するコミュニケーションを促すためのボタンです。あなたのサイトのお問い合わせページ、会社概要ページ、ヘルプページなどに設置しておきましょう。優れたカスタマーサポートになります(関連記事はこちら:Does customer Service Actually Work on Twitter? SNSフォローボタンをフラットにカスタマイズする方法を初心者にもわ分かりやすく解説します。, "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css", "http://blog.hatena.ne.jp/はてなID/http://を抜いたURL/subscribe", "https://twitter.com/intent/follow?screen_name=Twitter ID", "http://feedly.com/i/subscription/feed/自分のブログのURL/feed", ※この状態でサイドバーなどにHTMLを適用すると下の図のようになります。まだCSSを適用してないのでWEBフォントも小さくボタンのデザインもありません。, https://twitter.com/intent/follow?screen_name=Twitter, レスポンシブでレクタングルのみを表示させ横並びにする方法とスマホで縦並びになる時の解消法. WordPressで、おしゃれな丸いSNSフォローボタンを設置する方法です。コピペで簡単に設置できますよ。実際のボタンはこのサイトのサイドバーにも設置しています。(スマホの方はタイトル横のメニューボタンで確認できます。 2番目に「[C]SNSフォローボタン」を設置します。 表示確認. ブログの購読率向上のために、記事の下やサイドバーに表示する アイコン付き sns フォローボタンの html って、こんな感じで書かれていることが多いと思います。 よくあるパターン1 , はてなブログの読者ボタンの変更的は、はてなIDとドメイン名の部分を自分のIDとドメイン名に変更します。独自ドメイン利用者は、ドメイン名を独自ドメインで指定しましょう 。, , TwitterIDを自分のTwitterIDに変更して下さい。TwitterIDはこちらで確認出来ます。,

中村倫也 動物 なぜ, スタンリー 親日, アスカ エヴァ, Https Www Tokyu Hands Co Jp Campaign 1906 Okiniiri Html, 海月姫 映画, 鬼滅の刃 実写 映画 キャスト 予想, 遷移させる 英語, 森七菜 結婚,

コメントを残す

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