【HTML】ブログやサイトで使えるシンプルな案内ボックス

こんにちは。Web整備士です。

今回は、ブログやサイトで使える シンプルな案内ボックスを作ります。

「ここを見てください」「このページもおすすめです」 という案内を、少し見やすくするためのHTMLコードです。

このコードでできること

このコードを使うと、文章だけで案内するよりも、 大事な場所をわかりやすく見せることができます。

  • 読んでほしいページを案内できる
  • リンクを目立たせられる
  • ブログ記事の中を整理しやすくなる
  • 初心者でもコピペで使いやすい

使える場所

この案内ボックスは、いろいろなブログやサイトで使えます。

  • ブログ記事の途中
  • 記事の最後
  • おすすめ記事の案内
  • お問い合わせページへの案内

Bloggerでも使えますが、Blogger専用ではありません。 HTMLが使える場所なら、応用しやすいコードです。

コピペ用コード

下のコードをコピーして、ブログやサイトのHTMLを入れられる場所に貼ってください。 

<div style="border:1px solid #ddd; border-radius:10px; padding:16px; margin:20px 0; background:#f9fafb;">
  <h3 style="margin:0 0 10px; font-size:20px;">はじめての方へ</h3>

  <p style="line-height:1.8; margin:0 0 12px;">
    このページでは、初心者向けにわかりやすく内容をまとめています。
    まずはこちらから読んでみてください。
  </p>

  <a href="ここにリンクを入れる" style="display:inline-block; padding:10px 14px; background:#333; color:#fff; text-decoration:none; border-radius:6px;">
    詳しく見る
  </a>
</div>

変える場所

全部を直す必要はありません。 まずは、次の3つだけ変えれば大丈夫です。

1. タイトル部分

<h3>はじめての方へ</h3>

ここは、案内ボックスの見出しです。 たとえば、次のように変えられます。

  • おすすめ記事はこちら
  • 無料コード配布ページはこちら
  • お問い合わせはこちら

2. 説明文

このページでは、初心者向けにわかりやすく内容をまとめています。
まずはこちらから読んでみてください。

ここには、読者に伝えたい内容を書きます。 むずかしく書かなくて大丈夫です。

3. リンク先

href="ここにリンクを入れる"

「ここにリンクを入れる」の部分に、 案内したいページのURLを入れます。

使うときの注意点

  • リンク先のURLを入れ忘れない
  • ボタンの文字とリンク先の内容を合わせる
  • 1つの記事に案内ボックスを入れすぎない
  • 文字を長くしすぎない

案内ボックスは便利ですが、多すぎると逆に読みにくくなります。 便利な道具も使いすぎると邪魔になります。包丁でカレーは作れますが、振り回したら事件です。

関連記事

今回は、ブログやサイトで使えるシンプルな案内ボックスを紹介しました。

まずは文章とリンクだけ変えて、自分のブログやサイトに合わせて使ってみてください。

コメント

コメントを投稿

このブログの人気の投稿

1つの商品を紹介する記事の形を作りやすくする無料テンプレ

商品紹介の記事がまとまりにくい人向けの無料HTMLテンプレ 商品紹介の記事は、良いことを書けばそのまま伝わるわけではありません。 何を先に書くか。どこで良さを見せるか。どこで区切るか。 この順番がバラバラだと、書いている人も迷いやすく、読む人にも伝わりにくくなります。 今回の無料テンプレは、 1つの商品を紹介する記事を、見やすくまとめやすくするためのもの です。 「紹介したいけど、うまく記事の形にならない」 そんなときの土台として使いやすい内容にしています。 商品紹介の記事は、思ったよりまとまりにくい 1つの商品を紹介する記事は、思いついた順に書くとまとまりにくくなりやすいです。 良いところを書いたあとに説明が戻ったり、 同じような話が続いたりすると、 せっかく紹介したい商品でも伝わりにくくなります。 だから大事なのは、 何を書くかだけでなく、どんな順番で見せるか です。 このテンプレは、その順番を作りやすくして、 商品紹介の記事を形にしやすくする土台 として使えます。 このテンプレでやりやすくなること 最初に何の商品か伝えやすくなる 良さやポイントを順番に書きやすくなる 向いている人や使う場面を入れやすくなる 全体を見やすく区切りやすくなる つまり、 何を書こうかで止まりにくくなり、記事の流れを作りやすくなる のが、このテンプレの良いところです。 ブログやサイトで、 1つの商品をやさしく紹介したいときの はじめの形として使いやすい内容です。 こんな人に向いています 商品紹介の記事をこれから作ってみたい人 書いている途中で順番がわからなくなりやすい人 見やすい形に整えたい人 ブログやサイトで商品を紹介したい人 最初から細かいデザインを作...
続きを読む

比較記事テンプレ 見た目編｜目的に合わせて見やすく整える考え方

比較記事テンプレ 見た目編｜目的に合わせて見やすく整える考え方 記事やサイトの見た目というと、 「色の話かな」 「おしゃれにする話かな」 と思う人も多いです。 でも、本当に大事なのはそこだけではありません。 見やすいと、読みやすいです。 読みやすいと、伝わりやすいです。 つまり、見た目は飾りではなく、伝えるための土台です。 今回は、比較記事テンプレの 見た目編 として、 記事やサイトの目的に合わせて、どんな見せ方が合うのかを、初心者向けにざっくり整理します。 この記事でいちばん伝えたいこと 見た目は飾りではありません。 見やすいと読みやすい。 読みやすいと伝わりやすい。 だから、見た目も大事です。 まず、3つの役目はそれぞれちがいます この無料シリーズ3本は、全部同じ話ではありません。 それぞれ役目がちがいます。 基本編 は、記事やブログやサイトの基本をつかむためのものです。 「まずはこうやって作ればいいんだな」がわかる土台です。 選び方編 は、何をどう比べるのかを考えやすくするためのものです。 「どこを見て選べばいいのか」を整理する役目です。 見た目編 は、パッと見てわかりやすくするための土台です。 同じ内容でも、見せ方しだいで読みやすさはかなり変わります。 つまり、見た目編の役目は、 読む人が入りやすくなる形に整えること です。 見た目編は、おしゃれの話だけではありません ここで言う見た目は、ただ色をつけるとか、かっこよくするとか、そういう話だけではありません。 大事なのは、こんなことです。 どこから読めばいいか 何が大事なのか どんな目的の記事なのか 読んだ人が迷わないか これがすぐわかる形になっていると、記事はかなり読みやす...
続きを読む

サイトやブログのホーム画面の見せ方テンプレ【無料HTML】

サイトやブログのホーム画面の見せ方 サイトやブログの最初の部分で、 何をしている場所なのか をわかりやすく伝えるためのテンプレです。 はじめて来た人が迷いにくい、見やすいホーム画面を作りたいときに使いやすい形です。 使い方： 下の見出しや文章を、自分のサイトやブログに合わせて入れ替えるだけです。 ホーム画面の見せ方ポイント3選 POINT 1 何のサイトかをすぐ伝える 最初に「このサイトは何をしているのか」が伝わると、はじめて来た人も安心しやすくなります。 長い説明より、短くわかりやすく見せるのが大事です。 POINT 2 どこを見ればいいかをわかりやすくする ホーム画面で大事なのは、読者が次にどこを見ればいいか迷わないことです。 おすすめ記事や案内ページを見つけやすくすると、使いやすいホーム画面になりやすいです。 POINT 3 ごちゃつかず、見やすく整える 最初の画面に情報を入れすぎると、読みにくくなります。 見せたいことをしぼって並べると、やさしく整った印象になりやすいです。 こんなホーム画面に向いています サイトの最初に何をしているか見せたいとき ブログの入口をわかりやすくしたいとき 読者に「このサイトでできること」を伝えたいとき 最初の見た目をすっきり整えたいとき ひとことまとめ このテンプレは、 サイトやブログのホーム画面を見やすく整えるための形 です。 最初に見せたいことを、やさしく伝えやすくなります。
続きを読む