WEBVTT 00:00:01.140 --> 00:00:15.290 はい、それではですね、今回のこの動画では、ノンプログラマーのHTML・CSSのはじめ方ということで、こちらの動画を通して解説を進めていきたいと思います。 00:00:15.290 --> 00:00:23.050 ではまず、こちらですね、この動画を視聴するメイトから解説をしたいと思います。 まず一つ目ですね、 00:00:23.050 --> 00:00:33.570 ウェブサイトの構成される要素がある程度理解できるようになると。 この構成される要素というのが、このHTMLとCSSといった 00:00:33.750 --> 00:00:44.220 プログラミング言語になります。 あとは基本的なブログのデザイン、これを変更できるようになります。 00:00:44.220 --> 00:00:48.820 このHTMLとCSS、 こちらを押しておくと 00:00:48.820 --> 00:00:59.720 デザイン面ですね、主にCSSがデザイン面になっているんですけど、それからブログのデザインですね、これの変更ができるようになります。 00:00:59.720 --> 00:01:04.560 あとはブログのデザインを変更し、差別化できると。 00:01:04.560 --> 00:01:10.860 デザインは流行りしたりとかあったりしますので、そういったデザインの変更が自分でできるようになって、 00:01:10.860 --> 00:01:19.740 そのデザインが綺麗に写れば写るほど 他のブログと差別化できるといった感じですね。 00:01:19.740 --> 00:01:28.900 なのでこういったカスタマイズがある程度できるようになりますよというのがこの動画を視聴するメリットになります。 00:01:28.900 --> 00:01:34.540 この動画で使うツールですね。 これをあらかじめご紹介していきます。 00:01:34.600 --> 00:01:42.400 まずはワードプレスですね。今回はワードプレスを使ってやっていきたいと思うんですけど、そのワードプレスに 00:01:42.400 --> 00:01:52.560 シンプルカスタムCSSといったプラグインがあります。 これはCSSをカスタマイズできるワードプレスプラグインということで結構 00:01:52.560 --> 00:02:05.540 重宝するプラグインですのでぜひ覚えていただけると思います。 あとはですね、Google Chromeの方にデベロッパーツールと呼ばれるツールが 00:02:05.600 --> 00:02:13.600 搭載されています。 このツールを使うことによってウェブサイトのコードというものを確認できるようになりますので 00:02:13.600 --> 00:02:24.860 これも覚えておくと結構便利ですので、この際に覚えていきましょうといった感じになります。 00:02:24.860 --> 00:02:29.860 ではあらかじめこの動画の全体像 00:02:29.860 --> 00:02:38.720 というものをお話ししていきます。 まずは前提知識ですね。こういったHTML、CSSというのは初めて聞く方も多いかと思いますので 00:02:38.720 --> 00:02:46.920 そういった方ですね、ノンプログラマーのために前提知識というものを解説していきたいと思います。 00:02:46.920 --> 00:02:53.700 あとはこのデザインの変更例ですね。どういったところ、どういった要素を変更できるのかというところをあらかじめ解説していきたいと 00:02:53.700 --> 00:02:58.440 思います。 あとはこのデベロッパーツールですね。これを使って 00:02:58.460 --> 00:03:04.490 デザインの変更の仕方というものを見ていきたいと思います。 00:03:04.490 --> 00:03:09.370 実際にデザインの変更をやっていただくと 00:03:09.370 --> 00:03:18.690 このデベロッパーツールを使うことによって 初心者の方でもデザインの変更ができるようになりますので 00:03:18.690 --> 00:03:29.730 これでやっていきましょう。最後にまとめといった感じになります。 ではこの前提知識に入る前に 00:03:30.390 --> 00:03:37.510 このデベロッパーツールを軽く見ていきたいと思いますので 実際の画面をお見せしたいと思います。 00:03:37.510 --> 00:03:46.150 では実際の画面を通してデベロッパーツールというのは一体どんなものかというのを見ていきたいと思います。 00:03:47.230 --> 00:03:52.910 後ほど詳しく解説するんですけど、今全体像というか雰囲気というものを掴んでいただくと思います。 00:03:52.910 --> 00:03:58.270 必ずGoogle Chromeの方で実践してください。 00:03:59.250 --> 00:04:07.530 今回このツイッターの画面をGoogle Chromeの方に表示させて デベロッパーツールを起動させたいと思います。 00:04:07.530 --> 00:04:16.570 デベロッパーツールを起動するにはこちらですね。 こちらの点々のところですね。こちらをクリックしてその他のツール、デベロッパーツールですね。 00:04:16.570 --> 00:04:23.050 これで起動することができます。もしくは こういった適当な箇所で右クリックしていただいて検証ですね。 00:04:23.050 --> 00:04:26.490 こちらをクリックしてください。 00:04:27.050 --> 00:04:34.800 そうしますとこのようにデベロッパーツールが起動されます。 00:04:34.800 --> 00:04:43.520 例えばですけどこのツイッターのアイコンですね。 このロゴのアイコンの色を変更してしまおうと 00:04:43.520 --> 00:04:47.520 いった場合は こちらをクリックして 00:04:47.520 --> 00:04:54.880 このロゴをクリックします。 そうしますとこのロゴのアイコンの対応する 00:04:54.960 --> 00:05:00.920 コードのところに一瞬で移動してくれます。 ここですねこのH1のところが 00:05:00.920 --> 00:05:05.720 ロゴの アイコンを使わせるHTMLといったのがわかります。 00:05:05.720 --> 00:05:11.040 このようにカーソルを持っていきますと、コードの上にですねカーソルを持っていきますと 00:05:11.040 --> 00:05:17.530 ロゴの方に色が付くかと思いますので、それで対応してるんだなというのがわかります。 00:05:17.530 --> 00:05:26.170 ちょっともう一点見てほしいのがこのクラスですね。クラスがこの CSSの名前が記載されていますので 00:05:26.210 --> 00:05:33.890 このアイコンとかアイコンバートのところですね。 そちらを確認するとCSSはこちらに 00:05:33.890 --> 00:05:41.640 表示されています。このスタイルのところですね。 00:05:41.640 --> 00:05:50.280 先ほどクリックした際にCSSもこの該当するところが表示させてくれていますので、こちらが 00:05:50.280 --> 00:05:57.960 アイコンの色とかを指定できるところなんだなというのがわかります。この クラス名も一緒だというのがわかりますし 00:05:58.000 --> 00:06:02.080 あとこのもうすでにこのカラーのところに 00:06:02.080 --> 00:06:08.280 Twitterのこのブルーの色ですねが表示されているからですねというのがあります。 00:06:08.280 --> 00:06:17.800 ちょっと難しく感じるかと思いますけど、慣れてしまえば意外と簡単ですのでコピーアンドベースでできてしまいますので 00:06:17.800 --> 00:06:28.430 今回この色ですね変更してしまおうという場合ですね。 なのでこのチェックを外すと 00:06:29.070 --> 00:06:34.430 そうするとこのカラーのところをチェックを外したのでデフォルトの 00:06:34.430 --> 00:06:40.070 黒になってしまったと。CSSが全く指定されなくなったため 00:06:40.070 --> 00:06:47.470 黒になったといった感じになります。もう一度チェックを入れます。そうすると元通りになったと 00:06:48.390 --> 00:06:54.670 こちらですね。例えば色の変更をした場合はこのブルーのところをクリックしますとこういった 00:06:54.710 --> 00:07:01.910 画面が表示されます。カラーコードを指定したいですとかもともとあるこういった色の指定ができたりとか 00:07:01.910 --> 00:07:09.430 そういった画面です。 あとはこういったカラーピッカーなどがありますよと 00:07:09.430 --> 00:07:16.330 はい これで色を抜き取ることもできます 00:07:16.330 --> 00:07:22.010 こういった感じで色の変更ができてしまうと。これは実際のウェブサイトには反映されません 00:07:22.010 --> 00:07:30.640 あくまで仮としてデザインの変更を見ることができるといったそういった便利なツールになります。 00:07:30.640 --> 00:07:36.760 あとはですね これで色の変更が仮の検証でできますよと 00:07:36.760 --> 00:07:43.080 もう一点覚えておいてほしいのがこれですね クラスのところが 00:07:43.080 --> 00:07:50.160 CSSの名前になりますよと。CSSはこちらに表示されますと この部分と 00:07:50.160 --> 00:07:58.880 このクラスに表示されているこの部分ですね この部分が連携しているので実際のウェブサイトには 00:07:58.960 --> 00:08:06.080 このように映りますよと。そういったイメージです 00:08:06.080 --> 00:08:13.160 結構初めての方は難しく感じるかと思うんですが、こういったイメージでいてください 00:08:13.160 --> 00:08:19.800 もう一点ですね こういったボタンのデザインを自分のサイトに反映させたいといった場合はですね 00:08:19.800 --> 00:08:25.880 こちらをまたクリックしていただいてボタンの要素をまたクリックします 00:08:25.880 --> 00:08:34.000 そうすると一瞬でhtmlの該当するコードに移動してくれます 00:08:34.000 --> 00:08:39.400 こういったウェブサイトのイメージとして持ってほしいのはパズルのようなものだと思っておいてください 00:08:39.400 --> 00:08:44.880 例えばこのボタンの要素もパズルの一ピースですし 00:08:44.880 --> 00:08:51.680 こういった文言もですね、あとこういった要素もパズルの一要素だと そういったイメージで捉えていただくと割と 00:08:52.680 --> 00:08:56.120 何もイメージがないよりかは覚えやすいかなと思います 00:08:56.120 --> 00:09:02.000 なのでこのボタンの要素のパーツだけ抜き取りたいといった場合ですね 00:09:02.000 --> 00:09:06.600 その場合はこのボタンというところがカースを持っていくと色が付きますので 00:09:06.600 --> 00:09:11.520 このクラスのcsの名前を見ていただくと 00:09:11.520 --> 00:09:21.040 だいたいこの画面もそれに対応してこの要素のコードを表示させてくれますので 00:09:21.880 --> 00:09:23.920 これですね 00:09:23.920 --> 00:09:27.400 結構外してみるとデザインが変わったのがわかりますね 00:09:27.400 --> 00:09:32.000 なのでこれが対応しているCSSなんだなっていうのがわかりますね 00:09:32.000 --> 00:09:33.160 はい 00:09:33.160 --> 00:09:37.680 なので自分のサイトに反映させたい場合はこのコードをコピってしまって 00:09:37.680 --> 00:09:44.520 このコードをシンプルカスタムシリーズにコピー&ペーストして反映させると 00:09:44.520 --> 00:09:47.240 そういった手順になります 00:09:47.240 --> 00:09:52.040 現時点で覚えてほしいのはこういったウェブサイトはパズルみたいですので 00:09:52.040 --> 00:10:00.000 このパズルの1ピースをコピーして自分のサイトに当てはめることもできますよと 00:10:00.000 --> 00:10:03.480 そういったイメージでいてください 00:10:03.480 --> 00:10:05.600 あとはですね 00:10:05.600 --> 00:10:11.520 こういった文言なんかを変えられてしまいますよと 00:10:11.520 --> 00:10:13.440 の座はあとこの辺の文ですね 00:10:13.440 --> 00:10:22.140 これをこういった感じで適当なアルファベットに入力したんですけど 00:10:22.940 --> 00:10:26.260 文言も変更できてしまいますよというところですね 00:10:26.260 --> 00:10:28.340 ちっちゃいところですけど 00:10:28.340 --> 00:10:32.420 こういった感じでデベロッパーツールを使うことで 00:10:32.420 --> 00:10:34.780 こういったデザインですね 00:10:34.780 --> 00:10:39.740 ウェブサイトのデザインというものを検証できてしまいますよと 00:10:39.740 --> 00:10:43.340 そういったツールになります 00:10:43.340 --> 00:10:46.700 これは結構便利ですので覚えておいて損はないです 00:10:46.700 --> 00:10:49.940 なのでこの機会に覚えていきましょうといった感じです 00:10:49.940 --> 00:10:52.180 あともう一点現時点で覚えてほしいのは 00:10:52.180 --> 00:10:54.940 このウェブサイトというのはパズルみたいなものですので 00:10:54.940 --> 00:11:00.020 そういったイメージでいてくださいねといった感じになります 00:11:00.020 --> 00:11:03.500 では実際にデベロッパーツールの画面を見たところで 00:11:03.500 --> 00:11:10.250 前提知識の方を確認していきたいと思います 00:11:10.250 --> 00:11:13.370 ウェブサイトの仕組みというのは先ほど見ていただいた通り 00:11:13.370 --> 00:11:18.330 このHTMLというものとCSSというものでできています 00:11:18.330 --> 00:11:26.170 HTMLというのはウェブサイトの構成とか骨組みみたいなイメージでいてください 00:11:26.170 --> 00:11:29.290 CSSはウェブサイトのデザイン面ですね 00:11:29.290 --> 00:11:33.530 これによってウェブサイトの色とかデザイン面ですね 00:11:33.530 --> 00:11:41.430 というものが反映されているといった感じになります 00:11:41.430 --> 00:11:47.990 しかしこのHTMLとCSSというのは難しそうに感じる方が多いかと思います 00:11:47.990 --> 00:11:54.470 これというのは徹底的というか網羅的に学習する必要はないです 00:11:54.470 --> 00:11:59.830 必要な箇所だけ学ぶといったマインドで ok です 00:11:59.830 --> 00:12:04.110 おそらく多くの方がイメージしているのはコードを丸暗記してですね 00:12:04.110 --> 00:12:09.110 そういったイメージを持っている方と思っていると思うんですけど 00:12:09.110 --> 00:12:16.120 そうではなく結構極端な話ですけどコピー&ペーストでも全然成り立ちます 00:12:16.120 --> 00:12:19.760 なのでこの必要な箇所だけですねこのデザイン 00:12:19.760 --> 00:12:25.600 参考にしたいなという箇所だけコピー&ペーストしていただいて 00:12:25.600 --> 00:12:28.360 あとは簡単にでいいので 00:12:28.360 --> 00:12:33.840 例えばカラーで色が変更できるとかそういったところのCSSを学ぶだけでも 00:12:33.840 --> 00:12:41.560 全然ウェブデザインは初心者でもできてしまいますよといった形になります 00:12:41.560 --> 00:12:45.360 なぜそんなことがいるのかと言いますと先ほど紹介したデベロッパーツールですね 00:12:45.360 --> 00:12:50.320 Googleデベロッパーツールの使い方これを覚えれば 00:12:50.320 --> 00:12:53.880 誰でもデザインはできてしまいますよと 00:12:53.880 --> 00:12:59.000 開発者ツールとも言いますこのツールを使いこなせば 00:12:59.000 --> 00:13:06.360 コピー&ペーストで何を出すという意味が結構実感できると思います 00:13:06.360 --> 00:13:11.440 簡単に言うといいデザインを管理できてしまうとそういったイメージです 00:13:11.440 --> 00:13:15.840 プログラマーエンジニアウェブデザイナーも使用しているんですけど 00:13:15.840 --> 00:13:21.200 もちろんノンプログラマーの方々も利用しない手はないです 00:13:21.200 --> 00:13:24.960 無料ですし標準でGoogle Chromeの標準で 00:13:24.960 --> 00:13:31.000 操作されている機能ですのでその機能を覚えておくとかなり幅が広がりますよと 00:13:31.000 --> 00:13:37.800 極端なことを言えばこのデベロッパーツールを使いこなせば誰でもウェブデザイン 00:13:37.800 --> 00:13:41.000 レベルのプログラミングができてしまうといった形になります 00:13:41.000 --> 00:13:44.840 本業にされている方に怒られてしまう表現かもしれないんですけど 00:13:44.840 --> 00:13:48.840 こういったこともできますよと 00:13:48.840 --> 00:13:56.590 使いこなすことによって実現できるといった感じになります 00:13:56.590 --> 00:14:00.110 あとはこのデベロッパーツール以外の方法ですと 00:14:00.110 --> 00:14:05.720 ウェブ上にデザインのコードを公開しているユーザーが多数います 00:14:05.720 --> 00:14:14.440 見出しデザインCSSと検索をかけるとたくさんの記事があることを確認できます 00:14:14.440 --> 00:14:18.680 初心者である私たちが一からコードとかを考える必要は 00:14:18.680 --> 00:14:20.920 正直ないです 00:14:20.920 --> 00:14:23.760 むしろプログラマーとかエンジニアですね 00:14:23.760 --> 00:14:26.480 ウェブデザイナーでない限り一から考えるとか 00:14:26.480 --> 00:14:32.480 そういったことをしているという人はなかなか少数派だと思います 00:14:32.480 --> 00:14:36.640 かなりできるウェブデザイナーとかじゃない限りですね 00:14:36.640 --> 00:14:39.040 なのでそういったコードですね 00:14:39.040 --> 00:14:41.280 ウェブ上にたくさんありますので 00:14:41.280 --> 00:14:46.720 それを使って使いまわしていきましょうよといった感じになります 00:14:46.720 --> 00:14:49.880 むしろエンジニアはこういった参考記事ですね 00:14:49.880 --> 00:14:54.840 ウェブ上の記事というものを使って仕事をしていますので 00:14:54.840 --> 00:14:57.640 ぜひググると言いますけど 00:14:57.640 --> 00:15:07.800 ググって情報は見つかるんだというところも実感してほしいなと思います 00:15:07.800 --> 00:15:10.200 というのが前提知識ですね 00:15:10.200 --> 00:15:18.080 はいでは次にこのデザインの変更例というものを見ていきたいと思います 00:15:18.080 --> 00:15:23.120 こういったブログとかサイトの要素ですね 00:15:23.120 --> 00:15:27.760 例えば見出しですね見出しとかボタン 00:15:27.760 --> 00:15:32.160 あとは箇条書きですねリストとかって言います 00:15:32.160 --> 00:15:34.960 あとはボックスデザインリボン 00:15:34.960 --> 00:15:42.040 引用ボックス吹き出しといったデザインの変更ができます 00:15:42.040 --> 00:15:43.960 あとはフォーム周りですね 00:15:43.960 --> 00:15:51.760 これはメールアドレスとか名前ボタンという要素が一般的です 00:15:51.760 --> 00:15:54.040 このプレスホルダーですね 00:15:54.040 --> 00:16:02.440 これはあらかじめ例として名前をうすらぐとグレーで書き込んでいるという機能になります 00:16:02.440 --> 00:16:06.040 これも実際見てもらったほうがわかりやすいかと思うんですが 00:16:06.040 --> 00:16:10.470 最近よくある手法ですね 00:16:10.470 --> 00:16:12.470 あらかじめこのグレーで書いていることによって 00:16:12.470 --> 00:16:14.870 ここで名前を入力するんだとか 00:16:14.870 --> 00:16:17.990 メールアドレスを入力するんだという形で 00:16:17.990 --> 00:16:23.110 ITが結構弱い人にでも簡単に 00:16:23.110 --> 00:16:28.870 フォーム周りの登録が簡単にわかりやすいとって感じになります 00:16:28.870 --> 00:16:34.160 これも実際にやるときお見せしたいと思います 00:16:34.160 --> 00:16:36.760 あとはこういった部位ですね 00:16:36.760 --> 00:16:39.680 なんでご紹介したかというと 00:16:39.680 --> 00:16:44.160 検索する際に使うので各ウェブサイトの要素ですね 00:16:44.160 --> 00:16:49.000 こういった名称は最低限しておきましょう 00:16:49.000 --> 00:16:50.800 例えばこういった見出し 00:16:50.800 --> 00:16:54.800 CSSデザインという形で検索をするため 00:16:54.800 --> 00:16:56.840 こういったものですね 00:16:56.840 --> 00:17:00.240 ボタンでしたりあとは引用ボックスとかですね 00:17:00.240 --> 00:17:03.440 箇条書きは結構わかりやすいかと思うんですけど 00:17:03.440 --> 00:17:04.880 こういった部位ですね 00:17:04.880 --> 00:17:10.200 ウェブサイトの各要素の名称というものは最適にしておきましょう 00:17:10.200 --> 00:17:13.920 そうすることによって検索ができますよと 00:17:13.920 --> 00:17:18.160 というよりこういったウェブサイトの部位ですね 00:17:18.160 --> 00:17:19.800 部位というか要素ですね 00:17:19.800 --> 00:17:23.920 というのはしておかないとこの先何かと不便ですので 00:17:23.920 --> 00:17:28.080 息の長いウェブ集局というかウェブの運用をしていくためにも 00:17:28.080 --> 00:17:33.030 最低限しておきましょうということですね 00:17:33.030 --> 00:17:35.470 というのがデザインの変更例になります 00:17:35.470 --> 00:17:42.710 ではデベロッパー2の使い方について解説を進めていきます 00:17:42.710 --> 00:17:44.790 前半でお見せしたんですけど 00:17:44.790 --> 00:17:49.590 また改めて復習も込めて解説をしていきたいと思います 00:17:49.590 --> 00:17:51.470 今回はGoogle Chromeですね 00:17:51.510 --> 00:17:55.590 こちらを使用して解説を進めていきます 00:17:55.590 --> 00:17:58.990 他のブラウザでも例えばFirefoxとかSafariといったものでも 00:17:58.990 --> 00:18:03.870 こういったデベロッパーツールというものは存在します 00:18:03.870 --> 00:18:05.590 各ブラウザという名前は異なるんですけど 00:18:05.590 --> 00:18:09.030 必ずこういった開発ツールは存在しますので 00:18:09.030 --> 00:18:14.030 ですが今回は一番使用している人が多いブラウザであるGoogle Chrome 00:18:14.030 --> 00:18:19.440 これを使用していきたいと思います 00:18:19.440 --> 00:18:22.840 使い方はウェブサイト上で右クリックしていただいて 00:18:22.840 --> 00:18:25.240 検証といった操作ですね 00:18:25.240 --> 00:18:27.600 するとツールが起動します 00:18:27.600 --> 00:18:31.200 具体的に何ができるというところなんですが 00:18:31.200 --> 00:18:36.420 ウェブサイトのコードというものを確認できます 00:18:36.420 --> 00:18:40.380 なので他のサイトも確認できてしまうといった感じですね 00:18:40.380 --> 00:18:45.260 このGoogle Chrome上で表示されているウェブサイト全て 00:18:45.260 --> 00:18:51.840 コードを確認することができます 00:18:51.840 --> 00:18:55.320 仮でデザインの変更も可能です 00:18:55.320 --> 00:18:59.720 実際のウェブサイトには影響はないんですけど 00:18:59.720 --> 00:19:07.250 仮想的にですねウェブサイトの変更が可能です 00:19:07.250 --> 00:19:11.370 実際の表示には影響しないので安心してください 00:19:11.370 --> 00:19:13.690 なのでもしもこのデザインを変更した 00:19:13.690 --> 00:19:15.890 このデザインのここの色変更したらどうなる 00:19:15.890 --> 00:19:20.320 というものが確認できてしまいます 00:19:20.320 --> 00:19:22.160 あとは不随の機能としまして 00:19:22.160 --> 00:19:24.720 デバイス別の表示というものを確認できます 00:19:24.720 --> 00:19:32.390 PC、タブレット、スマホといったものですね 00:19:32.390 --> 00:19:37.110 最初は見慣れない画面で結構戸惑うかもしれないんですけど 00:19:37.110 --> 00:19:40.870 慣れてしまえばそこまで難しくないです 00:19:40.870 --> 00:19:47.230 より具体的な操作というような画面を通して説明します 00:19:47.230 --> 00:19:54.270 イメージとしましては僕の感覚的なところを解説するんですけど 00:19:54.270 --> 00:19:56.590 ウェブサイトはパズルのようなイメージですね 00:19:56.590 --> 00:19:58.830 これちょっと冒頭でも言ったんですが 00:19:58.830 --> 00:20:02.750 改めて解説すると僕の中のイメージで申し訳ないんですけど 00:20:02.750 --> 00:20:06.550 パズルのようなイメージです 00:20:06.550 --> 00:20:10.710 なので見出しとか見出しの部分とか 00:20:10.710 --> 00:20:14.350 あとはボタンとかそういった色々な要素のパズル 00:20:14.350 --> 00:20:17.550 というのがウェブサイトのイメージです 00:20:17.550 --> 00:20:19.910 デベロッパーツールを使ってそのパズルの一ピース 00:20:19.910 --> 00:20:21.630 かっこ要素ですね 00:20:21.630 --> 00:20:25.550 を抜き取るといったイメージですね 00:20:25.550 --> 00:20:27.550 そういったイメージでやっていただければ 00:20:27.550 --> 00:20:31.310 結構コードというとアルファベットが 00:20:31.310 --> 00:20:34.070 ライトしたような感じでイメージしにくいかと思うんですけど 00:20:34.070 --> 00:20:35.710 そういったイメージでください 00:20:35.710 --> 00:20:37.150 このデベロッパーツールを使うことで 00:20:37.150 --> 00:20:38.790 その範囲が指定できたりとか 00:20:38.790 --> 00:20:41.150 視覚的にも見えたりしますので 00:20:41.150 --> 00:20:45.430 結構何もないよりはわかりやすいかなと思います 00:20:45.430 --> 00:20:47.390 改めてなんですけど 00:20:47.390 --> 00:20:53.430 またこのデベロッパーツールの使い方っていうものを見ていきましょう 00:20:53.430 --> 00:20:58.030 はいではデベロッパーツールを実際に解説していきたいと思います 00:20:58.030 --> 00:21:02.990 冒頭で説明したよりかは少し丁寧にやっていきたいと思いますので 00:21:02.990 --> 00:21:07.250 実際に手を動かしてみてください 00:21:07.250 --> 00:21:09.370 はいではまず起動ですね 00:21:09.370 --> 00:21:14.250 起動は右クリック検証ですね 00:21:14.250 --> 00:21:16.130 もしくはこの点々のところですね 00:21:16.130 --> 00:21:21.130 こちらからその他のツールデベロッパーツールですね 00:21:21.130 --> 00:21:26.210 といった感じで起動ができます 00:21:26.210 --> 00:21:31.010 こちらがデベロッパーツールの画面になります 00:21:31.010 --> 00:21:35.290 僕は基本的にこの画面下の方に配置してるんですけど 00:21:35.290 --> 00:21:39.770 この×マークの横に点々があるかと思うんですけど 00:21:39.770 --> 00:21:41.530 こちらをクリックして 00:21:41.530 --> 00:21:44.210 例えば左ですとか 00:21:44.210 --> 00:21:48.170 もしくは右ですか 00:21:48.170 --> 00:21:49.650 画面の調整ができますので 00:21:49.650 --> 00:21:53.010 自分が見やすい位置ですねに調整をしてください 00:21:53.010 --> 00:21:56.010 僕は基本的に下が見やすいので 00:21:56.010 --> 00:21:59.610 下にしています 00:21:59.610 --> 00:22:02.850 このようにコードが表示されるわけなんですけど 00:22:02.850 --> 00:22:04.850 基本的な使い方としましては 00:22:04.850 --> 00:22:07.770 その該当箇所っていうものがこのように 00:22:07.770 --> 00:22:09.050 カーソルを持っていくと 00:22:09.050 --> 00:22:12.650 色がつきますということですね 00:22:12.650 --> 00:22:18.440 このように色がつきますよと 00:22:18.440 --> 00:22:22.600 と言ってもどこがどこだか分からないと思いますので 00:22:22.600 --> 00:22:24.080 基本的にはこちらですね 00:22:24.080 --> 00:22:27.560 この□の中に矢印のアイコンですね 00:22:27.560 --> 00:22:30.160 こちらをクリックしてこの色がついた状態ですね 00:22:30.160 --> 00:22:34.760 ブルーになった状態で確認したい箇所をクリックすると 00:22:34.760 --> 00:22:37.560 そうすると一瞬でそのコードですね 00:22:37.560 --> 00:22:43.490 移動してくれます 00:22:43.490 --> 00:22:45.970 もう一点覚えておいてほしいことをしまして 00:22:45.970 --> 00:22:49.050 このウェブサイトっていうのは階層上になっていまして 00:22:49.050 --> 00:22:51.170 このように 00:22:51.170 --> 00:22:55.810 例えばですけどこれをこの状態にして 00:22:55.810 --> 00:22:56.970 この右三角形ですね 00:22:56.970 --> 00:22:58.290 これをクリックすると 00:22:58.290 --> 00:23:01.850 この階層が展開された状態になるかと思うんですけど 00:23:01.850 --> 00:23:10.890 こちらのDIVのヘッダーブランディングですね 00:23:10.890 --> 00:23:14.690 こちらのものですね 00:23:14.690 --> 00:23:16.290 こちらのものが展開すると 00:23:16.290 --> 00:23:20.330 こういった要素が含まれてますよと 00:23:20.330 --> 00:23:25.100 いった感じになります 00:23:25.100 --> 00:23:26.700 少しややこしいかと思うんですけど 00:23:26.700 --> 00:23:28.540 基本的にはこちらからクリックして 00:23:28.540 --> 00:23:31.980 こう行くとその要素が出てくるんですけど 00:23:31.980 --> 00:23:34.060 階層上になってるっていうとこだけ 00:23:34.060 --> 00:23:39.340 ちょっと構造上覚えておいてください 00:23:39.340 --> 00:23:40.980 例えばですけど 00:23:40.980 --> 00:23:42.220 この帯の色ですね 00:23:42.220 --> 00:23:47.020 ヘッダーの帯の色を変更したいなっていう場合ですね 00:23:47.020 --> 00:23:49.180 その場合はこちらクリックすると 00:23:49.180 --> 00:23:51.660 その要素に行きます 00:23:51.660 --> 00:23:55.940 これがIDヘッダーですね 00:23:55.940 --> 00:24:02.620 こちらでCSSが表示される形になりますね 00:24:02.620 --> 00:24:05.460 このヘッダーの部分ですね 00:24:05.460 --> 00:24:08.420 もしくはこのチェックを外す 00:24:08.420 --> 00:24:10.580 もともと白なんで何も変わらないんですけど 00:24:10.580 --> 00:24:12.660 このチェックを外したりしていただくと 00:24:12.660 --> 00:24:14.620 変化が生じますので 00:24:14.620 --> 00:24:18.020 その要素が何か関連するコードなんだなっていうのが 00:24:18.020 --> 00:24:19.940 確認できますね 00:24:19.940 --> 00:24:22.300 例えばこのヘッダーの色を変更したいなという 00:24:22.300 --> 00:24:23.740 ちょっと白なんで 00:24:23.740 --> 00:24:24.900 もっと色を付けたいなという場合は 00:24:24.900 --> 00:24:28.520 こちらをクリックですね 00:24:28.520 --> 00:24:31.760 そうしますとこのように 00:24:31.760 --> 00:24:33.680 色を変更することができますね 00:24:33.680 --> 00:24:36.360 もともとある色もしくはカラー構図で指定してもいいですね 00:24:36.360 --> 00:24:38.760 他のサイドから持ってくるとかできます 00:24:38.760 --> 00:24:41.040 例えばですけどここの色ですね 00:24:41.040 --> 00:24:48.430 ここの色を抜き取って持ってくるってこともできます 00:24:48.430 --> 00:24:50.990 この色ですね 00:24:50.990 --> 00:24:53.230 ちょっとこの色が気になってるなと 00:24:53.230 --> 00:24:56.830 そしたらこちらのカラーコードをコピーと 00:24:56.830 --> 00:25:01.830 もしくは別に表示されてるんでいいんですけど 00:25:01.830 --> 00:25:04.350 このカラーピッカーですね 00:25:04.350 --> 00:25:11.360 これも使うことができますよと 00:25:11.360 --> 00:25:12.520 こちらに持ってきて 00:25:12.520 --> 00:25:14.640 このように反映させることもできますよと 00:25:14.640 --> 00:25:18.280 そういった使い方ができます 00:25:18.280 --> 00:25:19.840 マインドマップでもお話ししたんですけど 00:25:19.840 --> 00:25:22.760 これは仮で検証してるだけなんで 00:25:22.760 --> 00:25:25.400 実際のサイトには一切反映がされてないと 00:25:25.400 --> 00:25:29.490 いった状態になります 00:25:29.490 --> 00:25:31.530 という感じで結構便利ですね 00:25:31.530 --> 00:25:35.410 あとは例えばこの 00:25:35.410 --> 00:25:37.090 だいたいもうお分かりだと思うんですけど 00:25:37.090 --> 00:25:39.210 バックグラウンドカラーっていうところですね 00:25:39.210 --> 00:25:41.130 これがCSSになるんですけど 00:25:41.130 --> 00:25:45.970 これによってウェブサイトの背景色が変わると 00:25:45.970 --> 00:25:46.890 いった感じになります 00:25:46.890 --> 00:25:48.290 もしこのバックグラウンドカラーって 00:25:48.290 --> 00:25:50.210 一体何なんだろうと思ったら 00:25:50.210 --> 00:25:55.010 これをコピーして検索していただくと 00:25:55.010 --> 00:25:57.850 すぐに分かります 00:25:58.050 --> 00:26:00.410 バックグラウンドプロパティ 00:26:00.410 --> 00:26:01.930 プロパティって言うんですけど 00:26:01.930 --> 00:26:04.570 CSSのこういった命令するものですね 00:26:04.570 --> 00:26:07.770 背景色を否定する際に使用しますと 00:26:07.770 --> 00:26:10.530 ググってみるとこういった情報がありますので 00:26:10.530 --> 00:26:12.290 これ一体何の意味なんだろうと思ったら 00:26:12.290 --> 00:26:14.810 ググってみると分かると 00:26:14.810 --> 00:26:18.970 そうやりつつ必要箇所だけググって 00:26:18.970 --> 00:26:22.330 これはこういうプロパティなんだとか 00:26:22.330 --> 00:26:24.450 こういう命令をしてるコードなんだ 00:26:24.450 --> 00:26:25.610 っていう風に覚えていただくと 00:26:25.610 --> 00:26:31.370 結構楽しくなってくるのではないかなと思います 00:26:31.370 --> 00:26:36.090 これは余裕があったらってことですね 00:26:36.090 --> 00:26:38.610 っていうところですね 00:26:38.610 --> 00:26:41.450 基本的にはこちらのこれですね 00:26:41.450 --> 00:26:44.210 これをクリックして見たい要素をクリック 00:26:44.210 --> 00:26:47.650 あとはこちらに表示されるCSSですね 00:26:47.650 --> 00:26:49.450 を確認していただくと 00:26:49.450 --> 00:26:51.770 場合によってはあまり複雑なものだと 00:26:51.770 --> 00:26:54.170 うまく表示してくれないんですけど 00:26:54.170 --> 00:26:55.810 見出しとかそういったものでしたら 00:26:55.810 --> 00:27:00.890 簡単に表示してくれるといった感じになります 00:27:00.890 --> 00:27:06.250 例えばこちらの見出しですね 00:27:06.250 --> 00:27:09.490 この見出しをこちらのデモサイトの方に 00:27:09.490 --> 00:27:13.570 反映したいなといった場合は 00:27:13.570 --> 00:27:14.530 こちらをクリックして 00:27:14.530 --> 00:27:17.730 この見出しの部分をクリックします 00:27:17.730 --> 00:27:19.850 このH2というところですね 00:27:19.850 --> 00:27:21.130 H2というところで 00:27:21.130 --> 00:27:24.410 あとはこのH2ですね 00:27:24.410 --> 00:27:26.970 エントリーコンテンツっていうのは 00:27:26.970 --> 00:27:29.210 かなり大元になっているこの部分ですね 00:27:29.210 --> 00:27:32.250 セクションクラスエントリーコンテンツですね 00:27:32.250 --> 00:27:37.090 このように階層状になっている中のH2タグ 00:27:37.090 --> 00:27:40.650 なのでこのエントリーコンテンツ 00:27:40.650 --> 00:27:45.770 H2となっているといった感じになります 00:27:45.770 --> 00:27:48.970 実際にチェック外してみると変わるので 00:27:48.970 --> 00:27:50.330 ここの部分が対応してるんだな 00:27:50.330 --> 00:27:52.570 というのがざっくりとわかります 00:27:52.570 --> 00:27:59.680 ではこの要素をこのようにコピーしてしまって 00:27:59.680 --> 00:28:03.760 こちらの見出しに当てはめていきたいと思います 00:28:03.760 --> 00:28:07.520 こちらのデモサイトの見出しはこれですね 00:28:07.520 --> 00:28:19.560 H2とチェック外すと変化が加わるので 00:28:19.560 --> 00:28:22.840 もともと黒なので全然変化はないんですが 00:28:22.840 --> 00:28:27.320 ここで例えば色とかを簡単に指定してみると 00:28:27.320 --> 00:28:31.600 ここがH2タグの要素なんだなというのがわかりますね 00:28:31.600 --> 00:28:34.640 これはチェック外してしまって 00:28:34.640 --> 00:28:36.440 ここに先ほどコピーした頃ですね 00:28:36.440 --> 00:28:37.880 これを貼り付けます 00:28:37.880 --> 00:28:42.720 すると先ほどのこちらのサイトですね 00:28:42.720 --> 00:28:46.320 見出しをデモサイトの方に反映させることができると 00:28:46.320 --> 00:28:48.320 って感じになりますね 00:28:48.320 --> 00:28:51.920 これで切り替わって安全に切り替わったので 00:28:51.920 --> 00:28:57.560 この状態でこれをコピーして 00:28:57.560 --> 00:29:01.000 これから紹介するシンプルカスタムCSSですね 00:29:01.000 --> 00:29:03.960 そちらの方に貼り付けて保存するといった感じになります 00:29:03.960 --> 00:29:08.680 そうすると安全に変更ができるといった形ですね 00:29:08.680 --> 00:29:12.320 こちらのデベロッパーツールで検証した結果 00:29:12.320 --> 00:29:15.360 表示にも流れなかったのでこれでOKと 00:29:15.360 --> 00:29:20.360 あとは本格的に反映させていくといった流れになります 00:29:20.360 --> 00:29:23.560 なのでこれを使いこなせれば 00:29:23.560 --> 00:29:27.400 初心者の方でもウェブデザインができると 00:29:27.400 --> 00:29:30.440 一番見出しっていうのは簡単にできますので 00:29:30.440 --> 00:29:36.680 まずは見出しから始めていただいたほうがいいかなと思います 00:29:36.680 --> 00:29:39.760 あとは先ほど解説した通りちょっと気になる要素ですね 00:29:39.760 --> 00:29:42.080 これで見惚しいものはないんですけど 00:29:42.080 --> 00:29:45.480 もしなんかこの要素なんだろうと思ったら 00:29:45.480 --> 00:29:49.440 検索してみるとかっていう形でやってみると 00:29:49.440 --> 00:29:52.840 かなり幅が広がります 00:29:52.840 --> 00:30:00.320 といった形で他のサイトのデザインの要素を参考にできると 00:30:00.320 --> 00:30:04.800 コードをこのようにコピーして自分のサイトで検証してみると 00:30:04.800 --> 00:30:07.960 実際に反映されてデザインを確認できると 00:30:07.960 --> 00:30:11.200 あとデバイスの表示別で見れるというところですね 00:30:11.200 --> 00:30:16.120 こちらをクリックと 00:30:16.120 --> 00:30:17.960 そうするとこういった形で 00:30:17.960 --> 00:30:27.040 いろんなデバイスで表示を確認することができます 00:30:27.040 --> 00:30:27.760 こういった形ですね 00:30:27.760 --> 00:30:33.200 これで記事を作成して表示させた場合ですね 00:30:33.200 --> 00:30:40.860 スマホからの表示は一体どういうふうに見えるのかというのが検証できます 00:30:40.860 --> 00:30:43.260 というのにも役立ちますよと 00:30:43.260 --> 00:30:45.100 結構多機能な感じですね 00:30:45.100 --> 00:30:46.540 このデベロッパーツールは 00:30:46.540 --> 00:30:48.500 なのでこれを覚えていただくと 00:30:48.500 --> 00:30:52.500 こういったデザインというものが検証できますよと 00:30:52.500 --> 00:30:53.860 でも実際に反映されてないんで 00:30:53.860 --> 00:30:59.260 こちら更新を押すと元に戻りますと 00:30:59.260 --> 00:31:02.140 そういった形で使えます 00:31:02.140 --> 00:31:04.460 ではデベロッパーツールの使い方については 00:31:04.460 --> 00:31:06.900 だいたい大枠をつかんでいただいたかと思いますので 00:31:06.900 --> 00:31:10.580 次は実際にデザインを変更していきたいと思います 00:31:10.580 --> 00:31:11.740 まずはこちらですね 00:31:11.740 --> 00:31:17.180 シンプルカスタム CSS というプラグインを導入していきたいと思います 00:31:17.180 --> 00:31:19.100 このプラグインを導入することによって 00:31:19.100 --> 00:31:21.860 定期的にあるテーマの更新作業ですね 00:31:21.860 --> 00:31:23.980 これをしても上書きされない 00:31:23.980 --> 00:31:27.820 リセットされないといった感じになります 00:31:27.820 --> 00:31:32.220 テーマのファイルに直接 CSS を記述するというやり方があるんですけど 00:31:32.220 --> 00:31:36.820 それだと更新した際にリセットされてしまいますので 00:31:36.820 --> 00:31:43.910 なのでこのプラグインを使っていきます 00:31:43.910 --> 00:31:44.910 あとはですね 00:31:44.910 --> 00:31:46.790 Chrome の拡張機能 00:31:46.790 --> 00:31:49.190 Clear Cache というものがありますので 00:31:49.190 --> 00:31:50.910 そちらを導入します 00:31:50.910 --> 00:31:53.470 この Cache っていうのはですね 00:31:53.470 --> 00:31:56.630 ウェブサイト上に情報を一時的に保持してくれる 00:31:56.630 --> 00:31:58.910 機能になるわけなんですが 00:31:58.910 --> 00:32:00.870 これが溜まっているとデザイン変更をしても 00:32:00.870 --> 00:32:02.070 保存ボタンを押しても 00:32:02.070 --> 00:32:06.570 反映されないということがあります 00:32:06.570 --> 00:32:12.770 なのでこの拡張機能でクリアにするといった形になります 00:32:12.770 --> 00:32:17.410 ではここまでは実際の画面を通して解説をしたいと思います 00:32:17.410 --> 00:32:21.010 はいではプラグインの導入からやっていきたいと思います 00:32:21.010 --> 00:32:24.410 こちらの WordPress の管理画面からプラグインですね 00:32:24.410 --> 00:32:30.240 新規追加をクリックしてください 00:32:30.240 --> 00:32:32.760 はいしばらくするとこの画面に行きますので 00:32:32.760 --> 00:32:34.360 このプラグインの検索ですね 00:32:34.360 --> 00:32:44.150 こちらにシンプルカスタム CSS と入力をしてください 00:32:44.150 --> 00:32:46.510 はいするとこのように出てきますね 00:32:46.510 --> 00:32:49.470 すでに導入済みなので有効となっているんですけど 00:32:49.470 --> 00:32:50.310 はいこちらですね 00:32:50.310 --> 00:32:53.990 こちらの画像を探していただいて 00:32:53.990 --> 00:32:58.030 これを今すぐインストールで有効化を行ってください 00:32:58.030 --> 00:33:01.270 他にもいろいろあるんですけど 00:33:01.270 --> 00:33:03.990 こちらがいいかなという形で 00:33:03.990 --> 00:33:06.110 評価もいいですし 00:33:06.110 --> 00:33:08.070 はいこちらにしてください 00:33:08.070 --> 00:33:14.680 必ず今すぐインストールと有効化もセットで行ってください 00:33:14.680 --> 00:33:17.520 有効化が終わりますと 00:33:17.520 --> 00:33:21.720 この外観の中にカスタム CSS という項目が出てきます 00:33:21.720 --> 00:33:27.730 こちらから CSS の編集ができるようになると 00:33:27.730 --> 00:33:30.170 先ほどマインドマップでお伝えした通り 00:33:30.170 --> 00:33:33.170 このこちらに編集した場合は 00:33:33.170 --> 00:33:38.610 テーマの更新をしても一切こちらの内容は 00:33:38.610 --> 00:33:43.690 無くならないといった感じですね 00:33:43.690 --> 00:33:49.420 結構便利なプラグインです 00:33:49.420 --> 00:33:52.780 なのでテーマファイルに直接 CSS を記述するよりかは 00:33:52.780 --> 00:33:55.380 このプラグインを使っていきましょうということですね 00:33:55.380 --> 00:33:57.940 あともう一点ですね 00:33:57.940 --> 00:34:01.980 拡張機能のクリアキャッシュですね 00:34:01.980 --> 00:34:03.220 こちらの導入法です 00:34:03.220 --> 00:34:08.880 これは検索をしていただくと一番上にできます 00:34:08.880 --> 00:34:11.960 これもすでに導入済みですので 00:34:11.960 --> 00:34:13.640 このように出てきますけど 00:34:13.640 --> 00:34:17.760 通常はChromeに追加するというボタンが表示されます 00:34:17.760 --> 00:34:20.080 あとは画面に取っていただくだけです 00:34:20.080 --> 00:34:25.630 2クリックほどで導入できてしまうので非常に簡単です 00:34:25.630 --> 00:34:29.910 導入しますとこのようにロゴが出てきますので 00:34:29.910 --> 00:34:31.230 使い方としましては 00:34:31.230 --> 00:34:34.270 ここを一回クリックするとキャッシュがクリアになると 00:34:34.270 --> 00:34:36.430 なのでもしここに記述して 00:34:36.430 --> 00:34:38.910 このカスタム CSS の更新 00:34:38.910 --> 00:34:40.870 これを押したにもかかわらず 00:34:40.870 --> 00:34:42.590 デザインが反映されないといったときは 00:34:42.590 --> 00:34:45.350 こちらをクリックして 00:34:45.350 --> 00:34:47.910 そのサイトを更新するなりしていただくと 00:34:47.910 --> 00:34:48.830 いった感じになります 00:34:48.830 --> 00:34:50.150 それでも反映されなかったら 00:34:50.150 --> 00:34:54.510 何かしらの記述が間違っているという可能性がありますので 00:34:54.510 --> 00:34:56.510 いくらこれを確認していただくと 00:34:56.510 --> 00:34:58.430 そういった形になります 00:34:58.430 --> 00:35:01.750 では次の解説に進めていきたいと思うんですが 00:35:01.750 --> 00:35:04.150 次はデザインを変更したい会社の記事 00:35:04.150 --> 00:35:06.510 参考記事を見つけて 00:35:06.510 --> 00:35:09.430 それでデザインをするといったやり方をご紹介します 00:35:09.430 --> 00:35:11.830 まだ検索をしていただきます 00:35:11.830 --> 00:35:13.790 見出しデザイン CSS とか 00:35:13.790 --> 00:35:16.150 いった形で検索すると 00:35:16.150 --> 00:35:17.030 コードですね 00:35:17.030 --> 00:35:20.590 コードを仮説した記事がたくさんありますので 00:35:20.590 --> 00:35:24.030 その中から気になったデザインを見つける 00:35:24.030 --> 00:35:26.870 記事中で紹介されているコードをコピー 00:35:26.870 --> 00:35:32.110 で先ほど導入したシンプルカスタム CSS に 00:35:32.110 --> 00:35:32.950 設定箇所ですね 00:35:32.950 --> 00:35:34.070 そちらにペーストすると 00:35:34.070 --> 00:35:38.780 貼り付けるといった感じになります 00:35:38.780 --> 00:35:41.180 必ず保存ボタンをクリックしてください 00:35:41.180 --> 00:35:43.780 この保存ボタンをクリックしても反映されなかったら 00:35:43.780 --> 00:35:44.540 こちらですね 00:35:44.540 --> 00:35:48.060 この拡張機能を使うといった感じになります 00:35:48.060 --> 00:35:52.420 では実際に画面を通して解説をしてみたいと思います 00:35:52.420 --> 00:35:54.860 はいでは参考記事を見つけるところから 00:35:54.860 --> 00:35:57.620 実際にやっていきたいと思います 00:35:57.620 --> 00:36:00.180 例えば見出しデザイン CSS と 00:36:00.180 --> 00:36:03.900 検索をかけてください 00:36:03.900 --> 00:36:06.980 次にデザインによっては古かったりしますので 00:36:06.980 --> 00:36:08.620 トレーナーとかありますので 00:36:08.620 --> 00:36:14.760 このツールからこちらを1年以内にしてください 00:36:14.760 --> 00:36:16.040 一番新しいこちらですね 00:36:16.040 --> 00:36:18.840 2019年4月21日ですね 00:36:18.840 --> 00:36:22.320 こちらの記事を参照していきたいと思います 00:36:22.320 --> 00:36:25.200 ちなみにこのサルバカノというメディアの記事ですね 00:36:25.200 --> 00:36:27.120 結構質がいいので 00:36:27.120 --> 00:36:30.080 これを参考にしていきたいと思います 00:36:30.080 --> 00:36:33.240 このようにCSSじゃないときの対象をまとめ 00:36:33.240 --> 00:36:34.120 みたいな記事もありますので 00:36:34.120 --> 00:36:38.120 これも参考になりますよね 00:36:38.120 --> 00:36:40.960 ではデザインを選択していきたいと思うんですが 00:36:40.960 --> 00:36:43.600 結構このようにいろいろありますので 00:36:43.600 --> 00:36:47.200 今回はこれにしましょうか 00:36:47.200 --> 00:36:49.200 上下に線ですね 00:36:49.200 --> 00:36:52.680 こういったシンプルなデザインにしたいと思います 00:36:52.680 --> 00:36:56.120 現在この左だけにボーダーがあるっていう 00:36:56.120 --> 00:36:59.240 デザインを変えていきたいと思います 00:36:59.240 --> 00:37:01.080 コードですねこれを見てみますと 00:37:01.080 --> 00:37:03.080 これは h1タグになってしまいますので 00:37:03.080 --> 00:37:07.480 このままコピーしてしまいますと問題ありですので 00:37:07.480 --> 00:37:12.600 まずはデベロッパーツールでこの h2タグに対応するクラスですね 00:37:12.600 --> 00:37:18.530 CSSのクラスというものを確認していきましょう 00:37:18.530 --> 00:37:20.050 デベロッパーツールを起動します 00:37:20.050 --> 00:37:22.610 ちなみにショートカットキーでもできますね 00:37:22.610 --> 00:37:25.170 Macの方はコマンドシフトCですね 00:37:25.170 --> 00:37:32.530 なのでWindowsの方はコントロールシフトCで起動するかと思います 00:37:32.530 --> 00:37:35.890 では見出しの要素を確認していきたいと思いますので 00:37:35.890 --> 00:37:37.970 こちらがブルーの状態で 00:37:37.970 --> 00:37:41.290 見出しの要素を一回クリックします 00:37:41.290 --> 00:37:45.530 h2のところが色がついていますので 00:37:45.530 --> 00:37:46.650 この状態ですね 00:37:46.650 --> 00:37:50.730 こちらの右側を見ると 00:37:50.730 --> 00:37:53.810 PostContent2、h2のところですね 00:37:53.810 --> 00:38:00.570 こちらが現在のこのデザインを使わささっているところになります 00:38:00.570 --> 00:38:01.890 一度このですね 00:38:01.890 --> 00:38:04.170 色を変えてみると反映されるので 00:38:04.170 --> 00:38:06.730 これで確認することができますね 00:38:06.730 --> 00:38:10.810 この部分がここに対応しているんだというのが分かるかと思います 00:38:10.810 --> 00:38:13.850 ちなみにこのPostContentというのはですね 00:38:13.850 --> 00:38:18.490 結構このコード自体が階層状になっていまして 00:38:18.490 --> 00:38:19.730 この部分ですね 00:38:19.730 --> 00:38:23.170 クラス、PostContent 00:38:23.170 --> 00:38:27.010 この三角形をクリックしますと 00:38:27.010 --> 00:38:30.570 このように階層状になっているのが確認できますよね 00:38:30.570 --> 00:38:35.210 展開するとPostContentの中にh2タグがある 00:38:35.210 --> 00:38:37.090 というのが分かりますね 00:38:37.090 --> 00:38:42.450 なのでこういったふうに記述がされています 00:38:42.450 --> 00:38:46.650 この部分をコピーしたいと思います 00:38:46.650 --> 00:38:49.650 これは今色を変えてしまったので 00:38:49.650 --> 00:39:02.240 もう一度一回サラの状態でコピーしたいと思います 00:39:02.240 --> 00:39:09.040 こちらをコピーと 00:39:09.040 --> 00:39:10.400 このコピーした状態で 00:39:10.400 --> 00:39:12.360 シンプルカスタムCSSですね 00:39:12.360 --> 00:39:14.880 こちらの画面に移動してください 00:39:14.880 --> 00:39:20.080 有効化しますと外観の中のカスタムCSSに表示されます 00:39:20.840 --> 00:39:24.760 こちらをクリックしますとこの画面に行くといった感じですね 00:39:24.760 --> 00:39:28.320 ではデザインを変更していきたいと思いますので 00:39:28.320 --> 00:39:29.000 ここですね 00:39:29.000 --> 00:39:37.490 この中身のここをコピーすると 00:39:37.490 --> 00:39:39.370 こちらに移動していただいて 00:39:39.370 --> 00:39:45.930 こっちに貼り付けと 00:39:45.930 --> 00:39:46.970 でこちらですね 00:39:46.970 --> 00:39:49.330 コメントアウトという機能がありまして 00:39:49.330 --> 00:39:52.890 これ検索してみるとすぐ出てきます 00:39:52.890 --> 00:39:58.120 コメントアウト、CSSと 00:39:58.120 --> 00:40:00.920 これはですね 00:40:00.920 --> 00:40:04.520 このスラッシュアフタリフで囲まれたもの 00:40:04.520 --> 00:40:07.280 この範囲のコメントとなると 00:40:07.280 --> 00:40:10.040 ブラウザには無視されるので 00:40:10.040 --> 00:40:12.600 CSSは無効にしたりとか 00:40:12.600 --> 00:40:18.240 あとはメモとして残すことができますといった感じになります 00:40:18.240 --> 00:40:20.080 なのでなんかメモ書きですね 00:40:20.080 --> 00:40:23.880 こういった形で文字色の対応する指令ですよとか 00:40:23.880 --> 00:40:26.840 上下の威迫ですよとか 00:40:26.840 --> 00:40:28.440 上の線ですよ下の線ですよ 00:40:28.440 --> 00:40:33.600 いった感じで記述してあると 00:40:33.600 --> 00:40:35.320 なのでこの記事ですね 00:40:35.320 --> 00:40:38.520 このサルワカのメディアですね 00:40:38.520 --> 00:40:40.520 こちらの記事結構良質なものですね 00:40:40.520 --> 00:40:44.640 これで何となくでもどこの指定をしているのか 00:40:44.640 --> 00:40:46.520 っていうのがわかりますよね 00:40:46.520 --> 00:40:50.000 なのでこういったコードですね 00:40:50.000 --> 00:40:54.120 っていうのを丸暗記しなくても大丈夫といった感じになります 00:40:54.120 --> 00:40:58.000 あとはこう結構見慣れている方はわかると思うんですけど 00:40:58.000 --> 00:41:01.640 このシャープの部分がこれ色を指定してるんだなと 00:41:01.640 --> 00:41:05.320 いった感じのがわかりますよね 00:41:05.320 --> 00:41:09.960 基本的にはこの間っていうのは半画といったのが 00:41:09.960 --> 00:41:12.080 コードの基本となります 00:41:12.080 --> 00:41:15.800 ちなみにこのコメントアウトですね 00:41:15.800 --> 00:41:20.720 このようにこの部分ですね 00:41:20.720 --> 00:41:25.600 このコードの部分のメモ書きに使います 00:41:25.600 --> 00:41:27.320 例えば h2タグですね 00:41:27.320 --> 00:41:34.640 h2タグ 見出し デザインと 00:41:34.640 --> 00:41:36.520 このように記述しておきますと 00:41:36.520 --> 00:41:40.080 後から見返した際に管理がしやすいと 00:41:40.080 --> 00:41:42.240 そういった感じになります 00:41:42.240 --> 00:41:44.600 結構これエンジニアの現場の中でも 00:41:44.600 --> 00:41:47.080 盛んに行われている手法ですので 00:41:47.080 --> 00:41:52.360 ぜひ皆さんも活用してみてください 00:41:52.360 --> 00:41:55.640 では次にこちらですね 00:41:55.640 --> 00:41:59.240 このもともと従来に反映されているデザイン 00:41:59.240 --> 00:42:03.120 いらないので消してしまいたいと思います 00:42:03.120 --> 00:42:05.400 いくつか消す方法がありまして 00:42:05.400 --> 00:42:08.520 これは実際に試して反映を確認してみないと 00:42:08.520 --> 00:42:11.160 わからないっていうのが正直なところですので 00:42:11.160 --> 00:42:14.920 一つ一つ確認していきたいと思います 00:42:14.920 --> 00:42:16.760 こういったデザイン作業ですね 00:42:16.760 --> 00:42:18.960 結構コピーでokなんですけど 00:42:18.960 --> 00:42:23.640 基本的にはこの更新をして 00:42:23.640 --> 00:42:26.120 実際の画面に行ってこちらの更新ですね 00:42:26.120 --> 00:42:29.960 デザインを可視化するという作業の繰り返しですね 00:42:29.960 --> 00:42:31.560 ちょっと地道なんですがやっていきましょう 00:42:31.560 --> 00:42:34.560 1個目は先ほど説明したコメントアウトで 00:42:34.560 --> 00:42:39.100 消せるかどうかっていうところですね 00:42:39.100 --> 00:42:40.540 これを確認していきたいと思います 00:42:40.540 --> 00:42:44.000 なので反角にしておいたほうがいいですね 00:42:44.000 --> 00:42:48.660 これでスラッシュですね 00:42:48.660 --> 00:42:53.770 アフターディスクですね 00:42:53.770 --> 00:42:55.490 これで囲むと 00:42:55.490 --> 00:42:58.170 これで1回更新をしてみてですね 00:42:58.170 --> 00:43:00.930 デザインが反映されるかどうかってところですね 00:43:00.930 --> 00:43:02.850 これは×で消してしまいます 00:43:02.850 --> 00:43:04.410 一応キャッシュですね 00:43:04.410 --> 00:43:06.450 これをクリアにしておいて 00:43:06.450 --> 00:43:08.810 更新をします 00:43:08.810 --> 00:43:12.010 このように上下線が現れたんですけど 00:43:12.010 --> 00:43:15.690 従来のデザインがまだ反映されてないので 00:43:15.690 --> 00:43:20.360 いくつか方法を試してみたいと思います 00:43:20.360 --> 00:43:26.760 コメントアウトが効かなかったということなので 00:43:26.760 --> 00:43:28.200 次はですね 00:43:28.200 --> 00:43:31.990 このこれを白にしてしまえば 00:43:31.990 --> 00:43:35.440 消せるんじゃないかというところですね 00:43:35.440 --> 00:43:41.610 これで試してみたいと思います 00:43:41.610 --> 00:43:44.510 これで更新をします 00:43:44.510 --> 00:43:47.350 反映はされないので 00:43:47.350 --> 00:43:51.870 次にこのインポータントですね 00:43:51.870 --> 00:43:55.500 これを検索を書いていただくと 00:43:55.500 --> 00:43:58.060 わかるものなんですが 00:43:58.060 --> 00:44:01.500 CSSっていうのは優先順位っていうのがありまして 00:44:01.500 --> 00:44:04.500 その関係でうまく反映されないっていうことがあります 00:44:04.500 --> 00:44:07.340 その優先順位を一番高く最優先にするのが 00:44:07.340 --> 00:44:11.460 このインポータントっていうものになります 00:44:11.460 --> 00:44:13.300 これを覚えておくと結構便利です 00:44:13.300 --> 00:44:14.780 こういった消すときに 00:44:14.780 --> 00:44:17.260 うまく反映がされないと思いますので 00:44:17.260 --> 00:44:21.460 その際にこのインポータントを必ず使ってください 00:44:21.460 --> 00:44:23.020 これで消せるかどうかっていうところを 00:44:23.020 --> 00:44:33.330 確かめたいと思います 00:44:33.330 --> 00:44:38.330 もしかしたら時間差で反映されるってこともあるんですけど 00:44:38.330 --> 00:44:43.250 もしこれでうまく反映されなかったとしたらですね 00:44:43.250 --> 00:44:52.040 根本的から消してしまおうといったこともできます 00:44:52.040 --> 00:44:56.200 これを試してみたいと思うんですが 00:44:56.200 --> 00:44:57.560 さっきビックリマークにできたので 00:44:58.280 --> 00:45:01.240 これで消えましたね 00:45:01.240 --> 00:45:09.100 この余白が半角じゃないものが混じってたようなので 00:45:09.100 --> 00:45:09.980 これで消せましたね 00:45:09.980 --> 00:45:15.180 白にしたことによって消せると 00:45:15.180 --> 00:45:17.860 もしもこの左側のボーダーですね 00:45:17.860 --> 00:45:20.900 黒根本的から消したいっていう場合はですね 00:45:20.900 --> 00:45:24.580 このカラーっていうものを省いていただいて 00:45:24.580 --> 00:45:25.860 ボーダーレストですね 00:45:25.860 --> 00:45:33.640 こちらの命令で確認をしてみると 00:45:33.640 --> 00:45:35.600 こういった記事を見てもらうと 00:45:35.600 --> 00:45:37.600 なんとなくですね 00:45:37.600 --> 00:45:39.160 にはなってしまうかと思うんですけど 00:45:39.160 --> 00:45:43.480 指令の意味っていうのが一つ一つわかるかと思います 00:45:43.480 --> 00:45:45.120 ボーダーレストっていうのは 00:45:45.120 --> 00:45:50.440 左ボーダーのスタイル 太さ 色を指定する 00:45:50.440 --> 00:45:55.120 といった感じで解説されています 00:45:55.120 --> 00:45:58.200 このプロパティっていうのはですね 00:45:58.200 --> 00:46:03.720 こういったCSSのデザインを指定するものだと 00:46:03.720 --> 00:46:06.480 大きく言うとそういったものだと 00:46:06.480 --> 00:46:11.400 考えていただくと思います 00:46:11.400 --> 00:46:14.320 こちらに記載している通り 00:46:14.320 --> 00:46:19.440 なんというこういった指令を出すことで 00:46:19.440 --> 00:46:21.440 ボーダーは表示されず太さもゼロになると 00:46:21.440 --> 00:46:24.480 完全に色地になるといった感じになります 00:46:24.480 --> 00:46:28.760 なのでこれを使っていきたいと思います 00:46:28.760 --> 00:46:30.520 おそらくこれでも消せると思いますので 00:46:30.520 --> 00:46:35.640 このカラーの部分は消します 00:46:35.640 --> 00:46:37.960 インポータントは消さずに残しておきます 00:46:37.960 --> 00:46:42.480 これで更新をしてみます 00:46:42.480 --> 00:46:44.920 もともと消えたので違いがわからないですけど 00:46:44.920 --> 00:46:49.150 これで消えますよと 00:46:49.150 --> 00:46:51.190 うまく反映されなかった時の対象としましては 00:46:51.190 --> 00:46:55.390 このキャッシュをクリアにして更新 00:46:55.390 --> 00:46:58.830 それでもなかなか反映されないという場合は 00:46:58.830 --> 00:47:00.310 こういった半画とかですね 00:47:00.310 --> 00:47:01.670 この間が半画になってないと 00:47:01.670 --> 00:47:04.030 うまく反映されないってことが1点と 00:47:04.030 --> 00:47:08.150 あとは時間差で反映されることもありますので 00:47:08.150 --> 00:47:11.190 そのいくつか対処法っていうものですね 00:47:11.190 --> 00:47:12.390 こういった時の対処法っていうのを 00:47:12.390 --> 00:47:14.070 覚えていただくと思います 00:47:14.070 --> 00:47:17.150 はいこれで反映されたということなので 00:47:17.150 --> 00:47:20.430 あとはデベロッパーツールで見ていただいて 00:47:20.430 --> 00:47:22.670 もしこの色とかを変える場合は 00:47:22.670 --> 00:47:25.190 どうしていくかっていうのを検証してみてください 00:47:25.190 --> 00:47:27.230 例えばこういったとこですね 00:47:27.230 --> 00:47:29.590 カラーピッカーとか 00:47:29.590 --> 00:47:31.790 もともとある色とか 00:47:31.790 --> 00:47:33.830 あとはこのカラーコードで指定できますので 00:47:33.830 --> 00:47:38.990 これでこれはカラーということで文字色ですね 00:47:38.990 --> 00:47:41.870 っていうことが変えてみると分かったりしますので 00:47:41.870 --> 00:47:43.270 このカラーっていうのは 00:47:43.270 --> 00:47:45.070 文字色の指定なんだなっていう 00:47:45.070 --> 00:47:49.230 動かしてみると全然意味は分からなかったとしても 00:47:49.230 --> 00:47:54.110 検討がついてくるとかっていうことができますので 00:47:54.110 --> 00:47:57.670 ぜひこのデベロッパーツールをうまく活用していただいて 00:47:57.670 --> 00:47:59.030 プログラマーでなくても 00:47:59.030 --> 00:48:03.950 ウェブデザイナーでなくても変更できると 00:48:03.950 --> 00:48:05.910 このボーダートップっていうのはオレンジにしたことによって 00:48:05.910 --> 00:48:08.950 これ上の線なんだなっていうのが分かったと思います 00:48:09.430 --> 00:48:13.750 っていうのがこの参考記事を見つけてやっていただくと 00:48:13.750 --> 00:48:15.510 いった感じになります 00:48:15.510 --> 00:48:19.670 はいではもう1点試しに変更してみたいと思います 00:48:19.670 --> 00:48:21.030 こちらの過剰書きですね 00:48:21.030 --> 00:48:24.710 こちらのデザインを変更してみたいと思います 00:48:24.710 --> 00:48:29.410 検索の方法は先ほどと同じです 00:48:29.410 --> 00:48:35.890 過剰書き デザイン CSS と検索をかけてください 00:48:35.890 --> 00:48:40.410 これも同様に1年以内のものを探しましょう 00:48:41.410 --> 00:48:45.490 また再びこのサルワカトヨメディアのものですね 00:48:45.490 --> 00:48:47.570 これが表示されましたね 00:48:47.570 --> 00:48:52.290 これを使ってやっていきたいと思います 00:48:52.290 --> 00:48:55.850 結構このメディアの記事おすすめですので 00:48:55.850 --> 00:49:02.420 もし参考にするのであればこれを使ってみてください 00:49:02.420 --> 00:49:10.790 はいということでデザインを選択していきたいと思うんですが 00:49:10.790 --> 00:49:12.230 これやっていこうかなと思いますね 00:49:12.230 --> 00:49:14.350 これでデザインを変更していきたいと思います 00:49:14.350 --> 00:49:22.100 まずはデベロッパー2でここに対応するコードを確認していきたいと思います 00:49:22.100 --> 00:49:25.140 はいここですね 00:49:25.140 --> 00:49:28.260 こうクリックすると 00:49:28.260 --> 00:49:32.860 クリックしたことによってここが色が付いたかと思います 00:49:32.860 --> 00:49:36.180 URLのとこですね 00:49:36.180 --> 00:49:39.180 なのでその状態でこちらですね 00:49:39.180 --> 00:49:40.500 右側を見てほしいんですけど 00:49:40.500 --> 00:49:45.100 このポストコンテンツURLのとこですね 00:49:45.100 --> 00:49:48.300 ここが対応してるんだなっていうのがわかりますね 00:49:48.300 --> 00:49:52.260 このようにカーソルを動かすと色が付くのでこうなんだなと 00:49:52.260 --> 00:49:56.460 あとはチェックを外してみると変化するので 00:49:56.460 --> 00:50:01.540 ここが箇条書きのデザインになっているっていうのは明確ですね 00:50:01.540 --> 00:50:07.160 なのでこれをコピーします 00:50:07.160 --> 00:50:08.800 またこちらに貼り付けます 00:50:08.800 --> 00:50:13.840 これもコメントアウトでメモを残しておくと 00:50:13.840 --> 00:50:20.240 後から参照しやすいです 00:50:20.240 --> 00:50:23.680 箇条書きデザインと 00:50:23.680 --> 00:50:31.760 それで先ほどのデザインのコードをコピーします 00:50:31.760 --> 00:50:34.120 これをコピーと 00:50:34.120 --> 00:50:40.350 こちらの下に当てはめていきたいと思います 00:50:40.350 --> 00:50:49.170 ここはですね半画でやったほうが特にミスはないかなと思うので 00:50:49.170 --> 00:50:56.080 ここ半画で揃えます 00:50:56.080 --> 00:50:58.360 あとはですねこちらですね 00:50:58.360 --> 00:51:07.000 この部分をコピーしていきます 00:51:07.000 --> 00:51:12.520 これもこのポストコンテンツのところですね 00:51:12.520 --> 00:51:14.040 これを先頭に配置します 00:51:14.040 --> 00:51:18.920 半画で区切ると間を開けると 00:51:18.920 --> 00:51:21.640 このポストコンテンツってところですね 00:51:21.640 --> 00:51:27.120 これをコピーして先頭に貼り付けてください 00:51:27.120 --> 00:51:29.960 そうするとこちらで対応してくれると 00:51:29.960 --> 00:51:31.480 これも同じですね 00:51:31.480 --> 00:51:36.700 ここまで同じですので 00:51:36.700 --> 00:51:38.820 あとはこちらですね 00:51:38.820 --> 00:51:42.740 こちらにも対応しますよといったものですね 00:51:42.740 --> 00:51:50.130 こちらに記載してあるので必ずこれも反映しましょうねと 00:51:50.130 --> 00:51:53.330 これで更新をクリックしてみます 00:51:53.330 --> 00:51:57.250 あとはですねこのキャッシュを一度クリアして 00:51:57.250 --> 00:51:59.530 デザインを確かめてみましょう 00:51:59.530 --> 00:52:02.610 はい更新するとこのように反映されていますので 00:52:02.610 --> 00:52:08.530 これで箇条書きのデザインが反映できました 00:52:08.530 --> 00:52:12.730 ちょっとこの部分難しかったかと思うんですが 00:52:12.730 --> 00:52:18.610 このulの下にこういったliとか 00:52:18.610 --> 00:52:20.890 あとはこのolっていうのがあるんですけど 00:52:20.890 --> 00:52:24.270 検索してみた方が早いですね 00:52:24.270 --> 00:52:36.120 cssとこれは数字ですね数字の箇条書きのものです 00:52:36.120 --> 00:52:41.240 こちらのソースを見て欲しいんですけど 00:52:41.720 --> 00:52:46.520 olのものがこの123のものになっていると 00:52:46.520 --> 00:52:50.500 指令になっているというのがわかります 00:52:50.500 --> 00:52:56.740 このliっていうのがこのコードっていうのは回想上になっていまして 00:52:56.740 --> 00:53:03.900 olの中のさらにこの実際にテキストを箇条書きする指令みたいな感じで 00:53:03.900 --> 00:53:08.100 覚えていただくと思います 00:53:08.100 --> 00:53:15.720 これもデベロッパーズで見ていただいた方が早いかなと思うんですけど 00:53:15.720 --> 00:53:19.040 このようにulの中にliがあると 00:53:19.040 --> 00:53:21.600 そういった回想になっているので 00:53:21.600 --> 00:53:23.520 こちらで指定をしました 00:53:23.520 --> 00:53:27.040 さらに番号の箇条書きにも対応できるように 00:53:27.040 --> 00:53:29.480 olのものも反映しましたよと 00:53:29.480 --> 00:53:32.880 そういった形になります 00:53:32.880 --> 00:53:36.760 あとはこちらからこういったカラーの指定とかができますので 00:53:36.760 --> 00:53:42.080 これで検証しつつカラーコードで自由にデザインを変更してみてください 00:53:42.080 --> 00:53:43.480 1点注意点なんですが 00:53:43.480 --> 00:53:45.680 こういった箇条書きのデザインを変更しますと 00:53:45.680 --> 00:53:50.480 例えばこういった目字に影響が出てくるという場合があります 00:53:50.480 --> 00:53:53.880 この目字はプラグインを使用しているので 00:53:53.880 --> 00:53:57.400 もし使ってなかったら不要だったら消すっていう対処法もあるんですが 00:53:57.400 --> 00:54:03.040 もしくはこの1234という数字の箇条書きになっているので 00:54:03.040 --> 00:54:09.120 この部分の記述を消すとかっていう形ですね 00:54:09.120 --> 00:54:11.520 という形で 00:54:11.520 --> 00:54:14.240 ちょっとここら辺の判断難しいかと思うんですけど 00:54:14.240 --> 00:54:15.120 対応すると 00:54:15.120 --> 00:54:19.200 もしくはこういったところに影響が出ないようにするには 00:54:19.200 --> 00:54:25.080 htmlとかcssとかかなりがっつりカスタマイズする必要がありますので 00:54:25.080 --> 00:54:29.480 このデザインは元通りに戻してもらうとかっていう形になりますね 00:54:29.480 --> 00:54:33.520 これだけ消すとか消せば元通りになりますので 00:54:33.520 --> 00:54:36.920 そういった形でちょっと他の要素に影響が出たら 00:54:36.920 --> 00:54:41.640 さっきの目字のプラグインなので提出すると 00:54:41.640 --> 00:54:43.520 あとはこういった関連記述ですね 00:54:43.520 --> 00:54:45.360 表示させるプラグイン 00:54:45.360 --> 00:54:47.600 これもプラグインで表示させているわけなんですけど 00:54:47.600 --> 00:54:50.840 こういったときに影響が出てしまったら 00:54:50.840 --> 00:54:55.960 デザインをやめるかもしくはプラグインを提出させるかっていう形になりますね 00:54:55.960 --> 00:55:01.560 ここら辺の判断が難しいかと思うんですけど 00:55:01.560 --> 00:55:07.760 もしこういう感じで他の要素に影響が出たら 00:55:07.760 --> 00:55:08.640 もう一回言いますと 00:55:08.640 --> 00:55:14.520 この記述したコードを消すで更新をするですね 00:55:14.520 --> 00:55:18.800 もしくはプラグインでこういった目字実は使ってないという場合は 00:55:18.800 --> 00:55:22.320 提出させていただくとかという形ですね 00:55:22.320 --> 00:55:27.200 ここのテーマとテーマのコードとプラグインの関連性がちょっとややこしいので 00:55:27.200 --> 00:55:31.520 もしややこしくなってしまったらどちらか一方消していただくと 00:55:31.520 --> 00:55:35.040 そういった対処をよろしくお願いします 00:55:35.040 --> 00:55:37.040 というのが参考記事ですね 00:55:37.040 --> 00:55:40.560 見出しと箇条書きのデザインを変更したわけなんですけど 00:55:40.560 --> 00:55:43.680 こういった形で参考記事を元にデザインをコピー&ペーストで 00:55:43.680 --> 00:55:45.760 基本的にコピー&ペーストですね 00:55:45.760 --> 00:55:49.440 で変更できるといった感じでおいておいてください 00:55:49.440 --> 00:55:50.160 あと一点ですね 00:55:50.160 --> 00:55:52.160 このインポータントですね 00:55:52.160 --> 00:55:55.040 とかコメントアウトとか 00:55:55.040 --> 00:55:58.400 という形でデベロッパー2と 00:55:58.400 --> 00:56:02.920 この記事を参照しつつデザインを変更してみてください 00:56:02.920 --> 00:56:06.720 といったところがこの内容になります 00:56:06.720 --> 00:56:07.760 はい次ですね 00:56:07.760 --> 00:56:11.600 競合サイト多業種のサイトで参考にしたいサイトをピックアップすると 00:56:11.600 --> 00:56:13.600 いったやり方をご紹介します 00:56:13.600 --> 00:56:15.840 僕らネットサーフィンをしていて 00:56:15.840 --> 00:56:20.560 気になったデザインがあったらそれを参考にするといった形でやっていきます 00:56:20.560 --> 00:56:22.760 気になる要素をデベロッパー2で確認 00:56:22.760 --> 00:56:25.000 そのコードをコピーですね 00:56:25.000 --> 00:56:28.760 シンプルカスタムCSSの設定箇所に貼り付けると 00:56:28.760 --> 00:56:32.320 必ず保存ボタンをクリックしてください 00:56:32.320 --> 00:56:33.760 先ほどは 00:56:34.480 --> 00:56:36.240 記事の方では見出しとか 00:56:36.240 --> 00:56:40.200 過剰書きといったものを変更しましたので 00:56:40.200 --> 00:56:43.160 次はホーム周りのデザインをやってみたいと思います 00:56:43.160 --> 00:56:45.680 ホームっていうのはメールアドレスとか名前 00:56:45.680 --> 00:56:48.080 ボタンっていう要素で成り立っているかと思います 00:56:48.080 --> 00:56:49.720 他にもあるかと思うんですけど 00:56:49.720 --> 00:56:52.760 シンプルなのはこの構成ですね 00:56:52.760 --> 00:56:55.720 プレスホルダーですね 00:56:55.720 --> 00:56:57.480 っていうものがありまして 00:56:57.480 --> 00:57:02.680 例えば薄くグレーでメールアドレスのデモで配置してあると 00:57:02.680 --> 00:57:05.720 そうするとなんとなくですけど 00:57:05.720 --> 00:57:10.560 視覚的にここにメールアドレスを入力すればいいんだっていうのがわかりますので 00:57:10.560 --> 00:57:12.120 そういった機能をご紹介します 00:57:12.120 --> 00:57:13.480 名前も同様ですね 00:57:13.480 --> 00:57:17.280 例えば田中太郎みたいな形でグレーで表示されていると 00:57:17.280 --> 00:57:24.540 ここに名前を入力すればいいんだっていうのが一目瞭然でわかると 00:57:24.540 --> 00:57:31.060 それによってコンバージョンとかに影響してきますよといった感じですね 00:57:31.060 --> 00:57:32.100 あとボタンですね 00:57:32.100 --> 00:57:39.060 ボタンの色なんかもこういった参考サイトからピックアップしていただけと思います 00:57:39.060 --> 00:57:43.300 こういったフォーム周りを整えることですね 00:57:43.300 --> 00:57:45.460 を EFO と言いまして 00:57:45.460 --> 00:57:48.540 エントリーフォームの最適化ですね 00:57:48.540 --> 00:57:52.180 という形になります 00:57:52.180 --> 00:57:56.220 なのでフォーム周りも結構自由にカスタマイズできるようになると 00:57:56.220 --> 00:58:00.020 ユーザーに最適化されたものになりますので 00:58:00.020 --> 00:58:03.520 ぜひ覚えていきましょう 00:58:03.520 --> 00:58:06.760 では実際の画面を通してやっていきたいと思います 00:58:06.760 --> 00:58:10.960 はいでは実際の画面を通してやっていきたいと思います 00:58:10.960 --> 00:58:16.960 例えばですけどこのバドゥーというメディアのこの CTA ですね 00:58:16.960 --> 00:58:18.400 このボタン 00:58:18.400 --> 00:58:21.120 これを参考にしたいとします 00:58:21.120 --> 00:58:28.120 なのでこちらをデベロッパーズで確認してみます 00:58:28.120 --> 00:58:30.080 そうしますと 00:58:30.080 --> 00:58:32.920 慣れてくるとすぐにここに来るのでわかるんですけど 00:58:32.920 --> 00:58:36.920 まずはここを見ていただいて色が付いたので 00:58:36.920 --> 00:58:41.160 この HTML の要素ですね 00:58:41.160 --> 00:58:45.760 ここがボタンなんだなっていうのが判断できますね 00:58:45.760 --> 00:58:49.480 で大体こちらをクリックするとこのように 00:58:49.480 --> 00:58:50.720 CSS 側ですね 00:58:50.720 --> 00:58:54.720 右側の CSS 側の方が表示されますので 00:58:54.720 --> 00:58:56.080 バックグラウンドの部分ですね 00:58:56.080 --> 00:58:57.400 このオレンジになっているので 00:58:57.400 --> 00:59:02.400 大体この当てはまっているのでわかると思うんですが 00:59:02.400 --> 00:59:04.720 チェックしてもらうと一番わかりやすいです 00:59:04.720 --> 00:59:09.590 消えるのでこの CSS 側 00:59:09.590 --> 00:59:15.940 このボタンのデザインになっているんだなというのがわかります 00:59:15.940 --> 00:59:17.380 自分のサイトのこちらですね 00:59:17.380 --> 00:59:21.540 このボタンを変更してみたいと思います 00:59:21.540 --> 00:59:26.010 これも一度デベロッパーズで見てみます 00:59:26.010 --> 00:59:28.370 ここをクリック 00:59:28.370 --> 00:59:33.650 これがボタンの要素というのがわかりますね 00:59:33.650 --> 00:59:41.050 ボタンからこちらに表示されるのでわかると思うんですが 00:59:41.050 --> 00:59:43.010 これもチェック外してみると変わるので 00:59:43.010 --> 00:59:47.370 これは対応しているものなんだなというのがわかりますね 00:59:47.370 --> 00:59:48.650 このようにいろいろあるんですけど 00:59:48.650 --> 00:59:53.050 初心者の方は判断できないかと思うので 00:59:53.050 --> 00:59:56.770 これは全部コピーしてしまってください 00:59:56.770 --> 00:59:58.170 場合によっては削ってもいいんですけど 00:59:58.170 --> 01:00:01.090 これは全部コピーしてしまって結構です 01:00:01.090 --> 01:00:04.880 これでコピーと 01:00:04.880 --> 01:00:05.680 コピーしましたら 01:00:05.680 --> 01:00:11.720 シンプルカスタムCSSに移動して貼り付けてください 01:00:11.720 --> 01:00:14.560 先ほどのこちらですね 01:00:14.560 --> 01:00:20.590 参考にしたデザインのCSSをコピーします 01:00:20.590 --> 01:00:25.640 貼り付けます 01:00:25.640 --> 01:00:26.840 バックグラウンドカードですね 01:00:26.840 --> 01:00:29.120 こちらはバックグラウンドとなっているんですけど 01:00:29.120 --> 01:00:33.800 被っているのでこの色のコードだけコピーして 01:00:33.800 --> 01:00:39.160 こちらに当てはめます 01:00:39.160 --> 01:00:41.520 こちらのインポータントは先ほど解説した通り 01:00:41.520 --> 01:00:44.520 最優先でこちらの 01:00:44.520 --> 01:00:48.560 例えばこのバックグラウンドカラーの色の指定を指定しますよと 01:00:48.560 --> 01:00:49.600 反映しますよと 01:00:49.600 --> 01:00:51.840 そういった設定になります 01:00:51.840 --> 01:00:54.840 おそらくこれで反映されると思いますので 01:00:54.840 --> 01:00:58.790 この更新をクリックします 01:00:58.790 --> 01:00:59.790 これで見てみました 01:00:59.790 --> 01:01:02.310 まずはキャッシュをクリアにして 01:01:02.310 --> 01:01:05.280 更新ですね 01:01:05.280 --> 01:01:12.480 このようにデザインが変わったのが確認できています 01:01:12.480 --> 01:01:15.360 ですがちょっと幅が小さくなっているので 01:01:15.360 --> 01:01:19.830 これですね 01:01:19.830 --> 01:01:22.390 この部分ですね 01:01:22.390 --> 01:01:26.950 この部分が幅になりますので 01:01:26.950 --> 01:01:37.590 これもデベロッパー2で見てみたほうが早いですね 01:01:37.590 --> 01:01:39.470 こちらですね 01:01:39.470 --> 01:01:44.550 こちらが幅になっているCSSというのがわかりますね 01:01:44.550 --> 01:01:52.310 この値を変えていただくと 01:01:52.310 --> 01:01:55.590 だいたい90%ぐらいにしておきます 01:01:55.590 --> 01:01:57.790 パーセントにしておくことで 01:01:58.710 --> 01:02:00.270 例えばスマホになったとしても 01:02:00.270 --> 01:02:05.510 画面に合わせて伸縮してくれるので 01:02:05.510 --> 01:02:06.790 このままにしておきます 01:02:06.790 --> 01:02:09.670 パーセントのままにしておきます 01:02:09.670 --> 01:02:10.830 あともう一点カラーですね 01:02:10.830 --> 01:02:17.360 カラーも2つ被っているのでこれも消しましょう 01:02:17.360 --> 01:02:23.920 でこれ更新をクリックします 01:02:23.920 --> 01:02:25.800 これでだいたいOKですね 01:02:25.800 --> 01:02:28.680 ちなみになんですけど 01:02:28.680 --> 01:02:31.160 こういった形で他のデザインにも反映されてしまいましたので 01:02:31.160 --> 01:02:41.000 もし都合が悪かったらその場合は元に戻すという形で調整はしてください 01:02:41.000 --> 01:02:44.480 ということでこのCTNのボタンを変更しました 01:02:44.480 --> 01:02:47.880 あとはですね 01:02:47.880 --> 01:02:54.120 こういったこのボタンをクリックした先の飛び先のページなんですが 01:02:54.120 --> 01:02:58.360 こういった箇所のホームのボタンのデザインですね 01:02:58.360 --> 01:03:07.380 これを参考にしたいとします 01:03:07.380 --> 01:03:08.500 でこちらですね 01:03:08.500 --> 01:03:13.900 これもデベロッパーツールで見てもらえばわかります 01:03:13.900 --> 01:03:16.460 結構WASBというメディアですね 01:03:16.460 --> 01:03:19.980 結構やり手のメディアですので 01:03:19.980 --> 01:03:24.300 こういったボタンの色とか参考にすると 01:03:24.300 --> 01:03:25.340 もしかしたらですけど 01:03:25.340 --> 01:03:29.900 コンバージョン率が上がるかもしれないといった感じですね 01:03:29.900 --> 01:03:32.900 こちらがこのサブミットというところですね 01:03:32.900 --> 01:03:38.760 タイプサブミットのところがボタンの要素になると 01:03:38.760 --> 01:03:40.560 こちらに緑色が表示されてるので 01:03:40.560 --> 01:03:44.000 だいたいここかなっていうのが当てがついてきますね 01:03:44.000 --> 01:03:45.880 ここですね 01:03:45.880 --> 01:03:51.800 これを反映させていこうといった感じになります 01:03:51.800 --> 01:03:53.360 だいたいこのホームっていうのは 01:03:53.360 --> 01:03:57.720 メール配信サービスの方から持ってくるかと思いますので 01:03:57.720 --> 01:04:01.440 それで貼り付けた後にデベロッパーツールで 01:04:01.440 --> 01:04:07.950 このように見てもらうと 01:04:07.950 --> 01:04:11.830 ボタンはこのタイプサブミットですね 01:04:11.830 --> 01:04:17.180 やることが確認できます 01:04:17.180 --> 01:04:24.460 これに対応するところですね 01:04:24.460 --> 01:04:28.500 これですね 01:04:28.500 --> 01:04:29.420 チェックを減らしてみると 01:04:29.420 --> 01:04:36.340 反映されるのでここがこのボタンのCSSっていうのが起こります 01:04:36.340 --> 01:04:40.990 これをコピーします 01:04:40.990 --> 01:04:44.310 もしかしたらすでにインポートアウトついてるので 01:04:47.130 --> 01:04:50.890 カスタマーCSSの他に 01:04:50.890 --> 01:04:53.890 テーマの方にこういう機能 01:04:53.890 --> 01:04:55.770 カスタマーCSSのプラグインの機能が 01:04:55.770 --> 01:04:58.810 すでにデフォルトでついてるっていうことがあります 01:04:58.810 --> 01:05:00.290 それについてご紹介します 01:05:00.290 --> 01:05:01.850 これは完全にテーマではない 01:05:01.850 --> 01:05:07.290 自分のテーマいなかったらセルしていただいて結構なんですけど 01:05:07.290 --> 01:05:08.250 カスタマイズですね 01:05:08.250 --> 01:05:12.090 先ほどクリックした外観のカスタマイズのとこに 01:05:12.090 --> 01:05:15.770 こういった追加CSSというのがあります 01:05:15.890 --> 01:05:18.010 すでにこのように過去に演習してるんで 01:05:18.010 --> 01:05:23.770 ちょっとこれは今回カスタマーCSSを中心に解説していきたいので 01:05:23.770 --> 01:05:32.080 外していきたいと思います 01:05:32.080 --> 01:05:36.740 これで保存、公開と 01:05:36.740 --> 01:05:39.780 もしこういうテーマにこういう機能がありましたら 01:05:39.780 --> 01:05:45.220 そっちも利用してみてくださいといった感じですね 01:05:45.220 --> 01:05:47.700 なのでプラグインは不要です 01:05:47.700 --> 01:05:50.220 話を元に戻しますと 01:05:50.220 --> 01:05:52.260 こちらですね 01:05:52.260 --> 01:05:59.540 こちらをコピーすると 01:05:59.540 --> 01:06:00.420 次ですね 01:06:00.420 --> 01:06:16.040 こちらのコードをコピーしてくると 01:06:16.040 --> 01:06:24.710 幅の指定は被るので消します 01:06:24.710 --> 01:06:25.790 あとバックグラウンドですね 01:06:25.790 --> 01:06:32.520 これもカラーコードだけコピーして 01:06:32.520 --> 01:06:39.200 こちらに被ってしまうので消します 01:06:39.200 --> 01:06:42.840 カラーも被っているので消します 01:06:42.840 --> 01:06:51.980 一旦これで更新をしてみて確認をしてみましょう 01:06:51.980 --> 01:06:55.140 一度キャッシュをクリアにしてから更新をします 01:06:55.140 --> 01:07:02.520 はいこれで変わっているのがわかりますね 01:07:02.520 --> 01:07:08.360 1.5のボーダーボトムだけ反映されなかったんですが 01:07:08.360 --> 01:07:12.880 ボタンの色が変わったのでこれで良しとします 01:07:12.880 --> 01:07:13.680 でなんですけど 01:07:13.680 --> 01:07:15.960 プレースフォルダーですね 01:07:15.960 --> 01:07:21.400 ここに薄いグレーの方で記載されて 01:07:21.400 --> 01:07:24.720 メールアドレスの入力という項目があるかと思います 01:07:24.720 --> 01:07:26.200 これがこれですね 01:07:26.200 --> 01:07:29.800 プレースフォルダーというものになります 01:07:29.800 --> 01:07:31.400 これによって例えばですけど 01:07:31.400 --> 01:07:39.040 よくネット上で見かける方多いかと思うんですが 01:07:39.040 --> 01:07:54.750 サンプルアットサンプルドットコンみたいな形の 01:07:54.750 --> 01:07:57.550 デモでアドレスを入力すると 01:07:57.550 --> 01:08:00.070 はいこういう感じですね 01:08:00.070 --> 01:08:02.790 これを記載しておきますと 01:08:02.790 --> 01:08:05.070 視覚的にわかりますので 01:08:05.070 --> 01:08:09.030 ぜひこれも導入しましょうということですね 01:08:09.030 --> 01:08:09.830 でこれなんですけど 01:08:09.830 --> 01:08:11.550 例えばこういったフォームというのは 01:08:11.550 --> 01:08:14.510 メール配信サービスから持ってくるかと思うんですが 01:08:14.510 --> 01:08:20.110 この中にタイプEメールというのがあります 01:08:20.110 --> 01:08:23.750 その中にこのプレースフォルダーですね 01:08:23.750 --> 01:08:27.270 プレースフォルダーイコールダブルクオーテーション 01:08:27.270 --> 01:08:30.230 で間にこの例となるアドレスを入力 01:08:30.230 --> 01:08:32.150 ダブルクオーテーション 01:08:32.150 --> 01:08:37.030 これをこのタイプEメールの中に入れると 01:08:37.030 --> 01:08:41.000 そういった形になります 01:08:41.000 --> 01:08:43.560 例えばこれが全くプレースフォルダーが 01:08:43.560 --> 01:08:46.160 設定されてないという状態を 01:08:46.160 --> 01:08:47.760 ベースにして解説していくんですけど 01:08:47.760 --> 01:08:49.560 このコードですね 01:08:49.560 --> 01:08:52.320 コピーしておきまして 01:08:52.320 --> 01:08:56.690 実際の画面に行きます 01:08:56.690 --> 01:08:58.930 コテペリの編集ですね 01:08:58.930 --> 01:09:00.810 でこのテキストにします 01:09:00.810 --> 01:09:02.490 テキストにしましたら 01:09:02.490 --> 01:09:04.050 このように検索ですね 01:09:04.050 --> 01:09:07.450 ブラウザの検索を利用します 01:09:07.450 --> 01:09:09.610 このように検索を利用するには 01:09:09.610 --> 01:09:12.570 ショートカットキーが非常に便利です 01:09:12.570 --> 01:09:13.530 で覚えておきましょう 01:09:13.530 --> 01:09:16.010 Macの方はコマンドFですね 01:09:16.010 --> 01:09:21.650 Windowsの方はコントロールFになります 01:09:21.650 --> 01:09:25.690 はいするとこのように色が付くので 01:09:25.690 --> 01:09:29.090 ここのコードが先ほどのフォームの 01:09:29.090 --> 01:09:32.250 メールアドレスの入力欄というのが書けます 01:09:32.250 --> 01:09:34.970 そこに行きましたら 01:09:34.970 --> 01:09:38.170 色を付けておきますけど 01:09:38.170 --> 01:09:43.090 このカッコからスラッシュカッコまでの部分の中の 01:09:43.090 --> 01:09:44.570 プラスフォルダー 01:09:44.570 --> 01:09:47.090 イコールダブルクオーテーション 01:09:47.090 --> 01:09:49.090 でこのアドレスを入力とか 01:09:49.090 --> 01:09:50.890 あとはデモのアドレスを 01:09:50.890 --> 01:09:53.210 Aとして配置するという形で記述しておくと 01:09:53.210 --> 01:09:54.690 いった感じになります 01:09:54.690 --> 01:09:57.890 間は必ず半角でお願いします 01:09:57.890 --> 01:09:59.250 もしうまく反映されなかったら 01:09:59.250 --> 01:10:03.010 結構左側の方に持ってくるといいと思います 01:10:03.010 --> 01:10:05.290 今一番右側にあるかと思うんですけど 01:10:05.290 --> 01:10:07.250 うまく反映されなかった場合ですね 01:10:07.250 --> 01:10:14.190 だいたいこのタイプEメールの 01:10:14.190 --> 01:10:16.150 右側あたりに配置していただきたいと思います 01:10:16.150 --> 01:10:17.870 必ず間は半角を開けていただくと 01:10:17.870 --> 01:10:18.950 いった感じですね 01:10:18.950 --> 01:10:20.550 基本的には反映されると思いますけど 01:10:20.550 --> 01:10:21.990 そういった形でやってみてください 01:10:21.990 --> 01:10:25.560 といったところですね 01:10:25.560 --> 01:10:30.900 なので先ほどのこちらですね 01:10:30.900 --> 01:10:34.500 こちらにデモのメールアドレスを入力しましょう 01:10:34.500 --> 01:10:35.260 といったですね 01:10:35.260 --> 01:10:40.150 変えておきましょうか 01:10:40.150 --> 01:10:41.310 メールアドレスを入力 01:10:41.310 --> 01:10:51.020 よりかは例となるアドレスを入力しておいた方がいいと 01:10:51.020 --> 01:10:55.200 こちらにサンプル 01:10:55.200 --> 01:11:00.240 アットマークサンプル.com 01:11:00.240 --> 01:11:01.960 といった感じですね 01:11:01.960 --> 01:11:03.800 1点注意としまして 01:11:03.800 --> 01:11:06.120 こちらのプレイスホルダーですね 01:11:06.120 --> 01:11:09.200 こちらなんですが必ずメール配信サービスの 01:11:09.200 --> 01:11:11.840 埋め込みコードに配置されているとは限らないです 01:11:11.840 --> 01:11:18.240 なので多くの場合は自分で埋め込む形になります 01:11:18.240 --> 01:11:22.600 ですので書き方を覚えていただくと思います 01:11:22.600 --> 01:11:26.080 ちょっと不安な方はこちら検索を受けていただきますと 01:11:26.080 --> 01:11:29.480 このように詳しい使い方の解説記事があります 01:11:29.480 --> 01:11:33.160 基本的にはこのプレイスホルダー 01:11:33.160 --> 01:11:35.520 イコールここですね 01:11:35.520 --> 01:11:41.800 ホゲホゲになっている分に値を入力するといった感じになります 01:11:41.800 --> 01:11:45.280 なのでこういうとこをコピーしていただいて 01:11:45.280 --> 01:11:48.160 実際の画面に移動し 01:11:48.160 --> 01:11:52.800 貼り付けていただくといった感じになります 01:11:52.800 --> 01:11:55.440 基本的にはこちらですね 01:11:55.440 --> 01:11:57.000 ここからここまでになっていますので 01:11:57.000 --> 01:12:05.560 この最後の角の中にこれが入っていればいいので 01:12:05.560 --> 01:12:09.120 必ずこの前後は反角にしていただくと 01:12:09.120 --> 01:12:10.880 もしうまく反映されなかったら 01:12:10.880 --> 01:12:13.960 前角になっていることを確認していただくと 01:12:13.960 --> 01:12:17.120 こういった形になります 01:12:17.120 --> 01:12:23.560 これで視覚的にもわかりやすいといった感じになります 01:12:23.560 --> 01:12:26.200 今回は名前の入力欄はなかったんですけど 01:12:26.200 --> 01:12:31.000 こういった形でフォームを最適化していただくといった感じになります 01:12:31.000 --> 01:12:35.200 他にも先ほどマインドマップで解説したEFOというのは 01:12:35.200 --> 01:12:39.560 こういったフォームの数を減らすというのもあたまります 01:12:39.560 --> 01:12:41.840 あまりフォームの項目多すぎると 01:12:41.840 --> 01:12:45.600 ユーザーも入力するのに面倒になってしまいますので 01:12:45.600 --> 01:12:48.080 例えばこういったオフトニーページだったら 01:12:48.080 --> 01:12:50.720 メールアドレスのみという形の方が 01:12:50.720 --> 01:12:55.440 一番登録率が高いといった感じになります 01:12:55.440 --> 01:12:57.800 必要だったら当然あった方がいいんですけど 01:12:57.800 --> 01:13:01.120 もし一度考え直してみて 01:13:01.120 --> 01:13:05.320 あまりこの項目いらないなと思ったら減らしていただくと 01:13:05.320 --> 01:13:09.600 その方が最適化されますよというのがEFOの考え方ですね 01:13:09.600 --> 01:13:12.440 あとはこういったものですね 01:13:12.440 --> 01:13:18.520 こういった形で例を配置していただくといった感じになります 01:13:18.520 --> 01:13:19.800 あともう一点ですね 01:13:19.800 --> 01:13:25.240 この送信するとかだとちょっと無機質なので 01:13:25.240 --> 01:13:31.320 例えばこの送信するはバリューという値で変更することができます 01:13:31.320 --> 01:13:39.800 これを例えば無料で受け取るとかですね 01:13:39.800 --> 01:13:56.060 無料でebookを受け取るといった形にしていただくと 01:13:56.060 --> 01:14:02.180 送信するよりかは登録率が上がりますよと 01:14:02.180 --> 01:14:03.860 無料であることを強調しつつ 01:14:03.860 --> 01:14:08.060 安心されるという面もありますので 01:14:08.060 --> 01:14:10.820 送信するというよりかはこの文言ですね 01:14:10.820 --> 01:14:11.900 ちょっとこだわってみて 01:14:11.900 --> 01:14:16.500 無料で何々を受け取るみたいな形で給付していただくと 01:14:16.500 --> 01:14:19.660 これもバリューの値ですね 01:14:19.660 --> 01:14:24.380 バリューという値で変更できるというのが確認できたと思います 01:14:24.380 --> 01:14:28.300 だいたいこの元は送信となってたんで 01:14:28.300 --> 01:14:32.940 それと対応するものがこの色がついたコードの箇所ですね 01:14:32.940 --> 01:14:35.260 必ずありますので 01:14:35.260 --> 01:14:37.020 そこのこの値ですね 01:14:37.020 --> 01:14:40.020 イコールダブルクオーテーションの間 01:14:40.020 --> 01:14:42.100 これを変えていただくと 01:14:42.100 --> 01:14:43.060 そういった形になります 01:14:43.060 --> 01:14:54.120 これも正確なので変更していきたいと思います 01:14:54.120 --> 01:14:57.240 バリューのところまで移動と 01:14:57.240 --> 01:15:00.800 ここが送信するようになっていますので 01:15:00.800 --> 01:15:07.490 これを変えていただくと 01:15:07.490 --> 01:15:13.090 そうすることで登録率に影響が出ますよといった感じになります 01:15:13.090 --> 01:15:16.610 送信するよりかはこちらの方が安心感がありますよね 01:15:16.610 --> 01:15:25.120 という形でホーム周りの最適化もぜひ意識してみてください 01:15:25.120 --> 01:15:28.800 といったのがこの強豪もしくは 01:15:28.800 --> 01:15:33.040 こういった多業種のサイトでもいいので 01:15:33.040 --> 01:15:34.960 参考になる部分を見つけましたら 01:15:34.960 --> 01:15:37.200 このネットサーフィンをしてください 01:15:37.200 --> 01:15:38.240 見つけましたら 01:15:38.240 --> 01:15:39.840 ちょっとデベロッパーツールで 01:15:39.840 --> 01:15:42.440 コードを確かめてみるという感じにしていただきますと 01:15:42.440 --> 01:15:46.760 かなりデザインの幅が広がりますといったところでした 01:15:46.760 --> 01:15:49.480 はいでは次の解説に進めていきたいと思うんですが 01:15:49.480 --> 01:15:53.400 ここだけ編集できればOKというところですね 01:15:53.400 --> 01:15:56.440 色の指定をできればいいかなと思います 01:15:56.440 --> 01:15:57.640 なのでカラーコードですね 01:15:57.640 --> 01:16:00.720 こちらの編集方法を覚えていただくと 01:16:00.720 --> 01:16:06.500 カラーコードの編集を覚えると 01:16:06.500 --> 01:16:10.740 例えば先ほど見出しの上下の線とか 01:16:10.740 --> 01:16:12.020 あと左側の線とか 01:16:12.020 --> 01:16:14.100 そういったところの色の指定ですね 01:16:14.100 --> 01:16:20.140 それができれば結構幅が広がるのではないかなと思います 01:16:20.140 --> 01:16:21.060 もしかしたらですね 01:16:21.060 --> 01:16:26.180 テーマの方で設定できるってこともあるんですが 01:16:26.180 --> 01:16:27.300 設定できなかったら 01:16:27.300 --> 01:16:32.540 そういったところから始めていただくと思います 01:16:32.540 --> 01:16:33.100 あとはですね 01:16:33.100 --> 01:16:36.900 もしちょっと難しく感じられたのであれば 01:16:36.900 --> 01:16:38.500 まずは見出しからやって 01:16:38.500 --> 01:16:41.260 初心者の方は見出しからやっていただくと思います 01:16:41.260 --> 01:16:45.780 見出しのデザインだったらそこまで難しくないので 01:16:45.780 --> 01:16:47.980 そちらをやっていただけと思います 01:16:47.980 --> 01:16:49.620 実際に今回の内容で 01:16:49.620 --> 01:16:52.460 HTML、CSSに興味を持ったなら 01:16:52.460 --> 01:16:57.100 ぜひ全体像をしてください 01:16:57.100 --> 01:16:59.580 もし興味を持ったらですね 01:16:59.580 --> 01:17:02.700 .installとかprogateを救うというサイトから 01:17:02.700 --> 01:17:05.020 無料で学習ができます 01:17:05.020 --> 01:17:09.260 むしろ最初からこちらで学習するよりかは 01:17:09.260 --> 01:17:10.820 こういったデベロッパーツールとかで 01:17:10.820 --> 01:17:15.860 実際のサイトの行動を見て興味を持ってから 01:17:15.860 --> 01:17:17.900 この基礎学習をやった方が 01:17:17.900 --> 01:17:20.460 結構有意義な感じで 01:17:20.460 --> 01:17:24.140 学習ができるのではないかなと思います 01:17:24.140 --> 01:17:27.500 最初から基礎から始めてしまいますと 01:17:27.500 --> 01:17:30.220 結構挫折しがちですので 01:17:30.220 --> 01:17:35.180 そういった順番でやるのもいいかなと思っております 01:17:35.180 --> 01:17:39.310 では最後にまとめですね 01:17:39.310 --> 01:17:40.950 今回のまとめとしまして 01:17:40.950 --> 01:17:42.910 HTML、CSSは基本的に 01:17:42.910 --> 01:17:45.470 コピー&ペーストでOKと 01:17:45.470 --> 01:17:46.510 あとデベロッパーツール 01:17:46.510 --> 01:17:48.990 参考記事でデザインは十分に変更可能 01:17:48.990 --> 01:17:51.110 いろんな変更方法ですね 01:17:51.110 --> 01:17:53.030 これを覚えると 01:17:53.030 --> 01:17:57.460 それだけでいいかなと思います 01:17:57.460 --> 01:17:59.020 あとはワードプレステーマによっては 01:17:59.020 --> 01:18:00.260 デザインが被ってしまいますので 01:18:00.260 --> 01:18:04.700 これで差別化しましょうというところですね 01:18:04.700 --> 01:18:05.580 少しの変更ですね 01:18:05.580 --> 01:18:09.900 デザインというのは流行りしたりがありますので 01:18:09.900 --> 01:18:11.300 それで少しの変更で 01:18:11.300 --> 01:18:17.170 定期の長いサイト運営をしましょうって感じですね 01:18:17.170 --> 01:18:19.130 新しいデザインのテーマを買ったとしても 01:18:19.130 --> 01:18:21.930 ちょっとしたところを変更できれば 01:18:21.930 --> 01:18:23.570 結構幅が広がりますので 01:18:23.570 --> 01:18:28.280 それでやっていきましょうということですね 01:18:28.280 --> 01:18:30.440 では今回の内容は以上になります