本日の備忘録/マーカーっぽい強調表現

 タイトルの陰影とふりがな、それからマーカーっぽい強調表現について、ちょいと以前、リアルワールドでお尋ねをいただく折があった。

20211108122112

 大したことはやっていないのだという自覚はあっても、自分なりの工夫めいたところを尋ねられるなんて滅多ないぶん、何となくうれしいぢゃないか。というわけで、ひょっとして万が一、そのへんを気にしてくれるヒトが他にもいらっしゃるかもね、ということにして、以下アレコレ記しておく。

 

 タイトルの陰影は標準的なCSSで実現できる。ふりがなは元々マイクロソフト独自のHTMLタグだったのが、今では他社ブラウザでも広く通用するようになっている*1。というわけで、この2つはテケトーなキーワードでググって多少は自分の頭も使ってみれば、比較的問題なく実現方法はわかる。だからここでは説明しない。ただし、ふりがなをふるにはHTMLの編集が必要になるという面倒があることを申し添えておくべきか。

 

 で、ここではとくにマーカーっぽい強調表現(冒頭の画像のようなヤツ)についてに話を絞る。といっても、実際にやるべきことはシンプルだ。大雑把にまとめると、

  1. 「{}デザインCSS」にスタイルシートを書き込む
  2. HTML編集画面でHTMLを使って原稿を書く

の2ステップ。

 まず「{}デザインCSS」に書き込むべきスタイルシートのソースをあげておく。はてなブログであれば、管理画面のサイド・メニューを「デザイン」→「カスタマイズ」とたどって、さらに「{}デザインCSS」を開いて現れる編集画面の末尾にでも書き加えれば利用の準備は出来上がり。後は編集画面に記事を書くことになる。

.marker-p {
  font-weight: 900;
  font-size: normal;
  color: rgb(90,90,90,);
  background-color: rgb(255,200,200); 
}
.marker-b {
  font-weight: 900;
  font-size: normal;
  color: rgb(90,90,90,);
  background-color: rgb(200,200,255); 
}
.marker-g {
  font-weight: 900;
  font-size: normal;
  color: rgb(90,90,90,);
  background-color: rgb(200,255,200); 
}

 フォントは少し太字気味にしてある。通常の太さだとマーカーの色に圧されてかえって見えにくくなるからだ。CSSを知っていらっしゃる方なら、上のソースだけで使い方もおわかりいただけるだろう。「marker-p」は「ピンク」、「marker-b」は「ブルー」、「marker-g」は「グリーン」となる。

 「color:」は文字色の指定、「background-color:」はマーカー色の指定になっている。それぞれ好みに合わせて変更されたし。

 CSSをいじった原稿を書くとなると、はてなブログの場合、「HTML編集」に手を出す必要が出て来る。「編集 見たまま」で編集のあらかたを済ませて、必要部分だけ「HTML編集」のエディタで強調したい部分に必要なコードを書き込むというあたりが比較的簡便かな。僕自身はEmacs*2でHTMLの編集を済ませて「HTML編集」の編集画面にコピペしている。

 以下は記事原稿の中での使い方、実際の入力例。この通りに入力すると、ちょいと前の段落みたいな具合にマーカー風強調表現が可能になる。

<p> 「marker-p」は「<span class="marker-p">ピンク</span>」、「marker-b」は「<span class="marker-b">ブルー</span>」、「marker-g」は「<span class="marker-g">グリーン</span>」となる。</p>

 要するに、「<span class="marker-p">強調したいフレーズ</span>」と書けばいい。

 というわけで、お役に立つ折があれば幸甚。

 

おまけ

 ただし、はてなブログのHTML編集画面は必ずしも使いやすいとはいえない。HTML編集に手を出して少しは凝った記事編集をしたいというのであれば、テキストエディタを使ってみるのがいいんぢゃないかと思う。編集の粗方を「編集 見たまま」で行った上で、細部の編集にHTML編集を用いるという手もあるけれど、Emacsに慣れた身からすると、それではなかなかまどろっこしい。Emacsで書いたHTMLファイルをHTML編集にコピペするのが楽ちんだ。最近はEmacsに代わるような高機能エディタもいろいろ出回っていると仄聞する。Emacsでなくとも好みのエディタを使えばいい。適当に選んで試してみられよ。今どきのエディタであれば、どれだってHTMLの編集に便利な機能があること間違いなし。

 コンピュータ上で文書作成に当たる場合、少なくともその文面を練るには、今でもテキストエディタが最も便利なツールであり続けているんぢゃないだろうか。一方で、にもかかわらずテキストエディタを文書編集に使うヒトはむしろ減っているように感じられる*3。使えると便利なものなのに、もったいないなぁ、と爺ぃは思ったりする。軽快なエディタで編集して、後でコピペして他のアプリケーションに渡せばいろいろ使いみちも広がる。最初からワープロでえっちらおっちら頑張るよりは、ずっと効率よく文書作成だって出来ちゃうんぢゃないかしらね。そうでもないかなぁ。うーん。

 

 プロ志向というのでなければ、この手の入門書のつまみ喰いでも充分HTMLにせよCSSにせよ、愉しむには充分なんぢゃないだろうか。

 

*1: W3Cの標準規格になったかどうにかしたんぢゃなかったっけか? なってないかな。

*2:cf. GNU Emacs - Wikipedia、いろいろ面倒なことが記されているが、一通りのエディタとして使うぶんにはどってことないと思う。

*3: 個人的な実感を超える話ではないけれど。