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

投稿日時: 投稿者:

} color:#6cc655; /* YouTubeマウスホバー時 */ } bottom:5px; ボクは WordPress（ワードプレス）にテーマ「Cocoon（コクーン）」を導入しています。SNSボタンの配置がずれていて気になったので、直してみました。なお SNSボタンの機能としては、何も問題がありません。本文下のSNSボタン「シェ .snsbtniti{ 反映されるまで時間がかかったみたいで、1日経ったら変わってました。 } width:50px; おさわがせしてすみません(>_<), おお、なるほど（^^） } お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ﾉﾞ .snsbtniti li{ } border-left:solid 5px #55acee; .flowbtn18 div{ text-decoration:none; ただ、御免なさい、現時点で原因がわかりません。 color:#3b5998; }, /* ボタン全体 */ color:#3b5998; .flowbtn17.fl_tw2:hover{ font-size:11px; .flowbtn10 .fa-youtube:hover{ /* ボタンマウスホバー時テキストカラー */ content: ''; ul.snsbtniti{ border-radius:13px; -ms-transform:translate(-50%,-50%); .flowbtn2.fl_tw2:hover{ .flowbtn2.fl_hb2{ }, ul.snsbtniti { .flowbtn4.fl_tw2{ font-size:20px; /* Pocketマウスホバー時 */ .flowbtn4.fl_pk2:hover{ color:#fff!important; /* LINE */ display:inline-block; font-size:26px; color:#3b5998; /* アイコンボタンにマウスホバーした時の指定*/ position: relative; color:#6cc655; display:flex; bottom: 20px; .snsbtniti2 li{ color:#00c300; こんな事象はご存じでしょうか？, 遅い時間にすみません汗 ファッション系サイトでは、SNSフォローボタンが白黒のカッコいいやつなことが多いので、私もそれにならってオシャレな丸いSNSボタンを設置してみました。, 縦位置がセンターにならなかったり、リストのタグを使っていてボタンの前にドットが表示されるテーマなどもあるので、HTM、CSSとも一部修正しました。, イメージはWordPressテーマ「JIN」のようなボタンです。（今はJINは四角になってますが、以前は丸だったのです。）, 実際のボタンはこのサイトのサイドバーにも設置しています。（スマホの方はタイトル横のメニューボタンで確認できます。）, 私はFacebookをやってないので入れていませんが、カスタマイズコードにはFacebookも入れておきます。. /* YouTube */ /* お問い合わせ */ background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%); position:absolute; /* Facebookマウスホバー時 */ color:#fff!important; background-color:#444; display:inline-block; } あれから、すぐに解決することができました。, 昨日は、初めてグーグルアドセンスの広告を載せた日で、それが影響していたようです。 } font-size:30px; font-family:'Georgia',sans-serif; } bottom:3px; color:#f3981d; background:#ef3f56; .snsbtniti li{ 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/, インストールが完了すると「今すぐインストール」ボタンが「有効化」ボタンに変わるので、 /* Twitter */ /* Instagramマウスホバー時 */ color:#ef3f56; 編集画面上の　[メディアを追加]　をクリックします。, テキスト枠内に画像が表示されました。 } } /* Pocket */ background:#1ba5dc; ul.snsbtniti{ text-align:center!important; /* YouTube */ .fl_hb6 { ↓↓↓↓↓↓↓ .flowbtn12.fl_pf12:hover{ flex:0 0 33%; .fl_yu1{ background:#55acee; } .flowbtn16.fl_hb2:hover{ font-size:32px;

  • LINE
    • までです。, うまくいかなかった方は「よくある質問」を設置したので、そちらもあわせて参照ください。, サンプルボタンは.flowbtn5にmargin-bottom:10px;を追加し、見た目を整えています。, 点線を消したい場合は.flowbtn13からborder-bottom:dotted 1px #bbb;を削除してください。, 初めまして！こちらのページ『https://kagesai.net/sns-follow-button-design/#SNSCSS10』を参考に、デザイン７のフォローボタンを設置させていただきました。とても分かりやすく詳しい説明で、非常に役立ちました。ありがとうございます！１つ質問なのですが、ボタン３つのみ利用時に、ボタン同士の余白を少なくし、まとめて中央に寄せることは可能でしょうか？もし可能でしたら、ご回答いただければ大変ありがたく思います。参考に私のサイトURLを貼り付けます→https://◯◯◯◯.com/よろしくお願い致します。, なるほど、サイドバーに小さめのボタンを3つだけ貼り付ける場合、確かに余白がありすぎてブサイクでしたね。, 一番下のflex:0 0 33%;の33%部分を変更すると、並べる個数を変えられます。, この3つはそれぞれ「自分のサイトドメイン名」なので、当サイトで言えばkagesai.netになります。, 自作フォローボタンだと愛着が湧きますよね。ぜひいろいろカスタムしていただければ〜。, 陰ながら最適の人生を模索するブログ「カゲサイ」の管理人です。 一度そのテキストも削除して、元に戻したように思っているのですが、不要な部分をいじったのかもしれません。 font-size:14px; background:#3b5998; position:absolute; } /* アイコンボタンの位置調整 */ border:solid 1px #3b5998; .flowbtn8.fl_hb2{ Copyright © 2020 Ringo All Rights Reserved. font-size:30px; background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; border:solid 1px #f3981d; flex:0 0 48%; .fl_fb14:hover{ background:#f3981d; border:solid 1px #c6529a; .fl_fd7{ .flowbtn18.fl_yu2:hover{ /* ulタグの内側余白を０にする */ .flowbtn17.fl_yu2:hover{ border:solid 1px #1ba5dc; display:inline-block; .fl_li14:hover{ }, /* ボタン全体 */ background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%); bottom:22px; /* ボタン同士の余白 */ .snsbtniti li{ top:17px; text-decoration:none; 2019/1/6 2020/6/19 ... 直接ワードプレスの管理画面で変更できない場合は、FTP経由で修正しよう。 フォローする. } left:50%; } border-left:solid 5px #c6529a; transition:.5s; border:solid 1px #fc0d1c; .flowbtn2.fl_pk2{ background:#3b5998; position:relative; /* Twitter */ color:#fff; } position:absolute; border:solid 1px #ef3f56; } 改善されるかどうかわかりませんが↓↓↓↓↓↓↓ position:absolute; } background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%); } /* ulタグの内側余白を０にする */ border:solid 1px #00c300; .flowbtn4.fl_fd2{ } /* Instagramマウスホバー時 */ The following two tabs change content below. SNSフォローボタン大変参考になりました！ background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%); ＊現在投稿記事が１個しかないので、一覧も１個です。, アーカイブは月ごとの記事をまとめて表示してくれる機能です。自分がブログを探す際には利用する可能性はありますが、読者側の立場ではほぼ利用しません。いつからブログ記事を書いているかを知らせることはできますが、ビジネスとしてブログを運営する上でアピールポイントにはならないと思われます。りんごの個人的な意見ですが、削除したほうがよいと思います。 } ②内容が表示されるので[削除]をクリックします。, 無料テーマ「ルクセリタス」には、「SNS連携」用のウィジェットが用意されています。これを使用します。, まずSNS連携のボタンには、シェアーボタンとフォローボタンがあります。 .flowbtn4.insta_btn2:hover{ .insta_btn7 .fa-instagram{ /* Facebook */ color:#ef3f56; bottom:22px; background: linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%); background:#f3981d; /* 問い合わせ */ .flowbtn10 .fa-bold:hover{ /* YouTubeマウスホバー時 */ } .flowbtn18:hover{ background:#c6529a; background:#f3981d; color:#fff!important; padding:0!important; /* ulタグの内側余白を０にする */ border:solid 1px #f3981d; font-size:30px; /* Feedlyマウスホバー時 */ /* ボタンマウスホバー時のテキスト指定 */ background:#1ba5dc; 2月のアドセンスの見積もり収益から4割減 . 問題解決されたとのこと、よかったです。 ログインし直してやってみたんですがダメでした。。 .flowbtn4.fl_fb2:hover{ .flowbtn2.fl_li2{ border:solid 1px #6cc655; アイコンサイズも選ぶことができるので、任意のサイズに設定させましょう。, Share Buttons by AddThisも非常に汎用性の高いSNSシェアボタン設置用のプラグインです。 background:#6cc655; border:solid 1px #ef3f56; ワードプレスにツイッターのフォローボタンを設置する方法を紹介します。プラグインを使用せず、簡単に作成できます。ブログの自己紹介やプロフィールに一緒に設置したい時に活用してみて下さい。 border:solid 1px #3b5998; transform:translate(-50%,-50%); /* Instagramマウスホバー時 */ } } .insta_btn11{ background:#ef3f56; /* Feedlyマウスホバー時 */ border-radius:5px; color:#fff; position:relative; /* アイコンボタン同士の余白調整 */ text-decoration:none; /* Twitter */ /* Facebook */ .flowbtn12 span{ letter-spacing:0; .flowbtn16{ } ＊サンプルではブログのアイキャッチ画像が設定されていない時と同じ画像にします。, 閲覧を記録する対象者：　[訪問者のみ]を選択します。 border:solid 1px #fc0d1c; border:solid 1px #3b5998; background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); /* はてブ */ ちょっと調べてみますね〜, 早々のお返事ありがとうございます！ 今回はブログを構築したばかりの段階を想定しての設定なので、上記の「基本５項目＋SNSフォローボタン」の設定方法を紹介します、今後のビジネスの発展に伴い随時追加していっていただければと思います。, まずウィジェットとは、パソコンのデスクトップやWebページなどで動作する小さなアプリケーションのことです。ウィジェットを利用することであらかじめ用意されている機能を色々組み込むことができます。, ウィジェットには、もともとWordPrssのデフォルト機能として含まれているもの、プラグインで追加するもの、テーマ（サンプルで使用しているのは＊無料テーマ「ルクセリタス」）に付随しているもの等があります。利用できるウィジェットは「利用できるウィジェット一覧」の画面で確認できます。, ウィジェットの一覧画面がでます、内容は使用するテーマによって異なります。 text-align:center!important; } transition:.5s; text-decoration:none; text-decoration:none; .flowbtn14.insta_btn14{ /* Facebookマウスホバー時 */ border-left:solid 5px #6cc655; padding-left:8px; ③[更新]をクリックします。, 閲覧回数の多い人気記事の一覧を設定します。これには「WordPress Popular Posts」というプラグインを使用します。, 人気記事は多くの人が興味を示してくれている内容なので、訪問者の関心も高い可能性があります、設置しておくことでクリックされブログの閲覧時間やクリック数の増加に役立ちます。そしてブログのファン獲得に繋がります。, 投稿記事の中で、閲覧数が多い順に一覧表示されます。閲覧数やランキングのデーター収集も設定した期間の中で自動的に集計してくれます。, ダッシュボードの左メニューから　[プラグイン]>>[新規追加]　をクリックします。, プラグインを追加の画面が表示されます。 /* ボタン内テキスト調整 */ color:#c6529a; left:50%; .insta_btn7{ } font-size:23px; background:#55acee; .snsbtniti2 li{
  • . }, もしわからないのであれば、気になるほど余白は空いていないので、そのままでも問題ないと思いますよ。, /* ボタン全体 */ } } 現状そこくらいかと思いますが、また何かあればコメントいただけますと幸いです。 padding:0!important; } position:relative; } /* Twitter */ background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; border:solid 1px #c6529a; color: #1ba5dc !important; flex-flow:row wrap; border-left:solid 5px #fc0d1c; top:27px; .flowbtn15{ /*, /* ボタン全体 */ } 2018年8月30日 2020年4月30日 Twitter Facebook Google+ LinkedIn; B! } font-weight:bold; border-radius:4px; } border:solid 1px #f3981d; /* Pocketマウスホバー時 */ .flowbtn8.fl_fb2{ padding-left:8px; .flowbtn4:hover{ 枠、文字は表示されます。, SNSのアイコンが表示されず、代わりに小さい四角のようなものが表示されてしまいます。 [WordPress Popular Posts]をクリックします。, 表示内容を設定します。 /* LINEマウスホバー時 */ } /* アイコンをど真ん中に*/ } text-decoration:none; それではお気に入りのプラグインを探してみましょう。, AddToAny Share Buttonsは、対応しているソーシャルメディアの数が最も多いプラグインのひとつです。 padding-left:8px; color:#55acee !important; 次みたいに「Open in New Tab」の状態も「Yes」に切り替え, そして最後にフォローボタンの上に表示される説明文を「Caption」のテキスト欄に入力, ここは「フォローする」と入力しておけば、フォローボタンと分かりやすくなるはずです。, 以上が終わったら「Live Preview」を押してプレビュー確認し、 position:relative; /* Pocketマウスホバー時 */ background: linear-gradient(135deg, #6699ff 0%,#3b5998 100%); /* Facebookマウスホバー時 */ } border:solid 1px #1ba5dc; /* Pocket */ /* Instagram */ ?広告パフォーマンスを10～30%上げる意外な裏技とは, 簡単導入！WordPressでスタイリッシュなSNSボタンを設置できるプラグイン6選＆3つの注意点. } .flowbtn2.fl_fb2{ display:flex; こういうプラグインも作業を楽にするのに役立つはずです。, ちなみにこの記事にもフォローボタン設置してあるので、 position:relative; flex:0 0 48%; top:50%; border:solid 1px #6cc655; .flowbtn10 .fa-instagram,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-line{ } background:#ef3f56; .flowbtn12.fl_ma2{ } /* Instagram紫グラデ背景 */ /* Twitterマウスホバー時 */ ずっと鳩マークと文字だけで、四角の枠が反映されなかったんです。 /* Twitter */ でも、ナイスな気づきでしたね！！！！！ } justify-content:space-around; /* LINE */ color:#3b5998; /* はてブマウスホバー時 */ } .flowbtn17:hover{ text-decoration:none; /* お問い合わせマウスホバー時 */ .flowbtn2.fl_yu2{ width:90%; ①タイトルを入力 .flowbtn18.fl_hb2:hover{ height:50px; .flowbtn9 .fa-twitter-square{ background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; left:-1px; } .flowbtn14.fl_li14{ background:radial-gradient(#ffdb2c 7%, rgba(255, 105, 34, 0.3) 60%, rgba(255, 88, 96, 0) 70%); position: relative; ダッシュボードの左メニューから　[設定]>>[WordPress Popular Posts]　をクリックします。, 「WordPress Popular Posts」の画面が表示されます。 border:solid 1px #3b5998; /* Pocketマウスホバー時 */ flex:0 0 48%; display:inline-block; position: absolute; left:-75px; .fl_hb14:hover{ top:17px; border:solid 1px #00c300; .flowbtn16.fl_fb2:hover{ ul.snsbtniti{ background:#55acee; } background:#fc0d1c; background:#00c300; /* YouTube */ padding:0!important; color:#f3981d!important; /* YouTube */ /* Pocket */ } } flex:0 0 33%; font-size:25px; display:flex; border:solid 1px #fc0d1c; .flowbtn3 i{ ④フィルターを選択します。サンプルでは[過去30日間]に設定しました。 border:solid 1px #1ba5dc; /* Instagramアイコン位置 */ } .flowbtn2 div { } } } それで、広告が原因と考え、広告ディスプレイの「スクウェア」タイプから「横長」タイプに変更して、貼り付け直すと、上手くいきました。, こんばんは、りんごです（^^） left:50%; /* ulタグの内側余白を０にする */ 確認したところ「グラデーションボタン」のclassのズレを発見したので、修正致しました。 } text-align:left; .flowbtn4 div{ /* YouTubeマウスホバー時 */ left:-12px; .fl_ma1{ text-align:center !important; } } border:solid 1px #3b5998; /* アイコンボタン同士の余白調整 */ .flowbtn15 i{ color:#00c300; /* はてブマウスホバー時 */ .flowbtn8.fl_ma2:hover{ /* ボタン同士の余白 */ } ul.snsbtniti2{ color:#6cc655; /* メールアイコンマウスホバー時 */ .flowbtn2.insta_btn2:hover{ /* お問い合わせ */ /* YouTubeマウスホバー時 */ background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; ブログのサイドバーとは、メイン記事の右側（または左側）に設置する領域のことです。このサイドバーにどんな内容を設定するかはとても重要です。「どんな人がこのブログを運営しているのか」、「ブログの運営目的は何か」、「どんな内容の記事が主なのか」が読者にストレスなく伝わることが重要です。, 読者にとって関心のある項目が「記事一覧」に並んでいると、別の記事も読んでもらえます。またTwitterやInstagramのリンクがあればあなたのことを知ってもらえるチャンスになります。, どのようなコンテンツ（項目）を置くかは悩むところですが、ブログを構築したばかりの初心者の方向けに設置して欲しいオススメのコンテンツ（項目）とその設定方法について解説します。, ＊この記事では一部無料テーマ 「Luxeritas （ルクセリタス ）」の専用ウイジェットを使用しています, ＊無料テーマ[Cocoon（コクーン）]を使用している場合は、以下の記事を参照ください background:#6cc655; background:#6cc655; border:solid 1px #fc0d1c; background:#c6529a; background:#55acee; /* Instagramマウスホバー時 */ } bottom:20px; } アフィリエイトのスタートにお勧め、再配布とアフィリエイトの権利を活用して早期に収益ゲットできます(^▽^)/, 「ブログ＆メルマガを利用したネットビジネス」に取り組むことで「ワンランクアップした毎日」を目指す方を応援します(*^▽^*), あなたにぴったりのメルマガが選べます。入門希望なら緑枠のメルマガ！頑張っているけどまだ結果が出ていないなら赤い枠のメルマガへ（^^）, りんごのメインブログ、飾らない創らないをモットーにありのままの暮らしぶりを綴る。 ちょっとした心の持ち方で「ワンランクあっぷする日常」を提案, FacebookやTwitterなど代表的な「SNS」の登録方法から活用ノウハウまでわかりやすく紹介しています。, アフィリエイト教材の購入と実践（ディスカバリーアカデミー・自分メディア構築講座・アフィリエイトスタートアップマニュアル）. .flowbtn12.fl_pf12{ .snsbtniti{ /* LINEマウスホバー時 */ .fl_pk6{ display:inline-block; font-size:35px; font-size:28px; border:solid 1px #55acee; } ①サイズ　[カスタムサイズ]を選択します。 background:#f3981d; font-family:'Courier',sans-serif;/* 好きなフォントに変えてね */ text-align:center!important; -webkit-transform:translate(-50%,-50%); また、もしお手間でなければ「間違っている箇所」をご指摘頂けますと非常に助かります。 font-weight: bold; background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; /* Twitterマウスホバー時 */ } border:solid 1px #00c300; text-align:center!important; iphoneでやってみてもダメでした。。 flex:0 0 48%; } /* YouTube */ 何度やっても同じで、保存されても中身が真っ白なので、テキストの中身がない状態です -webkit-transform:translate(-50%,-50%); } .snsbtniti{ .flowbtn18.fl_pf2:hover{ /* はてブ */ .snsbtniti{ border:solid 1px #f3981d; /* Instagramマウスホバー時 */ /* Facebookマウスホバー時 */ } position:relative; display:inline-block; text-align:center!important; } 頑張って対応させていただきます。, りんごさんの記事を読み、サイドバーについて .flowbtn12.fl_yu2:hover{ top:23px; } position:absolute; background:#6cc655; .flowbtn9{ .flowbtn6 i{ padding:0!important; -ms-transform:translateY(-5px); background: linear-gradient(135deg, #3a9278 0%,#00c300 100%); .flowbtn4.fl_tw2:hover{ text-decoration:none; ul.snsbtniti{ } .flowbtn2.fl_yu2:hover{ .fl_hb1{ 『鬼滅の刃（きめつのやいば）』はなぜ人気？『ONE PIECE（ワンピース）』を超える異例... OneNote（ワンノート）の活用したい便利機能10選｜共有、PDF、エクスポート、動画埋... ガントチャートのフリーツール12選｜スケジュール、プロジェクト、工数管理に最適【テンプレー... Fall Guys（フォールガイズ）はなぜ人気なのか？発売24時間でプレイヤー数150万人... ビッグデータを活用して再現性の高い売上アップを。最大級の日本語データベースを活用するTwi... 大切なのは“特別なファン”の拠り所を作ること。セルフブランディングに役立つファンクラブ作成方法, Social Media Share Buttons & Social Sharing Icons, Social Media Share Buttons & Social Sharing Iconsをダウンロード, すぐに使えて便利！WordPress公式の高機能プラグイン「Jetpack」の設定方法を解説. .fl_yu1{ overflow:hidden; /* メールアイコン */ left:8px; } width:45px; background:#f3981d; } border:solid 1px #1ba5dc; /* LINEマウスホバー時 */ } .flowbtn4.fl_fb2{ color:#fff!important; あまり日本では名前を聞かないマイナーSNSにも対応しているようです。, フォローボタンが追加されたら、 } /* Pocketマウスホバー時 */ background:#00c300; } transform:translate(-50%,-50%); .fl_pk1{ padding:0!important; .fl_ma1{ .flowbtn7 i{ background:#ef3f56; color:#fc0d1c!important; } .flowbtn12.fl_tw2:hover{ display:inline-block; } この記事では「 8種類のsnsボタン 」と「 お問い合わせ用のメールボタン 「 プロフィール用のボタン 」のカスタマイズコードを「 18パターン 」載せています。 どれもコピペで使えますが、最初にhtmlコードを簡単に解説します。 /* アイコン全体の位置 */ left:17px; ご不便をおかけして申し訳ありません。 border:solid 1px #fc0d1c; 経済的にも心にも「ゆとり」をもたらす収入をゲットしませんか！ ↓↓↓↓↓↓↓お気軽にo(^-^)o♪ background:#6cc655; .flowbtn17.fl_hb2:hover{ /* Feedlyマウスホバー時 */ top:27px; background:#555; /* アイコンボタンにマウスを乗せた時 */ } } top:50%; /* アイコンをど真ん中に */ .flowbtn18.fl_fb2:hover{ font-size:23px; .flowbtn12.fl_yu2{ -webkit-transform:translateY(-5px); .flowbtn8{ } フォローボタンの枠をドラッグして、最上部に移動させます。, ブログ画面で表示を確認します。 border:solid 1px #ef3f56; 自分が好きなもの、考察、ブログについて色々書いています。 } .flowbtn12.fl_fb2:hover{ ＊内容を一旦コピーしてメモ帳とかに保存し、一度ワードプレスを再起動（ログインし直し）等してやり直す background:#1ba5dc; } } /* プロフィール */ /* Instagram紫グラデ背景色 */ margin-bottom:5px; /* アイコンボタン同士の余白調整 */ } SNSフォローボタンの追加方法 . .flowbtn8.fl_fd2:hover{ } .fl_pf14:hover{ border:solid 1px #00c300; width:50px; /* Feedly */ ②最大表示件数を入力します（5〜10くらいが適当です） .flowbtn9:hover{ } display:flex; /* はてブ */ サイドバーにも設置しておくと、フォロー人数が増えるかもしれません。, あるいは自分でテーマファイルを編集していて、 /* ボタン内テキスト調整 */ } text-align:center!important; } 一度設定すれば記事最後に自動的にフォローボタンできて地味に便利です。, サイドバーに設置する場合、ウィジェット画面からテキストウィジェットを探してください。, そしてフォローボタンを設置したい場所にドロップしたら、次のように本文に [[smbtoolbar]] と入力, PCからのアクセスが多いなら、 } } width:90%; .flowbtn4.fl_hb2{ また、いつでも、何でも、聞いてみてください、 text-decoration:none; padding:0!important; .fl_pk1{ font-size:30px; border:solid 1px #6cc655; 名前側にSNSアイコンを近づけるのができませんでした。そちらのコードを入力したらそのまま本文に入力されてしまいました…。入力する場所が間違っているのでしょうか…。, はじめまして。今回このページを参考に自分のブログにTwitterのフォローボタンを設置しようとしたのですが、 color:#666; border:solid 1px #6cc655; } } /* ボタンの位置 */ text-align:center!important; color:#f3981d; text-align:center!important; 「floating」の場合は、右や左に縦並びでアイコンを設置することも可能です。 },

    • コメントを残す

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