>>アフィリエイトで毎月20万円の報酬が発生する仕組みを作る方法はこちら

LP(ランディングページ)制作時に使えるCSSコードやHTMLコード

わたしがよく使うHTMLコードとLP制作をするときに使っているCSSコードを備忘録的にまとめています。

参考になれば嬉しいです。

HTMLのみの囲み枠

シンプル囲み枠

ここに本文を入れます♪
<div style="border: #333 solid 1px; font-size: 100%; padding: 20px;">
ここに本文を入れます♪
</div>

borderの#—はカラーコード
ーsolidは線の太さ
font-sizeは文字の大きさ
paddingは文字周りの余白のサイズ

グレー影付き囲み枠

ここに本文を入れます♪
<div style="background: #fff; border: 1px #ccc solid; box-shadow: 0 2px 3px 0 #ddd; font-size: 100%; padding: 20px;">
ここに本文を入れます♪
</div>

backgroundは背景色
borderは線の太さ
 #—は線のカラー
boxshadowは影
 #—は線のカラー
font-sizeは文字の大きさ
paddingは文字周りの余白のサイズ

二重囲み枠

ここに本文を入れます♪
<div style="border: 4px double #333;font-size: 100%; padding: 20px;">
ここに本文を入れます♪</div>

borderは線の太さ、カラー
font-sizeは文字の大きさ
paddingは文字周りの余白のサイズ

二重線背景色付き

ここに本文を入れます♪
<div style="background-color: #fceff2; border: 4px double #333; font-size: 100%; padding: 20px;">
ここに本文を入れます♪</div>

background colorは背景色(#—はカラーコード)
borderは線の太さ
 doubleは二重線
 #—は線のカラー
font-sizeは文字の大きさ
paddingは文字周りの余白のサイズ

角丸の二重囲み枠

ここに本文を入れます♪
<div style="border-radius: 10px; border: 4px double #333; font-size: 100%; padding: 20px;">
ここに本文を入れます♪</div>

borderradiusは角の丸さ
borderは線の太さ
 doubleは二重線
 #—はカラーコード
font-sizeは文字の大きさ
paddingは文字周りの余白のサイズ

点線囲み枠

ここに本文を入れます♪
<div style="border-radius: 1px; border: 4px dotted #333; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div>

borderradiusは角の丸さ
borderは線の太さ
 dottedは点線
 #—はカラーコード
font-sizeは文字の大きさ
paddingは文字周りの余白のサイズ

破線囲み枠

ここに本文を入れます♪
<div style="border-radius: 5px; border: 1px dashed #333; font-size: 100%; padding: 20px;">
ここに本文を入れます♪</div>

borderradiusは角の丸さ
borderは線の太さ
 dashedは破線
 #—はカラーコード
font-sizeは文字の大きさ
paddingは文字周りの余白のサイズ

ふせん風

ここに本文を入れます♪
<div style="border: #333 solid 1px; border-left: #333 solid 10px; padding: 20px; background: #fff; font-size: 100%;">
ここに本文を入れます♪</div>

borderは線のカラー
 solidは線の太さ
borderleftは左側の太い線のカラー
 solidの太さ
paddingは文字周りの余白のサイズ
backgroundは背景色(#—はカラーコード)
font-sizeは文字の大きさ

LP(ランディングページ)制作時に使えるCSSコード

ボタンが大小にアニメーションするcss

HTMLCSS
<div class="cv_btn">
  <a href="#"><img src="画像URL"></a>
</div>
.cv_btn {
  margin: 0 auto;
}
.cv_btn img {
  animation: anime1 0.5s ease 0s infinite alternate;
  transform-origin:center;
}
@keyframes anime1 {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}

モバイルとPCの表示をそれぞれ変更できるcss

HTMLCSS
<img class="pc" src="../img/forPc.png" alt="パソコン用の画像">
<img class="sp" src="../img/forSp.png" alt="スマートフォン用の画像">
/*PCの場合*/
.pc	{ display:inline!important; }
.mb	{ display:none!important; }
@media screen and (max-width: 768px) {
/*タブレット、スマホの場合*/
.pc	{ display:none!important; }
.mb { display:inline!important; }
}

ゴールドメタルの文字

HTMLCSS

TEXT

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(0deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em); 
	-webkit-background-clip: text;
}

コピー防止

コンテンツの転用を防止するためにコピー防止を入れたいけど、プラグインは古いのしかないのでどうしようかと思った時は、こちらのCSSを追加すると良いです。


コピー防止
***********************/
.container {
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
}

1行目の「.container」は、使っているWordPressテーマによって違うので要確認!!

ちなみに、WordPressテーマ「Cocoon」はこちら。【 .entry-content 

一部コピー可能にする

HTMLCSS
<span class="copyok">ここはコピー出来ます。</span></p>
/*一部コピー可*/
.copyok {
user-select:all !important;
-moz-user-select:all !important;
-webkit-user-select:all !important;
-khtml-user-select:all !important;
}

「.copyok」のclass名を使っているテキストだけは、コピー可能になる。

シェアしてね♪


お子さんとの時間を優先させながら
自分の力で稼げるママになって欲しい

アフィリエイトメール講座では、パソコン知識も何もないノースキルの主婦がブログで稼ぐために知っておきたい基本的なことがメルマガで届きます。

今、「ブログで稼ぐってどういうことなんだろう?」とか、「ブログ記事を書いててもイマイチ反応がない、伸びない・・・」とか

このように思っている方は、アフィリエイトメール講座にご登録ください。

メール講座の登録は無料!配信解除はいつでもOK! 登録はこちらです↓


ABOUT US

ゆかアフィリエイター兼WEB制作マーケター
ご訪問ありがとうございます!
当ブログの管理人でアフィリエイター兼WEB制作・マーケターのゆかです。

パソコンが苦手な初心者さんのブログ運営をサポートしたり、代行でWordPressの立ち上げをしています。

毎月1から2件のサイト代行をし、WordPressのコミュニティを運営したりアフィリエイトサイトを運営したりしております。

当ブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。

詳しいプロフィールはこちら>>