スモール起業ビルダー・ZONOのブログ

【LPテンプレート】カラフルで使用する、CSSを全部公開します

CSS TOOL

こんにちは、ゾノです。

メモ的な記事です

本記事では、LPテンプレ「カラフル」で僕が使用するCSSをそのまま公開します。

美しくLPを制作できるかどうかはCSSのテクニックが大切です。

とはいえ、僕が使用するCSSは厳選したものしかないので、わりとシンプルかなと思います。カラフル愛用者のために参考になればと思います。

制作環境

WordPressテーマ「LPテンプレートクリエイティブパック「Colorful(カラフル)」」を使用です。導入をご検討の場合は、ぜひこの機会にどうぞ。

ある人にとっては宝で、ある人にとってはゴミ記事です

ただの文字列なので、一見価値がないように見えますが相当有益なCSSです。

僕もこのCSSに落ち着くまでに、試行錯誤を繰り返して今があります。

どうぞ、ショートカットをしてLP制作を楽しんでください(`・ω・´)ゞ

【LPテンプレート】カラフルで使用する、CSSを全部公開します

LPテンプレートのカラフルで使用する、CSSは下記のとおりです。

補足

【LPテンプレート】カラフルで作成したソースコードをそのまま公開【LPテンプレート】カラフルで作成したソースコードをそのまま公開」で公開しているソースコードとの併用がおすすめです。

/*form*/
dl.pub_form input{
	text-align: center;
	font-weight: bold;
	font-size: 40px;
	border-radius: 10px;
	border: 2px solid;
	border-color: #777777;
	width:90%;
	padding:30px;
}

/* ボタン動き要素① */
.line{
	display: inline-block;
	animation: hurueru .1s  infinite;
}

@keyframes hurueru{
	0% {transform: translate(0px, 0px) rotateZ(0deg)}
	25% {transform: translate(2px, 2px) rotateZ(1deg)}
	50% {transform: translate(0px, 2px) rotateZ(0deg)}
	75% {transform: translate(2px, 0px) rotateZ(-1deg)}
	100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

/* ボタン動き要素② */
.line,.a-option73,.a-btnsub73 {-webkit-animation-timing-function: ease-in;-moz-animation-timing-function: ease-in;-o-animation-timing-function: ease-in;animation-timing-function: ease-in;-moz-animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;-o-animation-iteration-count: infinite;-ms-animation-iteration-count: infinite;animation-iteration-count: infinite;}a.a-btn {position:relative;display:inline-block;margin:auto;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}a.a-btn img {display: block;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;}img.a-main {width:100%;position:relative;z-index: 54;}@-moz-keyframes line {0%{ -moz-transform:scale(0.92);}40%{ -moz-transform:scale(0.97);}60%{ -moz-transform:scale(0.86);}80%{ -moz-transform:scale(1);}100%{ -moz-transform:scale(0.92);}}@-o-keyframes line {0%{ -o-transform:scale(0.92);}40%{ -o-transform:scale(0.97);}60%{ -o-transform:scale(0.86);}80%{ -o-transform:scale(1);}100%{ -o-transform:scale(0.92);}}@-webkit-keyframes line {0%{ -webkit-transform:scale(0.92);}40%{ -webkit-transform:scale(0.97);}60%{ -webkit-transform:scale(0.86);}80%{ -webkit-transform:scale(1);}100%{ -webkit-transform:scale(0.92);}}@keyframes line {0%{ transform:scale(0.92);}40%{ transform:scale(0.97);}60%{ transform:scale(0.86);}80%{ transform:scale(1);}100%{ transform:scale(0.92);}}.line{-webkit-animation-name: line;-moz-animation-name: line;-o-animation-name: line;animation-name: line;}

/* ボタン動き要素③ */
.a-btn73{padding-left:0%!important;}.a-option73{top:0%!important;}.a-option73{width:20%!important;}.a-btn73{max-width:100%!important;}.line,.a-btnsub73,.a-option73{animation-duration:1s!important;-webkit-animation-duration:1s;-ms-animation-duration:1s;-moz-animation-duration:1s!important;}

/* 動画の微調整 */
.movie_box{
	width:700px;
	margin: 0 auto;
	padding-top:25px;
}

.movie_box2{
	width:700px;
	height:490px;
	margin: 0 75px 50px 75px ;
	background-position: center;
	background-image : url(http://nakazononorifumi.net/wp-content/uploads/2017/09/tv.png);
	background-repeat:no-repeat;
}

/* ブログカードの設置 */
.link-box{border:1px solid #e1e1e1;padding:10px;display:flex;margin:30px}.link-box:hover{background-color:#f3f3f3;-webkit-transition:background-color .35s;transition:background-color .35s}.img-box{width:25%;float:left}.img-box div{min-height:170px;background-size:cover;background-position:center center}.text-box{width:75%;float:left;padding-left:20px;line-height:1.7;margin:0}.text-box .title{font-size:18px;font-weight:600;color:#428bca;padding:0;margin:0}.text-box .description{font-size:15px;color:#333;padding:0}@media only screen and (max-width:479px){.img-box div{min-height:80px}.text-box{margin-left:10px;line-height:1.5}.text-box .title{font-size:13px;margin:0}.text-box .description{font-size:11px;margin-top:5px}}

/* 横スクロールで画像をスライドさせる */
.image-horizontal-scroll{
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.box{
	display: inline-block;
	width: 90%;
	margin: 10px;
}

Colorful(カラフル)のご購入はこちら

最後までお読みいただき、ありがとうございます。下記のおしらせコーナーも、是非チェックしてくださると喜びます🙇‍
当ブログで無料配布している「ブログの書き方テンプレート」は受け取っておりますか?無料で資料請求できますので、この機会にぜひどうぞ💁‍♂️

お知らせ:厳選した下記のコンテンツがおすすめです

個人から、中小企業様向けに対応しており、Webメディア構築 or リモートワーク(テレビ会議システム)の導入をご検討の方は、ぜひどうぞ🙇‍

おすすめコンテンツ

無料コンテンツ

有料コンテンツ

当ブログと他のサイトの圧倒的な違いは、様々な疑問や悩みを解決するために【無料体験レッスン】30分の無料相談会&体験レッスン(オンライン開催)に初回限定で参加できることです。

どうしても分からなかったり、1人で悩むことがあればご相談ください。

その他、ご相談&ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ

無料から学べる「01blog College」に参加はお済みですか?メディア運営の基礎から応用を、順序立てて学べるオンライン学習サイトです。この機会にぜひどうぞ💁‍♂️

僕は、こんな人です

ゾノ@スモール起業ビルダー
当ブログの筆者。日本一わかりやすいブログ教師/高校教師の職を捨て起業失敗→在宅リモートワークで月収7桁達成→V字回復。10代から不登校や非行で根っからの引きこもり人間。現在はオンライン講座『外出せずに学べるパソコン教室』を運営し生徒は累計230名。個人がマイペースに生きるコツを発信しています。朝大好きです→ #01blog朝活の会
» プロフィール詳細はこちら

チップをいただけると、心から喜びます


人気記事【ブログ書くことない】ブログ書き方テンプレートで解決【ひな形】

人気記事【発表】オンライン学習サイト完備のコミュニティ【01blog College】