むねさだブログ
  • プロフィール
  • グルメ
  • ガジェット
  • カメラ・写真
  • 子育て
  • 旅行
  • イベント
  • お問い合わせ
  1. ホーム
  2. ブログカスタマイズ

スクロールしても常についてくる「ソーシャルボックス」を設置したぞ!

2013/04/07
  • ツイートする

    75

  • シェアする

  • はてブする

    49

HTMLとかCSSというブログをカスタマイズする知識がほとんど無いむねさだ(@mu_ne3)です。
追加

 

ブログのカスタマイズって下のような文字列をいじって行うんですが、あまり知識無くいじってしまうと
ブログ自体が表示されなくなったりしてしまいます…。
こういうのをいじる

という事でなかなかこういう所に手を出すには勇気が必要なのですが、川崎ブログバカ5代目!というちょうど良い機会を得たのでやってみる事にしました。
(川崎ブログバカ5代目!についてはまた別途紹介します)

SPONSORED LINK
SPONSORED LINK

シェアボタンの必要性

シェアボタンは、このブログを見に来てくれた人が、
「このブログの記事面白いよ!役に立つわ!みんなに教えたい!」なんて思った時に使うボタンです。

それぞれの投稿先、例えばTwitterやFacebook、Google+、はてなブックマークなどへ投稿しやすくするために設置しているのですが、
僕の場合はこれまでブログ記事の上の方と下の方にだけ設置していました。
今までのシェアボタン

これだと、記事を読んでいる途中に「良いな!」と思ってもシェアボタンを押してもらう事ができません。
また、記事の途中まで読んで時間が無くなった時などに、「はてブ」できなくてそのまま見てもらえなくなる可能性があります。

 

常に表示するシェアボタンをボックスとして右に配置!

ということで他のブログでも時々見かける、常に表示されているシェアボタンを追加する事にしました。

参考にしたのはこのあたりのブログ。

ほとんどこのウェビメモさんのソースをコピペさせてもらいつつ…、肝心のソースをどこに入れるかが分からないので、
スクロールしてもついてくる!ブログにソーシャルボックスをつけよう。 | ウェビメモ

春友さんの記事を見ながら「header.php」に突っ込む事で成功。
スクロールしても追従するソーシャルボタンをブログの左固定で設置しました | なまら春友流

全部のページに表示させたい場合は、春友さんのように「header.php」に。
単一記事のページのみに表示させたい場合は、「single.php」に追記します。

僕の場合は、「style.css」と「header.php」両方ともその一番最後に追記して自分のページに合うように微調整して行きました。
 

こういうのをいじりながら、丸2日くらいかけてなんとか設置することに成功。
html

ただし、本当は30分位で設置できるはずなのですが、僕は丸2日かかってしまいました。

つまずきポイントは、以下のソースをコピペする際、どこかのタイミングで「”」が全角の「”」になったことで指定が上手くできてなかったからでした。
間違えていた場所
コピペしたけど上手く行かない、という人はこの辺り注意してみてください。

 
後は、うちのブログのデザインにあわせて、ボックスに角丸の枠をつけて完成です。
スタイルシートで四角に角丸を付ける為に参考にしたのはこちらのサイト。
[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ | コリス
border-radius: 20px; …

 

 

と、いうことで今度から僕のブログを読んでいて「良いなー!他の人に教えたい!」と思ったら思った時にすぐこのボタンを押してもらえると助かります。
追加したシェアボックス

わんぱくブロガー的まとめ

こういうの、知識がある人だとサラッと設置できるんだろうけど、なかなか時間がかかってしまいました。

初めは、Wordpressのプラグインを使って設置したかったのですがなかなか思うようにできず、HTMLとCSSを直接いじる事で何とか設置。
もう少し微妙な位置やデザインは調整したいなー、なんて思っています。

あ、headre.phpやstyle.cssを直接いじる時は、ソースのバックアップをしておく事を強くおススメします。
最悪元の状態に戻す為にも、現状のバックアップは必須だと思ってくださいな。

 
ということでこれからもむねさだブログをよろしくお願いいたします。

 

いじり始めるとブログのデザインをカスタマイズするのが楽しくなって来ました。
こういう本買って勉強してみようかなぁ。

ゼロからわかる HTML&CSS超入門

posted with カエレバ
太木 裕子,山本 和泉 技術評論社 2011-02-11
Amazonで見る
楽天市場で見る

 

良ければFacebookページへの良いねをお願いします。

 

合わせて読みたい [関連記事]

Wordpress
SPONSORED LINK
SPONSORED LINK
  • ツイートする

    75

  • シェアする

  • はてブする

    49

いいね!を押して
最新記事をチェック

おすすめ記事

プロフィール

munesada

むねさだ(mu_ne3)です。
ワクワク感で笑顔を拡げる、”わんぱくブロガー”。

新しいものが大好き!食べ物・ガジェット・カメラ・旅行・生活雑貨など興味があるものを幅広くご紹介してます。
iPhone11Pro・MBP13・EOS 5D4・OM-1・GoPro7・THETA Vユーザ。
9歳になる娘がいます。パパ目線での子育てグッズの紹介も。

@mu_ne3さんをフォロー
くわしいプロフィール
Yahoo!で動画配信中

ブログの更新情報

follow us in feedly
@munesada_blogさんをフォロー
むねさだブログ

Facebookページへの「いいね」をして頂けると毎日の更新情報がFacebookで見れます。

人気記事

    • 知ってた?Facebookで「過去の投稿」をカンタンに探す方法を教えるぞ!

    • Uber Eatsリュックの詳細サイズやその他の使い方を紹介するぞ!

    • 日産セレナ(C27)のリモコンキー電池交換!電池の種類と開ける際のコツを教えるぞ!

    • 運転席のシート高を高める厚めのクッションを探しているならこれ良いぞ!

    • こんなのあったの!?→スーツケースにバッグを固定できる専用ベルトがめっちゃ便利だぞ!

関連記事

ブログ記事を大量に丸パクリされたのでGoogle先生に報告しておいたぞ!
ブログカスタマイズ

ブログ記事を大量に丸パクリされたのでGoogle先生に報告しておいたぞ!

2年半ぶりにブログテーマを一新!苦手ならプロに任せるのはアリだぞ!
ブログカスタマイズ

2年半ぶりにブログテーマを一新!苦手ならプロに任せるのはアリだぞ!

ブログのスマホ用デザインをカスタマイズしたぞ!
ブログカスタマイズ

ブログのスマホ用デザインをカスタマイズしたぞ!

プロブロガー本2が予約開始っ。モチロン購入するぞっ!
ブログカスタマイズ

プロブロガー本2が予約開始っ。モチロン購入するぞっ!

カエレバやRinkerに変わる、素敵な商品リンク作成プラグイン「ポチップ」がめっちゃ良いぞ…!
ブログカスタマイズ

カエレバやRinkerに変わる、素敵な商品リンク作成プラグイン「ポチップ」がめっちゃ良いぞ…!

ブログカスタマイズの記事をもっと読む

新着記事

【数量限定】じゃがりこ ナポリタン味がトマトの酸味のする昔懐かしい味だぞ!
グルメ

【数量限定】じゃがりこ ナポリタン味がトマトの酸味のする昔懐かしい味だぞ!

【新商品】サッポロ「ニッポンのシン・レモンサワー」は甘さスッキリ王道のレモンサワーだぞ!
お酒

【新商品】サッポロ「ニッポンのシン・レモンサワー」は甘さスッキリ王道のレモンサワーだぞ!

不二家 カントリーマアム じわるバターアイスバーが、クッキー入りアイスで美味しいぞ!
グルメ

不二家 カントリーマアム じわるバターアイスバーが、クッキー入りアイスで美味しいぞ!

サビキ釣りにピッタリ!蓋つきのコマセバケツ角3がコンパクトで良いぞ!
釣り

サビキ釣りにピッタリ!蓋つきのコマセバケツ角3がコンパクトで良いぞ!

折りシワのついたセミハードケース・バッカンの直し方!お湯をためれば少し直るぞ!
釣り

折りシワのついたセミハードケース・バッカンの直し方!お湯をためれば少し直るぞ!

新着記事をもっと読む

カテゴリ

  • イベント
    • ブロネク
  • ガーデニング
  • ガジェット
    • Android
    • iPhone
    • Mac
    • Windows
    • おもいでばこ
  • カメラ・写真
    • カメラ
      • 360度カメラ
      • Canon
      • OLYMPUS AIR
      • OM-D
    • 写真
  • グルメ
    • お店
      • 六本木
      • 渋谷
      • 溝の口
      • 蒲田
    • カップ麺
  • ゲーム
    • Ingress
  • サービス・アプリ
    • Amazon
    • 格安SIM
  • デザイン・アート
  • ブログカスタマイズ
  • ブログについて
  • ライフスタイル
  • 健康・ダイエット
  • 子育て
  • 家具・家電
  • 文具
  • 旅行
    • ロンドン
  • 書籍
  • 未分類
  • 生活雑貨
  • 自転車・MTB
  • 車
  • 釣り
  • 食玩・おもちゃ
  • 飲み物
    • お酒
      • 日本酒
agilemedia
bnr_authorized_brown_600x118
15301346_1142448849144320_1929483738_n
むねさだの欲しいものリスト公開中!
むねさだブログ
  • ホームに戻る
  • プロフィール
  • お問い合わせ

© 2023 むねさだブログ

閉じる

  • トップページへ戻る
  • プロフィール
  • お問い合わせ

カテゴリ

  • イベント
    • ブロネク
  • ガーデニング
  • ガジェット
    • Android
    • iPhone
    • Mac
    • Windows
    • おもいでばこ
  • カメラ・写真
    • カメラ
      • 360度カメラ
      • Canon
      • OLYMPUS AIR
      • OM-D
    • 写真
  • グルメ
    • お店
      • 六本木
      • 渋谷
      • 溝の口
      • 蒲田
    • カップ麺
  • ゲーム
    • Ingress
  • サービス・アプリ
    • Amazon
    • 格安SIM
  • デザイン・アート
  • ブログカスタマイズ
  • ブログについて
  • ライフスタイル
  • 健康・ダイエット
  • 子育て
  • 家具・家電
  • 文具
  • 旅行
    • ロンドン
  • 書籍
  • 未分類
  • 生活雑貨
  • 自転車・MTB
  • 車
  • 釣り
  • 食玩・おもちゃ
  • 飲み物
    • お酒
      • 日本酒