WordPress専門家、ゆかです♪
わたしは普段、ワードプレスを使ってLP(ランディングページ)を作ることがあります。
そのLP制作をするときに、よく使うHTMLコードとCSSコードを備忘録的にまとめてみました。
参考になれば嬉しいです。
ランディングページの作り方については、こちらの記事に詳しくまとめています。参考にしてください！！
WordPress専門のコミュニティ
「MasterPress」の主宰をしています！
目次は読みたいところをタップして飛べるよ♪
HTMLのみの囲み枠
シンプル囲み枠
<div style="border: #３３３ 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
<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
<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; }
}ゴールドメタルの文字
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 】
一部コピー可能にする
<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名を使っているテキストだけは、コピー可能になる。
まとめ：LP(ランディングページ)制作時に使えるCSSコードやHTMLコード
今回は、LP (ランディングページ)などを作成の際に使えるHTMLコードとCSSコードを備忘録的にまとめてみました。
またどんどん追記していきたいと思いますので、チェックしてもらえたら嬉しいです＾＾
ランディングページの作り方については、こちらの記事に詳しくまとめています。参考にしてください！！
無料メールマガジンでアフィリエイトの基礎知識を公開中！
ブログアフィリエイトの基礎知識を分かりやすく丁寧に丸っと公開中！！
メルマガに登録すると、シークレットサイト「Escape from Zero」にご招待します。このシークレットサイトでは、ブログアフィリエイトの基礎を順序立てて解説しております。
メルマガの登録は無料！配信解除はいつでもOK！ 登録はこちら↓
ラッコキーワードの詳細をチェック
