画像を使うのはそんなに難しくなくて、なろうの割烹は意外となんでもできます。そういえば画像はみてみん以外からも表示できることを知らない人もいるのでは？
簡単にできるのですが、最初は慣れが必要です。初見さんは代替失敗する。
大体みてみんのURL規則のせい。
あと、意外と知らない仕様もあると思うので、ちょっとご紹介しておきます。
ではまず画像タグの基本から行きましょう。
<img src="表示したい画像URL" />
これが基本です。
閉じタグは不要です。
これにalt="画像が表示されない時に表示する文字"を指定することもできます。
altの役割としては、視覚障がい者のための読み上げ用の設定、またはクローラーのためのものです。画像が認識できない人のための設定です。
きちんとしたWebサイトでは、操作ボタンを画像にしている場合も多いので、しっかり設定する必要があります。何のボタンか識別できないと操作すらできなくなってしまうので。
ただ、割烹ではそこまで特に気にすることはないかな。そこに画像があることを示す程度でよいのではと思います。
ちなみにですが、割烹での画像URLはみてみん以外でも有効です。
小説の場合はみてみんだけですが、割烹は実はみてみん以外でも使えるのです。
小説にも使いたい場合もあるので、管理面、手間を考えるとみてみんを使うのが一番だと思いますが、みてみんの制限にかかる場合は、他のサーバーにアップロードして使うのも一つの手ですね。
みてみんの制限としては、
・JPEG,PNG,GIF形式の画像に対応
・最大アップロード容量:3MBまで
というものがあります。
これ以外の形式、容量の画像を表示させたい場合は外部を使うのがいいでしょう。
……まぁ、通常はこれで十分でしょうね。3MBを超える画像をアップロードしてもあんまり意味がないような。高画質のGIFアニメを使いたいときくらいかも。
拡張子はwebpなどの次世代フォーマット画像を入れたい場合にいいのかもしれませんね。
通常の使い方は以上です。
- - - ✂切り取り✂ - - -
では次はみてみんを使って、どういう風に画像を入れるか説明していきますね。
・『みてみん』（小説家になろうグループサイト）
https://mitemin.net/
まずはみてみんにユーザー登録してください。
そのあとユーザーページの画像投稿から挿絵用の画像を投稿してください。
投稿した画像をクリックして画像のURLを見てください。
ここのURLの数値が画像を入れるときに必要なので確認するようにしてください。
みてみんを使った場合、3種類の画像の入れ方ができます。
1.なろう小説と同じやり方。
先ほど確認したURLの数値を以下の画像のように小説の本文のように打ち込んでください。
そうすると小説の場合と同じように画像が出てきます。
小説で使った画像を表示させる場合にはとても楽な方法です。
なお打ち込んだものは、
<img src="//＜みてみんユーザーID＞.mitemin.net/userpageimage/viewimagebig/icode/＜ICode＞/" alt="挿絵(By みてみん)" border="0">
に変換されます。
なお、始めの赤字はみてみんのユーザーIDで、あとのiから始まる数値はicodeと呼ばれるイラストID番号です。Ncodeとおなじようなものです。
これで投稿すれば、挿絵が表示されます。数値が正しく入力されなかったり、全角だったりすると表示されませんので注意してください。
2.icodeとみてみんIDを入力するパターン
<img src="https://＜みてみんユーザーID＞.mitemin.net/userpageimage/viewimage/icode/＜ICode＞/" />
となります。srcのところの数値を指定するパターンです。
これでも表示させることができます。
3.直リンクを入力する
みてみんの画像表示ページへ行ってURLをコピーしてください。
これを打ち込むと表示されます。
<img src="https://img1.mitemin.net/b0/ip/61p24a424zp381hdcizpjmasiw8o_19wc_g4_bi_keg.png" />
みてみんを使う場合は同じ画像を表示するのにも3パターンのやり方が存在しますので、普通に使う分には自分が使いやすいものだけおぼえておくとよいでしょう。
1.なろう小説と同じやり方。
2.icodeとみてみんIDを入力するパターン
3.直リンクを入力する
1のやり方はなろう側で自動変換されるので、styleを適用したいときはお勧めしません。
特にそのまま載せるだけなら問題ないと思います。
3はリンクが長くなりがちなのと、どの画像を使ったかが把握できなくなる恐れがあります。
もしも魔改造する場合は2のやり方を覚えましょう。
管理性、拡張性を考えると2のやり方は必須です。
- - - ✂切り取り✂ - - -
さて、ここからが皆さんお待ちかねの魔改造です。
画像にもスタイルを適用することができます。
直接適用することもできますが、divで囲って、そちらに適用することもできます。
中央寄せなどする場合は、ブロックで囲うのがいいので、こちらに合わせるのが良いかと。
では、imgにかかっているスタイルから。
PC版：
img {
vertical-align: bottom;
border-width: 0px;
border-style: none;
border: 0;
max-width: 100%;
}
スマホ版
img {
border-width: 0px;
border-style: none;
max-width: 100%;
height: auto;
}
そんなに多くのスタイルはかかってないですし、ほぼ同じですね。
とりあえず枠線をなくして、幅は広がらないようにしているようです。
- - - ✂切り取り✂ - - -
大きさを変える場合はwidth,heightを指定します。
<img src="表示したい画像URL" style="width:300px;height:400px;" />
もしくはwidth属性とheight属性を指定
<img src="表示したい画像URL" width="300" height="400" />
と書けます。単位はpxです。
どちらでもいいのですが、他と合わせるのであればStyleの方がいいでしょう。
昔は width="300" height="400" の書き方はあまり推奨されていなかったのですが、画像領域の確保のために推奨されたりと時代によって変わります。
今後も推奨されたり、非推奨になったりします。ちょうど今はどちらでもよい雰囲気となっています。
なお、縦横比を維持する場合はheightの指定はいりません。widthだけでOKです。比率を変えたい場合は指定しましょう。
<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i489349/" style="width:100px;" />
<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i489349/" style="width:200px;" />
<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i489349/" width="300" />
注意が必要なのは、％が使えないことです。なんでか知らないですが、なろうの画像のサイズ指定では％が無効になります。（プロパティが削除されます）
PC版とスマホ版では画面サイズが異なるので、できたら％指定をしたいのですが無理なのでピクセルで指定するか、外側のブロックで制御することになります。
<div style="width:50%;"><img src="表示したい画像URL" /></div>
みたいにすると、%でも指定できるようになります。
ただ、画像サイズがボックスよりも小さい場合は指定サイズより小さくなります。
できたら580くらいのサイズで画像を作って指定できるようにするといいですね。
- - - ✂切り取り✂ - - -
枠を付けるにはおなじみのborderを指定します。
<img src="表示したい画像URL" style="border:solid;" />
外側のブロックに指定しても構いません。
<div style="border:solid;"><img src="表示したい画像URL" /></div>
どちらでも好きなように。
imgにはborder属性が用意されているので、そちらで指定することも可能ですが、HTML5では非推奨なのでやめましょう。styleのborderを使ってください。
<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i489349/" alt="i489349" style="border:solid;" />
またborderの幅を広げ、種類を変えると額縁っぽくなります。
<img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i489349/" alt="i489349" style="border:15px inset #db8449;" />
- - - ✂切り取り✂ - - -
次はカード化してみましょう。
カードというのはこんな感じのものです。
Twitterなんかでよく見かけると思います。
画像とテキストを使うことで効果的に表示できるメリットがあります。
宣伝効果も高いので、色々な場所で使われています。
基本的な構造としては
<div class="wrapper">
<img>
<div class="text">
<h3><h3>
<p></p>
</div>
</div>
こんな感じでしょうか。
外側のブロック、と、中に画像を入れ、その下にタイトル、段落を入れる感じ。
ただ、なろうCSSでは余計な装飾がつくのでdivとspanで代用します。
<div style="border:1px solid #a1a1a1;background:#ffffff;"><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i463340/" alt="i" width="700" /><div style="margin:0;padding:8px;font-size:14px;line-height:1.4;color:#a1a1a1"><span style="font-weight:bold;color:#222222;">タイトル</span>
本文</div></div>
こんな感じですね。
imgにwidth="700"を指定しているのは、画像サイズによって余白が生じるのを防ぐためです。
画面幅よりも画像サイズが小さい場合は隙間が空いて残念なことになるので。
spanで太字にしてタイトルっぽくしています。文字サイズをちょいと上げればもう少しタイトルっぽくなるかな。
外側のdiv幅を小さくすると小型カードになります。
自分なりのカードデザインを作ってみるのもいいでしょう。
- - - ✂切り取り✂ - - -
リンクを付ける場合はaタグで囲います。
<a href="リンクしたいurl"><img src="表示したい画像URL" /></a>
この辺りはリンクのところで説明した通りです。
カードの応用としてブロック化して全体にリンクをかけることも可能です。
<div style="margin:0;padding:0;border:1px solid #a1a1a1;background:#ffffff;"><a class="more" href="https://k-editor.com/editor/card/" style="font-size:0;line-height:0;"><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i463340/" alt="i" width="700px" /></a><ul class="nav" style="margin:0;padding:0;"><li style="border:none;margin:0;padding:0;"><a class="more" href="https://k-editor.com/editor/card/" style="background:#ffffff;margin:0;padding:8px;font-size:14px;line-height:1.4;color:#a1a1a1"><span style="font-weight:bold;color:#222222;">タイトル</span>
ここに本文を入力</a></li></ul></div>
うわぁ……。
ひどいですね。（他人事のように）
まぁ、気になる人は解読してみてください。原理的にはリンクのブロックのところで説明した通りです。あれを応用すればこのようなコードになるのです……。
魔改造するときはこういう感じになるのです（遠い目）
- - - ✂切り取り✂ - - -
ということで画像でした。
魔改造するのであれば、カードデザインを凝るといいと思います。
色々なWebサイトを眺めていると色々なカードデザインがあることに気付くと思うのでそれを参考に自分なりのテンプレートを作るといいかもしれません。
画像を使うと華やかになるので、宣伝効果も上がりますよ。
思ったよりも色々とできそうですね。使い勝手が良いのは580px程度で作っておいて、外側のdivでサイズ調整などをするやり方。imgに%が指定できないのはちょっと辛い。
なろうの割烹だけで考えるとみてみんにこだわる必要はないです。
3MB制限もなくなりますし、他の拡張子も利用可能です。
とはいえ、そんな面倒なことをしてまで表示する人はなかなかいないかも。
