サイト作成に役立つツール・素材・HTML・CSS

サイト作成で個人的によく使う蛍光マーカー、ボックス、その他CSSまとめ

サイト作成で個人的によく使う蛍光マーカー、ボックス、その他CSSまとめ

サイト作成で私がよく使っているCSSなどをまとめて紹介してみようかと思います。もし参考になる部分があればアレンジして使ってみて下さい。

ちなみにWordPressの方はプラグイン「AddQuicktag」で使えそうなやつを登録しておけば投稿画面ですぐに呼び出せます。

よく使うタグを登録し簡単に挿入できるプラグイン【AddQuicktag】

蛍光マーカー

強調したい部分や目立たせたい部分で使う蛍光マーカー。マーカーの部分を太字(bold)にしてます。

■CSS:青の蛍光ペン

■CSS:黄色の蛍光ペン(%の部分の数値が小さくなると太くなる)

アレンジするならクラス名(.marker_blueの部分)と線の太さと、線の色の部分を変更できます。線の太さは0%が一番太く、90%とかになると細くなります。

linear-gradient(transparent 線の太さ, 線の色 0%)

■HTML:記事内で次のように書くと反映されます(テキストエディタ)。

カラーボックス

グレーのボックス。

こんな感じのグレーのボックス内にテキストが入ります。

もちろん色はグレーである必要はないのでアレンジ可能。

■CSS

  • padding(ボックス内の余白):時計回りに上、右、下、左の順に余白を調整。
  • border(外枠の線):solidが実線、線の太さ、線の色
  • background-color:背景色の色
  • margin-bottom(ボックス下の余白): 数値が小さいと下のコンテンツにくっつく。

■HTML:記事内で次のように書くと反映されます(テキストエディタ)。

ドット線のボックス

上記のグレーボックスと同じ要領でこんなやつも使ってます。

↓ドット線のボックス。

MEMO

こんな感じのドット線内にテキストが入ります。

ちょっとした追記などをする時に使っているMEMOボックス。

■CSS

■HTML:記事内で次のように書くと反映されます(テキストエディタ)。

おすすめ!チェック!マーク

読んで欲しい記事のリンクなどに使うマーク。

Check!」「オススメ」こんな感じにできるCSSです。

■CSS

文字の大きさ(font-size)とか色(color)はお好きに変更どうぞ。

■HTML:記事内で次のように書くと反映されます(テキストエディタ)。

この「オススメ!」という部分がテキスト部分になるので、ここは「check!」でもいいし、「必読!」とか変更したらOK。

Check!」「オススメ」こんな感じ。リンク誘導などでも。

アフィリエイトで稼ぐ方法まとめページ999999users

みたいなはてなブックマーク風にも使えます。クリック率上がります。

リンクのボタン化。単品ボタン、並列ボタン

リンクをボタン化するCSSです。

もしくは2つ横並びとか。

■CSS:1つのボタン

■HTML:記事内で次のように書くと反映されます(テキストエディタ)。

横並びの2つボタン

■CSS

■HTML:記事内で次のように書くと反映されます(テキストエディタ)。

MEMO

リンクテキスト部分が長くなると文字が切れますので、ボタン内は短めのテキストで。

あと、スマホでも文字が入りきっているか?チェックしておいた方が無難。

とりあえず思いついた分だけ書いてみました。まだまだあると思うんですが、今ちょっと集中力なくて思い出せません。

また気が向いたら追記していきます。

サイト作成で個人的によく使う蛍光マーカー、ボックス、その他CSSまとめでした。

目次(記事一覧ページ)の作り方

今回は先日質問のあった目次ページの作り方を紹介していきます。目次ページの作り方は色々なやり方があります。例えばWordPressなら記事一覧を表示してくれるプラグインもありますし、自分で1つ1つ目次を作っていくやり方もあ … 続きを読む