ワードプレスにブログ記事のSNSシェアボタンを自作で設置【コピペで簡単】

man

困ってる人

ブログの記事をSNSにシェアするボタンを作りたいんだけど
プラグインを使うと表示が遅くなったりするんだよなぁ
何か簡単に出来る方法ってないかなぁ?


こんにちは、ikuxxと申します。

という事で今回は、こちらのブログでも使用中のプラグインなしで作るシェアボタンについて。

今回は「HTML」「CSS」だけのパターンではなく「sns.php」を使うパターンを紹介。

今回作るのは、

  • Twitter
  • Facebook
  • Line
  • はてなブックマーク
  • の4つのシェアボタン

    PCで見た場合

    タブレットで見た場合

    スマートフォンで見た場合

    という事でまずは「sns.php」に書く内容から。

    ワードプレスにブログ記事のSNSシェアボタンを自作で設置【sns.php】

    今回は「share」というクラス名の中にシェアボタンを入れてみました。

    ブログ記事のシェアボタンを自作で設置【CSS:デザイン部分】

    ワードプレスにブログ記事のSNSシェアボタンを自作で設置【HTML部分】

    HTMLファイル内の、実際に表示させたい場所にこのタグを貼り付ける

    そうする事によって「sns.php」内に書かれた内容が、HTML側で表示されるようになる。

    もしも「sns.php」の事なんかよく分からないから使いたくないという事でしたら、

    上のタグやPHPを使わずに、それぞれのシェアする為の記述を、直接HTML内に書き込むだけ。

    タブレットとスマートフォンで見る時は、見た目の面や使いやすさの事も考えて、ボタンの並びを縦並びにした方がいいかも。

    今の横並びから、縦方向並び変える場合は「CSS」ファイルの、

    .button「width」を、

    タブレットの場合は :49%; → これで2列になる
    スマートフォンの場合は :100%;にすればOK → これで縦1列になる

    ボタンのデザイン部分を変えたい場合は、CSSを直接編集するか、

    文字やアイコンなどを追加したい場合Font Awesomeのサービスなんかが割と便利かも。

    終わり

    プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール