0-1 サンプルサイトの確認4:49
実際のサイトはこちら
＞＞https://rednight22y.com/hpkouza/
0-2 ローコード構築とは？8:21
0-3 ドメイン・サーバー周りの契約7:31
今回は「ConoHa WING」と呼ばれるレンタルサーバー会社のドメインとサーバー周りの契約方法について紹介します。

ConoHa WINGのサイトはこちら
＞＞https://www.conoha.jp/wing/?banner_id=d05_media&utm_source=moshimo&utm_medium=media&utm_campaign=others&utm_content=sns&maf=2312_3744838.39288.0..2247636735.1714812376
0-4 最大アップロードサイズが足りなかった時の対処方法2:40
▼ コピペするコード
memory_limit = 〇〇M
upload_max_filesize = 〇〇M
post_max_size = 〇〇M
※実際にファイルサイズに影響する部分は「upload_max_filesize」の部分です
0-5 SWELLテーマの準備1:52
SWELLのサイトはこちら
＞＞https://swell-theme.com/?maf=3885_3379239.53800.0..2247638357.1714812681

1-1 WordPressについての概要5:30
1-2 基本的なWordPressのルール7:23
【WordPress管理画面のログインの仕方】
元のドメイン/wp-admin
1-3 基本的な管理画面の操作法①9:41
1-4 基本的な管理画面の操作法②9:21
1-5 SWELL特有の基本操作法8:26
1-6 定期的なアップロード作業について1:14
1-7 よく使うブロックエディタについて11:54

2-1 制作の際の注意事項1:08
2-2 ① 初期設定編1:48
2-3 ② 必要ページの作成編2:40
2-4 ③ 最低限のカスタマイズ編10:29
2-5 ④ ヘッダー作成編19:00
Font Awesomeのサイトはこちら
＞＞ https://fontawesome.com/

＝＝＝＝＝
▼ 「ウィジェット」→「ヘッダー内部」のコード
<a href="リンクURL">
<div class="btn">お問い合わせはこちら<i class="fa-solid fa-circle-chevron-right"></i>
</div>
</a>
＝＝＝＝＝

＝＝＝＝＝
▼ 自作のボタンコード
/* 真ん中にする場合 */
.btn-wraper {
text-align: center;
}

/* ボタン１ */
.btn {
display: inline-block;
font-size: 16px;
font-weight: bold;
color: white;
background: #de0000;
border:1px solid #de0000;
padding: 0 30px;
width: 100%;
max-width: 425px;
height: 60px;
text-align: center;
line-height: 57.5px;
position: relative;
overflow: hidden;
transition: all 0.5s;
z-index: 1;
}
.btn i {
margin-left: 10px;
}
.btn:hover {
border:1px solid #646464!important;
}
.btn:before {
background: #646464;
content: "";
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: all 0.5s;
z-index: -1;
}
.btn:hover::before {
transform: translateX(0);
}

/* ボタン２ */
.btn2 {
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #de0000;
background: white;
border:1px solid #de0000;
padding: 0 30px;
width: 100%;
max-width: 425px;
height: 60px;
text-align: center;
line-height: 57.5px;
position: relative;
overflow: hidden;
transition: all 0.5s;
z-index: 1;
}
.btn2 i {
margin-left: 10px;
}
.btn2:hover {
color: white!important;
}
.btn2:before {
color: white;
background: #de0000;
content: "";
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: all 0.5s;
z-index: -1;
}
.btn2:hover::before {
transform: translateX(0);
}
＝＝＝＝＝

- 補足 -
サンプルサイトと同様、
サブメニューをメインカラーにしたい場合は
「カスタマイズ」→「ヘッダー」→「サブメニューの背景色」→「メインカラー」に設定してください。
2-6 ⑤ フッター作成編11:57
◆ コピーライト雛形
日付著作者 All Rights Reserved.

＝＝＝＝＝
▼ SNSアイコンのHTMLコード
<div class="sns-icon">
<a href="#">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
＝＝＝＝＝
2-7 ⑥ ファーストビュー作成編12:38
2-8 ⑦ 一部フォントを変えたい時5:46
Googleフォントのサイトはこちら
＞＞https://fonts.google.com/
2-9 ⑧ 共通のCTAボタンの作成編8:31
2-10 ⑨ 下層ページヘッダー作成編6:52
2-11 10 投稿周りの設定編.112:35
2-12 11 投稿周りの設定編.211:10
2-13 12 トップページの作成編20:14
▼ オリジナルカラムのCSSスタイル
.column-radius-shadow {
padding: 1.5em!important;
border-radius: 20px;
box-shadow: 0px 0px 20px rgb(225,225,225);
}
@media(min-width:960px) {
.column-radius-shadow {
padding: 3em!important;
}
}
2-14 13 下層ページの作成（前半）14:51
2-15 14 下層ページの作成（後半）16:50
2-16 15 スマホナビゲーション作成編8:24
2-17 16 固定CTAボタンの作成編6:28
▼ 固定CTAのHTMLテンプレ
<div id="s-fix">
<a href="#">
<img src="メディアからコピーした画 alt="お問合せはこちら">
</a>
</div>
2-18 17 スクロールアニメーションの作成編5:13
2-19 18 スライドショーの作成編8:03
2-20 19 【番外編】お問合せフォームの設置方法9:48
※こちらLP制作講座の方の動画になりますが、中身が同じですので引用させていただいております。

＝＝＝＝＝

▼ HTMLコード
<div id="form-wrapper">
<table>
<tbody>
<tr>
<th><span class="required">必須</span>お名前</th>
<td>[text* your-name]</td>
</tr>
<tr>
<th><span class="required">必須</span>メールアドレス</th>
<td>[email* your-email]</td>
</tr>
<tr>
<th><span class="required">必須</span>電話番号</th>
<td>[tel* your-tel]</td>
</tr>
<tr>
<th><span class="required">必須</span>お問い合わせ項目</th>
<td>[checkbox* checkbox01 use_label_element "制作依頼" "無料相談" "その他"]</td>
</tr>
<tr>
<th><span class="optional">任意</span>お問い合わせ内容</th>
<td>[textarea your-message]</td>
</tr>
</table>
<p>[acceptance acceptance-187]プライバシーポリシーに同意[/acceptance]<p>
</tbody>
</div>
[submit "送信する"]

＝＝＝＝＝

▼ CSSコード
#form-wrapper　{
width: 100%;
}
#form-wrapper　table{
width: 100%;
border-collapse: collapse;
}
#form-wrapper table tr th,
#form-wrapper table tr td{
padding: 1em;
text-align: left;
vertical-align: top;
vertical-align: middle;
}
#form-wrapper table tr th{
width: 30%;
}
@media screen and (max-width:960px){
#form-wrapper{
width: 100%;
}
#form-wrapper table,
#form-wrapper table tbody,
#form-wrapper table tr,
#form-wrapper table tr th,
#form-wrapper table tr td{
display: block;
}
#form-wrapper table{
width: 100%;
}
#form-wrapper table tr th,
#form-wrapper　table tr td{
width: 100%;
padding: 5%;
}
}
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
width: 100%;
padding: 5px 15px;
margin: 10px 0px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
height: 250px;
}
/*「必須」文字デザイン*/
.required{
font-size: 0.75em;
padding: 5px;
color: white;
background-color: #A80604;
border-radius: 3px;
margin-right: 10px;
}
/*「任意」文字デザイン*/
.optional{
font-size: 0.75em;
padding: 5px;
color: white;
background-color: #646464;
border-radius: 3px;
margin-right: 10px;
}
/* 「送信する」ボタン */
input.wpcf7-submit {
display: block;
color: white;
background-color: #323232;
padding: 5px 0;
width: 100%;
margin-top: 50px

＝＝＝＝＝

↓メッセージ本文１（自分宛）
差出人: [your-name] <[your-email]>

＝＝＝＝【お問い合わせ内容】＝＝＝＝＝＝
お名前: [your-name]
メールアドレス: [your-email]
電話番号: [your-tel]
お問い合わせ項目: [checkbox01]
お問い合わせ内容: [your-message]
----------

このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

＝＝＝＝＝

↓メッセージ本文２（相手宛）
この度はお問い合わせありがとうございました。
担当者より後日連絡いたしますので、しばらくお待ちください。
以下、送信内容になります。

----------
お名前: [your-name]
メールアドレス: [your-email]
電話番号: [your-tel]
お問い合わせ項目: [checkbox01]
お問い合わせ内容: [your-message]
----------

このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

＝＝＝＝＝
2-21 20 【番外編】Googleマップの設置方法3:53

Requirements

インターネットにつながるパソコンを持っている
※サーバーとドメインのレンタル料金として、月額1,000円程度が別途必要となります。ご了承ください。
※WordPressテーマとして、一括17,600円の『SWELL』テーマが別途必要となります。ご了承ください。
一般的なIT 知識はある

Description

【売れるホームページの秘密を大公開】

実際に 弊社が運用しているホームページ の裏側をすべて公開。
成果を出すためのノウハウを余すことなく解説し、誰でも本格的なホームページを作れる 実践型講座です。

講座で学べる内容

サイト構築 – ユーザーに信頼されるデザインと使いやすさを実現
SEO施策 – 検索で上位表示させ、安定的に集客する方法
メンテナンス – サイトの運用・更新を効率化し、成果を最大化

他の講座にはない特長

弊社が実際に運用しているホームページの全データを公開
サンプルサイトと同じホームページをゼロから作れる実践プログラム
初心者でも簡単に使えるWordPress人気テーマ「SWELL」を採用

売れるホームページを最短で構築できる、完全網羅型の講座。
プロ仕様のサイトを手に入れ、ビジネスの成長につなげましょう。

Who this course is for:

コストを抑えて自社でHPを制作＆メンテナンスまでしたい店舗などの事業者やそのスタッフ
SWELLテーマを使ったWordPressでのローコード構築を学び本格ホームページを作りたい人

応用HP制作講座】店舗集客でホームページを“自作”したい方へ |WordPressを使った方法で初心者でも本格HPが作る

What you'll learn

Explore related topics

Course content

HP制作講座概要1 lecture • 7min

サイト制作の前準備1 lecture • 1min

第0章：事前準備5 lectures • 25min

第1章：WordPress構築・基礎編7 lectures • 53min

第2章：WordPress構築・実践編21 lectures • 3hr 18min

第3章 SEOについて7 lectures • 1hr 5min

第4章 保守運用について4 lectures • 21min

特典動画4 lectures • 53min

Requirements

Description

Who this course is for: