ペライチを進化させよう！CSS活用術に
ご参加いただきありがとうございました。
サポートが必要な場合は
お気軽にお問い合わせくださいね。
ペライチテストページ
セミナー中にお見せした、テストで作ったペライチページです。
【Before】CSS設定前
https://peraichi.com/landing_pages/view/cssbefore
【After】CSS設定後
https://peraichi.com/landing_pages/view/cssafter
テストページに使用したCSS
テストページに使用したCSSはこちらからダウンロードください。
下記のリンクを右クリックしてパソコン内に保存してください。
CSSファイルが開けない方、うまく見れない方は、以下をご覧ください。
テストページに使用したCSS
/* ヘッダーロゴ */
.p-navigationHeader {
max-width: 250px;
}
.p-header__logo {
margin-top: .5em;
margin-left: .5em;
}
/* ヘッダーの背景透過 */
.p-header {
background-color: rgba(255,255,255,0);
}
.p-m_navigation {
background-color: rgba(255,255,255,.9);
}
.p-navigation__wrapper {
overflow: visible;
background-color: rgba(255,255,255,0);
}
/* ヘッダーメニュー */
.p-m_navigationMenu a {
padding-left: 2em;
font-size: .95em;
color: #5e5d68;
}
/* 英字タイトル筆記体 */
#section-4 h2, #section-7 h2, #section-7 .c-heading span {
font-family: 'League Script', cursive;
font-size: 1.5em;
font-weight: bold;
color: #5e5d68;
}
/* プロフィール部分 */
#section-8, #section-22 {
font-size: 1.2em;
line-height: 1.9;
color: #333;
text-shadow: 1px 1px 5px #fff, -1px 1px 5px #fff, 1px -1px 5px #fff, -1px -1px 5px #fff;
}
/* 背景繋ぎ */
#section-8 .c-bg-img {
background-position: center bottom !important;
background-size: 100% !important;
}
#section-22 .c-bg-img {
background-position: center top !important;
background-size: 100% !important;
}
/* サービス紹介部分 */
.p-m-card-text {
font-size: 1.1em;
line-height: 1.8;
color: #333;
}
/* ボタン */
.c-btn a, .c-btn input, .c-btn .btn-customform-submit, .c-btn button {
background-color: #fff;
color: #5e5d68;
border: 1px solid #5e5d68;
}
.c-btn a:hover, .c-btn input:hover, .c-btn .btn-customform-submit:hover, .c-btn button:hover {
background-color: #5e5d68;
color: #fff;
border: 1px solid #5e5d68;
}
/* 背景に黒い透過 */
#section-3 .c-bg-img::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
/* 大きすぎるロゴ画像調整 */
#section-6 .c-img--responsive img {
max-width: 200px;
}
/* Webライフロゴ画像の周りの枠 */
#section-6 .c-border {
border: 1px solid #9798a5;
border-radius: 0 20px;
}
/* ギャラリー４列下のスペース */
#section-9 {
margin-bottom: 2em;
}
/* タイトル下のスペース */
#section-16 .u-mbmd, #section-18 .u-mbmd {
margin-bottom: 1.5em;
}
/* テーブル（表） */
#section-16 table td, #section-16 table th {
background: #f7f7f7;
}
#section-16 table tr:nth-child(odd) td, #section-16 table tr:nth-child(odd) th {
background: #fff;
}
/* タイルレイアウト */
#section-18 .p-others-rectangle__item-inner {
height: 100%;
min-height: 100px;
padding: 1.5em;
line-height: 1.8;
background-color: #f7f7f7;
}
#section-18 .p-others-rectangle__item-bg {
background-size: 100% !important;
}
/* よくある質問 */
.p-list-faq-accordion__title-area:before {
content:"Q.";
color:#f4ad15;
font-weight:bold;
font-size: 2em;
}
.p-list-faq-accordion__title-area:after {
color: #5e5d68;
}
.p-list-faq-accordion__title-area {
border-bottom: dotted 2px #9798a5;
}
/* 見出し（下線） */
.p-heading-btm-bdr {
position: relative;
margin-bottom: 30px;
padding-bottom: 24px;
}
.p-heading-btm-bdr:after {
border-top: 11px dotted #9798a5;
}
/* お問い合わせはこちらボックス */
.p-premium-btn-set-3__wrapper {
box-shadow: 0 0 5px rgb(0 0 0 / 20%);
background-color: #eee;
padding: 0 20px 20px;
}
.p-premium-btn-set-3__wrapper h2 {
color: #000;
}
/* 決済用ボタン（ヘッダー付き） */
.c-bg-grad {
background-image: -webkit-linear-gradient(right, rgba(244, 173, 21, 0.9), rgba(255, 255, 255, 0.9));
background-image: linear-gradient(to left, rgba(244, 173, 21, 0.9), rgba(255, 255, 255, 0.9));
}
.p-order-set-contents .c-inner--one-elem.c-inner--md {
padding: 3.5em 20px;
}
/* お問い合わせフォーム */
.p-premium-form__inner {
background-color: rgba(255, 255, 255, .9);
border: none;
}
.c-form {
background-color: rgba(255,255,255,0);
}
.p-premium-form .c-form div .form-group:nth-child(even) {
background-color: inherit;
}
.c-form input[type="text"], .c-form input[type="email"], .c-form textarea, .c-form select {
border: 2px solid #5e5d68;
}
.c-form input:placeholder-shown, .c-form textarea:placeholder-shown {
border: 2px solid #5e5d68;
}
.form-captcha {
width: 100%;
height: auto;
text-align: center;
border: none;
background: inherit;
}
.form-captcha div {
display: block;
}
/* コピーライト部分 */
#section-1 .c-bg-img {
background-position: center bottom -40px !important;
background-size: 100% !important;
}
/* 見出し（手書き線） */
.c-hr-origin--2 {
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%0A%09%20y%3D%220px%22%20viewBox%3D%22-277%20400.9%2040%2040%22%20style%3D%22enable-background%3Anew%20-277%20400.9%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text/css%22%3E%0A%09.st0%7Bfill%3Argba(151, 152, 165, 0.99)%3B%7D%0A%3C/style%3E%0A%3Cg%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20class%3D%22st0%22%20d%3D%22M-265.9%2C417.5c-0.1-0.2-0.3-0.4-0.4-0.6c-0.1-0.1-0.2-0.2-0.3-0.3c-0.3-0.3-0.5-0.5-1%2C0%0A%09%09%09c-0.3%2C0.3-0.6%2C0.7-0.9%2C1c-0.3%2C0.3-0.7%2C0.6-1%2C0.9c-0.2%2C0.2-0.3%2C0.3-0.5%2C0.5c-0.4%2C0.3-0.7%2C0.8-1.1%2C1.1c-0.4%2C0.3-0.6%2C0.7-1%2C1%0A%09%09%09c-0.3%2C0.3-0.6%2C0.6-0.9%2C0.9c-0.4%2C0.4-0.8%2C0.8-1.4%2C1c-0.2%2C0.1-0.4%2C0.5-0.2%2C0.6c0.2%2C0.2%2C0.5%2C0.5%2C0.7%2C0.7c0.3%2C0.3%2C0.8%2C0.5%2C0.7%2C1.1%0A%09%09%09c0.5%2C0.1%2C0.5%2C0.1%2C0.7-0.3c0%2C0%2C0-0.1%2C0-0.1c0.7-0.7%2C1.3-1.4%2C2-2.2c0.2-0.3%2C0.5-0.5%2C0.7-0.7c0.3-0.3%2C0.7-0.6%2C1-0.9%0A%09%09%09c0.3-0.3%2C0.5-0.6%2C0.8-0.8c0.5-0.5%2C1-0.9%2C1.5-1.3c0.2-0.2%2C0.5-0.3%2C0.7-0.4c0.2-0.1%2C0.3-0.2%2C0.3-0.4%0A%09%09%09C-265.5%2C417.9-265.8%2C417.8-265.9%2C417.5z%22/%3E%0A%09%3C/g%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20class%3D%22st0%22%20d%3D%22M-252.8%2C417.5c-0.1-0.2-0.3-0.4-0.4-0.6c-0.1-0.1-0.2-0.2-0.3-0.3c-0.3-0.3-0.5-0.5-1%2C0%0A%09%09%09c-0.3%2C0.3-0.6%2C0.7-0.9%2C1c-0.3%2C0.3-0.7%2C0.6-1%2C0.9c-0.2%2C0.2-0.3%2C0.3-0.5%2C0.5c-0.4%2C0.3-0.7%2C0.8-1.1%2C1.1c-0.4%2C0.3-0.6%2C0.7-1%2C1%0A%09%09%09c-0.3%2C0.3-0.6%2C0.6-0.9%2C0.9c-0.4%2C0.4-0.8%2C0.8-1.4%2C1c-0.2%2C0.1-0.4%2C0.5-0.2%2C0.6c0.2%2C0.2%2C0.5%2C0.5%2C0.7%2C0.7c0.3%2C0.3%2C0.8%2C0.5%2C0.7%2C1.1%0A%09%09%09c0.5%2C0.1%2C0.5%2C0.1%2C0.7-0.3c0%2C0%2C0-0.1%2C0-0.1c0.7-0.7%2C1.3-1.4%2C2-2.2c0.2-0.3%2C0.5-0.5%2C0.7-0.7c0.3-0.3%2C0.7-0.6%2C1-0.9%0A%09%09%09c0.3-0.3%2C0.5-0.6%2C0.8-0.8c0.5-0.5%2C1-0.9%2C1.5-1.3c0.2-0.2%2C0.5-0.3%2C0.7-0.4c0.2-0.1%2C0.3-0.2%2C0.3-0.4%0A%09%09%09C-252.4%2C417.9-252.7%2C417.8-252.8%2C417.5z%22/%3E%0A%09%3C/g%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20class%3D%22st0%22%20d%3D%22M-239.8%2C417.5c-0.1-0.2-0.3-0.4-0.4-0.6c-0.1-0.1-0.2-0.2-0.3-0.3c-0.3-0.3-0.5-0.5-1%2C0%0A%09%09%09c-0.3%2C0.3-0.6%2C0.7-0.9%2C1c-0.3%2C0.3-0.7%2C0.6-1%2C0.9c-0.2%2C0.2-0.3%2C0.3-0.5%2C0.5c-0.4%2C0.3-0.7%2C0.8-1.1%2C1.1c-0.4%2C0.3-0.6%2C0.7-1%2C1%0A%09%09%09c-0.3%2C0.3-0.6%2C0.6-0.9%2C0.9c-0.4%2C0.4-0.8%2C0.8-1.4%2C1c-0.2%2C0.1-0.4%2C0.5-0.2%2C0.6c0.2%2C0.2%2C0.5%2C0.5%2C0.7%2C0.7c0.3%2C0.3%2C0.8%2C0.5%2C0.7%2C1.1%0A%09%09%09c0.5%2C0.1%2C0.5%2C0.1%2C0.7-0.3c0%2C0%2C0-0.1%2C0-0.1c0.7-0.7%2C1.3-1.4%2C2-2.2c0.2-0.3%2C0.5-0.5%2C0.7-0.7c0.3-0.3%2C0.7-0.6%2C1-0.9%0A%09%09%09c0.3-0.3%2C0.5-0.6%2C0.8-0.8c0.5-0.5%2C1-0.9%2C1.5-1.3c0.2-0.2%2C0.5-0.3%2C0.7-0.4c0.2-0.1%2C0.3-0.2%2C0.3-0.4%0A%09%09%09C-239.3%2C417.9-239.6%2C417.8-239.8%2C417.5z%22/%3E%0A%09%3C/g%3E%0A%3C/g%3E%0A%3C/svg%3E");
}
/* 手書き線の区切り */
.c-hr-origin--5 {
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%0A%09%20y%3D%220px%22%20viewBox%3D%22-277%20400.9%2040%2040%22%20style%3D%22enable-background%3Anew%20-277%20400.9%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text/css%22%3E%0A%09.st0%7Bfill%3Argba(151, 152, 165, 0.99)%3B%7D%0A%3C/style%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M-241.7%2C420.3c-2%2C0.2-4%2C0.7-4.8%2C2.5c-0.4-0.5-0.9-1-1.3-1.5c-0.3-0.4-0.6-0.7-1-1.1c-0.7-0.7-1.3-1.4-2-2.1%0A%09c-0.8-0.8-2-1-3-1.5c-1.4-0.7-2.9-0.9-4.5-0.9c-1.1%2C0-2.2%2C0.2-3.2%2C0.3c-3.2%2C0.1-6.3%2C0.7-9.3%2C1.7c-1.3%2C0.4-2.6%2C0.9-3.6%2C1.9%0A%09c-0.6%2C0.6-1.4%2C1.5-2%2C2c-0.3%2C0.3-0.5%2C0.5-0.7%2C0.5l0%2C2c0.3%2C0%2C0.4-0.2%2C0.6-0.3c0.2-0.1%2C0.3-0.3%2C0.5-0.5c1.3-1.6%2C2.7-3.6%2C4.9-4.4%0A%09c1.4-0.5%2C2.8-1%2C4.3-1.3c1.5-0.3%2C3-0.5%2C4.6-0.7c1.3-0.1%2C2.6-0.2%2C4-0.2c1.7-0.1%2C3.2%2C0.6%2C4.8%2C1c0.7%2C0.1%2C1.4%2C0.8%2C1.9%2C1.3%0A%09c0.7%2C0.6%2C1.1%2C1.4%2C1.8%2C2c1.3%2C1.1%2C1.9%2C2.4%2C2.4%2C3.8c0.2%2C0.6%2C0.5%2C0.5%2C1%2C0.5c0.6-0.1%2C0.8-0.5%2C0.9-1c0.2-0.8%2C0.5-1.6%2C1.4-2.1%0A%09c0.2-0.1%2C0.4-0.3%2C0.7-0.4c0.7-0.2%2C1.5-0.6%2C2.3-0.6c1.8%2C0.2%2C3%2C1.1%2C3.3%2C2.7c0%2C0.1%2C0.1%2C0.2%2C0.3%2C0.3c0.2%2C0.1%2C0.3%2C0.1%2C0.5%2C0v-2.1%0A%09C-237.7%2C421-239.9%2C420.1-241.7%2C420.3z%22/%3E%0A%3C/svg%3E%0A");
}
@media only screen and (min-width: 768px) {
/* ヘッダーメニューの右スペース */
#section-2 .col-md {
padding-right: 2rem;
}
/* 大きすぎる画像調整 */
#section-6 .c-img--responsive img {
max-width: 300px;
}
}
@media only screen and (min-width: 480px) {
/* お問い合わせはこちらボックスのスペース */
.p-premium-btn-set-3__wrapper .col-sm {
padding-right: 2rem;
padding-left: 2rem;
}
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
/* スマホ表示のメニュー背景 */
.m_navigationMenu {
background-color: rgba(255, 255, 255, .85);
}
}もし…
こんなお悩みがあれば
- CSSやっぱりわからない！
- 設定したけどうまくいかないー？
- お客さんから難しいこと
頼まれちゃった…
個別でサポートします！
対面もしくはオンライン（Zoom）にて個別サポート承っております。
CSSのことだけではなく、WordPressなどWebサイト全般や、デザインのアドバイスなども受け付けしています。
サポート当日から1週間前までに、お支払いと質問を送ってくださった方には
サポート内容をまとめたレポートをプレゼントしてます。
レポートがあるとメモが少なく済むので聞くことに集中できると好評です。
当ホームページのお問い合わせフォームより申し込み頂き、サポートの日程調整に入らせていただきます。
個別サポートの詳細
時間：90分
場所：オンライン（Zoomを使います）
料金：15,000円
お支払い方法：クレジットカードまたは銀行振り込み
サポート日から1週間前までに相談内容を送っていただいた方は、レポートをプレゼント
講師紹介
倉田ともか（Honeycreate/はにー）
Web制作歴20年。2009年からフリーランスで活動中。ホームページ、チラシ、動画などのデザイン制作からWeb・IT全般のサポートまで幅広く対応。
一度お願いしたらずっと頼みたくなる癒し系デザイナー。
イベント情報
ことり・はにーのWordPressワークショップ
とっても便利なWordPress。
でも初心者にはちょっぴり難しい？！
わからないことを一緒に解決しませんか？
8月23日（月）14:00〜16:00
お問い合わせはこちら
