コピペで使える固定ソーシャルボタンBOX

WordPressでスクロール時も固定表示されるソーシャルボタンを
簡単に設置するためのテンプレートを作りました。

不要なものは削除してお好きにカスタマイズしてください。

ソーシャルボタンBOXの仕様

  • コピペしてそのまま使用可能なので
    基本的にコードを書き換えたり、プラグインの導入は必要はありません。
  • Facebook、Twitter、Google+、はてブ、Pocket、
    おまけにブログランキングボタンを付けてみました。
  • トップページではなく各ページをシェアできます。
  • スマートフォンでは非表示にしています。

ソーシャルボタンBOXのイメージ

今回はこのようなソーシャルボタンを設置します。

コピペで使える固定ソーシャルボタンBOX

HTML

こちらは<body>タグの中に設置してください。

上部に設置すると記事など重要なコンテンツの表示が遅れる可能性があります。
</body>タグの手前くらいでちょうど良いと思います。

ランキングボタンを使用する場合、
【ランキングURL】にはあなたの専用ランキングURLを記入してください。

ファイルを別に作成して呼び出す場合

上記のコードをエディタに記述し、「sns.php」という名前で保存します。
※名前は任意で変更してください

ファイルをテーマディレクトリにアップロードします。

/ドメイン名/wp-content/themes/テーマ名

<body>タグ内に以下のコードを記述します。

CSS

今回はこのようにCSSを指定しました。
デザインはお好みで変更してくださいね。

他の方法でソーシャルボタンを設置する

上記の方法以外でソーシャルボタンを作成する場合は
プラグインかツールを使うのが便利です。

プラグイン

Sharebarというプラグインで縦並びのソーシャルボタンが設置できます。

Sharebar配布ページはこちらから
※管理画面からの検索も可能です

非常に便利なプラグインですが設定に少し手間が掛かる印象(´・_・)

海外製プラグインのため、初期状態で表示されるボタンの削除、
はてブボタンなどは後から追加する必要があります。

デザインの調整が必須、その他ボタンが表示されないなどの
不具合もあったため私は現在使用していません。

導入される場合は親切に解説されているサイトも
たくさんありますので検索してみてください。

ツール

ソーシャルボタンを簡単に設置できるツールとして
忍者おまとめボタンというものがあります。

忍者おまとめボタンはこちらから

記事の外に固定表示させるのなら
別途CSSの指定なんかは必要になりますが、
とりあえずソーシャルボタンなら何でも!っていう方には
とても簡単に作成できるので使いやすいと思います。

あとがき!

以上、ソーシャルボタン設置用テンプレートでした。

各ページをシェアできるようにするのが
一筋縄ではいかない部分もあったりで少し時間が掛かりました(´ーωー
)

色々試行錯誤を繰り返したのでミスってたら報告ください。

  • このエントリーをはてなブックマークに追加

こんな記事も書きました!

ローディング・読み込み中の画像を簡単に作成できるツール

ローディング・読み込み中の画像を簡単に作成できるツール

ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...

記事を読む

無料ロゴ作成ツールLOGASTER

無料で簡単にロゴを作れるツール「LOGASTER」が斬新!

Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...

記事を読む

photo

商用サイトで使えるフリー素材サイトまとめ

アイコンや壁紙を設定したりアイキャッチ画像を用意したり・・・ と、WEBサイトを作る時に欠かせない...

記事を読む

wpnavi

ページ遷移時のフェード効果を実装するjQuery

リンクをクリックした時にページが滑らか~にフェードしながら遷移する方法です。 今回新たに作成し...

記事を読む

mow (1)

MacやiPhoneのスクショはめ込み画像を作る

そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...

記事を読む

WordPressでCSSを実際に確認しながら編集する方法

WordPressでCSSの反映を確認しながら編集する方法

CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...

記事を読む

valentine-1953964_1920

CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...

記事を読む

WordPressをカスタマイズする前に子テーマを作っておく

WordPressをカスタマイズする前に子テーマを作っておく

子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...

記事を読む

mayu-official-site

名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。

mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...

記事を読む

48b97e5b81bd7c026e0e173652618f53_m

WordPressにヘッダー画像機能(カスタムヘッダー)がない場合の作り方

カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので 設定手順を公開してお...

記事を読む

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  • IMG_1137_100x130

    // mayu
    次世代型Web資産形成プロジェクト
    代表
    mayu official site
    Facebook

    mayu的思考やどうでもいいことをたまにつぶやいてます。
    お気軽にフォローしてみてくださいね!

  • WordPress Theme Park フリーWEB素材 Re:vre
flower