【WordPress】「共有」にはてブボタンを追加してデザインを統一する【CSS】

WordPressに追加されたはてなブックマークシェアボタンafterCSS
はてなブックマークシェアボタンafter
WordPressに追加したはてなブックマークシェアボタン before

はてなブックマークシェアボタン before ダサいですね

いつ入れたのか忘れましたが、昔どこかの記事を読んで追加したはてなブックマーク用のソーシャルシェアボタン。
しかし、他のシェアボタンに比べてデザインがダサいままだった。そこで、もう一度、どうやってこのWordPressブログにはてなブックマークボタンを付けたのかを思い出すとともに、久々にCSSで頑張ってシェアボタンのデザインを統一したことをメモしておく。


前提:WordPressにJetpackプラグインが入っていること

このプラグインを入れておいてください。

WordPressデフォルトの管理画面。共有の設定がない。

WordPressデフォルトの管理画面。共有の設定がない。

最初からソーシャルシェアボタンがついているWordPressテーマを利用されている方は必要ないと思いますが、私のようにTwentyThirteenなど、WordPressがデフォルトで設定してくれるテーマを利用している方はjetpackプラグインが必要になります。自身のWordPressサイトの統計情報が見れたり、自身の新規記事をSNSへ自動投稿をしてくれたり、Twitter、Facebook以外の他のSNSの連携機能もあります。ほかにもいろいろと便利な機能満載なWordPressプラグインです。僕は無料版を利用していますが、充分便利な機能を持っています。有料版になればSEO対策など、更にたくさんのことができるみたいです。

詳しくは「WordPress Jetpack」のキーワードでWeb検索してみてください。


作業1:はてなブックマークボタンを追加する

まずは記事下の「共有」部分(テーマによって異なるので注意)はてなブックマークボタンを追加する作業を行います。

WordPress管理画面の「設定」→「共有」を選択(jetpackプラグインが入っていないと出てきません)

WordPressではてなブックマークボタンを追加する、ステップ1

設定→共有を選択

続いて、「新サービスを追加」を選択。

WordPressにはてブボタンを追加する

赤線で囲んである部分、「新サービスを追加」をクリック

そうすると以下のようにポップアップが出るので、今回のはてなブックマークボタン追加用の設定をする。

はてなブックマークボタンを追加する

  • サービス名:はてなブックマーク(おそらくなんでも良い、はてブでも、はてなでも)
  • 共有URL:https://b.hatena.ne.jp/bookmarklet?url=%post_url%&btitle=%post_title%
  • アイコンURL:自分のサーバに16×16pxのはてブボタンのロゴをアップロードしておくか、WordPressのメディアに16×16pxのはてブボタンをアップロードし、その画像URLを入力する。(例では”https:wandering-engineer.tech/hatenabookmark-logo.png”にしている、つまり自分のサーバに直接アップロードした)

ちなみに、はてなブックマークボタンの画像は株式会社はてな公式の素材集からダウンロード、または「画像を名前をつけて保存」し、画像加工ソフト・アプリなどで16×16pxの画像へと加工する。Macならプレビュー、Windowsならペイントあたりでできます(筆者はMacです)。
素材集は以下です。

はてなブックマークロゴ
これをダウンロードしてくる。
公式サイトのダウンロードリンクを踏むと、zipファイルがダウンロードされ中身は.epsと.svg形式のロゴファイルになるのでGIMPやillustratorで加工する必要がある。
ちなみにjetpackは16×16pxの画像を推奨していますが、300×300pxでも大丈夫でした。
ただ、ファイルサイズが大きければページの読み込みに影響するので16×16pxが推奨です。

ここまでやったら、「共有ボタンを追加」を押してください。

そうすると、「利用可能なサービス」のエリアに「はてなブックマーク」があるので、そいつを「有効化済みのサービス」までドラッグ&ドロップしてください。

WordPressの共有にはてブボタンを追加する

とりあえずこれで

WordPressに追加したはてなブックマークシェアボタン before

はてなブックマークシェアボタン before ダサいですね


この状態まで持っていけます。はてなブックマークへのシェアも動作します。
ただ、表示は他のSNSボタンと比べるとなんか変です。これでも充分、という方はこのままでいいと思います。

が、筆者はどうしてもデザインを統一したかったので久々にCSSを扱うことにしました。


作業2:デザインをあわせるため追加CSSを追記する

WordPressの管理画面から、「外観」→「カスタマイズ」を選択
外観→カスタマイズを選択

するとWordPressサイトの外観の編集ができる画面に遷移しますので、「追加CSS」を選択
カスタマイズ→追加CSS

そしてやっと下記CSSを追加する。

/* IE,FireFox,Safari */
.sd-social-icon .sd-content ul li.share-custom.share-custom-  a.share-custom.share-custom-.sd-button.share-icon.no-text {
    background-color:#00A4DE!important; width:32px!important; height:32px!important;
}
/* こちらはChrome対応 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.sd-social-icon .sd-content ul li a.share-custom.share-custom-.sd-button.share-icon.no-text { top:10px!important; background-position:4px!important; }
}

ちなみにこれはTwentyThirteenのテーマを使っている場合に有効。
※注意:ここの追加CSSではなぜかコメント(/* */ ←これ)が挿入できないので消してください。プラグインの影響なのか分からないですが。

他のWordPressテーマを使っているなら、classの構造を調べる必要がある。
Chromeの場合、右クリック(Macはダブルタップ)→検証

赤線で囲ったマウスボタンをクリック

WordPressにはてブボタンを綺麗に追加する手順
このaタグ(リンク用タグ)のclassが非常に大事で、各テーマによってclassの中身が違ったりする。TwentyThirteen以外のテーマではてなブックマークボタンを追加する場合はこのようにclassの中身を検証する必要があります。

自分も他サイト([Jetpackの共有ボタンをカスタマイズする(はてなブックマークを追加する) | マゴトログ シュミニイキル])を参考にCSSを追加したのですが、外観に適用されず、Chromeの検証機能を使ってようやくはてなブックマークボタンのデザインを他と整えることに成功しました。

今回、TwentyThirteenのテーマで重要だったのは

.sd-social-icon .sd-content ul li.share-custom.share-custom-  a.share-custom.share-custom-.sd-button.share-icon.no-text {
...
}

のclass要素の特定がポイントとなりました。
他の方ももしjetpackを使っていて、はてなブックマークボタンを綺麗に追加したい場合は、このようにChromeなどの検証機能を活用するようにしてください!!自分はこの問題で1時間ほど悩みました。

WordPressに追加したはてなブックマークシェアボタン before

はてなブックマークシェアボタン before ダサいですね


ただはてなブックマークボタンを追加するだけならこんな感じ。
それに上の方で書いた追加CSSを追記すると

WordPressに追加されたはてなブックマークシェアボタンafter

はてなブックマークシェアボタンafter 他のボタンと大差ない見栄えでカッコいい

こんな感じに、他のTwitter,Facebookなどと同じようなデザインにできます。
はぁ、苦労した。


まとめ

他にもいろいろとソーシャルシェアボタンを追加する方法があるようですが、私はjetpackを活かした方法でシェアボタンの追加方法を紹介してみました。
他の方法ははてなブックマーク用のプラグインを追加したり、自力でテーマを編集してはてブボタンを追加する方法があります。
今回はほぼjetpackプラグインを紹介する記事になってしまいましたね・・・。あと、ひさびさにCSSをいじったので、知識も全部5年前くらいのものを思い出してやってました。ただただはてなブックマークボタンのデザインのために。

まあ、入院中で暇だったので。
以上、「WordPressにはてなブックマークの共有ボタンを追加して、CSSで体裁を整えるのを小一時間がんばった」記事でした!!

参考

コメント

タイトルとURLをコピーしました