むねさだブログ

またの名を「わんぱくブログ」食・写真・ガジェットを使用した感想や情報を発信中!!

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

      2013/05/04

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る

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

 

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

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


スポンサード リンク

シェアボタンの必要性

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

それぞれの投稿先、例えば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を直接いじる時は、ソースのバックアップをしておく事を強くおススメします。
最悪元の状態に戻す為にも、現状のバックアップは必須だと思ってくださいな。

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

 

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

 

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

 

 - ブログカスタマイズ

        
  • Pocket
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る
コメントはこちら。

Comment

  1. […] ソーシャルボタンの設置で下記にあげるエントリーを参考にさせてもらいました。 エントリーの内容以外にもブログのソースコード、HTML、CSS、jQueryも参考にさせてもらいました。 職業病です、はい。 [Я]jQueryを使ってフェードイン/アウトするソーシャルボックスを作成する : りくまろぐ新たに設置したソーシャルボタンの左サイドのアニメーションはりくま(@Rikuma_)さんのブログを参考にしました。 [Я]トップに戻るボタンをjQueryでニュルッと改造する : りくまろぐこちらのTOPへ戻るも参考にさせてもらいました。 WordPressでプラグインを使わずにソーシャルボタンを設置してみた | delaymaniaWPTouchにソーシャルボタンを設置する際にソースコードを参考にさせてもらいました。 やっぱりシェアが欲しいので、Feed Dialogを利用して個別記事にfacebookの「シェア」ボタンを実装してみた | OZPAの表4Shareボタン頂きましたm(_ _)m スクロールしても常についてくる「ソーシャルボックス」を設置したぞ! …むねさださん?わんぱくさん?の追従してくるソーシャルボックスの設置エントリー […]

  関連記事

【ブロガー必見!】GoogleAnalyticsで自分のブログへの被リンクが分かる「トラックバック」機能が便利だぞ!

他の人のブログで、自分のブログが紹介されていると嬉しくなります、むねさだ(@mu …

STINGER5_TOP2
STINGERってこんなにカンタンなの!?お試しのつもりが即適用!ブログのテーマが気がついたら変わっていたぞ! #ブロネク #stinger5

ブログを毎日更新し続けて950日以上が経ちました、むねさだ(@mu_ne3)です …

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

わんぱく・・・・、なんと美しい響きだろう・・・。 大人になるにつれ忘れていったあ …

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

WordPressの難しい設定とか、とんと分からないままブログを運営しています。 …

【要注意!】WordPressを使ったブログのサイドバーに「サイト管理」を残している人は即、外した方が良いぞ…!

html、CSSって何ですか?って位WEBの知識の無い、むねさだ(@mu_ne3 …

描画をサクサクに!ブログのサーバーをロリポップからWPXサーバーに移転した手順をメモしておくぞ!

むねさだブログを開設して、もうすぐで3年が経過します、むねさだ(@mu_ne3) …

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

ブログのカスタマイズが楽しくなってきました、むねさだ(@mu_ne3)です。 H …

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

このブログを始めて1年と4ヶ月毎日更新しています。 今でこそ毎日ブログを書くこと …

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

むねさだブログを毎日更新し始めて、2年半以上になります。むねさだ(@mu_ne3 …

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

HTMLとかCSSは全く知識が無いのでブログをカスタマイズする時は恐る恐るな、む …