こんにちは!
私、どなたでもホームページ(サイト)が作れるように詳しくキャプチャー付きで解説したブログ(穏やかな生活)を運営しておりますtyonoro(ちょのろ)と申します。
こちらはそのデモサイト専用サイトになります。
ご自分の企業や店舗のサイトを、自分自身で作りたいけど作り方がわからない。web制作の学習の為にWordPressでサイトを作ってみたい。
そんな方に制作していただけるように、とてもシンプルなサイトではありますが、できるだけわかりやすく解説しています。
WordPressのテーマSWELLを使用しての制作となります。
それぞれ詳しい解説を付けていますので、このデモサイトに別のデモサイトのこの仕様を取り入れたいなど、自由にデザインを組み合わせることもできます。
どなたでも作りたいサイトやデザインがあれば、ご自由にお使いください。
※ ご自分の実績として、ポートフォリオにこのまま掲載するのはご遠慮くださいね。
【WordPressテーマSWELL】ホームページ(デモサイト)の紹介
画像をクリックすると、サイトをご覧になれます。
【WordPressテーマSWELL】SWELL DEMO SITE をサイト風にカスタマイズ(ヘッダーとメインビジュアルのみ)
こんな感じに
![](https://web-demosite-lesson.com/wp-content/uploads/2022/06/swell-demo-site-all.png)
【WordPressテーマSWELL】メインビジュアル左側にメニューを表示したデモサイト(ヘッダーとメインビジュアルのみ)
![](https://web-demosite-lesson.com/wp-content/uploads/2022/06/tyonoro-demo-1.png)
![](https://web-demosite-lesson.com/wp-content/uploads/2022/07/tyonoro-demo-2.png)
【WordPressテーマSWELL】メインビジュアル下側にメニューを表示したデモサイト(ヘッダーとメインビジュアルのみ)
![](https://web-demosite-lesson.com/wp-content/uploads/2022/07/tyonoro-demo-3-fv.png)
【WordPressテーマSWELL】メニューを縦書きにして和風なサイトに!
![和風にメニューを縦書き](https://web-demosite-lesson.com/wp-content/uploads/2022/07/tyonoro-demo-4-fv.png)
【WordPressテーマ SWELL】ヘッダーに電話番号 お問合せを設置する方法
![](https://web-demosite-lesson.com/wp-content/uploads/2022/04/header-tel-contact.png)
>> ヘッダー右側部分に電話番号、お問合せを設置する方法はこちらをご覧ください。
【WordPressテーマ SWELL】固定フッター (SP) にお問い合わせと電話番号を設置する方法
![](https://web-demosite-lesson.com/wp-content/uploads/2022/04/sp-footer-fixed-2.png)
>> 固定フッター(SP)にお問合せと電話番号を設置する方法は、こちらをご覧ください。
【WordPressテーマ SWELL】部分的にGoogleフォントを使用する方法
![](https://web-demosite-lesson.com/wp-content/uploads/2022/04/google-fonts-about-uncle-jam.png)
このタイトルのように部分的にGoogleフォントを使用する方法は、こちらをご覧ください。