ワードプレス sns フォローボタン

2020 10/25

2020.10.25

} background:#55acee; /* はてブマウスホバー時 */ text-decoration:none; position:relative; -ms-transform:translate(-50%,-50%); background:#ef3f56; /* はてブマウスホバー時 */ .flowbtn11 span{ position: relative; .insta_btn5 .fa-instagram{ 2018年8月30日 2020年4月30日 Twitter Facebook Google+ LinkedIn; B! /* Facebook */ WordPress（ワードプレス）の固定ページ作成方法[初心者向け]、お問い合わせ・プロフィール・プライバシーポリシーを設置, WordPress（ワードプレス）を常時SSL化する方法[初心者向け]、httpからhttpsへ変更する手順を順番に解説, 主な収入源は、アフィリエイト・ブログ広告収入・イラスト作成・HP作成・法人メルマガの構築代行などです（^^）. border-left:solid 5px #000; /* ボタン内テキスト調整 */ top:50%; background:#00c300; background:#ef3f56; display:inline-block; /* メールアイコン */ font-size:38px; ＊サンプルではブログのアイキャッチ画像が設定されていない時と同じ画像にします。, 閲覧を記録する対象者：　[訪問者のみ]を選択します。 color:#ef3f56; text-align:center!important; display:flex; } .flowbtn14.fl_pf14{ background:#55acee; text-decoration:none; SNSフォローボタンの追加方法 . } flex:0 0 33%; background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 80%); width:70px; 一度そのテキストも削除して、元に戻したように思っているのですが、不要な部分をいじったのかもしれません。 left:-1px; 「もしかして絵文字のスタンプみたいなのがダメなんじゃ？？」と。 .flowbtn10 .fa-instagram,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-line{ /* Facebookマウスホバー時 */ 一緒にオリジナルなサイトを作成していきます。, アフィリエイトを学び、稼ぎ続けるための学校 background:#555; font-size:20px; WordPress, WPプラグイン, そんな時におススメなのが Social Media Follow Buttons Bar ( SMBToolbar ), TwitterやFacebookやGoogle+はもちろん、マイナーなSNSにも対応済みです。, 本当に便利なので、SMBToolbarからフォローボタンを自動・手動設置する手順について詳しく解説していきます。, 大き目のボタンなので目立ちやすいのが特長。ではこういうボタンを表示するためにプラグインの導入・設定をしていきましょう。, まずメニューから「プラグイン」ー＞「新規追加」を開き、新規追加画面が開いたらプラグイン検索欄に「Social Media Follow Buttons Bar」と入力, しばらくすると検索結果の一番上に次のプラグインが表示されるので「今すぐインストール」ボタンを押してください。, https://ja.wordpress.org/plugins/social-media-buttons-toolbar/, インストールが完了すると「今すぐインストール」ボタンが「有効化」ボタンに変わるので、 flex-flow:row wrap; /* YouTube */ } /* Twitter */ } position:relative; background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%); background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; ■健康生活（サンプルブログ） https://applired.xsrv.jp/, サイドバーはとても大事です、ブログを訪れてくれた人との繋がりをつくるチャンスの場です。, 実はりんごも、SNSのフォローボタンのノウハウをさがして訪れたブログで、サイドバーのリンクをポチッとしたことが、アフィリエイト（ネットビジネス）の世界に踏み出す一歩になりました。, それは、とても丁寧な解説ブログだったので、「どんな人が書いているのだろう」とブログの管理人に興味を持ちました。サイドバーには管理人のTwitterリンクがあったので思わずそれを見に行きました。Twitterから感じられた管理人のほんわかした雰囲気が気になって、サイドバーにあったメルマガリンクから「メルマガの購読登録」をしました。 .flowbtn16.fl_fb2:hover{ border:solid 1px #fc0d1c; color:#1ba5dc; ul.snsbtniti{ color:#fff!important; } /* アイコンボタンの位置調整 */ color:#1ba5dc; /* はてブマウスホバー時 */ /* アイコンボタン同士の余白調整 */ }, /* ボタン全体 */ } background:#3b5998; フォローボタンの枠をドラッグして、最上部に移動させます。, ブログ画面で表示を確認します。 background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%); -webkit-transform: translateY(-5px); .flowbtn17.fl_li2:hover{ .fl_yu7{ -ms-transform:translateY(-5px); left:50%; color:#c6529a!important; .fl_tw1{ transform:translate(-50%,-50%); background: linear-gradient(135deg, #3a9278 0%,#00c300 100%); } background:#c6529a; } Cocoonの見出し（記事内）をカスタマイズする方法を初心者向けに解説します。C ... ブログ構築が「最初の一歩から」順番に出来ます、 border:solid 1px #00c300; .fl_li1{ ＊サンプルでは、Twitter, Facebook,Instagram を表示させます。, 表示させたい、SNSの項目の□にチェックをいれます。 position:relative; font-weight:bold; .fl_hb6 { } .flowbtn4.fl_tw2{ font-size:30px; /* Feedly */ text-decoration:none; color:#fff!important; left:50%; } transition:.5s; box-shadow:0 0 2px #888; display:flex; .fl_fb6 .fa-facebook-f{ border:solid 1px #f3981d; background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%); text-align:left;