【自分用】副産物でできた「この記事で分かること」「手順」「参考になった記事」

表を作成したくて再勉強していたところ、こちらのサイトにたどり着いた。内容自体もある程度参考になったのだが、この記事の「この記事を読むと、こんなことができるようになります」というデザインに感動した。

読者の立場に立つと、長い記事でスクロールしていって目的の内容を探してもなかった場合、非常に悲しくなる。しかしこういった案内さえあればそのような損失は生まれにくい。ということで当サイトでもつくったみた。

▼それがこんな感じ

ここにタイトル

ここに文章
ここに文章
ここに文章

チェックボタン（box-check）、参考（box-sankou）、指（box-yubi）

参考にしたのはサルカワさんのボックス制作サイト。

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。

これを作成したあと、「もしかしたら参考記事紹介や手順紹介にも使えるのではないか？」と考えた。そこで以下いくつかのパターンをつくってみる。

なお、今回のカスタマイズはQuicktagで呼び出せるようにした。ぜひ活用していきたい。

「この記事でこんなことが分かります」系

この記事で分かること

ここに文章
ここに文章
ここに文章

box-titleのあとに、チェックボタン（box-check）のclassを挿入した。画像なども便利に入れられる。

「今回、参考にした記事」系

今回、参考にした記事

box-titleのあとに、参考（box-sankou）を挿入した。

欠点：
<ul li>要素を使用しているので、改行する場合は を使用する。その場合、下の行にURLを入力してもブログカードとして表示がされない。ブログカードとして表示されるにはURLとなっていなければならないのだ。

「〇〇の手順」系

もしかしたら、これでステップフローをつくることもできないだろうか。以下、実際に「手順をつくる」として利用していこうと思う。

AddQuicktagで呼び出す手順

「設定」→「プラグイン」で「AddQuicktagの設定」を選択する。
ボタン名と開始タグを入力する。

ボタン名:いわばタイトルのようなもの。分かりやすくしておこう。いつでも変更可能だ。
開始タグ:にここに書き込んだhtmlが編集画面に自動で差し込まれる。
次にどこで使用するか選ぶ。全チェックでOKだ。一番右をチェックすれば、すべてにチェックがはいる。
最後に「変更を保存」を選択してAddQuicktag側の設定は終了。

どうだろうか？このように利用することができる。

▼ボックス内にボックスをいれたものが微妙だったため、作り直した。

AddQuicktagで呼び出す手順

「設定」→「プラグイン」で「AddQuicktagの設定」を選択する。
ボタン名と開始タグを入力する。

ボタン名：いわばタイトルのようなもの。分かりやすくしておこう。いつでも変更可能だ。
開始タグ：ここに書き込んだhtmlが編集画面に自動で差し込まれる。
次にどこで使用するか選ぶ。全チェックでOKだ。一番右をチェックすれば、すべてにチェックがはいる。
最後に「変更を保存」を選択してAddQuicktag側の設定は終了。

なお、過去に独自でステップフローを作成したことがある。そちらと比較してみよう。

過去に作成したステップフローと比較

以下、過去に作成したステップフローだ。結構自信作なのだが未だに出番がない。

STEP１

AddQuicktagの設定

「設定」→「プラグイン」で「AddQuicktagの設定」を選択する。

STEP２

ボタン名と開始タグを入力する。

「ボタン名」と「開始タグ」に書き込む。それ以外はノータッチでいい。

ボタン名：
いわばタイトルのようなもの。分かりやすくしておこう。いつでも変更可能だ。
開始タグ：
ここに書き込んだhtmlが編集画面に自動で差し込まれる。

STEP３

全てにチェックする

次にどこで使用するか選ぶ。全チェックでOKだ。一番右をチェックすれば、すべてにチェックがはいる。

STEP４

変更を保存

最後に「変更を保存」を選択してAddQuicktag側の設定は終了。

どちらがいいのだろう。ちなみに、ついでなのでこのステップフローもAddQuicktaggに追加しておいた。

比較してみると、前者はミニマムで見やすい。~~しかし、box1との色が被る。それ用にboxをつくらなければならないか・・・と考えると少し面倒くさい。~~←ボックスを使わない方が良いという結論に達した。
後者は大きく見やすいし、分かりやすいが、少し仰々しさを感じる、

<ul><li>を利用しないとどうなるか

上記のボックスでは全てul,liを利用している。ここではそれをしないとどうなるのか見ていきたい。

「この記事で分かること」を試す

まずは「この記事で分かること」をul,liなしの表現でどうなるのか試したい。

この記事で分かること

１，ボックスの様々な使い方が分かります。
２，ついでにAddQuicktaggの使い方も分かります。

３，あとはいろいろ分かります。

※ で改行しています。

【検証結果】ul,liでは左が少し空く。しかしpではあかない。「この記事でわかること」においてはul,liを利用するのが良いだろう。

▼次にul,liを使わないリンクだ。てきとうにサルワカさんの記事で試してみる。またh3の後にすぐ挿入したらどうなるのかバランスも確かめる。

「今回参考になった記事」を試す

今回、参考になった記事

CSSが効かない・反映されないときの対処法まとめ

【初心者向け】CSSが効かないときや、うまく反映されないときの対処法を総まとめました。Wordpress、はてなブログ、ライブドア、FC2など全共通の対処法です。

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

Googleクロームの便利な「要素の検証」機能の使い方を分かりやすく解説します。ウェブデザインをする人が特に知っておくべき機能を中心に紹介していきます。

【検証結果】思った以上に良い感じになった。「参考になった記事」ではこちらを利用してもよいだろう。「関連記事」としても利用できるのではないだろうか。

「〇〇とは？」を試す

ハレーションとは？

ハレーションは英語の「halation」からきており、英語の意味は日本語と同様に「写真における強い光が当たった部分の白いぼやけ」のことです。英語の場合もhalationを使って「状況がぼんやりする」「悪影響を与える」「亀裂を生む」など、というネガティブなニュアンスの表現をすることができます。

【検証結果】どうせならよく見る語句の説明もつけてみた。大変見やすいものとなって驚いている。