Chrome Developer Tools便利!

現在、WordPressのソーシャルボタンのプラグインを作っているのですが、適用されているテーマのスタイルシートが邪魔をして思うようなデザインにできないという問題に直面しました。

WordPress ソーシャルボタンサンプル

黒猫の周囲を囲むように存在している、この謎の白枠に2時間以上費やすことに!

marginでもなく、paddingでもなく、borderでもない。自分なりにいろいろ探してみたのですが、原因がまったく特定できず、お手上げ状態になったのですが、ChromeのDeveloper Toolsにスタイルシートの欄があったことを思い出し、開いてみるとそこに答えが書いてありました!

box-shadow

box-shadow…。ほとんど使わないから存在を忘れていました。便利なことにDeveloper Toolsの画面でチェックボックスを外すと、ブラウザ上のデザインにも変更が加えられます。他の人が作ったものはなにが適用されているのかわからないので、この機能は非常にありがたいですね。

ChromeのDeveloper Toolsはいろいろ機能がついてそうなので、一回ちゃんと勉強した方がいいかもしれません。

 

フリーキャット

ちなみにこの黒猫はクレジットを表す画像で、Game Usersのトップにリンクが貼ってあります。ソーシャルボタンを使ってくれた方のブログから、Game Usersにアクセスしてくれる人が増えたらいいなという目論見でつけております。

こういうのってスパム認定されるんでしょうか?SEOについての知識がないのでちょっと心配です。

ソーシャルボタンのサンプル

ソーシャルボタンのサンプルをスタイルシートで作ってみました。

画像のボタンは全部素材サイトで集めたものです。こんな感じで同じように画像を集めてアップロードするだけで、誰でも自分好みのソーシャルボタンを作れるようにしたいのです。

ただプラグインの設定画面で画像のアップロードが自由にできるのかわからないのが不安ですね。もしできなかったら、プラグインフォルダに最初から画像を含めるしかないので、サンプルのような多様なボタンが作れなくなってしまいます。

自分がデザインセンスのある人間なら、オリジナルの画像をいろいろ提供できるのですが、こればっかりは才能がないのでどうしようもないですね。

でも、もし構想どおりに作れたら、なかなか面白そうなプラグインになりそうな気がします。

WordPressのソーシャルボタンを作りたい

開発環境の作り方についての記事作成は一通り終わり、今なにをしているかというと、WordPressのソーシャルボタンを作ろうとしております。

プラグインで良さ気なのを探してみたのですが、外国製は、はてなやLineに対応しておらず、日本製のは公式のソーシャルボタンを使ってるので重く(非同期ではない)、どちらもいまいち気に入らなかったのです。

そこでGame Usersで使ってるソーシャルボタンをWordPress用に改造して独自につけようと思ったのですが、どうせやるなら他の人も使えるようなプラグインとして公開しようと考え、今、勉強しながら作り始めております。

非同期でカウントを表示して、さらにボタンのデザインをいじれるようなものにしたいと考えています。テーマやテンプレートのような形で、好きなデザインのボタンをアップロードして使うようなイメージ。

実際できるかどうかわからないので構想だけで終わってしまうかもしれませんが、とりあえず頑張って作ってみます。