ブログ記事にお洒落なSNSシェアボタンを設置してみた【Blogger Contempo】

-

Bloggerの公式テーマ「Contempo」のシェアボタンは、変な形で目立たないのが難点です。そこで、お洒落でかわいいSNSシェアボタンに変更をしてみました。

Blogger【Contempo】のシェアボタンは目立たない

ブログ記事をSNS等でシェアしてもらうためのシェアボタン。今使用しているBloggerのContempoというデザインテーマにも用意されてはいるのですが、そのデザインがとにかく地味すぎて全然目立ちません。



記事タイトルの右にある3つの点を線で結んだ「く」の字型のアイコン。この見慣れないアイコンをクリックすると、、、



こんな風にFacebookやTwitterのシェアボタンが現れます。でも、こんなのBloggerのユーザーでもなければ気付きませんよね～。色も黒一色で、これ以上ないほどに地味で目立ちません。

ということで、もっとわかりやすいSNSシェアボタンを設置してみました。



お洒落でかわいい、丸いSNSシェアボタンを設置

といっても、自力でそんなボタンを作る技術はないので、ネットで検索。しかし、シェアボタンのコードは紹介されていても、それをHTMLのどこに設置すればいいのかが書かれていなかったり、アイコンがきちんと表示されなかったりと、どうにも上手くいきません。すっかりお手上げ状態になって、Twitterでぼやいていましたw


すると、


どうも(ヤブ)医者です。
ちょっとやり方まとめてみます。暫しお待ちを。
— ふじやん。 (@fujiyan617) 2019年3月27日

と、助け舟が颯爽と登場！ なんとその日の夜には設置手順をまとめたブログ記事を完成されてくれました！ すごい！


「ふじやん。」さんのそのブログ記事がこちら↓↓↓

オリジナルデザインのSNSシェアボタン

ふじろじっく仕様のかわいい丸型デザインです。リンクコピー機能も付いてます。

非常に丁寧に説明されているので、書かれた通りに作業したら、今まで悩んでいたのはなんだったんだと思うくらいに、あっけなく設置できてしまいました！



じゃん！
見事、記事下にSNSシェアボタンが現れました！

しかも、ボタンが丸くて、お洒落で超かわいいです！

「ふじやん。」さんの説明記事には「ふじやん。」さんオリジナルのこの丸いボタンと、「やごまる」さんの作られた四角いボタンの2つが紹介されていますので、それぞれブログの雰囲気に合わせて選べるのも嬉しいですね。


そんなわけで、無事にSNSシェアボタンまで付いて、また一歩ブログらしいデザインに近付きました！

（おしまい）

この記事をシェアする
  • B!
  • COPY
    LINK

▼今週の人気記事

スピーカーのエッジ交換に挑戦！破れた穴を自分で修理してみた！

-
イメージ
スピーカーコーンのゴム（エッジ）がボロボロに・・・　 先日、部屋を掃除しているとスピーカーのネットに埃がたくさん付いているのに気が付きました。こりゃいかんと思い、ネットを外して埃を落とそうとしてびっくり！ スピーカーコーンの周囲のゴム部分が経年劣化のせいか弾力を完全に失ってカッサカサ。それどころか、音を出したときの振動に耐えられなかったのでしょう。ボロボロと崩れ落ちて穴まで空いているじゃないですか！ これではコーンがスムーズに動けないし、穴から音も漏れちゃいます！ これは困ったどうしたものかとネットを彷徨っていると、コーンの周囲のゴム部分は自分で交換できることを発見！ 『スピーカーエッジ』という名前で交換部品が売られていました。サイズによって幅はあるけれど、エッジは 1 個 1,000 円から 3,000 円くらい。接着のための専用ボンドが 300 円弱。これは試してみる価値大です！ スピーカーについての知識なんて全然ないけれど、思い切って挑戦してみることにしました！ スピーカーエッジの交換手順　 購入した交換用のスピーカーエッジがこれ。 ファンテックさんのサイト でネット購入したのですが、種類豊富な上、機種名で適合エッジを探せてすごく便利です。専用のボンドも一緒に買いました。筆と詳細な交換手順説明書も付属しています。 まずはスピーカーユニットを留めているネジを緩めて、エンクロージャー（スピーカーの箱）から外します。 スピーカーユニットとケーブルがハンダ付けされていたため、ここまでしか動かせませんでした。仕方ないので、ユニットを外した穴の中にカスなどが落ちないよう、念のためビニール袋をかぶせます。 ネジ留め用の前面フレームをユニットから外します。ちょっと力を入れるとペリっと剥がれました。 劣化した古いエッジを取り除きます。豪快にペンチでベリベリ。 フレームに接着されているところはマイナスドライバーでガリガリはがします。彫刻刀があればそっちの方が使いやすいそうです。 マイナスドライバーでは取れない部分はカッターで削り取りました。ちゃんと綺麗に取り除くのは意外と大変ですね。 今度はコーンの方に残った古いエッジを除去します。スピーカーユニットをひっ
続きを読む »»»

【DIY】切れて困ったプリーツ網戸を、ロール網戸に枠ごと交換してみた

-
イメージ
玄関の窓に付いていたプリーツ式の網戸が何箇所も切れてしまったので、DIYでロール式の網戸に交換をしてみました。注文時に窓のサイズをきちんと測って伝えれば、交換はドライバー１本で簡単にできます。プリーツ網戸の修理を考えているなら、いっそのことロール式へ交換してしまうのがおすすめです。 破れてしまったプリーツ網戸の修理は難しい 我が家の玄関の窓には、折り畳んで収納できるプリーツ式の網戸が付いていました。不二サッシ製のこのプリーツ網戸はお洒落で良かったのですが、網戸をジャバラ状に折り畳んで収納するために、網戸が折れる位置が経年劣化で切れてしまうのが大きな欠点です。 10年ほど経ったプリーツ網戸は、見ての通りあちらこちらが切れてしまって、もはや虫やらゴミやらが入り放題。これでは窓を開けておくことはできません。 網戸の折れる部分はそれなりに補強はされていますが、開閉を繰り返すうちに、折り目部分がどうしてもこんな風に切れてきてしまうのです。 切れたプリーツ網戸の補修のために、まずはロール状の網戸補修シートを買ってみました。お値段は800円ほどです。 補修シートは、透明な粘着シートの片面に、網戸のネットが貼られた状態になっています。これを穴や切れた場所の大きさに合わせて、自由に切って使います。 粘着シートは透明なシート状なので、空気は通りません。見た目は網戸のネットと同じですが、この補修シートを貼った部分の通気性はなくなってしまいます。 とはいえ、小さな穴の補修であれば、これで何の問題もありません。穴の開いた箇所に部屋の内側から貼れば、その部分の通気性はなくなるものの、見た目もそれほど目立たず、コスパも抜群です。粘着力が心配であれば、内側と外側の両面から貼れば、さらに安心です。 ところが、プリーツ網戸の折り曲げ部分が切れた場合は、そう上手くはいきません。補修シートを予め折り曲げて、さらに内側、外側の両面から貼ってみたのですが、網戸の開閉をすると、折り目が伸びたり折れたりするのに追従しきれず、補修シートがどうしても剥がれてしまうのです。平面部分であれば補修シートで十分ですが、結局、プリーツ網戸の折り曲げ部に使うのは無理という結論になりました。 となると、プリーツ網戸のネットそのものを新
続きを読む »»»

覚えておくと安心。街中の無料充電サービスを、新宿高島屋で使ってみた。

-
イメージ
外出中に携帯電話やスマホの充電が切れて大ピンチ！　そんなときに心強い、無料充電サービスを、新宿高島屋で試してみました。 使い方は簡単。手軽に充電できます。 新宿高島屋の2階入り口にあるサービスカウンター。そのすぐ裏に、無料の充電器が置かれていたので、どんな感じなのか試してみました。 操作は簡単。ケータイやスマホを入れるボックスが3つあるので、数字パネルの上のオレンジ色の矢印で、3つの中から空いているボックスを選択します。ちなみに、左矢印は一番左のボックス、上矢印が真ん中、右矢印が一番右のボックスです。 矢印を押すと、対応したボックスが開くので、ケータイやスマホを中に入れて、蓋を閉じます。あとは、数字のボタンで4桁の暗証番号を入力すれば操作完了。取り出す場合も、同様に矢印キーでボックスを選択し、先程入力した暗証番号を間違えなく押せば、蓋が開いて取り出せます。 操作は非常に簡単ですね。 無料充電器の注意点 ボックスの中にはケータイやスマホとの接続ケーブルが用意されていますが、ボックスによってケーブルの種類が少し異なっています。真ん中と右は、「micro USB」と、iPhone用の「Lightningケーブル」の2種類。左のボックスには、「USB Type-C」と、「FOMA及びSoftBankの3G用の端子」、「auのケータイ用端子」の3種類が設置されています。自分でケーブルを用意する必要がないのは便利ですが、利用したい端子のボックスが空いていない可能性もあります。（※充電器によって、端子の構成は異なっているかもしれません。） サービスカウンターのすぐ後ろなので、常に人の目はあるものの、盗まれる不安感というのも、なくはありません。心配な人は、充電が終わるまで待っていた方がいいかもしれません。 4桁の暗証番号も、忘れてしまうと取り出すことができません。決して忘れないよう、きちんと覚えておきましょう。 それと、あたりまえの話ですが、充電中はケータイやスマホが使えません。充電の間に買い物をしたのですが、会計時にスマホのポイントサービスアプリを使おうと思ったら、スマホがなくてダメでしたw　そりゃそうですね。 完全に充電できるわけではなくて、充電は20分間の限定 そして、肝心の充電は、満充電までしてくれる
続きを読む »»»

おしぼり人形の作り方

-
イメージ
喫茶店や居酒屋でビニール袋に入ったおしぼりが出るとついつい作ってしまう「おしぼり人形」。先日SNSに写真をアップしたところ、知っている人があまりいないようだったので、作り方の大公開です！ ・・・と、その前にまず肝心なのは、ビニールの袋に入ったおしぼりが出てくるお店を探すこと。ビニールの袋も必要なので、おしぼりだけがお皿に乗って出てくるお店ではいけません。ここ重要です。 などと言いつつ、ここからの説明は、家にあったミニタオルと割り箸のビニール袋で代用して進めますねw おしぼり人形の作り方　 おしぼりを裏返しにして広げます。 片方の端から、半分までくるくると巻きます。 反対側からもくるくると巻きます。 ぐにっと曲げます。 もっとぐにっと曲げます。 下半分が少し見えるように注意しながら、重なるまで曲げます。 上に重ねた部分を左右に開きます。 きれいに形を整えます。 おしぼりの入っていたビニール袋を巻き付けて・・・ ぎゅっと絞って結んだら出来上がり！ ほらかわいい！ 最後にもう一度、動画でおさらい。 ぜひ作ってみてくださいね♪ （おしまい） 関連記事 ■ こーじが選ぶ、2010年～2012年に観た映画 私的ベスト20！   （2015/1/26） ■ ナメクジを可愛くしてみよう！（バーチャル実験）   （2014/1/9） ■ ストローの紙袋で、でんでんむしを作ってみよう！   （2013/9/18） ■ これは困った(´・ω・｀) 「iPhone ジャスティス問題」   （2013/2/19） ■ 僕とSiriときゃりーぱみゅぱみゅ   （2012/3/17）
続きを読む »»»

インクカートリッジを替えても薄い、シャチハタ印鑑の復活方法！

-
イメージ
「シャチハタの印鑑の色が薄くなったからインクのカートリッジを替えたのに、全然濃くならない！」 そんな時の解決法を思い付きました！ ※詳細は写真をクリックして拡大表示でご覧ください。 どうやら長年使っていると本体側にあるインクを受けるスポンジ部分がへたって凹み、インクカートリッジの先端が届かなくなってしまうようです。 つまり届かなくなったインクカートリッジの先端を届くようにすればOK！ 諦めていたシャチハタ印鑑も、これでバッチリ復活しますよ！！ （おしまい）   関連記事 ■ トランプの7の新しいデザインを考えてみた   （2015/10/15） ■ 製品アイデア『残量インジケータ付きホチキス』   （2015/3/24） ■ フード付きパーカー用の物干しハンガーを作ってみた！   （2015/1/12）
続きを読む »»»

トイレをDIYでタンクレス風に大改造　～その1　部品作成編～

-
イメージ
殺風景なトイレを心地良くしたい　 後付けした温水洗浄便座の配線がむき出しで、床に置いた掃除道具も気になる我が家のトイレ。殺風景で温かみがないし、掃除をするのにも邪魔。もっと心地良くてすっきりした空間にしたい！ということで、流行りの「DIYでタンクレス風トイレに改造」に挑戦してみました！ 開始前。あまりに普通で、お洒落さとは無縁ですね～。 まずは角材でフレーム作り　 まずは1.9×3.8mmの角材を使って、タンクの左右にフレームを作りました。上端はタンクの高さと合わせてあります。左右に渡した前後2本の梁は、フレームに固定せず上に置いてあるだけです。この上にさらに天板を置き、その天板を挟んで手洗いボウルを載せる計画です。 洗浄レバーの部分は隠すと流せなくなってしまうため、窓にする予定。 内側には板を貼ります。上の写真にあったレバーの下の奥へ渡した角材は、不要そうなので取ってしまいました。このあたりは組み立てながらの試行錯誤です。 配線やコンセントを避けるため、柱となる1.9×3.8mmの角材は広い面を表にしたり横にしたりと、場所によって向きが変わっています。そのため、柱を繋ぐ梁もいろいろな止め方になってしまいました。単純な箱型だと楽なんですけどね～。 左側フレームの上部は物入れにする予定なので、ここも集成材で内張りをします。 透明プラダンで試作　 フレームの表面にはベニヤを貼る予定ですが、ベニヤをいきなり正確なサイズに切るのは難易度が高いので、透明な養生用プラダンを買ってきて、試作をしてみました。透明でフレームが透けて見えるので、プラダンにマジックで窓や扉の位置を書き込んでいきます。これは、すごく便利。 プラダンの片面を切らずにおけば、扉も簡易的に再現できます。蝶番の位置もここで検討。扉以外の場所に書き込んだ四角形は、マグネットキャッチを付ける場所。前面パネルは取り外せるように、フレームとはマグネットキャッチで固定する予定です。 プラダンを計測して、簡単な設計図を描きました。これを基にシナベニヤをカットします。 シナベニヤで表面パネルを作成　 外周だ
続きを読む »»»

パソコンの画面をChromecastでテレビにキャスト！

-
イメージ
前回までの記事で、 iPhone 5s を使った Google Chromecast （クロームキャスト）での YouTube 再生 と、 カメラロールの写真・動画表示 に成功したので、次はパソコンからテレビへのキャスト（動画の配信）に挑戦してみましょう！ ■関連記事 第1回  Google Chromecastがいよいよ発売！   （2014/5/27） 第2回  iPhone 5sで「Chromecast」をセットアップ！   （2014/5/29） 第3回  ChromecastでiPhone＆iPadの写真をキャスト！   （2014/5/30） 第4回  パソコンの画面をChromecastでテレビにキャスト！   （2014/6/5） 第5回  ChromecastでGoogle Playの映画を観てみた！   （2014/6/14） 2代目購入！  5GHz帯に対応したChromecast2で、dTVの映画を楽しもう！   （2017/7/17） パソコンの画面を何でも映せるわけではない　 まず最初に理解しておかないといけないのは、 Chromecast を使ってテレビに映し出せるのは、 Windows 7 以上、又は Mac OS X 10.7 以上のパソコンにインストールした 「 Chrome ブラウザの画面だけ」 だということ （あえて省きましたが、もちろん Chrome OSもOKです ） 。パソコンの画面を何でもテレビで見られるわけではないので注意しましょう。また、 Chrome ブラウザはタブ機能によって複数の画面を開けますが、テレビに映し出せるのは任意で選んだ一つのタブの画面だけになります。なお、 接続には Wi-Fi 環境が必須 となります。 パソコンのセッティング手順　 Chromecastのセッティングは iPhone から既に済んでいる ので、今回は Chrome ブラウザに Chromecast を使うための拡張機能をインストールすることからのスタートになります。パソコンに Chrome が入っていない場合は、最初に こちらのリンク から インストールをしましょう。 Chrome の準備が出来たら、下のリンクを開き、 Chrome ブラウザに「 Google Ca
続きを読む »»»