【カスタマイズ】はてなブログで「画面固定シェアボタン」を簡単コピペ設置方法2019-08-05【カスタマイズ】はてなブログで「画面固定シェアボタン」を簡単コピペ設置方法ブログカスタマイズみなさまこんばんは。最近自分のブログデザインを本格的にいじっております。以前より使いにくくなっていたらすみません・・・。常に手前に固定された状態で表示されるようになっております。This」を使うことによって簡単にカスタマイズしてコピペで設置することが可能です。今回はこのシェアボタンの設置方法についてご紹介したいと思います。CountersPositionBehaviorHTMLコードの取得はてなブログへの貼りつけ最後にシェアボタンとは?PC版スマホ版そもそも、トップへ戻るボタンとは何ぞや?シェアボタンとは、ボタン一つで「Twitterや、facebook、はてなブックマーク等といったSNSへシェアすることが出来るボタン」のことです。結果、自分の記事もシェアされ易くなるのではないでしょうか。This」のサイトへアクセスしましょう。結局この先英語になるので、どちらでも大丈夫です。次に「始めましょう、無料です」をクリック。Thisへサイインインをするため、会員登録しましょう。内容は適当に入力しておけば大丈夫です。Buttons」をクリックしてシェアボタンの作成に取り掛かります。Typeまずはシェアボタンの種類を選びます。1今回は一番うえの「Floating」を例にとって紹介します。続いて「Continue」を押します。上のにある、パソコンとスマホのアイコンをクリックすると、プレビュー表示を切り替える事ができます。自分のサイトに追加したいシェアボタンを選択し、不要なものは削除しましょう。Design続いて、隣のタブの「Design」を編集します。Size・・・スマホで見た時のサイズをプルダウンから選択します。Color・・・ボタン背景の色を変更します。Color・・・アイコン色を変更します。4.Style・・・アイコンのスタイルを変更します。アイコン間に隙間を作れます。5.Label・・・ラベルを記載します。ご自身の好きなようにカスタイマイズしたら次へ進みます。Counters」を編集します。TypeをIndividualのままで大丈夫です。表示したくない人はプルダウンからNoneを選択しましょう。私は非表示に設定してます。Position更に右のタブへ進み、「Position」の編集を行います。Mobileのプルダウンメニューから好きな位置に動かすことができます。Widthはレスポンシブをどの幅の値から切り替かわるか設定できます。画面最上段からどのくらいの位置で行うか設定できます。こだわりが無ければ、このままで大丈夫です。Behavior最後は「Behavior」です。Toolをクリックしましょう。Code」をクリックします。ページを下側へスクロールさせると、コードが記載されたセルが見えてきます。そこで「+」を押すと、コードがコピーされます。先ほどコピーしたコードを貼りつければ完了です。最後にこれでシェアボタンが完成します。如何でしたでしょうか?いろいろ長く記載しましたが、HTMLやCSSに詳しくない方でも簡単に出来る方法が今回紹介したやり方です。シェアボタン作りたいけど作り方分からない!難しい!という方のお役に立てれば幸いです。私の場合は、スマホの画面で、はてなブックマークのシェアボタンがうまく動かない時があったので、私は別な形式に変えてます。需要があれば作り方を別途記事に致します。PC画面のほうは問題無かったので、そのままこれを使っております。この記事でシェアボタンを導入した方は、スマホサイトのほうも要確認頂くようお願い致します。19:30【カスタマイズ】はてなブログで「画面固定シェアボタン」を簡単コピペ設置方法Tweet関連記事2019-08-25はてなブログで、アンケートをコピペで簡単設置方法こんばんは。実の...2019-08-14【はてなブログ】にほんブログ村のランキングをサイドバーへ表示する方法こんばんは。わたくし最近、にほんブログ村に登録しました。...2019-08-10【実験1回目】初心者がブログを始めて1か月のPV数・収益・軌跡をまとめてみたいつも私のブログをご覧いただき、ありがとうございます。誠に...2019-08-09【2019年最新版】はてなブックマークに掲載されるには?条件をまとめてみた。みなさまはアクセス数を気にしてらっしゃいますか?私のサイト...👈宜しければポチっとお願いします最後までお読み頂き、ありがとうございました。気軽に読者登録して頂ければ幸いです。レビュアーランキングで上位10位以内を狙う方法...2019-10-26仕事の整理術まとめ。関連記事2019-08-25はてなブログで、アンケートをコピペで簡単設置方法2019-08-18はてなブログで、サイドバーへ固定・追従する目次をコピペで簡単設置方法2019-08-14【はてなブログ】にほんブログ村のランキングをサイドバーへ表示する方法2019-07-30【2019年最新版】はてなブログProの始め方と追加設定、注意点をまとめてみた2019-07-22【ブログカスタマイズ】はてなブログで、トップへ戻るボタンをコピペで簡単設置方法(HTML/CSS)このサイトについてプライバシーポリシーお問い合わせ。