HTMLとかCSSとかって何！
あこんにちは、こんばんは、はじめまして？
☆海貝あかりと申します。
今回もHTMLの様子見しながら記事を書いていきたいと思います＾＾
今回はCSSは、まだまださっぱりなので触れないでおきます＾＾；
見やすい記事を作るために
https://www.pakutaso.com/20180235040post-15155.html
見やすい記事を作るためにはやっぱりこうした小見出しは欠かせないのだろうな～と個人的に痛感しました。
でも、はてなブログさんは普通の機能でこういった見出しは作れないし、出せませんよね？
いえ、有料版ではないのでそうなだけかもしれませんが。
とにかく、こうしたシンプルな見出しを作るのに私はちょいと苦戦をしたわけです。
この小見出しのHTMLを公開しますね。
上記のそれぞれのカラーを変更していくとこんなのもできますね！↓
ここに文章が入ります
ちなみにこのカラーでのHTMLは
です。
黄色の部分は二か所、同じ文章が入りますのでご注意を。
ちなみにこの黒縁というか、囲いも通常で出せるものではないのでHTMLを貼り付けますと
<pre class="code lang-html" style="overflow-x: auto; overflow-y: hidden; font-family: Monaco, Consolas, 'Courier New', Courier, monospace, sans-serif; padding: 24px; background-color: #222222; color: #eeeeee; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" data-lang="html" data-unlink=""> この部分が文章です</pre>
という感じです。人さまのブログでどうやっているのか謎な部分は全部コピペして自分の記事で一度貼り付けて必要な部分だけ切り出しているので他の方よりも拙く見づらいコードで申し訳ないです＾＾；
ちなみにこのHTMLコードを使えればこんな文章途中にシェアボタンが作れたりします！
無料ブログで使える機能
無料でブログを書かせてもらっている分際ではありますが、はてなブログで可能なのは
https://www.pakutaso.com/20180201039pc-bitcoin.html
-
この箇条書き
- 1
- 2
- 3
と
- 番号付きリスト
- 2-1
- 2-2
- 2-3
とリンクを挿入（写真も……ですが、こういうのですね）↓
貼り付けた上記3つはすべて同じサイトです。
私がJK時代からお世話になっています。足成さん。
あとは続きを読む、と言う機能↓
←また引用。
contentsという文字がカッコで囲われているだけ……。
これで目次らしいんですが、これで目次を作れたことがありません。
私の腕が悪いだけ……？と思ったら、小見出しの作り方がわからなかったので今まで出なかっただけのようです＾＾；
今は上部に自動生成されることが確認できています。
今後はこれでもう少し気楽に読めるブログが書けるかもしれませんね！＞＜
要するに、文章に専門用語を使った時に後で説明を足せるってことですよね……？＾＾；
ちょっと未だに使い方がよくわからなくて戸惑うのですが。
それ以外は文字の色変更等々です。
だからみんなどうやって大見出しや小見出しの装飾を作っているのかがわかりませんでした。
さて、では今回はこの辺でお暇しますね！
☆海貝あかり
*1:これが脚注機能らしい
