7/22

07【技術】画像系のタグとみてみん

白猿

「今回は画像系のタグを紹介するぜ。活動報告でイラストや写真を表示する方法だ」

黒猫

「HTMLのタグを知らない人でも、画像用のタグだけは使っている人もいるね」

白猿

「活動報告で画像を出す方法は二通りある。どちらも閉じタグはなくて、他の文字は挟まれない」

・゜゜・*:.。..。.:*・゜゜・*:.。

・方法１　みてみんのコードを使う

　<みてみんのiコード|みてみんのユーザーID>

・方法２　<IMG>タグを使う。

・゜゜・*:.。..。.:*・゜゜・*:.。

白猿

「方法１は、画像投稿サイト『みてみん』にイラストや写真を置いて、それを表示させるものだ。小説の挿絵でもこの方法を使うぜ」

黒猫

「ある意味、活動報告で一番使われているタグかもね」

白猿

「まずは方法１の解説だ。自分の描いたイラストを使う場合は、みてみんのサイトで会員登録をして画像を登録するんだ」

・゜゜・*:.。..。.:*・゜゜・*:.。

　画像投稿サイト『みてみん』

　https://mitemin.net/

・゜゜・*:.。..。.:*・゜゜・*:.。

白猿

「自分で絵を登録する以外に、他の人から『ファンアートで挿絵を描きました』という場合もある。たとえば以下のURLは、みてみんに置いたパンケーキのイラストだ。これを表示するタグを作り方をみてみよう」

・゜゜・*:.。..。.:*・゜゜・*:.。

　パンケーキの画像

　画像のＵＲＬ

　　https://38382.mitemin.net/i648068/

　この画像の場合は

　　みてみんのiコードは『i648068』

　　みてみんのユーザーIDは『38382』

　画像を表示するタグは、＜i648068|38382＞　(実際は＜＞は半角)

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「小説や活動報告の記事で＜i648068|38382＞と書くと、パンケーキの絵がでるんだね」

白猿

「他の人からファンアートなどをもらった場合、<iコード|ID>の形式でくる場合と『https:～』でくる場合がある。後者の場合は自分で書き替えよう」

黒猫

「ファンアートを『もらう』という場合でも実際には描いた人の著作権は移らないから、使わせてもらうという意味になるかな」

白猿

「他の人の描いた画像の場合は、絵の下か小説なら後書きなんかに描いた人の名前を書いておくと無難だぜ。で、前にも説明したが活動報告で使えるタグがこれだ」

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「画像系のタグは方法２のIMGタグしかないね。方法１の方が簡単そうだけど」

白猿

「方法１のやりかたは『小説家になろう』での独自のタグで、他のＷｅｂサイトでは使えないものだ。一般的なＷｅｂサイトでは方法２の<IMG>タグで画像を表示するんだ。逆に方法２は小説の挿絵では使えない。ただし、方法２じゃないとできないこともあるんだ」

黒猫

「ふむ、活動報告では方法２を使う場面もあるのかい」

白猿

「まず、みてみん以外のＷｅｂサイトの画像を活動報告で使いたい場合は、方法２のやり方しかできない」

黒猫

「他のＷｅｂサイトのを使うと著作権とかがややこしくなりそうだね」

白猿

「みてみんの画像をIMGタグで表示することもあるぞ。<iコード|ID>のやり方だと表示される大きさが自動的に調整される。表示をある程度操作したい場合はIMGタグを使ってサイズを指定するんだ。スマートフォンで見る人もいるから、あまり大きくはできないけどね」

黒猫

「自動で調整してくれるから<iコード|ID>の方がよさそうだね」

白猿

「たぶん<IMG>タグを使う一番大きい理由は<A>タグによるリンクとの組み合わせだな。<A><iコード|ID></A>とやっても、リンクが効かないんだ。バナー画像からリンクさせたい場合は<A><IMG></A>で指定する必要がある」

黒猫

「記事内の画像をクリックすると、小説などに移動するやつだね」

白猿

「<IMG>タグはSRC属性で画像ファイルのURLを指定する。さっきのパンケーキでの例を紹介しよう」

・゜゜・*:.。..。.:*・゜゜・*:.。

　パンケーキの画像

　画像のＵＲＬ

　　https://38382.mitemin.net/i648068/

　IMGタグ用のＵＲＬ

　　https://ユーザーID.mitemin.net/userpageimage/viewimage/icode/みてみんのiコード/

　　　↓

　　https://38382.mitemin.net/userpageimage/viewimage/icode/i648068/

　ファイルのURL

　　https://img1.mitemin.net/2g/n5/2y40axh0ktdt8lsf98caeuxbkstp_1c5v_4g_4q_2ja.gif

　画像を表示するタグは、以下のどちらか。

　　(1)　<img src="https://38382.mitemin.net/userpageimage/viewimage/icode/i648068/">

　　(2)　<img src="https://img1.mitemin.net/2g/n5/2y40axh0ktdt8lsf98caeuxbkstp_1c5v_4g_4q_2ja.gif">

・゜゜・*:.。..。.:*・゜゜・*:.。

白猿

「(1)の方法は上記の書式でみてみんのIDと画像コードを書き替える方法だな。(2)の方法のため、みてみんでファイル名の入ったURLを確認したい場合は、みてみんの画面でその画像をクリックするか、最大化させればわかるぞ」

黒猫

「記事内で画像をクリックするとリンクさせる場合はどう書くのかな」

白猿

「たとえばパンケーキのイラストが登場する子狸くんの小説への飛ばし方をみてみよう」

・゜゜・*:.。..。.:*・゜゜・*:.。

　小説のタイトル：子狸ポンキチとそびえる塔

　小説のURL：https://ncode.syosetu.com/n4763hq/

　クリックでリンクを飛ばすタグ

・゜゜・*:.。..。.:*・゜゜・*:.。

白猿

「alt属性は、何かの理由で画像が表示できないときに出す文字だ。今回は場合は『パンケーキの絵』と書いてもいい。まぁ、altは書かなくてもいいぜ」

黒猫

「前回、『割烹エディター』で文字の装飾をやったけど、絵も出せるのかい？」

白猿

「枠内の左端に灰色の『＋』マークがあるんだ。これをクリックして画像ボタンを押せばいい」

・゜゜・*:.。..。.:*・゜゜・*:.。

白猿

「画像のURLを『https://～』で指定すると絵が出るぜ。その後、『押すと変換される』ボタンでタグ入りの文にしてくれるぜ」

黒猫

「絵を描くのが苦手な人がイラストを置きたい場合はどうすればいいかな」

白猿

「スマートフォンがあれば紙に手描きしたイラストを取り込んで、みてみんに登録することもできるぜ。風景写真とか、野鳥や昆虫の写真を投稿するのもいいと思う」

黒猫

「絵の描き方があるとウケるかな。アホリアＳＳがどうやって描いているかとか」

白猿

「アホリアＳＳはD-Pixedという大昔のソフトを使っているから、マネしない方がいいと思う。活動報告で利用できるフリー画像も公開しているから、これを利用する手もあるぜ」

・゜゜・*:.。..。.:*・゜゜・*:.。

庫添個展：アホリアＳＳのイラスト集

https://ncode.syosetu.com/n5157in/

・゜゜・*:.。..。.:*・゜゜・*:.。

白猿

「絵が描けない人は、アスキーアートを使うっていう手もあるぜ」

黒猫

「アスキーアートって、文字で顔を描くやつだっけ。フェイスマークともいうかな」

・゜゜・*:.。..。.:*・゜゜・*:.。

　笑顔　　＼(^o^)／

　困り顔　　(-_-;)

　驚き　　(*゜Д゜*)

　泣き顔　( ；∀；)

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「昔の携帯電話の『顔文字』はどうだろう」

白猿

「『顔文字』は文字化けするから使えない、とガイドラインにあるからダメだな。自分のパソコンでは表示できても使わない方がいい。アスキーアートといえば、活動報告でときおり『ミタゼ！』ボタンが使われることがあるぜ。こういうのだ」

・゜゜・*:.。..。.:*・゜゜・*:.。

　＼( 'ω')／ミタゼ！

菁犬兎様の『犬兎考案ミタゼ！ボタンについて』

https://mypage.syosetu.com/mypageblog/view/userid/1440346/blogkey/2435103/

・゜゜・*:.。..。.:*・゜゜・*:.。

白猿

「来場者に『お忙しい時は足跡だけでも残していって下さい』という感じで使ってもらうんだ」

黒猫

「これ、マイページの作者側はどう返事するんだい？」

白猿

「ある程度書かれたところで、まとめて挨拶を返せばいいと思うぜ。または以下のように返すとか」

　＼( 'ω')人('ω' )／タッチ！