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

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

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

    75

  • シェアする

  • はてブする

    50

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

  • シェアする

  • はてブする

    50

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

おすすめ記事

プロフィール

munesada

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

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

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

ブログの更新情報

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

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

人気記事

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

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

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

    • こども用の甘口カレーに加えるだけで大人も満足できる辛口カレーに!この香辛料が良いぞ!

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

関連記事

むねさだブログのデザインリニューアルを行ったぞ!
ブログカスタマイズ

むねさだブログのデザインリニューアルを行ったぞ!

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

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

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

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

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

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

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

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

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

新着記事

「しっとりなめらかおとなのばうむ。」がバウムクーヘン好きにはたまらないしっとり感だぞ!
グルメ

「しっとりなめらかおとなのばうむ。」がバウムクーヘン好きにはたまらないしっとり感だぞ!

牡蠣に合うスパークリング日本酒「KakiSyuwa(かきしゅわ)」がりんごのお酒のように爽やかで美味しいぞ!
日本酒

牡蠣に合うスパークリング日本酒「KakiSyuwa(かきしゅわ)」がりんごのお酒のように爽やかで美味しいぞ!

おつまみに最適!堅あげポテト「海老とマヨネーズの炙り焼き味」がエビマヨが香ばしく炙られてて美味しいぞ!
グルメ

おつまみに最適!堅あげポテト「海老とマヨネーズの炙り焼き味」がエビマヨが香ばしく炙られてて美味しいぞ!

ヤマザキの新商品「ミルククッペ」がもちもち食感で美味しいぞ!
グルメ

ヤマザキの新商品「ミルククッペ」がもちもち食感で美味しいぞ!

売り切れ続出の大人気商品!「カヌレット」が凝縮感あってめちゃ美味いぞ!
グルメ

売り切れ続出の大人気商品!「カヌレット」が凝縮感あってめちゃ美味いぞ!

新着記事をもっと読む

カテゴリ

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

© 2022 むねさだブログ

閉じる

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

カテゴリ

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