HTMLとかCSSというブログをカスタマイズする知識がほとんど無いむねさだ(@mu_ne3)です。
ブログのカスタマイズって下のような文字列をいじって行うんですが、あまり知識無くいじってしまうと
ブログ自体が表示されなくなったりしてしまいます…。
という事でなかなかこういう所に手を出すには勇気が必要なのですが、川崎ブログバカ5代目!というちょうど良い機会を得たのでやってみる事にしました。
（川崎ブログバカ5代目!についてはまた別途紹介します）
シェアボタンの必要性
シェアボタンは、このブログを見に来てくれた人が、
「このブログの記事面白いよ！役に立つわ！みんなに教えたい！」なんて思った時に使うボタンです。
それぞれの投稿先、例えばTwitterやFacebook、Google+、はてなブックマークなどへ投稿しやすくするために設置しているのですが、
僕の場合はこれまでブログ記事の上の方と下の方にだけ設置していました。
これだと、記事を読んでいる途中に「良いな！」と思ってもシェアボタンを押してもらう事ができません。
また、記事の途中まで読んで時間が無くなった時などに、「はてブ」できなくてそのまま見てもらえなくなる可能性があります。
常に表示するシェアボタンをボックスとして右に配置！
ということで他のブログでも時々見かける、常に表示されているシェアボタンを追加する事にしました。
参考にしたのはこのあたりのブログ。
ほとんどこのウェビメモさんのソースをコピペさせてもらいつつ…、肝心のソースをどこに入れるかが分からないので、
スクロールしてもついてくる！ブログにソーシャルボックスをつけよう。 | ウェビメモ
春友さんの記事を見ながら「header.php」に突っ込む事で成功。
スクロールしても追従するソーシャルボタンをブログの左固定で設置しました | なまら春友流
全部のページに表示させたい場合は、春友さんのように「header.php」に。
単一記事のページのみに表示させたい場合は、「single.php」に追記します。
僕の場合は、「style.css」と「header.php」両方ともその一番最後に追記して自分のページに合うように微調整して行きました。
こういうのをいじりながら、丸2日くらいかけてなんとか設置することに成功。
ただし、本当は30分位で設置できるはずなのですが、僕は丸2日かかってしまいました。
つまずきポイントは、以下のソースをコピペする際、どこかのタイミングで「”」が全角の「”」になったことで指定が上手くできてなかったからでした。
コピペしたけど上手く行かない、という人はこの辺り注意してみてください。
後は、うちのブログのデザインにあわせて、ボックスに角丸の枠をつけて完成です。
スタイルシートで四角に角丸を付ける為に参考にしたのはこちらのサイト。
[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ | コリス
border-radius: 20px; …
と、いうことで今度から僕のブログを読んでいて「良いなー！他の人に教えたい！」と思ったら思った時にすぐこのボタンを押してもらえると助かります。
わんぱくブロガー的まとめ
こういうの、知識がある人だとサラッと設置できるんだろうけど、なかなか時間がかかってしまいました。
初めは、Wordpressのプラグインを使って設置したかったのですがなかなか思うようにできず、HTMLとCSSを直接いじる事で何とか設置。
もう少し微妙な位置やデザインは調整したいなー、なんて思っています。
あ、headre.phpやstyle.cssを直接いじる時は、ソースのバックアップをしておく事を強くおススメします。
最悪元の状態に戻す為にも、現状のバックアップは必須だと思ってくださいな。
ということでこれからもむねさだブログをよろしくお願いいたします。
いじり始めるとブログのデザインをカスタマイズするのが楽しくなって来ました。
こういう本買って勉強してみようかなぁ。
良ければFacebookページへの良いねをお願いします。