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

サイト作成で個人的によく使う蛍光マーカー、ボックス、その他CSSまとめサイト作成に役立つツール・素材・HTML・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:記事内で次のように書くと反映されます(テキストエディタ)。

<span class="marker_blue">蛍光ペンのテキスト</span>

カラーボックス

グレーのボックス。

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

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

■CSS

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

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

<div class="graybox">

ボックス内テキスト

</div>

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

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

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!」「オススメ」こんな感じ。リンク誘導などでも。

アフィリエイトで稼ぐ方法まとめページ オススメ

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

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

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

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

ボタン単品(1つだけのやつ)

■CSS

/* 赤ボタン単一 */

.red-btn {
    font-size:16px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 300px;
    margin-bottom: 1em;
}

.red-btn a {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    font-weight: bold ;
    box-shadow:2px 2px 2px #555;  
    border-radius: 5px;
    background-color:#ed254e;
    color: #ffffff !important;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    transition: .25s linear;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
}

.red-btn a:hover {
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    box-shadow:none;
}

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

<div class="red-btn">ココにテキストリンク</div>

横並びの2つボタン

■CSS

/* 左ボタン(横並び) */
.left-btn {
    width: 100%;  /*ボタンの横幅 */
    text-align: center;  /*ボタン内の文字中央寄せ */
    border-radius: 5px;  /*ボタンの角を少し丸く */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-weight: bold;  /*ボタン内文字は太字 */
}

.left-btn a {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    font-weight: bold ;
    box-shadow:2px 2px 2px #555;  
    border-radius: 5px;
    background-color: #1bb4d3;
    color: #ffffff !important;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    transition: .25s linear;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
}

.left-btn a:hover {
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
	box-shadow:none;
}

/* 右ボタン(横並び) */
.right-btn {
    text-align:center;
    width: 100%;
    float:left;
    color:#fff;
    font-weight:bold;
    border-radius: 5px;  
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.right-btn a {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    font-weight: bold ;
    box-shadow:2px 2px 2px #555;  
    border-radius: 5px;
    background-color: #C81C1C;
    color: #ffffff !important;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    transition: .25s linear;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
}

.right-btn a:hover {
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    box-shadow:none;
}

.box-main {
    text-align:center;
    font-size:15px;
    margin-bottom: 1em;
}

.box-main:after {
    content:"";
    display:block;
    clear:both;
}

@media screen and (min-width: 600px) {

.right-btn {
    width:48%;
    margin-left:10px;
}

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

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

<div class="box-main">
<div class="left-btn">リンク1</div>
<div class="right-btn">リンク2</div>
</div>
MEMO

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

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

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

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

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

コメント

タイトルとURLをコピーしました