キンドル本をKindle Unlimited で読んでいただけます

Amazonで販売している電子書籍「三十一郎(みそいちろう)」を、KDPセレクトに登録しました。
Kindle Unlimited にて、無料でお読みいただけます!

商品ページはこちら

記事内で使いたいhtmlタグ

記事投稿画面のタグ挿入ボタンは便利だけど、そのタグにはじつは本来の意味があります。それを認識せず装飾の目的だけで使っていたのでそれを改めるとともに、自分で記事にHTMLタグを入力するためのメモを。

スポンサーリンク

seesaaの記事投稿画面のボタンでどんなタグが入力されるのか


seesaaの記事投稿画面。アイコンが二段に並んでいます。上段のアイコンについて(一番右は絵文字なので省きます)見てみます。左からそれぞれのボタンを押すと、入力画面にあるように、

<strong></strong> (太字)
<em></em> (斜体)
<ins></ins> (下線)
<del></del> (打ち消し線)
<blockquote></blockquote> (引用)
<div style=”text-align:left;”></div> (左寄せ)
<div style=”text-align:center;”></div> (中央寄せ)
<div style=”text-align:right;”></div> (右寄せ)
<span style=”font-size:large;”></span> (文字を大きく)
<span style=”font-size:x-small;”></span> (文字を小さく)
<span style=”color:#FF0000;”></span> (カラーパレット)
<a href=”URL” target=”_blank”></a> (リンクを挿入)

がそれぞれ入力されます。(カッコ内はマウスオーバーで現れる説明)

たしか太字は<b>で斜体は<i>だったような気がするんだけど。いちいちタグを確かめたりしなかったから、そのつもりで使ってました。(スタイルシートにstrongタグの見栄えを設定した後に、<b>のつもりで太字にしてたところがstrongタグの赤文字になっててびっくりした、という経緯でこれに気がついた)

それから別の記事にも書いたのですが、「font-size:;」の「small」や「large」は決まった大きさを指定することになるので、まわりの文字の大きさによっては「小さく」したつもりがまわりと変わらなかったり、大きくなっていたりという可能性があります。なので「一段階小さく(大きく)」という指定のできる「smaller」や「larger」を使うのがいいと思います。
もうひとつ、リンクはターゲットを設定しないほうが親切かも・・・と思います。

使いたいタグと、そのタグの本来の意味

じつは「ブログではタグとか使えないよね」と勘違いしていて、他に方法がないと思って自分の作品を引用枠で囲っていたりしました。でも(少なくともseesaaブログでは)普通にタグが使えます。それならばということで、私が記事内で使いたいタグと、これらの本来の意味を、『HTML5リファレンス』を参考に書き出します。
以前のバージョンから意味がかわっているタグがあります。(「以前の定義」で示してあります。HTML5は2014年に正式に勧告される予定なので、正確には現在はまだ”以前のバージョン”です)

<p></p>(段落)とかもきちんと使うべきなんじゃないの?という気がしなくもないんですが、正直面倒くさいので使いません。作品倉庫のほうではきちんと使っている(つもり。たぶん間違いがありそう)けど、ブログでは改行も自動的に<br />になるし、よくわかんないので。

<h4></h4> 見出し。h1からh6まであり、h1が一番重要な見出し。
<ul><li></li><li></li></ul> リスト
<ol><li></li><li></li></ol> 順序リスト
<dl><dt>定義</dt><dd>説明</dd></dl> 定義・説明リスト
<blockquote cite=”URL”></blockquote> 引用・転載セクション(cite属性に引用元URL)
<q cite=”URL”></q> 引用句・引用文(cite属性に引用元URL)
<cite></cite> 作品のタイトル
<pre></pre> 半角スペースや改行をそのまま表示する
<span style=”font-size:smaller;”></span> 文字を一段階小さくする
<span style=”font-size:larger;”></span> 文字を一段階大きくする
<strong></strong> 強い重要性 「強い強調」
<em></em> 強勢する(アクセントを付ける)箇所 「強調」
<b></b> 文書内のキーワードや製品名など、他と区別したいテキスト 「太字」
<i></i> 声や心の中で思ったことなど、他と区別したいテキスト 「イタリック体」
<del></del> 削除された部分
<ins></ins> 追加された部分
<hr /> テーマや話題の区切り 「水平線」
<sup></sup> 上付き文字
<sub></sub> 下付き文字
<small></small> 免責、警告、著作権などの注釈や細目 「テキストを小さくする」
<address></address> 連絡先・問合せ先
<a href=”URL”></a> リンク(ターゲットの設定なし)
&lt; <
&gt; >
&amp; &

これとは別に自分でスタイルを指定したブロック要素とインライン要素。スタイルはclass=”クラス名”に対して、スタイルシートファイルで指定しています。

<div class=”story”></div> ブロック要素に枠と背景色をつける
<div class=”aside”></div> ブロック要素に枠をつける
<span class=”mark”></span> インライン要素に背景色をつける

いちばん使いたかったのは小見出し。他のブログで小見出しを使っているのを見て「いいなー」と思っていたのですが、何も特別な事ではなかった。
なぜ見出しタグの1から3を使わないかというと、1はブログタイトル、2は日付、3は記事タイトル、と役割がすでに決まっているから。使っていいのは4からです。(試しにh3を使ってみたら、記事タイトルと同じ飾り付けが!笑)

どんなふうに見えるのか

実際にこうやって入力したタグは、ブログの画面でどんなふうに見えるのか。
このブログはスタイルシートにいっぱい変な見栄えを設定しちゃってるので、まっさら(?)な状態をスクリーンショットでお見せします。

スタイルシートを一時的に「ホワイト」にして、テスト用の記事を作って表示させました。効果が似ているものがいくつかありますが、見出しなどはとくにスタイルを設定しなくても使えそうです。
さて、このブログではどう見えるのかというと・・・

(ここ全体を一時的なスタイルタグ追加により枠で囲ってます)

h4 見出しです。

  • ul リスト リスト項目1
  • リスト項目2
  • リスト項目3
  1. ol 順序リスト リスト項目1
  2. リスト項目2
  3. リスト項目3
dl 定義・説明リスト 定義部分
説明部分
説明部分

blockquote 引用・転載セクション(cite属性に引用元URL)

q 引用句・引用文(cite属性に引用元URL)
cite 作品のタイトル

pre 半角スペースや改行をそのまま表示する

span style=”font-size:smaller;” 文字を一段階小さくする
span style=”font-size:larger;” 文字を一段階大きくする
strong 強い重要性
em 強勢する(アクセントを付ける)箇所
b 文書内のキーワードや製品名など、他と区別したいテキスト
i 声や心の中で思ったことなど、他と区別したいテキスト
del 削除された部分
ins 追加された部分


テーマや話題の区切りhr↑
上付きはsup 上付き文字こんな感じです
下付きはsub 下付き文字こんな感じです
small 免責、警告、著作権などの注釈や細目

address 連絡先・問合せ先
div class=”story” 自分の作品を囲むための枠
div class=”aside” 後日、補足として書き足した部分のための枠

span class=”mark” マーカーでひいたラインみたいな効果が欲しかったので

こんな感じに。スタイルを指定しているのは「h4」「blockquote」「q」「cite」「pre」「strong」「em」「i」「hr」「dt(定義・説明リストの定義部分)」。最後の三つは個人的にこんなのが欲しいと思ってスタイル設定したものです(なのでまっさらな状態では何の効果もありません)。

2018.6.5追記 現在は、「aside」「mark」のタグは存在するのでわざわざクラスにする必要はありません。ちなみにasideの装飾は↓のようにしています。markはこんな感じ。

スタイルシートをいじりたくないなら、記事中のタグにスタイルを指定する

記事中のタグに直接スタイルを指定することができます。スタイルシートファイルに手をつけたくないとか、今回だけしか使わないからとか、そんなときに。

<h4 style=”border-left:solid 10px red;border-bottom:dotted 1px red;”>見出しに装飾してみた</h4>

と入力すると、

見出しに装飾してみた

という感じに。すでにスタイルシートファイルでスタイルを指定していても、このように効果がでます。

HTMLやスタイルシートなどについては、大変わかりやすいサイトがあるのでそちらをぜひご参考になさってください。私はこのサイトがなかったら作品倉庫が作れませんでした、っていうくらいお世話になりました(これからもお世話になります)。

HTMLクイックリファレンス

簡単にタグを入力する方法・単語登録

タグを入力するのに手打ちするのは大変だけど、メモ帳か何かにタグ一覧を作っておいてそこからコピペ・・・っていうのもけっこう大変です。

私のおすすめは単語登録。たとえば、ひらがなで「みだし」と入力して変換キーを押すと「<h4></h4>」に変換されるようにしておくのです。これなら文章を入力しながらタグを入れるのがとてもラク。

気をつけることは、登録した「読み」と「単語(タグ)」をきちんと全部、紙にメモっておくこと。覚えているつもりでも、どういう読みで登録したのかがあやふやになることがけっこうあります。「あれ、出てこないよ?」と捜しまわるのも時間と労力の無駄なので、手元にメモを置いて、見ながら入力するのがいちばん手間なしで済むと思います。

あと、<>や&が半角ではなく全角に変換されちゃうことがあるので、ご注意。プレビューしてタグがそのまんま表示されていたら、その<>や&は半角ではなく全角<>&です。


記事を書く・わかりやすい文章を書く、というのは本当に難しくて、いろんな意味で消耗してしまいます。それでもうまくできない。(+_+)
せっかくこういう意味付けされたタグがあるのだから、これらをうまく使って、わかりやすく読みやすい文章を書いていきたい・・・と思います。

コメント