※注意※
この記事はあくまでもはてなブログでブログを執筆しているニキに贈るものであり、その他のブログサービス及び自分でHTMLから書くニキに関して何の意味を為さない可能性もあります。その点ご理解ご容赦の上ご観覧下さい。
さて、読者諸兄の皆々様は今この読んでいる記事がどういうもので構成されているかはご存知でしょう。そう、ただの文字列です。HTMLタグの羅列と時折挿入されるURL、そしてそれらをうまい感じにうまい感じするCSS、全てただの文字列であります。しかしそれらの文字列を上手いこといい感じに覚えるとよりハイソでオサレでシックでナウでモダンなデザインのブログが出来上がるのであります。弊記事では、ただコピペするだけで他のブログに差を付けられるHTMLタグについてちょろっと紹介していきたいと思いまつ。
1.HTML編集 モードを使う
まずスタートはここからです。はてなブログで執筆してるマンは編集 見たままなんて項目を何の気もなしに開いて何の気も無しに執筆していることでしょう。実際大抵のことは見たまま編集モードで事足ります。HTMLなんて面倒なもん打ち込む必要なんざ無いわけです！やったねたえちゃん！<br/>地獄から開放されるよ！
しかし、HTML編集モードを活用することで光ってくるポイントというのがどうしても出てきます。一番頻度が多そうなのは恐らくGoogleMapを埋め込むときでしょう。GoogleMap先輩は非常に優秀なので、共有をクリックするとポップアップがあらわれリンクを表示してくれます。ここからフツーにリンクを貼り付けるとどうなるかというと、こうなります。
まあこれでも実用上は何ら問題はないわけです。リンクの入れ方をちょちょいと工夫して(秋葉原駅 地図)とかやっちゃえば誰もがわかり哲也でわかる感のあるものが生まれるため実用上の問題が消滅するわけです。しかしセンスが無い。どこがどうセンスが無いかと言いますと、GoogleMap先輩には地図の埋め込みという機能があるわけであります。稀によく企業の公式サイトなんかで見かけたりもすると思います。あれです。ああいうやつです。リンクを共有タブの隣に地図を埋め込むという項目があるので、出力された文字列をパパっと貼り付けてしまいましょう。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1855.9364504632965!2d139.77296309800334!3d35.69936894655902!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ea7e2f93329%3A0x158f36257ff597b1!2z56eL6JGJ5Y6f6aeF!5e0!3m2!1sja!2sjp!4v1508646933183" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
知ってる人は秒でわかる「あっ、これただのHTMLだ」感。わかる人には説明するまでもないですがフツーに貼り付けても機能しません。何故なら見たまま入力モードで入れた<と>は<と>に勝手に変換されてしまうから。これはフツーに<と>を書くとHTMLと紛らわしいんでそう書きましょうという仕様とかそんなんだった気がします。まあ御託を並べるより直にソースを見る方が理解は早いでしょう。
で、さっきのHTMLタグを本文に書くのではなくそのまんま張った結果がこちら。ちゃんと埋め込まれていることがわかると思います。まあ色々と説明できる中身はあるはずなのですが、面倒だし本人も特にHTMLを理解しているわけでもないので省きます。まあでも画像ファイルの扱いが色々と近いんかな？とは思いますかね。
ちなみに、さっきのを応用するとこんな感じで縮小したりも出来ます。やり方はカンタン。width="n" height="m"のnとmに好きな数値を入れるだけ。このやり方は画像ファイルの大きさを指定するときにも使えるので覚えておいて損はないです。ということで、画像ファイルの表示サイズを指定する方法についてやっていきましょう。
まずは普通に画像を張ります。何故普通に画像を張るのかって？最初からなんかあれこれ弄らないのかって？そら勿論……
後から弄るほうが圧倒的に楽だからです
はてなブログ含めHTML編集モードの付いているブログは基本的にみたまま編集モードでやったことを勝手にHTMLに変換してHTMLモードに遷移してくれます。つまり、画像のタグ張りやらアドレス調べるやら一々面倒なことをせずともクリック一つでパッとそこら辺の面倒なことが片付くのです。これをやらない手はない。なのでサクッと張ってから次の面倒な部分に移りましょう。
さて、書かないと何をやったのかさっぱりわからないと思いますが、これはさっき挿入した画像のタグの中にしれっとwidth="300" height="400"と入力した結果であります。こうすることで勝手にデカくなる横幅と縦幅を統一することが出来るわけです。縦と横が混ざるときなんかは結構使い勝手が良いですが、画像量が増えると編集の手間も増えるのが玉に瑕ですね。ちなみにスマホモードだと横幅の制限に引っかかると勝手に縮小してくれるようでこの細かい差異も手間も全てが闇に葬られるわけです。やったね！！
2. Tableを使う
なんか思いの外HTML編集モードのチュートリアルに手間取った気がします。こっからが本題のHTMLでナウいモダンなブログを錬成していく構成です。最初の最初がテーブルタグとかいう超初心者向けな奴が初心者感丸出しで良さみの深みって感じです。
| 炭酸水 | 交互浴 | 飲むTENGA |
| ◯ | △ | ◎ |
例えば、こんな感じに表を用意したいと思ったとしましょう。すると、以下のように書いておけばこんな感じになるわけです。
<table border="1" cellpadding="5" cellspacing="0"><caption>オルソンブログ*2</caption>
<tr>
<td>炭酸水</td>
<td>交互浴</td>
<td>飲むTENGA</td>
</tr>
<tr>
<td>◯</td>
<td>△</td>
<td>◎</td>
</tr>
</table>
このうちcaptionは表の上のキャプション、borderは枠線の太さ、まあ他は適当にググれば出てきます。そんな重要じゃないです。<tr></tr>で囲われた範囲が行、<td></td>がその行のうちの列要素です。表を作るのには優秀なんですが、意外と凝った表を作ろうとすると脳が死んでくるのであんまりオススメできません。まあ見たまま編集モードがあるので適宜戻って見返しつつ編集していけばなんとかなるといえばなるんですが。
| { | 🍣 | 0 | } |
|---|---|---|---|
| 0 | 🍣 |
遊ぼうと思えばこんなことも出来ます。どうやったかはソース見ればわかりますので気になった各位は見てみて下さい。今知ったんですがテーブルも全体の大きさ指定できるんすね……。見たまま編集モードで大きさいじれるからなんでやろと思ったらそういうことだったんか。
3.カラーコードを使う
ちょっと文字列に色を付けたい。そんな願望はいくらでも湧いて出てくるのにプリセットの色だとなんか物足りない。そんな経験あると思います。そんな時に、カラーコードを直接弄るのが便利なんです。
█ 1・4 京浜東北線
█ 2・3 山手線
█ 5・6 総武線(各駅停車)
カラーコードを直接イジればこんなことも出来るようになるのです。ちなみに、国鉄制定色はWikipediaに色コードが乗ってるのでコピペで対応できます。神か。
|
2 |
█ |
山手線 |
|---|---|---|
|
渋谷・新宿・池袋方面 |
こんな感じで遊ぶことも出来ます。まあHTMLだけだとちょーっと物足りなさはありますがまあ致し方ない。
4.Detailsを使う
例えば、何かクイズっぽいものを作りたいとしましょう。HTML5から追加されたらしいDetailsを使えばカンタンに作ることが出来るわけです。
Q:オルソンブログ*3を運営しているお笑い好きのオルソン氏のスクリーンネームはどれ？
1.@EF_510_114
2.@EF_510_514
3.@EF_510_810
4.@EF_510_1919
A:2.@EF_510_514クリックすると答えが出るよ！
こんなこともカンタンに出来るようになります。
<details> <summary>クリックすると答えが出るよ！</summary>
<p> A:2.@EF_510_514</p>
</details>
書く内容もそんな難しいもんじゃないです。これだけで良いんですから。なんか使い方を間違っている気もしないでもないですが、まあいい具合に使えれば良いのです。プログラムってのはそういうもんです。
というわけで、長くなってきたので今回はここらへんでオシマイにしましょう。というか筆者のネタが無くなりつつあります。筆者はそこら辺のHTMLﾁｮｯﾄﾃﾞｷﾙおじさんとは違ってド素人なのでこれくらいしか引き出しがないのです。仕方ないのです。できればこれを見て「なんだ、この程度ででしゃばるのか」と言わんばかりのHTMLﾁｮｯﾄﾃﾞｷﾙおじさんは記事書いてこっそり教えてください！オナシャス！！ワイブログも向上心を持ってステージを上げていきたいのでそこのところどうか、どうか何卒！！！！
