6/10

参加者さまが見やすく、ストレスのない活動報告の作り方【追記あり】

企画が始まったなら、活動報告で企画作品の紹介などをすると思います。

その時、ただ紹介するよりも作品にリンクが貼ってあると、読者としては助かりますよね。

本作は一応、初心者さん向けのエッセイですので、リンクの貼り方なども書いておきます。

★リンクの貼り方

例（「冬のあしあと」企画の作品検索画面へのリンク）

注）リンクだけでなく、文字を太く（<b>）、大きく（<div style="font-size:17px;">）カラーに（color:#ff4d00;）もしています。

<b><a href="https://yomou.syosetu.com/search.php?word=%E3%80%8C%E5%86%AC%E3%81%AE%E3%81%82%E3%81%97%E3%81%82%E3%81%A8%E3%80%8D%E4%BC%81%E7%94%BB&notword=&genre=&type=&mintime=&maxtime=&minlen=&maxlen=&min_globalpoint=&max_globalpoint=&minlastup=&maxlastup=&minfirstup=&maxfirstup=&order=new" style="font-size:17px;color:#ff4d00;">「冬のあしあと」企画</a></b>

このURLは、小説を読もう！で、検索ワードを入力して検索。

出てきた結果の画面、一番上の小窓の中にある、https://yomou.syosetu.com/～　というのがそうです。

※追記

上記のリンクですが、&notwordから後は不要だと教えて頂きました。

notword=

genre=

order=new

などが、ジャンルや検索条件にあたります。選択/入力してない条件は消しても同じです。

order=new

検索結果の並び替え：

だけ選択してますが、これもなくても同じです。

あってもなくても同じですが、あちこちにコピペする時に短くなります。

同様にgoogleだとq= 以外は不要です。

↓ということで、不要な部分を省いたのがこちら。↓↓

<b><a href="https://yomou.syosetu.com/search.php?word=%E3%80%8C%E5%86%AC%E3%81%AE%E3%81%82%E3%81%97%E3%81%82%E3%81%A8%E3%80%8D%E4%BC%81%E7%94%BB" style="font-size:17px;color:#ff4d00;">「冬のあしあと」企画</a></div></b>

さらに、

%ナントカでなく　文字そのままでもOK。

正式には%なのですが、ブラウザ（Edge、ChromeやSafari)が自動で直してくれます。

↓こんな感じ。

<b><a href="https://yomou.syosetu.com/search.php?word=「冬のあしあと」企画" style="font-size:17px;color:#ff4d00;">「冬のあしあと」企画作品一覧</a></div></b>

とてもスッキリしました。ご指摘、ありがとうございました！！

※追記終了

★HTML文を活動報告にそのまま表示したいとき。

<が＜とみなされる。>は＞

活動報告に<a href="URL">文字列</a>と表示したいと思っても、命令文が実行されてしまい、そのまま表示できません。

<>で囲まれたものは、<>の中に書かれた命令を実行してしまいます。

参加者さまに、企画作品へ飛ぶリンクの命令文を、コピーして活動報告などに貼り付けて貰いたい時、そのまま表示したいですよね。

そういう時が特殊文字です。

<>の、<は、<

<>の、>は、>

という風に置き換えれば、命令文じゃないよ、という意味になり、<>で囲まれた文字を表示できるのです。

例

　↓↓

これで、<a href="URL">文字列</a>の命令文を活動報告にそのまま表示できます。

★バナーなど、画像の貼り方

<i〇〇〇〇〇〇|□□□□□>

みてみんのURL

https://□□□□□.mitemin.net/i〇〇〇〇〇〇/

同じ記号（〇や□）に当てはめたらいいだけです。

これが一番簡単な貼り方ですね。

みてみんの画像がそのまま貼り付けられます。

ただ、活動報告の場合、バナーをクリックしたら検索画面に飛ばしたいですよね。

その場合は、<img src=""/>を使います。

https://□□□□□.mitemin.net/i〇〇〇〇〇〇/　だった場合、

これで画像が表示されます。

これに、リンクを貼ります。

width="300"の部分の数字を変えると画像の大きさが変わります。

他にも、見やすくするためのHTMLタグを書いておきますね。

★企画名などを太字にしたい時

★文字のサイズを変えたい時

数字を変えると文字の大きさが変わります。

★応用

<b><div style="font-size:17px;">太字でサイズ１７</div></b>

★文字の色

#ff4d00の、数字やアルファベットを変えると色が変わります。

色の部分に、「red」や「blue」「Pink」などを入れてもいいです。

★応用

<b><div style="font-size:17px;font-;color:#ff4d00;">カラーの太字でサイズ１７</div></font></b>

ただし、文字にリンクを貼る場合は

<b><a href="https://yomou.syosetu.com/search.php?word=「冬のあしあと」企画" style="font-size:17px;color:#ff4d00;">「冬のあしあと」企画作品一覧</a></b>

このように、divのタグでカラーや文字の大きさの指定をするのではなく、a href=のタグの中にstyle=を組み込んでください。

これくらいかな。

これらのHTMLタグを使い、見やすく利用しやすい活動報告にすると、参加者さまに楽しんでいただきやすいですよ。

★ランキングタグ

ランキングタグって何か知ってますか？

知ってるよ、という人は多いと思いますが、これは初心者さん向けのエッセイですので、説明しておきますね。

詳しくは運営さまのマニュアルにあります。

https://syosetu.com/man/ranktag/

ランキングタグとは、その名の通りランキングタグや、ウェブリングやご自分のサイトへのリンクなど各種HTMLタグを設置できます。

・設置出来る場所

作品の目次ページ下部

各小説ページ下部

ここに「冬のあしあと」企画の作品検索画面へのリンクを貼ると、読者は簡単に他の企画作品を見つけて読むことが出来ます。

どうやって設置するの？

投稿済み小説の管理トップの、『ランキングタグの設定』をクリック。

入力フォームにタグを入れて完了です。

今回の「冬のあしあと」企画の場合は、下記のタグですね。

ひと手間かかりますが、合った方が便利ですよ。

リンクや文字の強調、ランキングタグなど。

なくてもいいけれど、あれば便利なものは極力、設置しましょう。