画像をいれてみる
こんにちは！ 活動報告を魔改造しながら皆さんの反応を楽しんでいる夕月です！
皆さんの驚く顔が見たかったのさ！
……え？ 表紙のロゴ？ 怒られる？ いんなんとかさん？ え？ なんのことです？
(∩゜д゜)アーアーきこえなーい
あ、そういえば久々に、とある魔術の禁書目録の1巻を読み返していたんですけどやっぱり面白いですね。
電撃文庫って結構好きな作品多いんですよ。なれるSEシリーズとかいいですね！お勧めですよ！
皆さんもぜひ読んでみてください。
はい、ということで、宣伝もばっちりでこれで一安心ですね。
そんなわけで、とある割烹芸人のテンプレート、4回目です。
今回は宣言通り画像についての説明回です。
小説家になろうでは画像が使えます。小説本文に画像を入れるときは『みてみん』といいサイトを使わなくてはだめですね。
しかーし、活動報告は他のサイトにアップロードした画像でも大丈夫です。
まぁただ、なろうの小説に入れることを考えると、みてみんに登録してそこに画像をアップロードするのが二度手間にならないし、管理的にもよさそうですね。
あ、でも容量の大きい画像を上げる場合は自サイトにアップロードしてから引っ張るのがいいと思います。みてみんは50Mまでの制限があります。GIFアニメなんかを持ってくるのであれば断然自サイトがよさそうです。
まぁ、GIFアニメを上げる人なんかあんまりいないと思いますが。
あ、GIFアニメはこんな風に動くイラストが作れます。やり方の説明とかにもいいのですよ。
まぁ、使いすぎると重くなるけどね……
載せる場合はサイズやフレームなんかを調節してね。
■ ■ ■ ■ ■ ■
ということで今回はみてみんを使って、どういう風に画像を入れるか説明していきますね。
・『みてみん』（小説家になろうグループサイト）
https://mitemin.net/
まずはみてみんにユーザー登録してください。
そのあとユーザーページの画像投稿から挿絵用の画像を投稿してください。
投稿した画像をクリックして画像のURLを見てください。
ここのURLの数値が画像を入れるときに必要なので確認するようにしてください。
それではまず先になろうの小説への入れ方です。
先ほど確認したURLの数値を以下の画像のように小説の本文に打ち込んでください。
そうすると小説に画像が出てきます。
なお、始めの赤字はみてみんのユーザーIDで、あとのiから始まる数値はicodeと呼ばれるイラストID番号です。Ncodeとおなじようなものです。
これで投稿すれば、挿絵が表示されます。数値が正しく入力されなかったり、全角だったりすると表示されませんので注意してください。
次に活動報告ですが、2パターンあります。
どちらでもお好きな方を
■まずはicodeとみてみんIDを入力するパターンから
<img src="https://＜みてみんユーザーID＞.mitemin.net/userpageimage/viewimage/icode/＜ICode＞/" />
となります。srcのところの数値を指定するパターンです。
■もうひとつは直リンクを入力するパターン。
みてみんの画像ページへ行ってURLをコピーしてください。
これを打ち込むと表示されます。
<img src="https://img1.mitemin.net/b0/ip/61p24a424zp381hdcizpjmasiw8o_19wc_g4_bi_keg.png" />
■ ■ ■ ■ ■ ■
どちらのパターンでも表示されますけど、個人的には前者の方が管理しやすいかなと思います。
icodeとみてみんIDだけ変えればよいので。
ということで入れ方も分かったと思いますのでここからはテンプレートです。コピペしてどんな感じになるか見てみてください。
■みてみん画像そのまま入れる場合
<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i359877/" alt="i359877" />
※自分がみてみんに投稿した画像を入れる場合
src="https://22980.mitemin.net/userpageimage/viewimage/icode/i359877/"
-最初の数値を自分のみてみんIDに変える『 22980 -> みてみんID』
-最後の数値を投稿したイラストのiコードに変える『 i359877 -> icode』
■みてみん画像の横幅サイズを変える場合
<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i359877/" width="100" alt="i359877" />
width="100" の数値を変える。
■みてみん画像の縦幅サイズを変える場合
<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i359877/" height="50" alt="i359877" />
height="50" の数値を変える。
■みてみん画像の横縦幅サイズを変える場合
<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i359877/" width="300" height="300" alt="i359877" />
width="300" の数値を変える。
height="300" の数値を変える。
※基本的に横幅だけでいいと思います。
※比率が変わると画像が汚くなります。
■画像にリンクを追加する（リンクボタンを作る）
<a href="https://ncode.syosetu.com/n8832fg/4/"><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i360194/" alt="i360194" /></a>
※href="https://ncode.syosetu.com/n8832fg/" にリンクさせたいURL
※src="https://22980.mitemin.net/userpageimage/viewimage/icode/i360194/" に表示させたい画像
※widthやheightを指定してもいいです。
※alt="i360194" は画像非表示の場合の代替テキスト。なろうだと明示しなくても、みてみんの場合は自動でicodeにしてくれる。
■画像の表示位置を変える
・中央寄せ
<div style="text-align:center;"><a href="https://ncode.syosetu.com/n8832fg/4/"><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i360194/" alt="i360194" /></a></div>
・右寄せ
<div style="text-align:right;"><a href="https://ncode.syosetu.com/n8832fg/4/"><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i360194/" alt="i360194" style="text-align:right;" /></a></div>
※通常は左寄せ
style="text-align:center;" で中央配置
style="text-align:right;" で右寄せ
※中央寄せはcenterタグを使ってもいいけど、HTML5では廃止 styleで指定するほうが無難
■枠を入れてみる
<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i361555/" width="300" alt="i361555" style="border:5px solid #000000;" />
style="border:5px solid #000000;"
の部分を変えると枠の種類が変わります。
最初の5pxの部分は枠幅です
次のsolidが枠の種類です。以下の種類が使えます。
・solid 1本線
・double 2本線
・groove 立体的に窪んだ線
・ridge 立体的に隆起した線
・inset 立体的
・outset 立体的2
・dashed 破線
・dotted 点線
次の#000000は色指定でカラーコードです。詳しくは次回説明します。
・太さ10px, 立体的、色 #f5f5f5
<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i361555/" width="300" alt="i361555" style="border:10px ridge #f5f5f5;" />
border:10px ridge #f5f5f5;
・太さ15px, 破線、色 #E0F8F7
<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i361555/" width="300" alt="i361555" style="border:15px dashed #E0F8F7;" />
border:15px dashed #E0F8F7;
割烹サンプル2が今回のテンプレートです。
