夢小説サイトを運営しよう。２

こんにちは！
かれこれ前回の記事を書いてから、なんか一年くらいが経とうとしています。驚きですね。
時の流れというものは大変早いですわ。
(前回の記事↓)

決して文字打つのが面倒だったとか、考えるのが面倒だったとか、そういうわけではあります。
シンプルに面倒すぎた。書くことも多いし。
地獄のような飽き性の性格がすべての問題だったり……。時間がないと言い訳してみたり。ちなみにサイトも数か月放置してます ^^) _旦~~　やれ。

そんなこんなで、この先あと何か月間放置するかも分からない間に、学んだことをすべて完璧きれいさっぱり忘れる可能性もございますし……、自分というものは自分であっても完全に信用してはならないものだと思っております。ということで、今後の自分のためにも書いていこうかなと思っております。

とりあえず、やっていきましょうかね。
その前に一つだけご忠告です。
私はナノ様でサイトを運営していますので、説明はナノ様のHTMLコードのみになります。
勉強したといっても手探りで素人がネットだけで得た知識ですので、私がこれから書いていくことへの責任的なものとか、正しさとか(過度な修正が必要な場合は教えてください)、そういうの一切保証しないですし、これがどうしてこれになるとか専門的な説明はできないので悪しからず。
例の写真もちょこちょこ載せてみようと思います。

　

〇HTMLコードとは

ん～……。まずどこから説明していくべきなんでしょうかね。
ひとまず大事だなと思うものは、序盤から使っていく回数が多い＆高頻度で出没回数の多いURL貼り付けるやつですね。と、いうことで下に書いていきたいと思います。
(↑何この距離感↓)　　

〇リンクの貼り方

つまり、メールフォームやインフォメーション(etc…)、短編でも中編でも長編でも、話とかに飛ぶためのリンクを張り付ける必要がありますよね。
そのリンクに飛ぶためのコードです。
もうこれは出没頻度が大学受験☆☆☆☆☆くらいなんで、覚えちゃってくださいね。

<a href="リンク">表示させたい文字</a>

これです。リンクはリンクを。http:～とかいうやつですね。
表示させたい文字っていうのは、長編小説の題名だとか、メールフォームとか。なんかそういうやつです。ポチって押すときに見える文字ですね。これないと表示されないので気を付けてください。
あと、末を</a>これで閉めることが大事ですね。これないと表示されないので気を付けてください。ていうか出てくるんですよ他のところでもね、末の部分って。
</←これ！これがマジ大事！
/ でコードを閉じるって考えてください。閉じるというか終了というか。aはコードの始まりが<a href の a で始まってますよね。その a　ですよ。
これで分かったわね？
これは一応、コードを打ち終わったらちゃんと反応するか自分で確かめてみてくださいね。

〇アンダーラインの入れ方

こんなもんは簡単ですよ。
<u>アンダーラインいれたいやつ</u>です。
簡単すぎて泣けるねぇ！こりゃ！！書く意味もねえ！

例えばリンク(を貼った字に対して)にアンダーラインいれたいとかだったら、
<u><a href="http:~~~~">あいうえお</a></u> ね！
応用編じゃないですか。

〇文字とかを真ん中に置きたいなって時

これは<center>センターに置きたい文字</center> ですね。
基本的にコードで文字(というか言葉)を包むと考えてください。囲うというか。
センターに置いてアンダーラインいれたいなとかだったら、
<center><u><a href="http:~~~~">aiueo</a></u></center> って感じですかね。応用の応用じゃないですか。

コードを閉じていく順も気を付けてください。
一番端のものを一番最後に閉じるという感じで、中の方から順に片付けていきましょう。

……もう書くことないよな。

〇ルビのつけ方

あ…！！！ありました。思い出しましたよ〜。
最近知ったルビを付けるコードなんですが、とても素晴らしいコードです。これは一応調べるとちゃんと上げてくれる人がいらっしゃるんですが、自分が自分のために分かりやすくまとめておくことにします。うん。言い訳。言うなればコピペのようなもの。カス。

まず例として、『夢小説』という言葉に『ドリームノベル』というルビを振りたいとします。(なんだこの例え)
その場合は下記のようなコードを打ち込むことになります。↓↓↓

<ruby><rb>夢小説</rb><rp>(</rp><rt>ドリームノベル</rt><rp>)</rp></ruby>

この際に（）で示される部分があるわけですが、実はこの（）はルビが正しく機能しない機種のために存在しているようです。
というのも、機種によってはコードを使っても示されないものもあるんですね。(というかブラウザかな！！)
そんな機種のために、（）がつくことにより、『夢小説』という言葉の上に『ドリームノベル』というルビがつくことはありませんが、その横に『夢小説(ドリームノベル)』という風に表記されるらしいのです(らしいのです)。自分の機種はルビでちゃんと見れるので確認はしていません。カス。

確認してみました。こんな感じになります↑。じわるな。

○文字に棒線を入れて、消してる風にしたい時

自分で書いてて文章の意味が分からなくて笑いました。
noteで表現することが難しいので、画像を用いてみたいと思います。

↑こういうやつです(画像の下部分)。
これのやり方ですが、

<s>あいうえお</s>
または、
<strike>あいうえお</strike>

となります。
どちらでもいいみたいです。どちらでもいいと思います。

○右寄せ、左寄せ

完璧書く順番を間違いましたが、文字を右に寄せたり、左に寄せたりする場合のコードです。

真ん中に置く場合は<center>のコードを打ち込めばよかったんですが、右寄せ左寄せになると、ちょっと話が変わってきます。
真ん中がcenterなら、右寄せはright、左寄せはleftなんじゃないかと思いますよね。私はそう思いました。
若干あってはいるんですが、<right>と打っても右寄せにはなりません(左寄せも然り)。
ではどうすればいいかというと、

左寄せの場合
<div align=left>左寄せしたい文字</div>
右寄せの場合
<div align=right>右寄せしたい文字</div>

という風になります。
実は中央寄せもこのコードで可能です。
<div align=center>中央寄せしたい文字</div>

<right>だけで打ったコードが実際に機能しない例です。↓

お分かりいただけただろうか。
という感じになります。

○見出しの付け方

上の画像を見ていただくと、一番分かりやすいかと思います。(○右寄せ、左寄せ)
コードを記す際に邪魔だったので、見出しのコードを省いた画像を載せていましたが、実際はこういう風になっています。↓

h ＋ 数字 のコードになります。
今回の場合は、<h2>というコードを使いました。
コードのサイズ感も載せておきます。↓↓

して、このウザい文字間の隙間ですが、開き過ぎてほんとにウザいんですよね。特に文章が続いてる場合とか、なんかもうとにかくウザい。
これはどうしたらいいかというと、実は答えは一番上の画像に記されています。

改行全部消しちまえ〜〜！！！という感じです。
確実マシにはなりましたね。
いや、そもそもこれは見出しのコードなので、隙間が開いてしまうのはどうしようもないことなんですけどね。
その隙間を最小限に抑えたい場合は、<h1>だの<h2>のコードを使った後は、そのまま改行せずに、(実際に)次の行に載せたい言葉を打ってしまえばいいというわけなんでございます。

多分、本文を打ち込むところはわけわかめな状態になること待ったなしですが、それも気付けば見慣れていきます。きっと。

○最後に

ちょっとこれ以上は、今の私には思い浮かばないので、また色々アレも書いてないコレも書いてない状態になったら、どんどん書き足していこうと思います。
けれど大事なことは、ここに書いていないことは自分で調べるということですからね！！

間違っても私に聞いてきたり……、とかがないようにお願いします。(ねえか！そんなことねえか！)
先駆者がいるから大丈夫です。調べてればなんとかなります。インターネット駆使しましょう。

また、この表記はちっとおかしくねえか？ぱちこいてんじゃねえぞテメエ、みたいな問題がありましたら、その場合は私や他の皆様のためにも是非お教えくださったらなと思います。
こんな文章を書いている間にも、アレコレを思い出し始めましたので、時間がある時に書いていこうと思います。ですが基本のテクニック的な部分は、上記に書かれているもので多少足りないところはあれど問題ないんじゃないかな？と思います。

誰かの役に立つことを願い、とりあえずは締めさせていただきます。よき夢小説サイト運営ライフをお送りくださいませ✌️