むねさだブログ
  • プロフィール
  • グルメ
  • ガジェット
  • カメラ・写真
  • 子育て
  • 旅行
  • イベント
  • お問い合わせ
  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で見れます。

人気記事

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

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

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

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

    • 遠投ウキの収納に!ダイソーの長もの用ケースがちょうど良いぞ!

関連記事

わんぱくなRSS・Twitterアイコンを自作してみたぞ!
デザイン・アート

わんぱくなRSS・Twitterアイコンを自作してみたぞ!

WordPress 5.5へのアップデートは注意!バグ(不具合)があったのでダウングレードする方法を教えるぞ!
ブログカスタマイズ

WordPress 5.5へのアップデートは注意!バグ(不具合)があったのでダウングレードする方法を教えるぞ!

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

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

ブログのテーマをSTINGER5にしてまず最初にいじった設定をまとめたぞ!
ブログカスタマイズ

ブログのテーマをSTINGER5にしてまず最初にいじった設定をまとめたぞ!

初心者から上級者まで!「できる100ワザWordPress 必ず集客できる実践・サイト運営術」には確かにブログ・サイト運営のノウハウがつまっていたぞ!
ブログカスタマイズ

初心者から上級者まで!「できる100ワザWordPress 必ず集客できる実践・サイト運営術」には確かにブログ・サイト運営のノウハウがつまっていたぞ!

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

新着記事

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

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

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

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

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

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

セブン限定!シュガーバターの木アイスが、サクサクしっとり新食感で、めっちゃくちゃ美味しいぞ!
グルメ

セブン限定!シュガーバターの木アイスが、サクサクしっとり新食感で、めっちゃくちゃ美味しいぞ!

ニッポンエール 愛媛県産紅まどんなグミが、上品な酸味と甘みで美味しいぞ!
グルメ

ニッポンエール 愛媛県産紅まどんなグミが、上品な酸味と甘みで美味しいぞ!

新着記事をもっと読む

カテゴリ

  • イベント
    • ブロネク
  • ガーデニング
  • ガジェット
    • 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
  • 車
  • 釣り
  • 食玩・おもちゃ
  • 飲み物
    • お酒
      • 日本酒