WordPress苦手主婦のためのWordPress専門コミュニティ「MasterPress®︎」詳細はこちら

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

WordPress専門家、ゆかです♪

わたしは普段、ワードプレスを使ってランディングページを作ることがあります。

そのLP制作をするときに、よく使うHTMLコードとCSSコードを備忘録的にまとめてみました。

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

WordPress専門のコミュニティ
「MasterPress」の主宰をしています!

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は文字の大きさ

WordPress専門のコミュニティ
「MasterPress」の主宰をしています!

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名を使っているテキストだけは、コピー可能になる。


WordPressの基本から大事なポイントなど、分かりやすく丁寧に配信中!

メルマガでは、これからWordPressブログを始めたいと思っているパソコン苦手な主婦のために、ワードプレスブログの作り方をお届けしています。
メルマガの登録は無料!配信解除はいつでもOK! 登録はこちら↓


ABOUT US
ゆかアフィリエイター兼WordPress専門家
ご訪問ありがとうございます! ゆかブログの管理人でアフィリエイター兼WordPress専門家のゆかです。福岡で3人の子供を育てながら、お家でのんびりとブログを書いて生活しています。
ブログを書く以外のお仕事は、パソコンが苦手な女性起業家さんのワードプレスブログ運営をサポートしたり、代行でワードプレスの立ち上げをしています。 ●WordPressコミュニティ『MasterPress』運営
●福岡副業カレッジブログ講師
SEO検定3級
●チャンネル登録1万人超え!WordPressブログ構築専門YouTubeチャンネル「ゆかチャンネル

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