05【技術】リンク系のタグと割烹エディター
白猿
「今回はリンク系のタグを紹介するぜ。『リンク』ってのは、そこをクリックすると別のページが表示されるものだ。活動報告の記事から自作小説へのリンクを設定できる。もし、おいらが『活動報告で一番大事なタグを１つ選べ』と言われたら、リンク用の<A></A>タグって答えるぜ」
黒猫
「そうかなぁ……。絵を表示する機能とか文字に色をつけるとか、他にもいろいろあるよね」
白猿
「記事を派手にするタグはある。だけど、活動報告は小説の作者が書くものだからな。記事から小説へのリンクは置いたほうがいいと思うぜ」
黒猫
「活動報告を見てくれた人なら、マイページの作品一覧からでも小説にアクセスできるよね」
白猿
「その作者のファンとか交流のある人なら見てもらえる可能性もある。だけど新着活動報告から来た人は、リンクがないとそれ以上は見てくれないかも」
黒猫
「なるほど。で、今回紹介するのがリンク用の<A></A>タグってわけかい」
白猿
「何度も書いてるが、活動報告の『新しい記事を作る』画面の下の方に、使えるタグが載っている」
・゜゜・*:.。..。.:*・゜゜・*:.。
・゜゜・*:.。..。.:*・゜゜・*:.。
白猿
「リンク系は<A></A>タグだけだ。それで挟んだ箇所にリンク機能がつく。Ｗｅｂサイト……いわゆるホームページでは、リンクの箇所をクリックすると他のＷｅｂページに移動する。今回紹介するのはその機能だ。書式はこうなる」
・゜゜・*:.。..。.:*・゜゜・*:.。
<a href="移動先のURL">リンクの文字</A>
・゜゜・*:.。..。.:*・゜゜・*:.。
白猿
「<A></A>タグはそれだけじゃ機能しない。href属性というものを使って、リンク先のURLを書くんだ。URLってのはＷｅｂサイトのアドレスのことだ。例えば以下の小説にリンクさせることを考えてみよう」
小説のURL:https://ncode.syosetu.com/n7091hk/
小説の題名:白猿ハヌマーンと星の６兄弟
白猿
「さっき書いた書式に当てはめるとこうなる」
・゜゜・*:.。..。.:*・゜゜・*:.。
<a href="https://ncode.syosetu.com/n7091hk/">白猿ハヌマーンと星の６兄弟</A>
・゜゜・*:.。..。.:*・゜゜・*:.。
白猿
「活動報告で上のように書くと『白猿ハヌマーンと星の６兄弟』が通常は青字になる。そこをクリックすると小説のページに移動するぜ」
黒猫
「URLの後部の『n7091hk』は小説のコードだな。この部分と小説のタイトルを変えれば、他の小説へのリンクボタンを作れるのか」
白猿
「リンクが使えれば、活動報告に来てくれた人がその小説を読みやすくなるぜ。リンクがないと、来てくれた人が自力で探さないといけないんだ」
黒猫
「他の作者のお勧め小説を紹介する場合も、その小説へのリンクがあった方が見やすいかな」
白猿
「リンクで使うAタグと、太字にするBタグ、この２つだけでも活動報告がぐっと良くなるぜ。たとえばこんな感じかな」
・゜゜・*:.。..。.:*・゜゜・*:.。
[記事の入力内容]
小説『<a href="https://ncode.syosetu.com/n6114hs/">いちじになったよ、こだぬきはしる：マザーグースの歌</A>』の第〇〇話を投稿しました。
今回の歌はかわいい<B>ネコさん</B>と<B>ネズミさん</B>が登場します。
・゜゜・*:.。..。.:*・゜゜・*:.。
[記事の表示例]
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「こうすると青い字をクリックしてくれるかもね。<A>タグも何かの略かな。<B>タグは太字のboldだけど」
白猿
「船の錨のanchorだ。リンク先にイカリを下ろしているイメージかな」
黒猫
「ところで、活動報告を見に来る人ってそんなにいるのかな。誰も見に来ないなら、手間暇かけて飾り付ける意味があるのかね」
白猿
「観客ゼロのステージでもネタをやり切るのが真の芸人なんだぜ。オンライン小説ってのは、当初は読まれる数が少ないものなんだ。活動報告が来客ゼロってのも珍しくない。あせらずに少しずつ良くしていけばいいんだよ。まぁ、来場者数やコメント数をアップさせるネタは別の機会に書く予定だ」
黒猫
「来客が少ないうちに練習しておくっていう考え方もあるか」
白猿
「さて、『割烹エディター』のことも少し紹介しておこう。これは夕月 悠里さんという方が作ったもので、タグを自動で書いてくれるシロモノだぜ」
黒猫
「おお、やっとその話になったか」
白猿
「今回紹介する『割烹エディター』の機能は、パソコンでのやり方で説明する。スマートフォンしか持ってない方もいちおう見ておいてほしい」
黒猫
「うむ？ 何か変な言い回しだな」
白猿
「では割烹エディターを開いてみようか。ここのあとがきの下でもリンク張ってるから、そっちからでもいいぜ」
・゜゜・*:.。..。.:*・゜゜・*:.。
『割烹エディターのURL』
https://k-editor.com/
・゜゜・*:.。..。.:*・゜゜・*:.。
[割烹エディターのサイト：トップ画面]
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「ふむ。吾輩も開いたよ」
白猿
「黒猫さん。画面の『おしながき』『名物』の下の『割烹エディター』をクリックしてみよう」
・゜゜・*:.。..。.:*・゜゜・*:.。
[割烹エディターのサイト：『割烹エディター』ツール]
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「む？ 吾輩は『単品』のメニューは何度か見たが、こっちは使ってなかったな」
白猿
「こっちが本来の『割烹エディター』かも」
・゜゜・*:.。..。.:*・゜゜・*:.。
[割烹エディターのサイト：『割烹エディター』ツール]
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「なにやら、文章が書けそうな欄がでているが……。これをどうしろと？」
白猿
「たとえば『文章を書くところ』の欄にこういう文を書いたとする」
・゜゜・*:.。..。.:*・゜゜・*:.。
[書く内容の例]
ハヌマーンは風神の子でサルの姿をしている。
インド神話に登場する、ちょっとかっこいいヒーローだ。
・゜゜・*:.。..。.:*・゜゜・*:.。
[割烹エディターのサイト：『割烹エディター』ツール]
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「これは白猿さんの自己紹介か？」
白猿
「さてな。んで、文のどこかをマウスでドラッグしてなぞってみよう」
・゜゜・*:.。..。.:*・゜゜・*:.。
[割烹エディターのサイト：『割烹エディター』ツール]
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「文字の下に何かメニューがでてきたぞ」
白猿
「そうそう。こういうメニューがでているよな」
白猿
「ボタンは左から順に、こうなっている」
・゜゜・*:.。..。.:*・゜゜・*:.。
太字にする『Ｂ』
斜体にする『ｉ』
リンクを張る『Ａ』
下線を引く『Ｕ』
取消線を引く『Ｓ』
文字の色や大きさを変える『装飾』
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「『装飾』以外は、前回と今回で紹介した機能だな」
白猿
「このボタンを使って、いろいろといじってみよう。マウスでなぞったところに効果がつくぜ」
・゜゜・*:.。..。.:*・゜゜・*:.。
[割烹エディターのサイト：『割烹エディター』ツール]
※見やすくするために、枠を小さく見せています。
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「吾輩も試したよ。太字と下線、それに取消線はでたが、『ｉ』を入れても斜めにはならないな」
白猿
「『ｉ』はこの画面では変わらないけど、効果はついているようだ。ある程度いじったら、入力欄の下の『押すと変換される』をクリックしてみよう」
・゜゜・*:.。..。.:*・゜゜・*:.。
[割烹エディターのサイト：『割烹エディター』ツール]
※見やすくするために、枠を小さく見せています。
・゜゜・*:.。..。.:*・゜゜・*:.。
[変換された文章]
<div style="font-size:14.4px;line-height:1.7;"><p style="padding:0em;"><a href="https://ncode.syosetu.com/n7091hk/">ハヌマーン</a>は<b>風神の子</b>で<i>サルの姿</i>をしている。</p>
<p style="padding:0em;"><b>インド神話</b>に登場する、<s>ちょっと</s><u>かっこいい</u><b>ヒーロー</b>だ。</p>
</div>
・゜゜・*:.。..。.:*・゜゜・*:.。
黒猫
「タグが入った文章ができたね。<div>とか<p>というタグもついているぞ」
白猿
「その説明は今回は省略する。変換された文章をマウスを使ってコピーするか、欄の下の『押すとコピーすることができる』ボタンでもコピーできる。これを活動報告に貼り付ければいいんだ」
黒猫
「自力でタグを書くよりわかりやすいね。ところでこの画面ってスマートフォンでは使えないのかね？」
白猿
「ドラッグで文字が選択できれば使えるぜ。ただし多くのスマートフォンでは、ドラッグすると他のメニューも出るから使いづらいかも。スマートフォンは次回以降で紹介する『単品』の方が使いやすいと思うぜ」
黒猫
「『割烹エディター』という言葉は今回のツールの機能をさす場合と、ここのＷｅｂサイト全体をさす場合があるようだな」
白猿
「さっきの『押すとコピーすることができる』ボタンの下に『使い方はこちら』と書いた手順書がある。これを見ると他の効果のつけかたもわかるぜ」
