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コードを備忘録的にまとめてみました。
またどんどん追記していきたいと思いますので、チェックしてもらえたら嬉しいです＾＾
ランディングページの作り方については、こちらの記事に詳しくまとめています。参考にしてください！！
ラッコキーワードの詳細をチェック
