紬とウィスキー ~ウイスキーブログと着物生地のブログ~

愉しめるウィスキーや素敵な紬生地など中心にご紹介していきます! よろしくお願いいたします。

いろいろ研究中!

いつもこのブログをご訪問いただきまして、ありがとうございます。

今日は、在宅勤務のため、午前9時前にブログを書き上げました。この風景を見なくて済む一日は、少し気持ちが和らぎます。

f:id:uribouwataru:20210803083247j:plain

 

今回は、ブログを見やすくしたり、強調したりするテクニックで、私が最近使っていて、すぐに使えるものをご紹介いたします。

 

最初は、今まさに公開されているLSSさんの記事です。すぐに使うことができるので、ご紹介いたします。

 

編集画面から右の側の+ボタンで、「定型文貼り付け」の「▤」っぽいアイコンにコピーして、名前を付けるだけで、使えるようになります。結構便利ですので、一度試してみてください。(やり方が分からない方は、次にご紹介するポヤラさんの記事をご覧ください)

  

little-strange.hatenablog.com

 

次にご紹介するのは、ポヤラさんの記事です。定型文の活用方法で、いろいろな役に立つ技を紹介されていますので、必見です

 

どんなふうに必見なの?

 

まさにこんな風に、吹き出しで会話風にもできるよ

 

poyaran.com

使い方次第で、いろいろ楽しめ、ブログ作成に役立てることができるようです。

 

 ⇩これは、LSSさん直伝の技で作りました!

 ①まずは、ポヤラさんの記事を読んでから、はじめると分かりやすいかもしれません。

LSSさんの記事は、応用編でさらに凝ったことができる事例と思っていただければと思います。

③定型文にはり付けたりする以外に、「CSS」をいじる場合は、事前にいじる前のコードを保存しておくと良いと思います。私は、失敗してブログデザインが壊れてしまったことがあります。

④実施にあたっては、あくまでも自己責任で!

 LSSさん、ポヤラさんありがとうございました。

/* * はてなブログに「音読する」ボタンを追加する ** 使い方 - 以下をコピーして デザイン編集 → カスタマイズ → フッタHTML に貼り付け ** 注意 - Web Speech API非対応のブラウザでは音読できません */ function speak (e) { speechSynthesis.cancel(); // Chromeで初回実行時にspeechSynthesis.pause()できない問題を解消するため、空文字で一度speechSynthesis.speak()しておく var empty_utter = new SpeechSynthesisUtterance(''); speechSynthesis.speak(empty_utter); var utter = new SpeechSynthesisUtterance(this.body); speechSynthesis.speak(utter); e.currentTarget.textContent = '停止する'; e.currentTarget.removeEventListener('click', this); e.currentTarget.addEventListener('click', pause); } function pause (e) { speechSynthesis.pause(); e.currentTarget.textContent = '再開する'; e.currentTarget.removeEventListener('click', pause); e.currentTarget.addEventListener('click', resume); } function resume (e) { speechSynthesis.resume(); e.currentTarget.textContent = '停止する'; e.currentTarget.removeEventListener('click', resume); e.currentTarget.addEventListener('click', pause); } (function () { if (!window.speechSynthesis) return; document.querySelectorAll('article.entry').forEach(function (article) { var button = document.createElement('button'); button.type = 'button'; button.className = 'btn'; button.textContent = '音読する'; button.style = 'float: right'; article.querySelector('header').appendChild(button); var body = article.querySelector('.entry-content').textContent; button.addEventListener('click', { handleEvent: speak, body: body }); }); })(); Footer © 2022 GitHub, Inc. Footer navigation Terms Privacy Security Status Docs Contact GitHub Pricing API Training Blog About