自作を読みまわってもらうための、リンク集を作ってみませんか？（カスタマイズ用テンプレ付き！）

作者：夏まつり＠「私の推しは魔王パパ」発売中

(2023/7/6更新）ユーザー名での検索は他の方の作品がヒットすることがあるので、ユーザーIDで検索するとよい、と教わりました。URLを修正しています。

(2023/7/6更新2）画面サイズが小さな端末で見ると横幅がはみ出ると聞いたので、テーブル構成を修正しました。

(2023/7/6更新3) 感想欄で教えていただいたスタイルシートを反映しました。もう作ったよという方は、まあ前のままでもいいんじゃないかなと思います。

(2023/7/8更新) 7/6の更新をしたならもうdivでよくない？というコメントをいただいたのでタグを修正しました。前のままでも動くので、元のままでも大丈夫です！

　こんにちは。まつりです。皆さんは各作品の下にあるランキングタグ、活用してますか？　当エッセイは、「ランキングタグに自作読み回り用リンク集を作りませんか？」とご提案するものです。

　できるだけ簡単に真似していただけるよう、テンプレート的なものも作ってみました。最後までお付き合いいただけたら嬉しいです。

◆０．はじめに◆

　当エッセイで作り方をご紹介したいリンク集の、完成イメージはこちらです。

　――待って！　バックターンしないで！！

　どこかから「できるかっ」という声が聞こえた気がしますが、イラスト以外は簡単です。本当です。このエッセイはイラストを描かない方向けに書いています。信じて、わたし人狼ゲームとTRPG以外では噓つかない。

　素材を使って、こういったヘッダやボタンはいかがでしょう？

　これは後述のテンプレートで、それぞれ5分程度で作りました。無料で大量の素材を使えるサービスもご紹介しますので、もうちょっと読んでいってくださいね。

◆１．画像の準備◆

　作成する画像は2種類です。

①ヘッダ画像（私は750px×140pxで作成）…1つ

②ボタン画像（私は200px×200pxで作成）…8つ

　何を使ってもいいのですが、Canvaというwebサービスがオススメです。無料でも多くの素材が使えますし、小さな画像だけでなく名刺やチラシなどの印刷データも作ることができます。絵を描かない人にこそ勧めたいサービス。PCでもAndroidでもiPhoneでも使えます。今回の画像は、PCを使わず全てAndroidアプリだけで作りました。

　Canvaで、画像だけ入れ替えれば使えるテンプレートファイルを作りました。このエッセイのランキングタグ部分にリンクを貼るので、よかったらコピーして使ってみてください。Canva上で写真素材を検索し、四角や丸の上に画像を移動するだけで、ご自身のヘッダ・ボタンの出来上がり！

　ボタンの形状を変えたい場合は、「素材」→「フレーム」→好みの形状を検索（種類が多すぎるので検索推奨）→大きさを変えて配置→使いたい写真素材をフレームに乗せる、という手順でやってみてください。

※ヘッダに画像を使う場合はちょっとコツがいるので、テンプレートの3ページ目に書いた説明を読んでみてください。

※ボタンは、自分のボタンを一つだけ作る→ページをコピー→文字だけ変える、というやり方のほうが楽に量産できます

◆２．画像をみてみんにアップロードする◆

　みてみんにログイン→「画像投稿」で、作成した画像を全てアップロードしてください。一気にアップロードすることになるので、「全ての一覧と検索から除外」にチェックを入れることをオススメします。（チェックしないと、表紙の新着画像一覧を埋めてしまうので）

◆３．ランキングタグ用のタグを作る◆

　メモ帳などを開き、「---ココカラ---」の下から「---ココマデ---」の上までをコピペしてください。解説は後で。

---ココカラ---

</div>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

---ココマデ---

　ランキングタグ欄に直接書いてしまうと、改行やスペースが消されてしまってとても見づらくなることがあります。なのでメモ帳等で更新したものを最後にコピペすることをオススメします。動作確認には非表示の活動報告を使ってもよいと思います（ただし、活動報告に上げるときは改行とスペースがそのまま反映されてしまうので、タグ外の改行とスペースは消しましょう）。

◇３．１．全体構成◇

3つのdivタグで構成しています。

◇３．２．ヘッダー部◇

　「<img src="★ヘッダー画像url★" alt="ヘッダ" width="380" />」は画像挿入のためのタグです。「★ヘッダー画像url★」部分を、みてみんにアップロードした画像のURLに差し替えてください。URLは下記に注意。

× みてみんコード（「<innnnnn|nnnnn>」のような形式はだめ）

× みてみん表示ページのURL（「https://36529.mitemin.net/i756206/」のような形式はだめ）

◎ 画像だけが表示されるURL（「https://img1.mitemin.net/6v/sm/hhcve9ryh7eic8nr8xdkdef0ka02_cjw_ku_3w_293n.png」のように、最後が拡張子で終わるURLはOK。PCなら表示ページで画像をクリック、スマホなら「→画像最大化」というリンクがあるはず）

◇３．３．ボタン部分◇

　横4列×縦2行のボタン部分は、2つのタグで構成されています。構造を大ざっぱに言うなら「<a><img></a>」です。aタグの中にimgタグが挟まっています。

・<a href="リンク先のURL"></a>:タグの中の要素をクリックすると、リンク先のURLへ飛ぶよ

・<img src="画像URL">:URLの画像を表示するよ

　と、いうことを言っているので、リンク先のURLと、画像のURLをそれぞれ埋めていきます。リンク先のURLについての解説は下記のエッセイを読みましょう。

【作者向け】ランキングタグの勧め【サンプル有り】

https://ncode.syosetu.com/n1010hv/

　「<a href="https://～"></a>」の部分は上記のエッセイで詳しく解説されていますので割愛。読むのが面倒な方は、「★ご自身のユーザーID★」の部分をご自身のユーザーIDで置換してください。例えば私なら「2079213」に置換します。画像のURLは、ヘッダー部と同じように取得してください。

◇３．４．フッター部分◇

　「<div style="height:5px;max-width:410px;background-color:★フッターのカラーコードまたはwebセーフカラー名★;margin:0 auto;"> </div>」の、「★フッターのカラーコードまたはwebセーフカラー名★」を好きな色に置換してください。ヘッダーで使った色でもいいし、「web 色見本」などで検索した結果から選んでもいいと思います。私は「#283152」を指定しています。

　フッターにも画像を使いたい！という方は、ヘッダーの<div>～</div>をコピペして置き換えてみてください。

◆４．おわりに◆

　解説は以上です。では、ランキングタグの入力欄にコピペして、動作確認してみてください。少しでもお役に立てましたら嬉しいです。

　活動報告では改行がそのまま反映されてしまうので、活動報告に貼るときは改行を消してください。

◆５．Q&A◆

Q. なんでか、うまくいかないよ～！

A. 感想かメッセージかTwitterで話しかけてください。すぐに返せるかはわからないけど、見てみますね～。図解しやすいぶん、Twitterがいいかも。FF外からでも気軽にどうぞ。

Q. スマホでもちゃんと見える？

A. 表示可能な横幅が端末によって違うんですよね。小さな端末で見るとこんな感じになります↓