(*╹▽╹*)＜宣伝ボタンですってお兄ちゃん！
宣伝のための拡張を適当に書きなぐっていきます。
宣伝ボタンを作りましょう。
■基本
単純にクリックするだけならアンカーリンクだけで十分です。
<a href="URL">表示したい文字</a>
URLのところに飛ばしたい先のURLを入力してください。
なお、ランキングタグではtarget="_blank"が使用できます。
これを指定すると別ウインドウでリンク先を開くことができます。
<a href="URL" target="_blank">表示したい文字</a>
んー、ただ、今はtarget="_blank"単体で使うのは非推奨なんですよね……。
noopener、noreffererとセットで使うのが最近の常識ですけど、なろうだとこれを入れられないんですよね……。そのうち改良されるのでしょうか？ というか改良しないとやばいと思います。
まぁ、今のところあんまりtarget="_blank"を使わないのが無難なところです。あと、target="_blank"がついたランキングタグのリンクはなるべくクリックしない方がいいですよ。
飛んだあとは速攻で元のページを閉じてください。
理由を知りたい人は【 target= _blank 】で検索してみてください。
■スタイルの変更
<a href="URL" style="">リンク</a>
style=""で色々と変更していきます。
ただ、通常のリンクはインライン要素なので二段になると見栄えが悪いです。
あんまり拡張はできない感じ。装飾の仕方は割烹と同じです。
例：
<a href="https://syosetu.com/">リンク</a>
<a href="https://syosetu.com/" style="font-size:24px">大きいリンク</a>
<a href="https://syosetu.com/" style="background:#000;">背景変更リンク</a>
<a href="https://syosetu.com/" style="background:#000;">二段の<br />リンク</a>
■フォームを使ったボタン。
それを解消するためにフォームを使ったボタンを提案します。
ボタンタグなので普通のリンクを貼るよりもボタンっぽくなります。
転移先はformタグのactionにリンク先を入れておきましょう
これが基本です
<form action="URL"><button>選んだら押す！</button></form>
aのhref=のところがaction=に変わっただけですね。それほど変わりません。
デフォルトでもうボタンぽくなります。
ボタンはインラインブロックなのでカスタマイズが容易です。色々と試してみましょう。
いくつかボタンっぽい感じで作ってみましたのでご参照あれ。
こんな感じかな。
<button style="font-size:16px;color:#ffffff;background:#1cb7cd;border:2px solid #1cb7cd;padding:0.5em;width:120px;text-align:center;">なろう風</button>
<button style="font-size:16px;color:#1cb7cd;background:#ffffff;border:2px solid #1cb7cd;padding:0.5em;width:120px;text-align:center;">なろう風2</button>
<button style="font-size:16px;color:#f4c28d;background:#fffaf4;border:2px solid #f4c28d;padding:0.5em;width:120px;text-align:center;">なろう風3</button>
<button style="font-size:16px;color:#ffffff;background:#4baae0;border:2px solid #0990cc;padding:0.5em;width:120px;text-align:center;">カクヨム風</button>
<button style="font-size:16px;color:#ffffff;background:#f19703;border:2px solid #de8b00;padding:0.5em;width:120px;text-align:center;">アルファ風</button>
<button style="font-size:16px;color:#ffffff;background:#00a0e9;border:2px solid #00a0e9;padding:0.5em;width:120px;text-align:center;">エブリスタ風</button>
<button style="font-size:16px;color:#ffffff;background:#2cb696;border:2px solid #2cb696;padding:0.5em;width:120px;text-align:center;">note風</button>
<button style="font-size:16px;color:#ffffff;background:#0cbf97;border:2px solid #0cbf97;padding:0.5em;width:120px;text-align:center;">ノベプラ風</button>
<button style="font-size:16px;color:#ffffff;background:#b3a98c;border:2px solid #b3a98c;padding:0.5em;width:120px;text-align:center;">ハーメルン風</button>
<button style="font-size:16px;color:#ffffff;background:#f891c8;border:2px solid #f891c8;padding:0.5em;width:120px;text-align:center;">野いちご風</button>
気に入ったボタンにformをくっつけて試してみてください。
ということで宣伝ボタンはこんなところです。
ランキングタグのところにサンプル置いてあるのでどんな感じになるのか見てね。
あとは画像にリンクを付けるやつもありますね。
まぁそのあたりはほぼ活動報告と同じなので省略。
画像タグも同じでいいですよ。
あ、できるだけimgにwidthを指定するのがいいと思います。まぁ使ってれば変わるかなぁと思います。
