【保存版】ブログ執筆でよく使うHTML一覧!コピペするだけで使えるよ!

https://images.unsplash.com/photo-1518773553398-650c184e0bb3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80

ブログを書く時によく使う目次枠やアンカーリンクのHTMLをよく忘れてしまい、いちいち検索し直すのが面倒なので自分のメモ用としてHTMLコードをまとめてみました。この記事を見るだけで大体のことはできると思います。

*はてなブログにて動作するコードをまとめています

目次の青線をクリックすると目当てのコードに飛べます。

目次の作り方

f:id:supplementgym:20191120210340p:plain 筆者の過去記事より抜粋。例えばこんな感じの目次を作りたいとすると、「目次」の文字や小見出しのほかに「枠線」「アイコン」「ページ内リンク」が必要になります。 作り方を順に解説します。

枠線で囲む

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;">
目次<br/>
・1月<br/>
・2月<br/>
・3月<br/>
・4月<br/>
・5月<br/>
</div>



このコードをコピー&ペーストして、目次や1月、2月・・・の部分を自分のブログに合うように書き換えてみましょう。(<br/>は改行させるコード) f:id:supplementgym:20191120205902p:plain


編集画面でこのように記述し、プレビューしてみると・・・ f:id:supplementgym:20191120210021p:plain


ちゃんと枠が付きましたね!



まとめ:
点線枠
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;">テキスト</div>
二重線の枠
(色を変えたい場合はカラーコード(#から始まる数字)を自由に変更してください。)
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #008000; border-radius: 5px;">テキスト</div>

アイコンを付ける

先ほど紹介した例のように、「目次」の文字の横にアイコンつけてみましょう。
アイコンをつけるには、FontAwesomeというサイトを使います。
fontawesomeを利用するためには下準備が必要です。
まず、トップページ右上のアイコンから、「kits」をクリックします。

f:id:supplementgym:20191121161129p:plain

矢印で示した部分をクリック

f:id:supplementgym:20191121161539p:plain

赤マルで囲まれたコードをコピー

f:id:supplementgym:20191121161743p:plain

はてなブログの[設定]⇒[詳細設定]⇒[headに要素を追加]の枠内に貼付けてください。 下準備はこれだけです。FontAwesomeにアクセスし、リンゴマークの「Start for Free」をクリック。

f:id:supplementgym:20191120212735p:plain このような画面が表示されるので、画面左上の「Search icons...🔍」にキーワードを英語で打ち込みます。 例えば「list」で検索すると、目次に合いそうなアイコンがたくさん出てきます。 検索結果には有料版限定のアイコンも表示されるので、「Free」と書かれたボックスに✔を入れておきましょう。 f:id:supplementgym:20191120213624p:plain 赤線で囲った部分をコピーし、アイコンを表示させたいところにペーストします。 f:id:supplementgym:20191121010732j:plain 編集画面ではこのようになります。プレビューしてみると、リストアイコンがきちんと追加されていますね! f:id:supplementgym:20191121011247p:plainf:id:supplementgym:20191121011251p:plain これでアイコン挿入はOKです。

まとめ: FontAwesomeからコピペ

ページ内リンク(スクロール)を付ける

最後に、読者の方がブログを読みやすくするために、目次から目当ての見出しまで飛べるようにしましょう。
いきなり飛ぶジャンプ型と滑らかに高速スクロールしながら移動するスクロール型がありますが、今回はスクロール型で解説します。
目次の青線を押したら滑らかに目的地までスクロールするの、なんだか気持ちいいですよね。

<a href="#t">・1月</a><br/>
<a href="#t1">・2月</a><br/>
<a href="#t2">・3月</a><br/>
<a href="#t3">・4月</a><br/>
<a href="#t4">・5月</a><br/>
このコードをコピーして、目次内の見出しに貼り付けます。
目次内の見出し1月、2月・・・の部分は自分のブログに合わせて変えてください。 f:id:supplementgym:20191121022119p:plain こんな感じです。
そして、実際の見出しを作るときに、本来は
<h3>1月</h3>
という風に書きますが、目次とリンクさせたい時は
<h3 id="t">1月</h3>
という風に、半角スペース+id="t"を追加しましょう。tの後の数字は目次の見出しの"#t1~4"に合わせてください。
サンプルなのでt~t4までしか書いてませんが、見出しの数を増やしたい場合は目次内の見出しを"#t5"~,本文中の見出しのhタグに"t5"~と増やしていけば大丈夫です。

目次のほうにはt+数字の前に必ず#がいるのでつけ忘れないよう注意してください。

これで目次と見出しがリンクされましたので、後はスクロールの動きをつけるだけです。

このコードをコピーして、本文の最後に貼り付けます。
<script>
$('a[href^="#"]').click(function() {
  // スクロールの速度
  var speed = 1000; // ミリ秒で記述
  var href = $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $('body,html').animate({
    scrollTop: position
  }, speed, 'swing');
  return false;
});
</script>
そうすると、目次の見出しをクリックすると本文中の対応する見出しまでスクロールするようになります。

ぼくはこのスピードが一番気に入っていますが、スクロールのスピードを変えたければvar speed=1000;の数字の部分を変えてください。 数字が大きいほどスピードはゆっくりになります。

これで目次は完成です。

基本コード

目次が作れるようになれば大体のことはできますが、よく使う基本のコードもまとめておきます。

見出し

見出しは大きい順にh1~h6まであります。 h1はタイトルに使用するものですが、はてなブログの場合はタイトル欄にすでにh1が含まれているので使う機会はありあせん。 書き方は簡単で、ただ見出しの文面をタグで挟むだけです。

<h3>1月</h3>
こんな感じ。閉じタグのスラッシュをわすれないようにしましょう。

アンカーリンクでリンク先を指定(外部サイトに飛ばせる)

FontAwesome←このように、クリックしたらそのまま外部サイトにジャンプできるようにしたい場合。

<a href="任意のURL">任意のテキスト</a>
このように、 <a hrefのタグで挟むだけです。
目次からスクロールジャンプさせる際にも使ったこのタグは「アンカーエイチレフ」といい、リンクを設定する際に使います。

これだけでもいいのですがここにさらにアイコンを追加するとオシャレになります。こんな感じ。 FontAwesome これは、編集画面では
<a href="https://fontawesome.com/">FontAwesome<i class="fas fa-external-link-alt"></i></a>
となります。 <a href="URL">テキスト</a>のタグにアイコンを表す<i class="fas fa-external-link-alt"></i>を挿入するだけです。

引用

<blockquote></blockquote>で引用したい文章を囲みます。


この作品が『モナ・リザ』と呼ばれているのは、16世紀のイタリア人芸術家、伝記作家ジョルジョ・ヴァザーリの著書『画家・彫刻家・建築家列伝』の「レオナルドは、フランチェスコ・デル・ジョコンドから妻モナ・リザの肖像画制作の依頼を受けた」という記述が元となっている。イタリア語の「ma donna」は「私の貴婦人」を意味し、短縮形で「mona」と綴られる。ヴァザーリが著作に書いているように「mona」が伝統的な綴りではあるが、現代イタリア語では「madonna」の短縮形は「monna」となることが多い。したがって「モナ・リザ」を現代イタリア語で綴ると「Monna Lisa」となるが、世界の多くの言語では一般的に「Mona Lisa」と綴られている(wikipediaより引用)


↓編集画面はこのようになっています。
f:id:supplementgym:20191121152829p:plain

引用する文章が<blockquote></blockquote>で挟まれていますね。
当たり前ですが、引用したら出典元を明示しましょう。
リンクで飛べるようにしておくとなおよいです。<i></i>タグはfontawesomeのアイコンです。

まとめ:<blockquote></blockquote>

コード埋め込み&シンタックスハイライト

さて、この記事にはいくつかコードが埋め込まれカラフルな色でハイライトされていましたが、これをシンタックスハイライトといいます。

<script>
$('a[href^="#"]').click(function() {
  // スクロールの速度
  var speed = 1000; // ミリ秒で記述
  var href = $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $('body,html').animate({
    scrollTop: position
  }, speed, 'swing');
  return false;
});
</script>
こんな感じ。コードをそのまま編集画面に打ち込んでしまうと当然それはコードとして認識され、画面に表示されなくなります。
なので、コードをコードとして解釈させず、文字列として表示させるには工夫が必要です。
どうやるかというと、コードの前後にバッククォート(shift+@)を3つずつ付け、最初のバッククォート3つのあとにコードの言語名を書きます。

こんな感じ。
f:id:supplementgym:20191121135911p:plain
これでコードが文字列として表示され、ハイライトされます。

まとめ:```言語名・コード```

取り消し線

モナリザ.comは世界最高のブログ

↑こんな感じで文字の上に取り消し線を適用したい場合。

HTMLでもできるのですが、あんまり推奨された行為ではないので、おとなしくCSSで記述します。

<div style="text-decoration: line-through;">テキスト</div>

これをコピペすればOKです。

最後に

ブログを書く時によく使うコードをまとめてみました。これからはいちいち検索しないでも、この記事を見るだけで大体のことはできると思います。
この記事が皆様のお役に立てれば幸いです。