小説家になろうの活動報告にみてみん及び外部サイト(※pixivや個人サイト等)の画像を張り付ける方法
この記事は活動報告、またレビューエッセイでも取り上げたのですが未だ質問がくるのでこちらで改めてまとめていこうと思います。
登録したてでメッセージ機能がまだ使えない方にも感想欄で質問ができて便利なように短編形式で発表しています。
【前提】
小説家になろうにはタグ制限が有って使えないURLタグ、独自タグが有ります。
普通のタグを入れてもあとでソースを見てみたら変更されていたりして知り合いの作者さんが良く困っている&質問掲示板でもこんなニッチな話はないらしく、いまだ運営さんではないはずの自分にタグ関係の質問が来ます。
(※質問掲示板を知らないユーザーさんは別)
なので、改めてまとめちゃいます!
【いきなり結論】
【外部サイト、またはみてみんの画像をあなたの活動報告において小説のリンク先バナーにするタグ】
【改行を必ず入れてください】
<a href="【飛ばしたい小説URL】">
<img src="【画像URL。末尾が .jpg .gif .png など画像を著す拡張子が末尾にあるアドレス】">
</a>
【必ず改行してください。改行の理由は後述】
※【】は説明用に括っているだけですので省いてください。
実例:下駄の画像をクリックすると『無笑』に誘導されるタグ
<a href="http://ncode.syosetu.com/n2693bk/">
<img src="https://img1.mitemin.net/gh/k2/lb8j4fmglor61vc657c0c397f3c6_8o0_100_mg_5elf.jpg" >
</a>
これで画像がみてみん以外に掲載されていても活動報告に貼りつけることができます。
(※筆者は画像ファイルそのものを指定できなかったと思い込んでいましたので運営さんに確認しました。仕様ですので大丈夫です)
また、特に画像サイズ調整が必要でない限りは自動調整に任せたほうが良いのですが画像サイズを指定したい場合は。
<a href="【飛ばしたい小説URL】">
<img src="【画像URL】" height="【高さ指定ですが省いて問題なし】">
</a>
になります。
下駄の画像で例を挙げるとこうなります。
<a href="http://ncode.syosetu.com/n2693bk/">
<img src="https://img1.mitemin.net/gh/k2/lb8j4fmglor61vc657c0c397f3c6_8o0_100_mg_5elf.jpg" height="400">
</a>
PCではあまり変わりませんがまあおいおい解説していきましょう。
【あなたが『小説家になろう』のヒナプロジェクト提携サイト『みてみん』に登録しているとき、活動報告に画像だけを掲載したい場合】
これはめっちゃ簡単です。未登録の方は『みてみん』に登録しておきましょう。
みてみんのアカウントは小説家になろうアカウントとは別枠になるので何らかの理由で『小説家になろう』アカウントを削除した(された?!)としても『みてみん』のアカウントは残ります。ぜひ登録しておきましょう。みてみんの詳しい使い方はみてみんのマニュアルを見てください。みてみんはどこにあるのというご質問については自分のiPhoneでは小説家になろうのトップページ一番下にリンクが貼っているようです。
【小説や活動報告の本文に画像を挿入する場合】
例文に使う下駄画像だと
<【iコード】|【みてみんアカウントNo.】>(< >は< >に変えてください)
こう書いておくと勝手にサイズ変換してくれてめっちゃ簡単です。
画像を挿入する場合本文に組み込まず改行しておきましょう。
綺麗に見えるので基本こちらをオススメします。
つまり必要なサイト内タグのテンプレートは
【改行、可能なら空行】
<【iコード】|【みてみんアカウントNo.】>(< >は< >に変えてください)
【改行、可能なら空行】
ですね。
ではこの6414とかi87225とは何か。iコード?みてみんアカウントNo.?
この辺も解説していきましょう。
まず掲載したい画像を探しましょうか。自分で投稿したり他の方が投稿しあなたにファンアートとして貸してくれた画像を探すことになります。
http://6414.mitemin.net/i87225/
みてみんのアドレスがこーなっている画像があるとします。下駄ですね。
実際にiPhoneの画面で見るとこうなります。
このURLの『6414』が鴉野のみてみんアカウントを指します。この文章の中ではみてみんアカウントNo.とします。そして『i87225』いわゆるiコードが個別の絵を指します。画像を表示すると下駄の画像です。皆さんは貼りつけたい絵のみてみんアカウントNo.とiコードをそれぞれ調べて貼りつける事となります。
これをわざわざタグを使って活動報告に貼ってみるとこのような魔法の呪文になります。
<img src="http://6414.mitemin.net/userpageimage/viewimage/icode/i87225/" height="400" width="15" alt="i87225" />
何でしょうかコレ? おいおい解説するとします。
重要なのはこのヤヤコシイ魔法の呪文のうち、iコードとみてみんのアカウントNo,さえ知っていれば
<i87225|6414>(※解説用 <>は<>)
と打つだけで小説も活動報告も画像が表示されるということです。また下駄で失礼。
ではiコードとみてみんのアカウント番号を見てみましょう。
みてみんのアドレスは http://6414.mitemin.net/i87225/
構造を解くと
http://【みてみんのアカウント番号】.mitemin.net/【ⅰコード】/
となります。
理解できれば他の方の投稿した画像もあなたの小説や活動報告に貼りつけることが可能になりますが無断使用はもちろんやってはいけません。
とりあえず、この下駄画像においてはどこにアカウント番号があってどこにⅰコードがあるか理解できればシンプルなサイト内専用タグで小説も活動報告も画像が貼りつけられることを解説しました。
さて。みてみんのアドレスは http://6414.mitemin.net/i87225/ なのに
実際に貼りつけるタグに用いたURLは http://6414.mitemin.net/userpageimage/viewimage/icode/i87225/ ですよね。
多くの方がここで躓きます。
例えば前述した画像をクリックすると小説に飛ぶリンクをみてみん画像ページのURLで作ってみましょう。
<a href="http://ncode.syosetu.com/n2693bk/">
<img src=http://6414.mitemin.net/i87225/" height="400">
</a>
はい、アップロードするとタグそのものを書き換えられてしまうはずです。もちろん画像は表示されなくなります。
結論を述べるとみてみんの画像ページは活動報告に貼れないらしい。
なので、このページの下にある
PCだとこうなるようです。
→画像情報ページへ
最大化 | アクセス解析 | ユーザ情報
iPhoneだと画像通りになるようです。この『画像情報ページへ』をクリックして画像情報ぺージに向かい、ここのURLをコピーすることが大事になります。このURLが前述の『URL違うじゃないの』なURLになっています。
画像情報ページの法則。
http://【みてみんアカウントNo.】.mitemin.net/userpageimage/viewimage/icode/【表示したい画像のiコード】/
この『画像情報ぺージのURL』を指定することで初めて活動報告に貼ることが出来るのです。
この画像の下ですね。
繰り言になるがデフォルトのURLである
http://【アカウントNo.】.mitemin.net/【iコード】/
これを活動報告にimgタグで貼ることはできませんので『画像情報ぺージ』のURLを貼るようにしましょう。画像情報ぺージはこうなっています。
例
<img src="http://6414.mitemin.net/userpageimage/viewimage/icode/i87225/" height="500" alt="i87225" />
width="(好きな数字)" height="(好きな数字)"
この二つは画像サイズを指定するタグです。
この二つは標準機能である%による大きさ変更が小説家になろうの活動報告では使えませんでした。(使い方解る方教えてください)
よって、ピクセル表示になります。
基本的に画像の大きさを変える必要はありませんが、活動報告に貼る際、画像サイズによっては調整が利かずに無駄にクソバカでかくなったり縦横に潰れることがあります。
この場合、width="(好きな数字)" や height="(好きな数字)"で横か縦のサイズを指定すれば残りの縦横は勝手に変換してくれる模様です。
指定はピクセル=PCの点々(ドット単位)のみです。
※ALTタグは勝手に挿入されるので始めから記入しています。
では早速実演練習してみましょう。なお、上の下駄画像の著作権は鴉野にあれど活動報告に画像を貼り付けるテストに使用する限りいちいち連絡は不要です。
<img src="http://6414.mitemin.net/userpageimage/viewimage/icode/i87225/" height="100" alt="i87225" />
height="100"にてオリジナルより小さい高さ100を指定したため小さくできます。
縦横を無理やり指定するとつぶれることがある。
<img src="http://6414.mitemin.net/userpageimage/viewimage/icode/i87225/" height="400" width="15" alt="i87225" />
<img src="http://6414.mitemin.net/userpageimage/viewimage/icode/i87225/" height="15" width="400" alt="i87225" />
……無茶しやがって?!
この場合上下調整であるhightタグや幅調整であるwidthを無理矢理変えることで意味不明画像になったわけですね。
元画像は1296*808のサイズです。
適切に1/4サイズにする場合など、個々人で変える場合、元画像のサイズを別窓で開いてサイズ確認。
電卓で調べて端数は切り上げるか切り捨ててください。
<img src="http://6414.mitemin.net/userpageimage/viewimage/icode/i87225/" height="202" width="324" alt="i87225" />
1/4表示。ただし活動報告は異常にデカい画像は足きりされたりリサイズされる。
【ここで重要項目リマインド!】
タグをはって画像を貼ったら改行しておいてください!
その後の記事がタグに巻き込まれて表示できなくなったりする例が報告されています。
つまり
例文1:
<img src="http://6414.mitemin.net/userpageimage/viewimage/icode/i87225/" height="202" width="324" alt="i87225" />1/4表示。ただし活動報告は異常にデカい画像は足きりされたりリサイズされる。
ではなく
例文:
<img src="http://6414.mitemin.net/userpageimage/viewimage/icode/i87225/" height="202" width="324" alt="i87225" />
1/4表示。ただし活動報告は異常にデカい画像は足きりされたりリサイズされる。
例文1だとタグの後に改行がないため巻き込まれて本文が欠損します。
例文2のようにタグの後改行を入れることでと巻き込まれて本文が表示されないことを防げるのです。
(某氏の活動報告時にあった事例)
ではこの記事を検索で見つけた方に、望みの画像を他サイトにおけるバナー広告のように指定リンク先に誘導する場合を解説していきます。
【活動報告内の文字にリンクを貼る場合】
※【】は説明用なので入れないこと。
※『””』二つは内部の【】を指定するものなので小さくて読みにくくても省略しないこと。
<a href="【貼りたいURLを貼る。この場合多くはあなたの小説ですね。このカッコ外にある『""』二つでくくったリンク先に飛びます】">【ここに本文を入れましょう】</a>
これで活動報告の文章にリンク先を設けることができます。
<a href="https://ncode.syosetu.com/n2693bk/">無笑はこちら!</a>
このように書くことで活動報告本文では
無笑はこちら!
と、表示され、『無笑はこちら!』をクリックすることで小説URLに飛びます。
ではここで応用をします。
【みてみんの画像をバナーのようにリンク先にする場合】
例えばファンアートを頂いたらうれしいだけではなく、頂いたファンアートを活動報告にて紹介して、『クリックすれば小説ページへ!』と小説にリンクさせれば今まで小説に興味を持っていなかった方にも興味を持ってもらえることがあるかもしれないですね!
1.まず。飛ばしたいURLを【】に。
<a href="【飛ばしたいURL】">
ですね。
2.次に。画像を置いているみてみんの画像情報ぺージを指定しましょう。
<img src="【画像情報ぺージのURL】" height="202" alt="i87225" />
この場合はサイズ変更を入れています。
高さは好みで変えてください。
<>内部、
height="202"
……の202のところを変えれば自動調節入ります。
2.のコーヒーブレイク
画像情報ぺージの法則を覚えていますか? 画像情報ぺージを貼りたい場合は画像情報ぺージのURLが必要です。すなわち。
<img src="http://【みてみんのユーザー番号】.mitemin.net/userpageimage/viewimage/icode/【みてみんの画像Iコード】/" height="【縦サイズ指定】" alt="【みてみんの画像iコード】" />
を、貼ることで解決ということですね。
3.さらに忘れてはいけないのは
</a>
を最後に必ず入れることです。タグが完結しなくなります。
まとめるとこうなる。以下が完成コピペ。上は解説ですので注意。
【小説家になろうの活動報告においてみてみんに登録した、誰かが登録してくれた別アカウントのファンアートを活動報告のリンクにしたい場合のタグのテンプレート】
↓↓↓
【改行】
<a href="【飛ばしたい小説URL】">
<img src="http://【みてみんのユーザー番号】.mitemin.net/userpageimage/viewimage/icode/【みてみんの画像iコード】/" height="【高さ指定】" alt="【みてみんの画像iコード】" />
</a>
【改行】
これでジャンプする。
最初と最後の<a></a>で挟んである指定URLへ誘導し、なおかつ表示したい画像を活動報告に貼りつけるタグという意味になる(※厳密に述べるとだいぶ変わりますが、まぁHTMLタグがわからない方向けの記事なので……)
【上記記事が面倒な方、タグを覚えられない方のために】
タグとか覚えられないとか、コピペで改変するのが面倒だという方向け。
画像ページを開きます。
iPhoneだと画像通りですが、PCだと
投稿日時
投稿者
プロフィール画像
このユーザーのマイページへ
お気に入りユーザ登録 投稿者コメント
→画像情報ページへ
最大化(Full Version) | アクセス解析(Access) | ユーザ情報
ツイッターでつぶやく メッセージ送信
▽この画像のURL (リンクについて) ▽
▽この画像のトラックバックURL▽ (トラックバックについて)
って画面で、『画像情報ページへ』って記述がありますが、ここをクリックしてください。そうすると個々の画像の画像情報ページに飛べます。
この画像情報ページの一番下の、『以下のURLを貼り付けることで、ブログや自身のホームページで画像を共有することができます。』で示されているタグを貼れば活動報告に表示できるはずです。
この一本歯下駄画像だと
<a href="http://6414.mitemin.net/i87225/" target="_blank"><img src="http://6414.mitemin.net/userpageimage/viewimageicon/icode/i87225/" alt="一本刃下駄"></a>
になっています。
難しい人はこっちで試してみてくださいね。
ただし、このまま活動報告に貼った場合、異常に小さく表示されることがあります。
【外部サイトの画像を活動報告に貼りつける、またリンクURLを指定する方法の詳細な解説】
多分今回のキモである記事です。
インターネット上に存在する貼りつけたい画像を右クリックして『画像のURLをコピー』してください。
みてみん、pi●ivなど各サイト共通です。
この場合は画像そのもの、最後に画像ファイル形式名があるほう、画像ページの画像をクリックして出てくるpng画像等を直接出してこちらにURLを指定するわけです。
【改行】
<a href="【飛ばしたい小説URL】">
<img src="【画像URL。みてみんでなくてもOK。『.jpg』『.png』など画像拡張子で判断できます】" height="【高さ指定】" 【altタグは不要のようです】>
</a>
【改行】
つまりこの場合、サイトのURLではなく画像そのものを指定しているため、外部サイトの画像も使えるということになります。なお、繰り言になりますがファンアートといえども著作権があります。ちゃんと画像作者さんに確認をとってください。また、自分と関係ない方のイラストを勝手に使ってはいけないのは今更述べるまでもありませんね。
余談。
<a href=""></a>
↑頻繁に活動報告を書く方はこちらを辞書登録しておくと良いかもです。自分は『あh』と押して変換すると表示されるように登録しています。
重要。
リンク先URLは自作小説や小説家になろうの書評ページでないページなら、Twitter(X)の投稿やnoteなどブログサービスにしておきましょう。特にAmazonなどの外部サイト商品ページに直接貼り付けていると運営さんにお叱りを受けるようです。
HTMLに不慣れな方でも同じなろうユーザーである夕月 悠里さん開発の割烹エディターを用いればさらに美しくわかりやすくあなたの活動報告を彩ることができるはずです。
割烹エディター
https://k-editor.com/