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

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

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

  • シェアする

  • はてブする

    49

[PR]記事内のアフィリエイトリンクから収入を得る場合があります

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
  • ツイートする

  • シェアする

  • はてブする

    49

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

おすすめ記事

プロフィール

munesada

ブロガー、むねさだ よしろうです。
ワクワク感で笑顔を拡げる、”わんぱくブロガー”。

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

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

ブログの更新情報

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

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

人気記事

    • キャラメルコーン カヌレが、キャラメル味でしっとり美味しいぞ!

    • 折れたネジの外し方!「ネジはずしビット」でカンタンに外せるぞ!

    • チャレンジタッチのキーボードをパソコンで使えるように変換ケーブルを買ったぞ!

    • ローソンの期間限定「大きなシュークリーム(648円)」を買ったきたぞ!

    • Webサイト全体をレイアウトそのまま印刷したい!という人はChrome拡張使うと良いぞ!

関連記事

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

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

超基本のhtmlタグ <h2>の使い方をずっと間違えてたぞ・・・
ブログカスタマイズ

超基本のhtmlタグ <h2>の使い方をずっと間違えてたぞ・・・

【告知】10/30はブロネクオンエアー#48 「STINGERユーザー交えてブログテーマのお話してみるネク!」だぞ! #ブロネク
ブログカスタマイズ

【告知】10/30はブロネクオンエアー#48 「STINGERユーザー交えてブログテーマのお話してみるネク!」だぞ! #ブロネク

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

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

【初心者でもできる!】ブログに「パンくずリスト」を追加するプラグイン「Prime Strategy Bread Crumb」を設定してみたぞ!
ブログカスタマイズ

【初心者でもできる!】ブログに「パンくずリスト」を追加するプラグイン「Prime Strategy Bread Crumb」を設定してみたぞ!

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

新着記事

【大阪・京都土産】パインアメと生八ッ橋の夕子がコラボ!『夕子 パインアメ味』が美味しいぞ!
旅行

【大阪・京都土産】パインアメと生八ッ橋の夕子がコラボ!『夕子 パインアメ味』が美味しいぞ!

神戸土産に!「神戸 白いロールケーキ」がしっとり濃厚で美味しいぞ!
グルメ

神戸土産に!「神戸 白いロールケーキ」がしっとり濃厚で美味しいぞ!

愛媛の石鎚山SAで買える!みかんパンが美味しいぞ!
旅行

愛媛の石鎚山SAで買える!みかんパンが美味しいぞ!

ローソンの大きな生バウムクーヘン(ミルククリーム)がしっとりパリッとクリーミーで美味しいぞ!
グルメ

ローソンの大きな生バウムクーヘン(ミルククリーム)がしっとりパリッとクリーミーで美味しいぞ!

「軽井沢高原ビール2025年限定」は無濾過のセゾン!華やかな香りとガツンとした苦味が美味しいぞ!
お酒

「軽井沢高原ビール2025年限定」は無濾過のセゾン!華やかな香りとガツンとした苦味が美味しいぞ!

新着記事をもっと読む

カテゴリ

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

© 2025 むねさだブログ

閉じる

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

カテゴリ

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