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

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

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

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

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

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

蛍光マーカー

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

■CSS:青の蛍光ペン

.marker_blue {
  background: linear-gradient(transparent 80%, #66ccff 0%);
  font-weight:bold;
}

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

.marker_yellow {
  background: linear-gradient(transparent 60%, #ffff66 0%);
  font-weight:bold;
}

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

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

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

蛍光ペンのテキスト

カラーボックス

グレーのボックス。

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

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

■CSS

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

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

ボックス内テキスト

ドット線のボックス

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

↓ドット線のボックス。

MEMO

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

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

■CSS

.memo {
    margin: 30px 0 30px;
    padding: 20px;
    border: 1px dashed #d64e80;
}    

.memo-moji {
  font-size:18px;
  color:#d64e80;
  margin-bottom:20px;
  font-weight:bold;
}

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

MEMO
ボックス内テキスト。

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

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

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

■CSS

.check {
  color: #ff0505;
  font-size: 10px;
  text-decoration: underline;
  background-color: #ffcbcb;
  font-weight: bold;
}

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

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

<span class="check">オススメ!</span>

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

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

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

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

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

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

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

■CSS:1つのボタン

/* 赤ボタン単品 */
.red-btn {
  box-shadow:2px 2px 2px #555;
  font-size:16px;
  text-align:center; /*ボタンの中央配置 */
  margin:40px auto 40px auto;  /*ボタンの上右下左の余白 */
  max-width: 300px;  /*ボタンの横幅 */
  text-align: center;  /*ボタン内の文字中央寄せ */
  padding: 7px;  /*ボタン内文字の余白 */
  background-color:#ed254e;
  margin-right: auto;
  margin-left: auto;
  border-radius: 5px;  /*ボタンの角を少し丸く */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  font-weight: bold;  /*ボタン内文字は太字 */
  color: #fff !important;  /*ボタン内の文字色 */
  height: 30px;
  line-height:30px;
}

.red-btn a {
  text-decoration: none !important;  /*ボタン内テキストリンク下線無し */
  color: #fff !important;  /*ボタン内の文字色 */
  display: block;
}

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

ココにテキストリンク

横並びの2つボタン

■CSS

/* 左ボタン */

.left-btn {
  box-shadow:2px 2px 2px #555;  
  text-align:center; /*ボタンの中央配置 */
  width: 100%;  /*ボタンの横幅 */
  text-align: center;  /*ボタン内の文字中央寄せ */
  padding: 7px;  /*ボタン内文字の余白 */
  background-color: #039BE6;  /*ボタンの背景色#cc1812#ef5771#d64e80#e37878 */
  border-radius: 5px;  /*ボタンの角を少し丸く */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  font-weight: bold;  /*ボタン内文字は太字 */
  color:#fff !important;
  margin-bottom:10px;
  margin-left:-10px;
  height: 30px;
  line-height:30px;
}

.left-btn a {
  text-decoration: none !important;  /*ボタン内テキストリンク下線無し */
  color: #fff !important;  /*ボタン内の文字色 */
  display: block;
}


/* 右ボタン */

.right-btn {
  box-shadow:2px 2px 2px #555;
  background-color: #ed254e;
  text-align:center; /*ボタンの中央配置 */
  margin-bottom:15px;
  display: block;
  width: 100%;  /*ボタンの横幅 */
  text-align: center;  /*ボタン内の文字中央寄せ */
  padding: 7px;  /*ボタン内文字の余白 */
  float:left;
  color:#fff;
  font-weight:bold;
  margin-left: -10px;
  border-radius: 5px;  /*ボタンの角を少し丸く */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  height: 30px;
  line-height:30px;
}

.right-btn a {
  text-decoration: none !important;  /*ボタン内テキストリンク下線無し */
  color: #fff !important;  /*ボタン内の文字色 */
  display: block;
}

.box-main:after {
  content:"";
  display:block;
  clear:both;
}
.box-main {
 text-align:center;
 font-size:16px;
 margin:40px 0;
}

/* 600px以上は横並び それ以外は縦に並ぶ */
@media screen and (min-width: 600px) {

.right-btn {
  width:43%;
  margin-left:10px;
}
.left-btn {
  width:43%;
  float:left;
  margin-right: 10px;
  margin-left:0;
}
}

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

リンク1
リンク2
MEMO

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

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

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

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

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

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

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

ネットの画像の切り取り方と編集の仕方

このブログでも画像を見せながら手順を紹介する手法はよく使います。今回は初心者向けに画像の切り取り方やコピー、それと編集の仕方の基本を図解で解説していきます。 まず、画面に表示されている画像をそのまま撮れるのが、「スクリー … 続きを読む