[Đ]WordPressテーマStinger3の、サイドバーに「お気に入りブロガーリンク」をサムネイル付きで設置してみた。マウスオーバーで紹介文が飛び出すよ!

公開日: : 最終更新日:2014/03/31 Stinger3, WordPress, ブログカスタマイズ


スポンサーリンク


【3/16追記修正】コピペしてもらう肝心のソースコード等が文字化けしてたので修正しました。すみません。

ども。宣言します!明日は仕事休みで、子供と全力で遊ぶ予定なんで、明後日は体が筋肉痛間違いなしの、まつだい(@matsudai23)ですw

まず初めに、スマホで見てる人達はごめんなさい!
サイドバーのカスタマイズなんで、PCで見てください!w
一応スマホでもある程度見れるようにはしてますが、PC表示と比べて、レイアウトは少し崩れてます。ご了承ください。

それでは早速、このブログのサイドバーの「カテゴリー」と「Facebook」の間にご注目下さい。これが今回設置した「お気に入りブロガーリンク」です。
そして、このリンクにマウスカーソルを合わせてみて下さい。
そのサイトの紹介文を、吹き出しで表示するように作ってみました。
今回はこいつの設置の仕方をご説明していきます。例によって、ほとんどコピペでできるように作ってあります。ではどうぞ。


スポンサーリンク

基本コピペ

設置の仕方は、今から出てくるソースコードを基本的にコピペするだけです。難しい事はやらせないし、いつでも元に戻せるので是非やってみてください。

サイドバーにウィジェット「テキスト」を追加して使います

WordPressの管理画面から、外観>ウィジェットと進んで、サイドバーの任意の場所に「テキスト」ウィジェットをドラッグ&ドロップして追加してください。タイトルは後でも変更できるので、空欄でもいいです。

次に今追加した「テキスト」に下のコードをコピペして下さい。

できたら、コード内の「※※※~~~※※※」の部分を埋めていく。
埋めるのは、

・リンク先URLを3ヶ所
・リンク先のタイトルを1ヶ所
・紹介文を1ヶ所

です。

サムネイルには各サイトのファビコンを取得して表示しています

これはオレが良く使うサービスなのですが、Googleの非公開APIを使用してファビコンを取得しています。

やり方は簡単で、

↑のURLの後に、、ファビコンを取得したいサイトのURLを続けて貼り付けるだけです。
例)http://www.google.com/s2/favicons?domain=http://digitablebox.net/

取得したファビコンはPNG画像に変換されてるので、あとはimgタグのsrc=””に入れてやれば画像として使えます。

あくまでも非公開のAPIなので、いつ使えなくなるかわからなかったり、たまに取得に失敗するサイトがあったりするのですが、オレは好んで使ってます。
この他にもファビコンを取得するAPIはいくつかあるみたいなので、「ファビコン 取得」で検索してみてください。

これでリンクが貼れました。できたら次はリンクの見た目を整えて、マウスオーバーでサイトの紹介文を飛び出させる処理をしていきましょう。
大丈夫。これもコピペだけです。

見た目を整える

編集するのはstyle.cssです。WordPressの管理画面から、外観>テーマ編集と進み、style.cssに下のCSSを追加します。
※万が一のためにできれば子テーマを作って編集しましょう!子テーマが何か分からない人も、最低限のバックアップは取っときましょう!

style.cssの一番最後に、下のCSSをコピペしてください。

あとはお好みで自分のサイトに合わせて調整してください

お使いのブラウザやPC環境、そしてサイドバーの幅やデフォルトのCSSによって、リンクのレイアウト等が崩れる場合があるので、その時は調節をお願いします。

また、最低限やったといた方が良いと思う調整は、
・自分のサイトの背景色に合わせて吹き出しの背景色も変える。(吹き出しの▲の部分の色を変えるのを忘れずに。)
・吹き出しの背景色に合わせて文字の色を変える。

この2点で大抵のサイトには問題なくマッチするリンクになると思います。

作業中に、もしわけがわからなくなったら。

CSSはstyle.cssの最後に追加するように今回指示しましたので、

より上をいじってなければ、それより下をすべて削除すれば元に戻るはずです。

リンクのコードもウィジェット内にコピペしてもらいましたので、ウィジットを削除してもらえばリンクも消えます。

リンクの追加方法と注意

今、リンクが1個できたと思いますが、2個目からはどこに追加していくのかを説明します。

から

までをコピーして、

の直後にペーストして、同じ作業を繰り返します。

この時にちょっと注意!

の後には何も追加しないで下さい。短いですが、大事な一行です。

さいごに

いかがだったでしょうか?うまく設置できましたか?
今回これを作る事になったキッカケはサイドバーのリンクの中にもある、ブログ「トッテダシ」を運営する、トマト屋(@tomatoyasan)が「相互リンクしようぜッ!」と言ってきたのが始まりでした。

そして「リンク先を紹介したい。」だの、「リンク先のタイトルとURLとサムネも出したい。」だの、「でもそれじゃスペースが~」だの言って来やがったので、明らかに長くなってスペースを確保しなきゃならないのがわかりきってる紹介文を、普段は非表示にしといて、マウスオーバで吹き出しで表示するって具合にしてみました。まぁ、ちょっと頑張っちゃった感じですw
んでせっかく頑張って作ったので公開しました。

ちなみにオレはHTMLやCSS等のソースコードを「綺麗に」「美しく」「無駄なく」書こう!ということは全く考えてませんので、その辺のツッコミはご遠慮くださいw(^_^;)

でも、もし間違った、おかしな記述があった場合はご指摘いただければ助かります。検証、検討の後、追記します。

あと、記事内にソースコードを表示するプラグインでオススメあったら教えて下さいw
今入れてるのがちょっとイマイt・・・(ry

それでは、今日もオレの書いた記事が、どこかの誰かの役にたつことを願って。
まつだい(@matsudai23)でした。


スポンサーリンク

いいね!・フォロー大歓迎!

関連記事

ブログを書くのに使ってるアプリたち

暮らしをおトクにかえていく|ポイントインカム
  • まつだい
    (@matsudai23)

    へっぽこモブロガー

    熊本県在住。1984年(昭和59年)生まれ。
    妻子持ち(男1人、女2人、妻1人)の親バカへっぽこモブロガー。
    Apple、Mac、iPhone厨。
    MacやiPhone、嫁と子供が好きな、嫁バカ&親バカのおっさんが暇な時書いてると思って貰えばだいたい合ってます。
    僕についてもっと詳しく知りたいという方は居ないとは思いますが一応自己紹介ページをご用意してますので御覧ください。