saekichi ぶ ろ ぐ

デジタルに弱い超初心者のブログ

コピペで使えるHTML囲い枠で色違いの同じcss/HTMLの場合の使い方

スポンサーリンク

ブログを書いていると、強調したい文章だったり、一緒に読んでもらいたい記事のリンクなどを、より目立たせるために囲い枠を使ったりしますよね?

しかし、自分ではcssやHTMLを作成するだけの知識がない。
という訳で、ネット検索すると「囲い枠」に限らず、様々なカスタマイズのサンプルを公開してくださっている方々がいるのです。

ただ、稀に「コピペするだけ」なのに上手くいかない事や、分からない事あります。

今回は、その分からない事を忘れない為の備忘録としても書いていきます。
変更や試す場合は必ずバックアップを取っておきましょう

色だけ違う同じcss、HTML

色が違うんだったらcssも違うじゃん!
と言われそうですが、「色の指定」だけが違って他が全部一緒なんです。

それを使う際のHTMLも同じ為、サンプルにあるものが一つしか使えない…とcss初心者は悩む訳です。

言葉での説明が難しいので、実際に見ていただきます。

まず参考にしたのが、シロマさん(id:shiromatakumi)の【おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ - NO TITLE】です。

とてもシンプルで、柔らかい色合いが多く、文中にあったらすぐに気付く事ができるデザインですよね。
とてもお世話になっています。

css

記事中の二つのサンプルがこちら。


f:id:saekichi:20181012181601j:plain


f:id:saekichi:20181012181620j:plain

他も基本的な部分は一緒です。

黄色いラインは各色で違います。そして、青いラインなど他は変わりません。

HTML

このサンプルページのcssをスタイルシートに貼り付けたら、あとは記事中でHTMLを使って、作り上げた囲い枠を呼び出してあげる訳です。

その使うHTMLがこちら。

<p class="emphasize-link">★</p>

あのページのcssに対して使うHTMLはこれのみ。
複数のリンクを囲う場合は、

<div class="emphasize-link">
・リンク
・リンク
</div>

で囲ってあげるのだそうです。
そして、以下の「Check!」のcssを貼り付けた場合。

.entry-content .emphasize-link {
  position: relative;
  margin: 36px 0 16px;
  padding: 16px 10px;
  border: 2px solid #ee7917;
  background-color: #fffbf5;
}
.entry-content .emphasize-link p:last-child {
  margin-bottom: 0;
}
.entry-content .emphasize-link::before {
  position: absolute;
  bottom: 100%;
  left: -2px;
  padding: 2px 6px;
  content: "Check!!";
  background-color: #ee7917;
  color: #fff;
  font-weight: bold;
}

このcssを貼り付けると、

このようになりますよね。

他の囲い枠も同時に使いたい

さて、ここで悩むのがこのサンプルの中の他の囲い枠も使いたい、というもの。

②のcssを使って上記の「Check!」タイトル枠を使ってみたものの、他の場面で①の「あわせて読みたい」も使いたい。

しかし、cssに貼り付けたものは、「後から(新しく)貼った方が優先される」そうなのです。

使うHTMLが同じなので、二つ貼り付けても後から貼った方しか適用されないのか。
…と諦めていました。

試しに二つ貼り付けてやってみたら、こんなんになってしまった。

f:id:saekichi:20181012231639j:plain

なんだか、ドラゴンボールのゴテンクスがフュージョン失敗しちゃった、みたいになってしまったのです。

これでは、見栄えも宜しくないし一体何なのかが分からないですよね。

他のサイトの囲い枠なども試していますが、やはり使いたい。
何か方法はないのか。いや、どこをどうしたら使えるようになるのかを考えました。

cssとHTMLを知る

調べると難しい言葉ばかりで、理解するのに時間がかかりそうです。

なので、元々ある「css」と「HTML」を確認して考えてみましょう。

HTMLが、

<p class="emphasize-link">★</p>

とあるので、「"emphasize-link"」というものを呼び出しているのだな、と考えます。

そもそも「"emphasize-link"」とは何なのか。

クラスというもの

文中に差し込むHTMLに、「class」とあります。

この「class」というのは、いわゆる「設計図」になる訳です。

使いたい囲い枠でいうと、

・どういう形
・どのくらいの大きさ
・どのくらいの太さ
・何色の枠線
・何色の背景色
・何色の文字
・影をつけるか

などを決めたものになるのです。

そして、せっかく作った「設計図」もたくさんあったら、どの設計図か分からなくなっちゃいますよね。

そこで、各設計図に名前を付けておくと分かりやすくなります。

そのため「このclass(設計図)」=(は)「"〇〇という名前"」だよ、というようにつけてあげます。

という事で「"emphasize-link"」が、これら囲い枠の設計図の名前になる訳です。

名前を変えてあげる

では、記事中のcssの名前が一緒で使う事が出来ないのであれば、この名前を変えれば使えるようになるはず。

「Check!」はそのままのcssとHTMLで使っているので、同じでなければ少し変えるだけでも使えるだろうという事で、

「"emphasize-link"」の部分を
↓↓
「"emphasize"」に変更

cssとHTMLどちらも「"emphasize-link"」という部分を変更してあげます。

これで、「あわせて読みたい」の設計図の名前が「"emphasize"」になりました。

class名を変えたら

①サンプルにあったまんまの状態で使用

<p class="emphasize-link"></p>

で呼び出した囲い枠は、

②クラスの名前を変更

<p class="emphasize"></p>

で呼び出すと、

あわせて読みたいの囲い枠

になります。
やった〜出来たぁ!

上記以外でも、作った設計図の名前を決めてあげれば大丈夫そうです。

さいごに

記事を書く上で「囲い枠」などのカスタマイズって割と重要ですよね。

ただ、自分の知識がないのと、たくさんの人が多くの良いデザインを公開してくれているので、あやかっています。

しかし、だいたい何かしら思ったようにいかない事や、分からない事が出てきてしまうのです。

そういった時は、解決法を検索したりして調べる訳ですが、なかなか見つからない事もよくあります。

そういった時は、分かる範囲だけ調べてそこから考えながら試してみると、自分でも覚えられるんだな、と思いました。

知識が乏しすぎるので、慣れている人からしたら何てことない簡単な事でも、手こずってしまうのです。

一つひとつ成長に繋がるよう覚えていかなくてはならないですね。

同じように、分からなくてつまずいた人が検索した時に、辿り着いて参考になる記事を作っていこうと思います。