WP Social Bookmarking LightをArthemia用に編集する

前の記事でWP Social Bookmarking Light を入れてみたと書いてみたものの、実はすんなりインストールできたわけでなかった。

どうも本宅の方で使っているWordpressのテーマ「Arthemia」のCSSとぶつかるのか、アイコンを整列させてみると、下のように変な点が一緒に表示される。仕方がないので、ソースを編集することにした。

ソース名称:wp-social-bookmarking-light/wp-social-bookmarking-light.php

ソースを見てみると、アイコンの整列には、ul と li のタグを使用してCSSでレイアウトを指定しているみたい。CSSの命令がテーマと干渉して、うまく表示できないようだ。
そこで、ul と li のタグを除くことにした。

[その作業の覚え書き]
ソースの文頭の辺りの下記の部分からliタグを除く

 ↓

半角スペースを入れると、ブログ上に表示した時に、アイコンとアイコンの間にその分のスペースが空く。

後半の方にある下記のソースから、ulタグとクラス定義文を抜く

 ↓
抜いた上で、少し修飾して下記の様に編集。ここは好きにレイアウトすればよし。
 ↓

このdivタグは、Arthemiaのテーマ内では、横線を引いてくれるよう定義してある。hrタグのようなもの。

以上の改造が終わると下記の様にちゃんと表示。

※ WP Social Bookmarking Lightのプラグインがアップデートする都度、書き直すこと。
※ WP Social Bookmarking Light 1.6.0 時の話です。

ただ、この方法は問題もあって、使用しているTwitter button、Facebook like、hatena bottun 以外のアイコンも並べると、上下がずれる。当面は、この三つが欲しかったので、それ以外を表示しないことにして、問題を先送りしたのだが、mixiやGreeのボタンも並べたいなあ。

※この話はArthemia Premium (ver1)に関してのものです。