はてな編集拡張機能２
2020年8月2日
は～い、皆様。
中高年の星☆爺婆の太陽 の静吉でございます。
序
前回は【Chrome専用とってもお役立ちはてなブログの編集プラグイン😎】で、見出しタブのHタグに触れたのみで終わってしまいました。
Hタグはブログ全体として、はてなブログではデフォルトでこのように使われているのです。
- <h1>チコちゃんに叱られないブログ</h>
- <h2>ブログ向上で生活を豊かにしましょう。</h2>
- <h1>Chrome専用とってもお役立ちはてなブログの編集プラグイン😎</h1>
- <h2>はてな編集拡張機能</h2>
なので<h2>はてな編集拡張機能</h2>で記事を書くわけですから、この内容に沿って書く限りにおいて次のタグは<h3>以外にはありません。これははてなブログの記事編集で「見出し」で「大見出し」を使用することで<h3>となります。
つまりはそう言うことです。
以上は前回のHタグのおさらいでした。
と言っても記事の中に<h2>はてな編集拡張機能</h2>に対抗する内容での見出しの場合はこの<h2>を使うこととになります。その際に便利なのがブログ編集プラグインになります。
ブラウザに拡張機能を起動させましょう。
この拡張機能ことプラグインをインストールしてあれば、このアイコンがプラグイン起動になります。
クリックすると表示されるニューがこちらになります。
このはてな記事編集プラグインの上段左側に H 2タグがありますね。これをクリックするだけで大々見出しになります。その際にはカーソルが見出しにしたい行にあればそれで OK です。この場合は、わざわざ文字列を選択する必要はないです。
HTML編集からタグを入れるのって結構面倒だから、その意味でもこの編集用拡張機能は使えるよ。
ショートカットキーでも同じことが出来るので、教えちゃうね。これ、何処かのブログで最近覚えてきたことなんだけど、如何にも自分が知っていた風に教えちゃいます。そのブログ忘れちゃったけど、お世話になりありがとうございました。ショートカットの数々とっても役に立っています。
［Shift］＋［Alt］＋［Hタグに対応する数字キー］
例えばH2タグを入れたいときは、文字列を選択して、［Shift］＋［Alt］＋［２（全角）］です。この場合テンキーボードはだめですからキーボードの上にある横一列にある１，２，３，４，５，って感じで使ってください。
破
はてなブログの編集用の Chrome 拡張機能をまだインストールしてない方は是非インストールしてください。絶対に便利なプラグインですのでお役に立つと思います。
拡張機能の作者のページはこちらです。
拡張機能をインストールするとブラウザにこのアイコンが表示されます。利用したい時は記事作成中の文字列を選択してから利用します。
クリックしたときに表示されるメニュー
左上から順に<h2>タグ、目次、日付です。
この、日付タグはいいですね。
日付をクリックすると記事作成時の日付が入ります。
デフォは左揃えですが、中央揃えにしても良いですし右揃えにしてもいいですね。ちなみに静吉は右揃えです。そして記事を予約投稿している方は予約日に日付を変更をすることも忘れないでくだい。※太字と文字色ははてなの編集バーを利用です。
2020年8月2日
2020年8月2日
2020年8月2日
ということで<h2>、目次、日付の下の段の文字列揃え三種も了解ですね。
背景をグレーにする
文字揃え三種の下の［背景をグレーにする］は文字列を選択してここをクリックすると背景がグレーに変わります。
方法は、見出しタグや文字揃えなどはカーソルがその行にあればOKですが、背景の変更は文字列を選択しないといけません。文字列を選択して［背景をグレーにする］をクリックで以下のようになります。
背景がグレーに変わるよ
と、デフォではこんなふうになります。
［HTML編集］でみると上記背景の記述はこの様になっています。
<p style="background-color: #eee; padding: 10px 12px; border-radius: 4px;">背景がグレーに変わるよ</p>
この記述の中の赤い文字 eee を変えることによって背景の色がグレーだけじゃなくてカラフルにすることができるのです。※分かりやすくするために赤色にし太字にしてあります。
そして背景がグレーにできるのであれば、そのグレーを変更することも可能です。
背景が黄色に変わるよ
<p style="background-color: #ff0; padding: 10px 12px; border-radius: 4px;"><span style="color: #ff0000;"><strong>背景が黄色に変わるよ</strong></span></p>
背景が黒に変わるよ
<p style="background-color: #000; padding: 10px 12px; border-radius: 4px;"><span style="color: #ffffff;">背景が黒に変わるよ</span></p>
色指定はいわゆるカラーコドと違って三桁で表すので、ちょっと難しいかと思いますので、こちらのサイトで三桁の色コードを探して使ってください。
普通にカラーコードは白であれば［#ffffff］か［#white］ですが三桁では［#fff］となります。赤は［#ff0000］［#red］ですが三桁では［#f00］となります。
色見本～カラーコードの記事では三桁の色表示のページに直接リンクしていますのでその中から任意の三桁の色を選んでバックカラーの変更をしてみてください。
細かくこの色合の色と考えるよりもこの色で良いなと思ったら、その色をコードを利用したほうが早いので、余り拘らないようにしましょう。拘るのなら記事の内容に拘ってください。
文字色の変更ははてなブログ編集の［A］の箇所です。
急
あまりたくさんのことを一度に教えても覚えきれないので、今回教えたことを簡単に整理します。
- 日付の挿入
- 日付の文字の位置
- 文字の左揃え、中央揃え右、揃え
- 背景をグレーにする
- 背景の色を変える方法
これらをブログ記事に取り入れるだけでちょっと目を引くポイントになると思います。
毎回同じことを繰り返すのが手数であれば、記事作成要雛形を作って雛形黄色とか雛形赤色とか、雛形緑色とかタイトルにしておくと良いです。
記事を作成する時は、その雛形をコピーしてから作成すれば、同じ雛形が何度でも使えます。
以上で本日の講習は終わり～い😍
それじゃあ［Chrome専用はてなブログのとってもお役立ち編集プラグイン😎］は第三弾記事として、次回は書式の初期化とスクリプトについてちょっと触れてみたいと思います😋
この記事は 中高年の星☆爺婆の太陽 静吉がお届けしました😎
◇◇◇◇◇
Amazon.co.jpアソシエイト
