シノのいろいろ

いろいろなことを書きます。それだけ。見るも見ないも自由だけど、見てくれると嬉しいな。

第15回：雑記「記事を書くときに使ったHTML文まとめ」

HTML CSS 講座系

どうも、シノです。

 

いつものごとく、思い付きで書き始めてます、はい。

今回は、これまで書いた記事で使用した、はてなブログの見たまま編集ではできない表現を行う方法をまとめていきます。

なぜこんなことを書くかですが、ここら辺は知っておくとまとめブログ以外にも使えるからですね。あと、自分用のメモも兼ねてます。

いったん、今回は「HTML編集ってところにこれを書くとこうなる」っていう説明をしていきます。前提として、HTML編集のどこに書けばいいかは分かっているとします。まあ、わからなくてもいったんHTML編集に書いて、見たまま編集に戻ってコピペをすればなんとかなると思います。

厳密には、HTMLだけではなくCSSというものも使ってます。

では、目次です。

 

ちなみに、目次を貼るときに見たまま編集だと出てくる[:contents]ですが(HTML編集だと<p>[:contents]</p>)、これはHTMLのものではないです。おそらく、記事公開時に自動で見出しとして設定された項目を目次の形式に直してくれているのでしょうが、それを入れるための目印だと思います。

 

 

1.枠で文字を囲む

カラオケ講座のまとめでよくやってるやつです。例は下。

ここに文章を書きます。写真も入れれます。
一度枠を作ったら、Shift+Enterで枠内に改行を入れることもできます。

これのHTMLは、以下の通りです。

 

<div style="border: 1px solid #444444; background: #FFFFEE; padding: 1em;">ここに文章を書きます。写真も入れれます。<br />一度枠を作ったら、Shift+Enterで枠内に改行を入れることもできます。</div>

 

うわ、これ面倒そうって思った方、ご安心ください。面倒なら<divから</div>までコピーしてHTML編集に貼り付けましょう。それで見たまま編集に戻ると、枠がもう出来上がっていると思います。あとは、中の文章を見たまま編集で変えるだけです。もちろん、文字の書体変更や箇条書きなども使えます。

ちなみに、カラーコードが分かる方、中の「background:」の後ろにある#から始まる7文字がカラーコードになります。ここを変えると枠内の背景色を変更できるので、色々変更してみましょう。

 

 

2.文字のセンタリング

第三回、カラオケ講座前提編の「！！！重要！！！」ってところに使ってます。それ以外にもちょこちょこ。例は下です。

ここの文章がセンタリングされます。

改行もできます。

このHTMLは以下の通りです。

<div style="text-align: center;">
<p>ここの文章がセンタリングされます。</p>
<p>改行もできます。</p>
</div>

真ん中に寄せたい部分を、<div style="text-align: center;">と</div>で囲むだけです。このスラッシュがついていないものが開始、ついているものが終了の意味になります。ポイントとしては、センタリング以外の体裁を先に整えておいて、最後にこれらで囲むといったところでしょうか。このスラッシュなしが開始、スラッシュありが終了は基本的にどれも同じなので、これで囲むことを意識しましょう。

ちなみに、他のスラッシュ開始終了と入れ子になるようにしてください。以下のような例はNGです。

<div style="text-align: center;"><p>文章</div></p>

これだと、pというやつがdivの中に入りきってませんね。これだと思ったように表示されなくなります。 下のように直してあげましょう。

<div style="text-align: center;"><p>文章</p></div>

 

ちなみに、HTMLがわかる方向け解説。

<center>と</center>は使わないの？って思われるかもしれませんが、これはHTML5で廃止されるそうです。実はこの記事以前のものでは使ってしまっているのですが、上に書いたdivでスタイル指定する方法を使用しましょう。

 

 

3.Twitterのフォローボタン

色々なところに貼っています。もちろんですが、先にTwitterアカウントが必要です。

こんなやつです↓

このHTMLは以下の通り。※本来はTwitter Buttonsというもので作成します。

<p><a href="https://twitter.com/shino_20191228?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">シノ(@shino_20191228)をフォロー</a></p>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ちょっと長いですが、実際使用するときに変更する箇所は3か所あります。赤字の部分です。 

  1. 最初の方、「https://twitter.com/shino_20191228?ref_src...」の『shino_20191228』を、ご自身のTwitterIDに変更する
  2. 真ん中あたり、「data-show-count="false">シノ(@...」の『シノ』を、ご自身のTwitterアカウント名に変更する
  3. 2の直後、「(@shino_20191228)」の『shino_20191228』を、ご自身のTwitterIDに変更する

これで、Twitterのフォローボタンが完成します。あとは、HTML編集で貼り付けるだけです。アクセス例は、上のボタンを押してみてください。新しいウィンドウで私のアカウントが出てくると思います。設置したら、プレビューから実際にアクセスできるか確認してみましょう。すでにご自身のアカウントでTwitterにログインされている場合、フォローボタンではなくプロフィール編集ボタンが出てきます。

 

 

4.スクロールする領域

ブログトップに表示しているものです。例はこんな感じ。

ここから

・

・

・

・

・

・

・

・

・

・

ここまで

ここの部分だけスクロールバーが出て、「ここから」と「ここまで」が見えるかと思います。

このHTMLは以下の通り。

<div style="margin: 0px; padding: 10px; line-height: 1.3; overflow: auto; text-align: left; height: 200px;">
<p>ここから</p>
<p>・</p>
<p>・</p>
<p>・</p>
<p>・</p>
<p>・</p>
<p>・</p>
<p>・</p>
<p>・</p>
<p>・</p>
<p>・</p>
<p>ここまで </p>
</div>

最初の行と、最後の行をスクロール領域に入れたい箇所の前後に貼り付けるだけです。上にも書いた通り、入れ子になるようにも注意してください。なお、この設定では、この中に書いた部分が表示する領域より小さい場合に、勝手にスクロールバーが表示されます。表示する領域は、最初の行末尾、「height: 200px」の数字を変えてみましょう。

 

 

5.お問い合わせフォーム

これは…Googleのフォームからフォーマットを作成し、リンクをそのまま貼るだけです。スクロールバーも自動で表示されます。

あ、例を貼りましたが、これも実際に機能しています。何か質問があったらここから聞いてください。記事へのコメントでも大丈夫です。

このHTMLは以下の通り。

<p><iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdZ6EBVa3t3NcO1ns5ggXb0ut1Serdh0lKuFUNhqqUVnmrrow/viewform?embedded=true" width="640" height="700" frameborder="0" marginwidth="0" marginheight="0">読み込んでいます…</iframe></p>

一応ここもHTML例を出しましたが、ここからコピーすると私への問い合わせフォームが貼られてしまいますので注意しましょう（笑）

高さを変えたい場合は、真ん中くらいにある赤字の「height="700"」の数字をいじってください。

 

 

6.テキストリンク

基本的な部分を忘れるところでした。通常のリンクですね。この記事の中にも使ってます。

例は、上からそのまま持ってきてしまいましょう。Twitterのフォローボタン貼り付けのところの注意書きです。

「※本来はTwitter Buttonsというもので作成します。」

この、「Twitter Buttons」というところをクリックすると、公式サイトにリンクします。このHTMLは以下の通り。

<p>「※本来は<a href="https://publish.twitter.com/">Twitter Buttons</a>というもので作成します。」</p>

この赤字部分が、リンクを貼るために必要な内容で、「href=」の後ろにある『""』の中がリンクさせたいURLです。そして、間の文字列がリンクを貼る文字列ですね。そこをクリックすると、URL先に飛ぶことができます。

 

 

まとめ

いかがだったでしょうか。ここまでの内容と見たまま編集だけで、今まで私が書いてきた記事は全て再現可能です。

これから、もっといろいろ使っていこうかなと思っており、使ったらここにどうやったかも追記していきます。

また、ここに書いたことや見たまま編集で行った内容をカスタマイズできるよう、HTMLやCSSといったものの解説もやろうかなと考えています。

ここに書いたことを使って、ブログを華やかにしていきましょう。

…使いすぎには注意ですが（笑）

 

それでは。