ブログをレベルアップ！HTML応用テクニック3選

こんにちは！今回は、あなたのブログをワンランク上のものにする、少し応用的ながらも非常に強力な3つのテクニックをご紹介します。

「外部リンク」「マンダラチャート」「動的コピーライト」を使いこなせば、読者の利便性を高め、複雑な情報を視覚的に伝え、サイトの信頼性を向上させることができます。ぜひ、あなたのブログ運営にお役立てください。

1. 外部サイトへの案内！「リンク」の基本と応用

ブログ記事で参考にしたサイトや、おすすめしたい商品（Amazonなど）を紹介する際に使うのが、おなじみのリンク（<a>タグ）です。ここでは、基本的な使い方と、読者の利便性を高めるためのちょっとした工夫をご紹介します。

サンプルコード

<!-- 基本的な外部リンク -->
<p>
  詳しくは<a href="https://www.google.com/">Google</a>で検索してみてください。
</p>

<!-- YouTube動画へのリンク -->
<p>
  <a href="https://www.youtube.com/watch?v=6OYw8kLzDXQ" target="_blank" rel="noopener noreferrer">YouTubeで予告編を視聴する</a>
</p>

<!-- Amazon商品へのリンク -->
<p>
  <a href="https://amzn.to/41GJtXw" target="_blank" rel="noopener noreferrer">Amazonでチェックする</a>
</p>

コードの解説と使い方

<a>: リンクを作成するためのタグです。
href="...": href（エイチレフ）属性に、ジャンプ先のURLを指定します。
>...</a>: タグで囲んだ部分のテキスト（例：「Google」）が、実際にページに表示されるリンクの文言になります。

【応用】リンクを「新しいタブ」で開く方法

上のYouTubeやAmazonの例にtarget="_blank" rel="noopener noreferrer"という記述があることにお気づきでしょうか？これには重要な意味があります。

target="_blank": この属性を追加すると、リンクが新しいタブで開かれるようになります。これを設定しないと、読者がリンクをクリックしたときにあなたのブログページが切り替わってしまい、戻ってきてもらえない可能性があります。外部サイトへのリンクには、基本的に付けておくと親切です。
rel="noopener noreferrer": セキュリティ対策のおまじないです。target="_blank"を使う際には、必ずセットで記述するようにしましょう。

2. 目標達成ツール「マンダラチャート」をブログに実装する

マンダラチャートは、中心に目標を置き、その周りに関連する要素を配置していくことで、思考を整理し、アイデアを広げるためのフレームワークです。これをブログに掲載できれば、目標設定や学習計画などのコンテンツを非常に分かりやすく伝えられます。

ここでは、HTMLの<table>タグを使って、読者がブラウザ上で直接編集できるマンダラチャートを作成する方法を解説します。

マンダラチャートのテンプレートコード

使い方： 下のコードブロックを丸ごとコピーして、あなたのブログのHTML編集画面で、チャートを表示させたい場所に貼り付けてください。

<!-- ▼▼▼ ここからマンダラチャートのコード ▼▼▼ -->
<div class="mandalachart-container">
  <h3 style="text-align:center;">大学入試合格 マンダラチャート</h3>
  <p style="text-align:center; background-color: #eef; padding: 1em; border-radius: 8px;">
    <strong>使い方：</strong> 下の各マスは直接クリックしてテキストを編集できます。あなた自身の目標に合わせて自由に書き換えてください。
  </p>
  
  <table class="mandalachart-table" contenteditable="true">
    <tbody>
      <!-- 1行目 -->
      <tr>
        <td>過去問10年分</td> <td>時間配分を体に叩き込む</td> <td>マーク形式に慣れる</td>
        <td>網羅系参考書を3周</td> <td>理社の一問一答を完璧に</td> <td>英単語の高速暗記</td>
        <td>志望校の過去問15年分</td> <td>記述の添削を受ける</td> <td>大学の出題意図を考える</td>
      </tr>
      <!-- 2行目 -->
      <tr>
        <td>出題傾向の分析</td> <td class="element">共通テスト対策</td> <td>情報処理能力を上げる</td>
        <td>数学の全公式を理解</td> <td class="element">基礎力の磐石化</td> <td>教科書を再読破</td>
        <td>難易度の高い問題集</td> <td class="element">二次試験対策</td> <td>答案作成能力を磨く</td>
      </tr>
      <!-- 3行目 -->
      <tr>
        <td>リスニング対策</td> <td>苦手科目の目標点設定</td> <td>自己採点の練習</td>
        <td>音読で速読力UP</td> <td>基礎問題の取りこぼしゼロ</td> <td>弱点単元をリスト化</td>
        <td>小論文・面接対策</td> <td>ライバルと差がつく一問</td> <td>学部ごとの対策</td>
      </tr>
      <!-- 4行目 -->
      <tr>
        <td>年間・月間計画の作成</td> <td>参考書ルートを確立</td> <td>予備校・映像授業の活用</td>
        <td class="element">共通テスト対策</td> <td class="element">基礎力の磐石化</td> <td class="element">二次試験対策</td>
        <td>入試要項を熟読</td> <td>出願スケジュールを管理</td> <td>併願パターンを検討</td>
      </tr>
      <!-- 5行目 -->
      <tr>
        <td>勉強時間を記録・可視化</td> <td class="element">学習戦略と計画管理</td> <td>模試の結果を徹底分析</td>
        <td class="element">学習戦略と計画管理</td> <td class="core-goal">大学入試<br>合格</td> <td class="element">情報収集と出願戦略</td>
        <td>奨学金制度を調査</td> <td class="element">情報収集と出願戦略</td> <td>最新の入試情報をチェック</td>
      </tr>
      <!-- 6行目 -->
      <tr>
        <td>科目ごとの時間配分</td> <td>PDCAサイクルを回す</td> <td>自分の生活リズムに合わせる</td>
        <td class="element">生活習慣と健康管理</td> <td class="element">メンタルとモチベーション</td> <td class="element">自己分析と志望校決定</td>
        <td>予備校のデータを活用</td> <td>合格最低点・倍率を見る</td> <td>オープンキャンパスに参加</td>
      </tr>
      <!-- 7行目 -->
      <tr>
        <td>6-7時間睡眠を死守</td> <td>栄養バランスの取れた食事</td> <td>適度な運動を週2回</td>
        <td>合格した姿をイメージ</td> <td>ライバルを力に変える</td> <td>小さな達成を可視化</td>
        <td>大学で学びたいことを明確に</td> <td>自分の長所を言語化</td> <td>卒業後の進路をイメージ</td>
      </tr>
      <!-- 8行目 -->
      <tr>
        <td>15分の仮眠・瞑想</td> <td class="element">生活習慣と健康管理</td> <td>スマホを勉強部屋に置かない</td>
        <td>スランプの原因を客観視</td> <td class="element">メンタルとモチベーション</td> <td>週に半日は完全に休む</td>
        <td>親・先生と相談</td> <td class="element">自己分析と志望校決定</td> <td>複数の大学を比較検討</td>
      </tr>
      <!-- 9行目 -->
      <tr>
        <td>入浴でリラックス</td> <td>体調不良のサインを見逃さない</td> <td>試験本番に合わせた生活リズム</td>
        <td>応援してくれる人を意識</td> <td>模試の結果に一喜一憂しない</td> <td>「自分はできる」と信じ抜く</td>
        <td>「なぜその大学か」を語る</td> <td>目標を部屋に貼る</td> <td>合格体験記を読む</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- ▲▲▲ ここまでマンダラチャートのコード ▲▲▲ -->

コードの解説と使い方

<table>: 表を作成するためのタグです。<tr>が行（横の並び）、<td>がセル（個々のマス）を表します。
contenteditable="true": この属性を<table>タグに追加するだけで、表全体が編集可能になります。読者がブラウザ上で直接テキストを書き換えられるようになります。
CSS: テンプレートコードを貼り付けると、自動でスタイルが適用されるように<head>タグ内で設定しています。記事全体のCSS設定に組み込むと、より管理がしやすくなります。

3. サイトの信頼性アップ！「コピーライト」の年号を自動更新

これをJavaScriptで自動化しましょう。

テンプレートコード

使い方： 下のコードをコピーして、ブログのフッターを表示させたい場所（通常はテーマのフッター編集エリアや、記事の末尾）に貼り付けます。

<footer>
  <p>
    © 2025-<span id="current-year"></span> あなたの名前. All Rights Reserved.
  </p>
</footer>

<script>
  // id="current-year"を持つ要素に、現在の西暦年を自動で挿入する
  document.getElementById("current-year").textContent = new Date().getFullYear();
</script>

コードの解説と使い方

HTML: コピーライトを表記したい場所に<footer>タグを置きます。年号を表示させたい部分を<span id="current-year"></span>のようにしておきます。このidがJavaScriptからの目印になります。
JavaScript: new Date().getFullYear()で現在の西暦年を取得し、document.getElementById("current-year")で目印を付けた<span>タグを見つけ、その中身（textContent）を取得した年号に書き換えています。

この<script>コードをフッターのHTMLの直後に入れておけば、毎年自動で最新の年号が表示されるようになります。

月影

日々の雑感

コピペで簡単【HTML】マンダラチャート・外部リンク自動コピーライト実装ガイド

ブログをレベルアップ！HTML応用テクニック3選

1. 外部サイトへの案内！「リンク」の基本と応用

サンプルコード

コードの解説と使い方

【応用】リンクを「新しいタブ」で開く方法

2. 目標達成ツール「マンダラチャート」をブログに実装する

マンダラチャートのテンプレートコード

コードの解説と使い方

3. サイトの信頼性アップ！「コピーライト」の年号を自動更新

テンプレートコード

コードの解説と使い方