知らないうちに仕様変更されていた
前々から当ブログに「はてなブックマークボタン」を設置しようと思っていたのですが、中々設置する事が出来ていませんでした。
そんな事するぐらいなら記事でも書けばいいのですが、どうしても設置したくてしょうがない。
という事でやってみました。
ついでだからという事で、
「カラム構成も変えよう。」
「だったら、スタイルシートも全て変更しよう。」
と思いつくままに変更したら・・・
【見事にレイアウトが崩れました。】
どうやら、昨年から新しいカスタマイズ用デザインが提供されており、従来とタグの構成やクラス名が大幅に変更されています。
元に戻そうにも以前使用していたデザインの提供は終了していました。
何事においても計画的に行わないといけませんね。
どうやらHTML5対応などにより順次変更していくみたいですね。
ボタンの設置方法
全て自前で設置するのは以外と骨が折れるのでとりあえず、先人のライブラリを使用させて頂きましょう。- 一番簡単な方法 下記のブログで紹介されている方法を利用する事で簡単に設置できます。
- 自前で用意する方法 自前でカスタマイズしたい場合にこの方法を選択します。
記事にGoogle+1・Facebook・Twitter・はてブ共有ボタンを設置する方法(改善版｜アメブロカスタマイズで人が集まるブログ作り
JavaScriptを設置できる別サーバを持っている事、Jqueryを理解されている事が前提条件として挙げられます。
Google+1/Twitter/facebookいいね/facebook Share/mixiチェック/mixiイイネ/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ | アイトランス株式会社
注意点として、そのままでは記事毎にではなくサイト全体のリンクになるのでそこは自前でスクリプトを作り込む必要があります。
また、アメブロではJqueryのバージョンが1.3となっているのでそのままでは利用できません。
なので、下記のサイトの方法を利用します。
新しいバージョンのjQueryが使えない？新デザイン『CSS編集用デザイン』｜アメブロカスタマイズで人が集まるブログ作り
アメブロの共有ボタンを非表示にする
アメブロで提供されている共有ボタンが有効になっている場合、下記のように記事のフッター部に表示されます。
これを非表示にするには、下記の手順を行います。
以上で共有ボタンの設置は完了です。
今回の件でWebページのカスタマイズも色々と知識が無いと今風のページを作るのは難しいと痛感しました。