00:01
はい、それではですね、今回のこの動画では、ノンプログラマーのHTML・CSSのはじめ方ということで、こちらの動画を通して解説を進めていきたいと思います。
ではまず、こちらですね、この動画を視聴するメイトから解説をしたいと思います。 まず一つ目ですね、
ウェブサイトの構成される要素がある程度理解できるようになると。 この構成される要素というのが、このHTMLとCSSといった
プログラミング言語になります。 あとは基本的なブログのデザイン、これを変更できるようになります。
このHTMLとCSS、 こちらを押しておくと
デザイン面ですね、主にCSSがデザイン面になっているんですけど、それからブログのデザインですね、これの変更ができるようになります。
あとはブログのデザインを変更し、差別化できると。
デザインは流行りしたりとかあったりしますので、そういったデザインの変更が自分でできるようになって、
そのデザインが綺麗に写れば写るほど 他のブログと差別化できるといった感じですね。
なのでこういったカスタマイズがある程度できるようになりますよというのがこの動画を視聴するメリットになります。
この動画で使うツールですね。 これをあらかじめご紹介していきます。
まずはワードプレスですね。今回はワードプレスを使ってやっていきたいと思うんですけど、そのワードプレスに
シンプルカスタムCSSといったプラグインがあります。 これはCSSをカスタマイズできるワードプレスプラグインということで結構
重宝するプラグインですのでぜひ覚えていただけると思います。 あとはですね、Google Chromeの方にデベロッパーツールと呼ばれるツールが
搭載されています。 このツールを使うことによってウェブサイトのコードというものを確認できるようになりますので
これも覚えておくと結構便利ですので、この際に覚えていきましょうといった感じになります。
ではあらかじめこの動画の全体像
というものをお話ししていきます。 まずは前提知識ですね。こういったHTML、CSSというのは初めて聞く方も多いかと思いますので
そういった方ですね、ノンプログラマーのために前提知識というものを解説していきたいと思います。
あとはこのデザインの変更例ですね。どういったところ、どういった要素を変更できるのかというところをあらかじめ解説していきたいと
思います。 あとはこのデベロッパーツールですね。これを使って
デザインの変更の仕方というものを見ていきたいと思います。
03:04
実際にデザインの変更をやっていただくと
このデベロッパーツールを使うことによって 初心者の方でもデザインの変更ができるようになりますので
これでやっていきましょう。最後にまとめといった感じになります。 ではこの前提知識に入る前に
このデベロッパーツールを軽く見ていきたいと思いますので 実際の画面をお見せしたいと思います。
では実際の画面を通してデベロッパーツールというのは一体どんなものかというのを見ていきたいと思います。
後ほど詳しく解説するんですけど、今全体像というか雰囲気というものを掴んでいただくと思います。
必ずGoogle Chromeの方で実践してください。
今回このツイッターの画面をGoogle Chromeの方に表示させて デベロッパーツールを起動させたいと思います。
デベロッパーツールを起動するにはこちらですね。 こちらの点々のところですね。こちらをクリックしてその他のツール、デベロッパーツールですね。
これで起動することができます。もしくは こういった適当な箇所で右クリックしていただいて検証ですね。
こちらをクリックしてください。
そうしますとこのようにデベロッパーツールが起動されます。
例えばですけどこのツイッターのアイコンですね。 このロゴのアイコンの色を変更してしまおうと
いった場合は こちらをクリックして
このロゴをクリックします。 そうしますとこのロゴのアイコンの対応する
コードのところに一瞬で移動してくれます。 ここですねこのH1のところが
ロゴの アイコンを使わせるHTMLといったのがわかります。
このようにカーソルを持っていきますと、コードの上にですねカーソルを持っていきますと
ロゴの方に色が付くかと思いますので、それで対応してるんだなというのがわかります。
ちょっともう一点見てほしいのがこのクラスですね。クラスがこの CSSの名前が記載されていますので
このアイコンとかアイコンバートのところですね。 そちらを確認するとCSSはこちらに
表示されています。このスタイルのところですね。
先ほどクリックした際にCSSもこの該当するところが表示させてくれていますので、こちらが
アイコンの色とかを指定できるところなんだなというのがわかります。この クラス名も一緒だというのがわかりますし
あとこのもうすでにこのカラーのところに
06:02
Twitterのこのブルーの色ですねが表示されているからですねというのがあります。
ちょっと難しく感じるかと思いますけど、慣れてしまえば意外と簡単ですのでコピーアンドベースでできてしまいますので
今回この色ですね変更してしまおうという場合ですね。 なのでこのチェックを外すと
そうするとこのカラーのところをチェックを外したのでデフォルトの
黒になってしまったと。CSSが全く指定されなくなったため
黒になったといった感じになります。もう一度チェックを入れます。そうすると元通りになったと
こちらですね。例えば色の変更をした場合はこのブルーのところをクリックしますとこういった
画面が表示されます。カラーコードを指定したいですとかもともとあるこういった色の指定ができたりとか
そういった画面です。 あとはこういったカラーピッカーなどがありますよと
はい これで色を抜き取ることもできます
こういった感じで色の変更ができてしまうと。これは実際のウェブサイトには反映されません
あくまで仮としてデザインの変更を見ることができるといったそういった便利なツールになります。
あとはですね これで色の変更が仮の検証でできますよと
もう一点覚えておいてほしいのがこれですね クラスのところが
CSSの名前になりますよと。CSSはこちらに表示されますと この部分と
このクラスに表示されているこの部分ですね この部分が連携しているので実際のウェブサイトには
このように映りますよと。そういったイメージです
結構初めての方は難しく感じるかと思うんですが、こういったイメージでいてください
もう一点ですね こういったボタンのデザインを自分のサイトに反映させたいといった場合はですね
こちらをまたクリックしていただいてボタンの要素をまたクリックします
そうすると一瞬でhtmlの該当するコードに移動してくれます
こういったウェブサイトのイメージとして持ってほしいのはパズルのようなものだと思っておいてください
例えばこのボタンの要素もパズルの一ピースですし
こういった文言もですね、あとこういった要素もパズルの一要素だと そういったイメージで捉えていただくと割と
何もイメージがないよりかは覚えやすいかなと思います
なのでこのボタンの要素のパーツだけ抜き取りたいといった場合ですね
09:02
その場合はこのボタンというところがカースを持っていくと色が付きますので
このクラスのcsの名前を見ていただくと
だいたいこの画面もそれに対応してこの要素のコードを表示させてくれますので
これですね
結構外してみるとデザインが変わったのがわかりますね
なのでこれが対応しているCSSなんだなっていうのがわかりますね
はい
なので自分のサイトに反映させたい場合はこのコードをコピってしまって
このコードをシンプルカスタムシリーズにコピー&ペーストして反映させると
そういった手順になります
現時点で覚えてほしいのはこういったウェブサイトはパズルみたいですので
このパズルの1ピースをコピーして自分のサイトに当てはめることもできますよと
そういったイメージでいてください
あとはですね
こういった文言なんかを変えられてしまいますよと
の座はあとこの辺の文ですね
これをこういった感じで適当なアルファベットに入力したんですけど
文言も変更できてしまいますよというところですね
ちっちゃいところですけど
こういった感じでデベロッパーツールを使うことで
こういったデザインですね
ウェブサイトのデザインというものを検証できてしまいますよと
そういったツールになります
これは結構便利ですので覚えておいて損はないです
なのでこの機会に覚えていきましょうといった感じです
あともう一点現時点で覚えてほしいのは
このウェブサイトというのはパズルみたいなものですので
そういったイメージでいてくださいねといった感じになります
では実際にデベロッパーツールの画面を見たところで
前提知識の方を確認していきたいと思います
ウェブサイトの仕組みというのは先ほど見ていただいた通り
このHTMLというものとCSSというものでできています
HTMLというのはウェブサイトの構成とか骨組みみたいなイメージでいてください
CSSはウェブサイトのデザイン面ですね
これによってウェブサイトの色とかデザイン面ですね
というものが反映されているといった感じになります
しかしこのHTMLとCSSというのは難しそうに感じる方が多いかと思います
これというのは徹底的というか網羅的に学習する必要はないです
必要な箇所だけ学ぶといったマインドで ok です
おそらく多くの方がイメージしているのはコードを丸暗記してですね
12:04
そういったイメージを持っている方と思っていると思うんですけど
そうではなく結構極端な話ですけどコピー&ペーストでも全然成り立ちます
なのでこの必要な箇所だけですねこのデザイン
参考にしたいなという箇所だけコピー&ペーストしていただいて
あとは簡単にでいいので
例えばカラーで色が変更できるとかそういったところのCSSを学ぶだけでも
全然ウェブデザインは初心者でもできてしまいますよといった形になります
なぜそんなことがいるのかと言いますと先ほど紹介したデベロッパーツールですね
Googleデベロッパーツールの使い方これを覚えれば
誰でもデザインはできてしまいますよと
開発者ツールとも言いますこのツールを使いこなせば
コピー&ペーストで何を出すという意味が結構実感できると思います
簡単に言うといいデザインを管理できてしまうとそういったイメージです
プログラマーエンジニアウェブデザイナーも使用しているんですけど
もちろんノンプログラマーの方々も利用しない手はないです
無料ですし標準でGoogle Chromeの標準で
操作されている機能ですのでその機能を覚えておくとかなり幅が広がりますよと
極端なことを言えばこのデベロッパーツールを使いこなせば誰でもウェブデザイン
レベルのプログラミングができてしまうといった形になります
本業にされている方に怒られてしまう表現かもしれないんですけど
こういったこともできますよと
使いこなすことによって実現できるといった感じになります
あとはこのデベロッパーツール以外の方法ですと
ウェブ上にデザインのコードを公開しているユーザーが多数います
見出しデザインCSSと検索をかけるとたくさんの記事があることを確認できます
初心者である私たちが一からコードとかを考える必要は
正直ないです
むしろプログラマーとかエンジニアですね
ウェブデザイナーでない限り一から考えるとか
そういったことをしているという人はなかなか少数派だと思います
かなりできるウェブデザイナーとかじゃない限りですね
なのでそういったコードですね
ウェブ上にたくさんありますので
それを使って使いまわしていきましょうよといった感じになります
むしろエンジニアはこういった参考記事ですね
ウェブ上の記事というものを使って仕事をしていますので
ぜひググると言いますけど
ググって情報は見つかるんだというところも実感してほしいなと思います
15:07
というのが前提知識ですね
はいでは次にこのデザインの変更例というものを見ていきたいと思います
こういったブログとかサイトの要素ですね
例えば見出しですね見出しとかボタン
あとは箇条書きですねリストとかって言います
あとはボックスデザインリボン
引用ボックス吹き出しといったデザインの変更ができます
あとはフォーム周りですね
これはメールアドレスとか名前ボタンという要素が一般的です
このプレスホルダーですね
これはあらかじめ例として名前をうすらぐとグレーで書き込んでいるという機能になります
これも実際見てもらったほうがわかりやすいかと思うんですが
最近よくある手法ですね
あらかじめこのグレーで書いていることによって
ここで名前を入力するんだとか
メールアドレスを入力するんだという形で
ITが結構弱い人にでも簡単に
フォーム周りの登録が簡単にわかりやすいとって感じになります
これも実際にやるときお見せしたいと思います
あとはこういった部位ですね
なんでご紹介したかというと
検索する際に使うので各ウェブサイトの要素ですね
こういった名称は最低限しておきましょう
例えばこういった見出し
CSSデザインという形で検索をするため
こういったものですね
ボタンでしたりあとは引用ボックスとかですね
箇条書きは結構わかりやすいかと思うんですけど
こういった部位ですね
ウェブサイトの各要素の名称というものは最適にしておきましょう
そうすることによって検索ができますよと
というよりこういったウェブサイトの部位ですね
部位というか要素ですね
というのはしておかないとこの先何かと不便ですので
息の長いウェブ集局というかウェブの運用をしていくためにも
最低限しておきましょうということですね
というのがデザインの変更例になります
ではデベロッパー2の使い方について解説を進めていきます
前半でお見せしたんですけど
また改めて復習も込めて解説をしていきたいと思います
今回はGoogle Chromeですね
こちらを使用して解説を進めていきます
他のブラウザでも例えばFirefoxとかSafariといったものでも
こういったデベロッパーツールというものは存在します
18:03
各ブラウザという名前は異なるんですけど
必ずこういった開発ツールは存在しますので
ですが今回は一番使用している人が多いブラウザであるGoogle Chrome
これを使用していきたいと思います
使い方はウェブサイト上で右クリックしていただいて
検証といった操作ですね
するとツールが起動します
具体的に何ができるというところなんですが
ウェブサイトのコードというものを確認できます
なので他のサイトも確認できてしまうといった感じですね
このGoogle Chrome上で表示されているウェブサイト全て
コードを確認することができます
仮でデザインの変更も可能です
実際のウェブサイトには影響はないんですけど
仮想的にですねウェブサイトの変更が可能です
実際の表示には影響しないので安心してください
なのでもしもこのデザインを変更した
このデザインのここの色変更したらどうなる
というものが確認できてしまいます
あとは不随の機能としまして
デバイス別の表示というものを確認できます
PC、タブレット、スマホといったものですね
最初は見慣れない画面で結構戸惑うかもしれないんですけど
慣れてしまえばそこまで難しくないです
より具体的な操作というような画面を通して説明します
イメージとしましては僕の感覚的なところを解説するんですけど
ウェブサイトはパズルのようなイメージですね
これちょっと冒頭でも言ったんですが
改めて解説すると僕の中のイメージで申し訳ないんですけど
パズルのようなイメージです
なので見出しとか見出しの部分とか
あとはボタンとかそういった色々な要素のパズル
というのがウェブサイトのイメージです
デベロッパーツールを使ってそのパズルの一ピース
かっこ要素ですね
を抜き取るといったイメージですね
そういったイメージでやっていただければ
結構コードというとアルファベットが
ライトしたような感じでイメージしにくいかと思うんですけど
そういったイメージでください
このデベロッパーツールを使うことで
その範囲が指定できたりとか
視覚的にも見えたりしますので
結構何もないよりはわかりやすいかなと思います
改めてなんですけど
またこのデベロッパーツールの使い方っていうものを見ていきましょう
はいではデベロッパーツールを実際に解説していきたいと思います
冒頭で説明したよりかは少し丁寧にやっていきたいと思いますので
21:02
実際に手を動かしてみてください
はいではまず起動ですね
起動は右クリック検証ですね
もしくはこの点々のところですね
こちらからその他のツールデベロッパーツールですね
といった感じで起動ができます
こちらがデベロッパーツールの画面になります
僕は基本的にこの画面下の方に配置してるんですけど
この×マークの横に点々があるかと思うんですけど
こちらをクリックして
例えば左ですとか
もしくは右ですか
画面の調整ができますので
自分が見やすい位置ですねに調整をしてください
僕は基本的に下が見やすいので
下にしています
このようにコードが表示されるわけなんですけど
基本的な使い方としましては
その該当箇所っていうものがこのように
カーソルを持っていくと
色がつきますということですね
このように色がつきますよと
と言ってもどこがどこだか分からないと思いますので
基本的にはこちらですね
この□の中に矢印のアイコンですね
こちらをクリックしてこの色がついた状態ですね
ブルーになった状態で確認したい箇所をクリックすると
そうすると一瞬でそのコードですね
移動してくれます
もう一点覚えておいてほしいことをしまして
このウェブサイトっていうのは階層上になっていまして
このように
例えばですけどこれをこの状態にして
この右三角形ですね
これをクリックすると
この階層が展開された状態になるかと思うんですけど
こちらのDIVのヘッダーブランディングですね
こちらのものですね
こちらのものが展開すると
こういった要素が含まれてますよと
いった感じになります
少しややこしいかと思うんですけど
基本的にはこちらからクリックして
こう行くとその要素が出てくるんですけど
階層上になってるっていうとこだけ
ちょっと構造上覚えておいてください
例えばですけど
この帯の色ですね
ヘッダーの帯の色を変更したいなっていう場合ですね
その場合はこちらクリックすると
その要素に行きます
これがIDヘッダーですね
こちらでCSSが表示される形になりますね
24:02
このヘッダーの部分ですね
もしくはこのチェックを外す
もともと白なんで何も変わらないんですけど
このチェックを外したりしていただくと
変化が生じますので
その要素が何か関連するコードなんだなっていうのが
確認できますね
例えばこのヘッダーの色を変更したいなという
ちょっと白なんで
もっと色を付けたいなという場合は
こちらをクリックですね
そうしますとこのように
色を変更することができますね
もともとある色もしくはカラー構図で指定してもいいですね
他のサイドから持ってくるとかできます
例えばですけどここの色ですね
ここの色を抜き取って持ってくるってこともできます
この色ですね
ちょっとこの色が気になってるなと
そしたらこちらのカラーコードをコピーと
もしくは別に表示されてるんでいいんですけど
このカラーピッカーですね
これも使うことができますよと
こちらに持ってきて
このように反映させることもできますよと
そういった使い方ができます
マインドマップでもお話ししたんですけど
これは仮で検証してるだけなんで
実際のサイトには一切反映がされてないと
いった状態になります
という感じで結構便利ですね
あとは例えばこの
だいたいもうお分かりだと思うんですけど
バックグラウンドカラーっていうところですね
これがCSSになるんですけど
これによってウェブサイトの背景色が変わると
いった感じになります
もしこのバックグラウンドカラーって
一体何なんだろうと思ったら
これをコピーして検索していただくと
すぐに分かります
バックグラウンドプロパティ
プロパティって言うんですけど
CSSのこういった命令するものですね
背景色を否定する際に使用しますと
ググってみるとこういった情報がありますので
これ一体何の意味なんだろうと思ったら
ググってみると分かると
そうやりつつ必要箇所だけググって
これはこういうプロパティなんだとか
こういう命令をしてるコードなんだ
っていう風に覚えていただくと
結構楽しくなってくるのではないかなと思います
これは余裕があったらってことですね
っていうところですね
基本的にはこちらのこれですね
これをクリックして見たい要素をクリック
あとはこちらに表示されるCSSですね
を確認していただくと
場合によってはあまり複雑なものだと
うまく表示してくれないんですけど
見出しとかそういったものでしたら
簡単に表示してくれるといった感じになります
27:00
例えばこちらの見出しですね
この見出しをこちらのデモサイトの方に
反映したいなといった場合は
こちらをクリックして
この見出しの部分をクリックします
このH2というところですね
H2というところで
あとはこのH2ですね
エントリーコンテンツっていうのは
かなり大元になっているこの部分ですね
セクションクラスエントリーコンテンツですね
このように階層状になっている中のH2タグ
なのでこのエントリーコンテンツ
H2となっているといった感じになります
実際にチェック外してみると変わるので
ここの部分が対応してるんだな
というのがざっくりとわかります
ではこの要素をこのようにコピーしてしまって
こちらの見出しに当てはめていきたいと思います
こちらのデモサイトの見出しはこれですね
H2とチェック外すと変化が加わるので
もともと黒なので全然変化はないんですが
ここで例えば色とかを簡単に指定してみると
ここがH2タグの要素なんだなというのがわかりますね
これはチェック外してしまって
ここに先ほどコピーした頃ですね
これを貼り付けます
すると先ほどのこちらのサイトですね
見出しをデモサイトの方に反映させることができると
って感じになりますね
これで切り替わって安全に切り替わったので
この状態でこれをコピーして
これから紹介するシンプルカスタムCSSですね
そちらの方に貼り付けて保存するといった感じになります
そうすると安全に変更ができるといった形ですね
こちらのデベロッパーツールで検証した結果
表示にも流れなかったのでこれでOKと
あとは本格的に反映させていくといった流れになります
なのでこれを使いこなせれば
初心者の方でもウェブデザインができると
一番見出しっていうのは簡単にできますので
まずは見出しから始めていただいたほうがいいかなと思います
あとは先ほど解説した通りちょっと気になる要素ですね
これで見惚しいものはないんですけど
もしなんかこの要素なんだろうと思ったら
検索してみるとかっていう形でやってみると
かなり幅が広がります
といった形で他のサイトのデザインの要素を参考にできると
30:00
コードをこのようにコピーして自分のサイトで検証してみると
実際に反映されてデザインを確認できると
あとデバイスの表示別で見れるというところですね
こちらをクリックと
そうするとこういった形で
いろんなデバイスで表示を確認することができます
こういった形ですね
これで記事を作成して表示させた場合ですね
スマホからの表示は一体どういうふうに見えるのかというのが検証できます
というのにも役立ちますよと
結構多機能な感じですね
このデベロッパーツールは
なのでこれを覚えていただくと
こういったデザインというものが検証できますよと
でも実際に反映されてないんで
こちら更新を押すと元に戻りますと
そういった形で使えます
ではデベロッパーツールの使い方については
だいたい大枠をつかんでいただいたかと思いますので
次は実際にデザインを変更していきたいと思います
まずはこちらですね
シンプルカスタム CSS というプラグインを導入していきたいと思います
このプラグインを導入することによって
定期的にあるテーマの更新作業ですね
これをしても上書きされない
リセットされないといった感じになります
テーマのファイルに直接 CSS を記述するというやり方があるんですけど
それだと更新した際にリセットされてしまいますので
なのでこのプラグインを使っていきます
あとはですね
Chrome の拡張機能
Clear Cache というものがありますので
そちらを導入します
この Cache っていうのはですね
ウェブサイト上に情報を一時的に保持してくれる
機能になるわけなんですが
これが溜まっているとデザイン変更をしても
保存ボタンを押しても
反映されないということがあります
なのでこの拡張機能でクリアにするといった形になります
ではここまでは実際の画面を通して解説をしたいと思います
はいではプラグインの導入からやっていきたいと思います
こちらの WordPress の管理画面からプラグインですね
新規追加をクリックしてください
はいしばらくするとこの画面に行きますので
このプラグインの検索ですね
こちらにシンプルカスタム CSS と入力をしてください
はいするとこのように出てきますね
すでに導入済みなので有効となっているんですけど
はいこちらですね
こちらの画像を探していただいて
これを今すぐインストールで有効化を行ってください
他にもいろいろあるんですけど
33:01
こちらがいいかなという形で
評価もいいですし
はいこちらにしてください
必ず今すぐインストールと有効化もセットで行ってください
有効化が終わりますと
この外観の中にカスタム CSS という項目が出てきます
こちらから CSS の編集ができるようになると
先ほどマインドマップでお伝えした通り
このこちらに編集した場合は
テーマの更新をしても一切こちらの内容は
無くならないといった感じですね
結構便利なプラグインです
なのでテーマファイルに直接 CSS を記述するよりかは
このプラグインを使っていきましょうということですね
あともう一点ですね
拡張機能のクリアキャッシュですね
こちらの導入法です
これは検索をしていただくと一番上にできます
これもすでに導入済みですので
このように出てきますけど
通常はChromeに追加するというボタンが表示されます
あとは画面に取っていただくだけです
2クリックほどで導入できてしまうので非常に簡単です
導入しますとこのようにロゴが出てきますので
使い方としましては
ここを一回クリックするとキャッシュがクリアになると
なのでもしここに記述して
このカスタム CSS の更新
これを押したにもかかわらず
デザインが反映されないといったときは
こちらをクリックして
そのサイトを更新するなりしていただくと
いった感じになります
それでも反映されなかったら
何かしらの記述が間違っているという可能性がありますので
いくらこれを確認していただくと
そういった形になります
では次の解説に進めていきたいと思うんですが
次はデザインを変更したい会社の記事
参考記事を見つけて
それでデザインをするといったやり方をご紹介します
まだ検索をしていただきます
見出しデザイン CSS とか
いった形で検索すると
コードですね
コードを仮説した記事がたくさんありますので
その中から気になったデザインを見つける
記事中で紹介されているコードをコピー
で先ほど導入したシンプルカスタム CSS に
設定箇所ですね
そちらにペーストすると
貼り付けるといった感じになります
必ず保存ボタンをクリックしてください
この保存ボタンをクリックしても反映されなかったら
こちらですね
この拡張機能を使うといった感じになります
では実際に画面を通して解説をしてみたいと思います
はいでは参考記事を見つけるところから
実際にやっていきたいと思います
例えば見出しデザイン CSS と
36:00
検索をかけてください
次にデザインによっては古かったりしますので
トレーナーとかありますので
このツールからこちらを1年以内にしてください
一番新しいこちらですね
2019年4月21日ですね
こちらの記事を参照していきたいと思います
ちなみにこのサルバカノというメディアの記事ですね
結構質がいいので
これを参考にしていきたいと思います
このようにCSSじゃないときの対象をまとめ
みたいな記事もありますので
これも参考になりますよね
ではデザインを選択していきたいと思うんですが
結構このようにいろいろありますので
今回はこれにしましょうか
上下に線ですね
こういったシンプルなデザインにしたいと思います
現在この左だけにボーダーがあるっていう
デザインを変えていきたいと思います
コードですねこれを見てみますと
これは h1タグになってしまいますので
このままコピーしてしまいますと問題ありですので
まずはデベロッパーツールでこの h2タグに対応するクラスですね
CSSのクラスというものを確認していきましょう
デベロッパーツールを起動します
ちなみにショートカットキーでもできますね
Macの方はコマンドシフトCですね
なのでWindowsの方はコントロールシフトCで起動するかと思います
では見出しの要素を確認していきたいと思いますので
こちらがブルーの状態で
見出しの要素を一回クリックします
h2のところが色がついていますので
この状態ですね
こちらの右側を見ると
PostContent2、h2のところですね
こちらが現在のこのデザインを使わささっているところになります
一度このですね
色を変えてみると反映されるので
これで確認することができますね
この部分がここに対応しているんだというのが分かるかと思います
ちなみにこのPostContentというのはですね
結構このコード自体が階層状になっていまして
この部分ですね
クラス、PostContent
この三角形をクリックしますと
このように階層状になっているのが確認できますよね
展開するとPostContentの中にh2タグがある
というのが分かりますね
なのでこういったふうに記述がされています
この部分をコピーしたいと思います
これは今色を変えてしまったので
もう一度一回サラの状態でコピーしたいと思います
39:02
こちらをコピーと
このコピーした状態で
シンプルカスタムCSSですね
こちらの画面に移動してください
有効化しますと外観の中のカスタムCSSに表示されます
こちらをクリックしますとこの画面に行くといった感じですね
ではデザインを変更していきたいと思いますので
ここですね
この中身のここをコピーすると
こちらに移動していただいて
こっちに貼り付けと
でこちらですね
コメントアウトという機能がありまして
これ検索してみるとすぐ出てきます
コメントアウト、CSSと
これはですね
このスラッシュアフタリフで囲まれたもの
この範囲のコメントとなると
ブラウザには無視されるので
CSSは無効にしたりとか
あとはメモとして残すことができますといった感じになります
なのでなんかメモ書きですね
こういった形で文字色の対応する指令ですよとか
上下の威迫ですよとか
上の線ですよ下の線ですよ
いった感じで記述してあると
なのでこの記事ですね
このサルワカのメディアですね
こちらの記事結構良質なものですね
これで何となくでもどこの指定をしているのか
っていうのがわかりますよね
なのでこういったコードですね
っていうのを丸暗記しなくても大丈夫といった感じになります
あとはこう結構見慣れている方はわかると思うんですけど
このシャープの部分がこれ色を指定してるんだなと
いった感じのがわかりますよね
基本的にはこの間っていうのは半画といったのが
コードの基本となります
ちなみにこのコメントアウトですね
このようにこの部分ですね
このコードの部分のメモ書きに使います
例えば h2タグですね
h2タグ 見出し デザインと
このように記述しておきますと
後から見返した際に管理がしやすいと
そういった感じになります
結構これエンジニアの現場の中でも
盛んに行われている手法ですので
ぜひ皆さんも活用してみてください
では次にこちらですね
このもともと従来に反映されているデザイン
いらないので消してしまいたいと思います
42:03
いくつか消す方法がありまして
これは実際に試して反映を確認してみないと
わからないっていうのが正直なところですので
一つ一つ確認していきたいと思います
こういったデザイン作業ですね
結構コピーでokなんですけど
基本的にはこの更新をして
実際の画面に行ってこちらの更新ですね
デザインを可視化するという作業の繰り返しですね
ちょっと地道なんですがやっていきましょう
1個目は先ほど説明したコメントアウトで
消せるかどうかっていうところですね
これを確認していきたいと思います
なので反角にしておいたほうがいいですね
これでスラッシュですね
アフターディスクですね
これで囲むと
これで1回更新をしてみてですね
デザインが反映されるかどうかってところですね
これは×で消してしまいます
一応キャッシュですね
これをクリアにしておいて
更新をします
このように上下線が現れたんですけど
従来のデザインがまだ反映されてないので
いくつか方法を試してみたいと思います
コメントアウトが効かなかったということなので
次はですね
このこれを白にしてしまえば
消せるんじゃないかというところですね
これで試してみたいと思います
これで更新をします
反映はされないので
次にこのインポータントですね
これを検索を書いていただくと
わかるものなんですが
CSSっていうのは優先順位っていうのがありまして
その関係でうまく反映されないっていうことがあります
その優先順位を一番高く最優先にするのが
このインポータントっていうものになります
これを覚えておくと結構便利です
こういった消すときに
うまく反映がされないと思いますので
その際にこのインポータントを必ず使ってください
これで消せるかどうかっていうところを
確かめたいと思います
もしかしたら時間差で反映されるってこともあるんですけど
もしこれでうまく反映されなかったとしたらですね
根本的から消してしまおうといったこともできます
これを試してみたいと思うんですが
さっきビックリマークにできたので
これで消えましたね
45:01
この余白が半角じゃないものが混じってたようなので
これで消せましたね
白にしたことによって消せると
もしもこの左側のボーダーですね
黒根本的から消したいっていう場合はですね
このカラーっていうものを省いていただいて
ボーダーレストですね
こちらの命令で確認をしてみると
こういった記事を見てもらうと
なんとなくですね
にはなってしまうかと思うんですけど
指令の意味っていうのが一つ一つわかるかと思います
ボーダーレストっていうのは
左ボーダーのスタイル 太さ 色を指定する
といった感じで解説されています
このプロパティっていうのはですね
こういったCSSのデザインを指定するものだと
大きく言うとそういったものだと
考えていただくと思います
こちらに記載している通り
なんというこういった指令を出すことで
ボーダーは表示されず太さもゼロになると
完全に色地になるといった感じになります
なのでこれを使っていきたいと思います
おそらくこれでも消せると思いますので
このカラーの部分は消します
インポータントは消さずに残しておきます
これで更新をしてみます
もともと消えたので違いがわからないですけど
これで消えますよと
うまく反映されなかった時の対象としましては
このキャッシュをクリアにして更新
それでもなかなか反映されないという場合は
こういった半画とかですね
この間が半画になってないと
うまく反映されないってことが1点と
あとは時間差で反映されることもありますので
そのいくつか対処法っていうものですね
こういった時の対処法っていうのを
覚えていただくと思います
はいこれで反映されたということなので
あとはデベロッパーツールで見ていただいて
もしこの色とかを変える場合は
どうしていくかっていうのを検証してみてください
例えばこういったとこですね
カラーピッカーとか
もともとある色とか
あとはこのカラーコードで指定できますので
これでこれはカラーということで文字色ですね
っていうことが変えてみると分かったりしますので
このカラーっていうのは
文字色の指定なんだなっていう
動かしてみると全然意味は分からなかったとしても
検討がついてくるとかっていうことができますので
ぜひこのデベロッパーツールをうまく活用していただいて
プログラマーでなくても
ウェブデザイナーでなくても変更できると
48:03
このボーダートップっていうのはオレンジにしたことによって
これ上の線なんだなっていうのが分かったと思います
っていうのがこの参考記事を見つけてやっていただくと
いった感じになります
はいではもう1点試しに変更してみたいと思います
こちらの過剰書きですね
こちらのデザインを変更してみたいと思います
検索の方法は先ほどと同じです
過剰書き デザイン CSS と検索をかけてください
これも同様に1年以内のものを探しましょう
また再びこのサルワカトヨメディアのものですね
これが表示されましたね
これを使ってやっていきたいと思います
結構このメディアの記事おすすめですので
もし参考にするのであればこれを使ってみてください
はいということでデザインを選択していきたいと思うんですが
これやっていこうかなと思いますね
これでデザインを変更していきたいと思います
まずはデベロッパー2でここに対応するコードを確認していきたいと思います
はいここですね
こうクリックすると
クリックしたことによってここが色が付いたかと思います
URLのとこですね
なのでその状態でこちらですね
右側を見てほしいんですけど
このポストコンテンツURLのとこですね
ここが対応してるんだなっていうのがわかりますね
このようにカーソルを動かすと色が付くのでこうなんだなと
あとはチェックを外してみると変化するので
ここが箇条書きのデザインになっているっていうのは明確ですね
なのでこれをコピーします
またこちらに貼り付けます
これもコメントアウトでメモを残しておくと
後から参照しやすいです
箇条書きデザインと
それで先ほどのデザインのコードをコピーします
これをコピーと
こちらの下に当てはめていきたいと思います
ここはですね半画でやったほうが特にミスはないかなと思うので
ここ半画で揃えます
あとはですねこちらですね
この部分をコピーしていきます
51:07
これもこのポストコンテンツのところですね
これを先頭に配置します
半画で区切ると間を開けると
このポストコンテンツってところですね
これをコピーして先頭に貼り付けてください
そうするとこちらで対応してくれると
これも同じですね
ここまで同じですので
あとはこちらですね
こちらにも対応しますよといったものですね
こちらに記載してあるので必ずこれも反映しましょうねと
これで更新をクリックしてみます
あとはですねこのキャッシュを一度クリアして
デザインを確かめてみましょう
はい更新するとこのように反映されていますので
これで箇条書きのデザインが反映できました
ちょっとこの部分難しかったかと思うんですが
このulの下にこういったliとか
あとはこのolっていうのがあるんですけど
検索してみた方が早いですね
cssとこれは数字ですね数字の箇条書きのものです
こちらのソースを見て欲しいんですけど
olのものがこの123のものになっていると
指令になっているというのがわかります
このliっていうのがこのコードっていうのは回想上になっていまして
olの中のさらにこの実際にテキストを箇条書きする指令みたいな感じで
覚えていただくと思います
これもデベロッパーズで見ていただいた方が早いかなと思うんですけど
このようにulの中にliがあると
そういった回想になっているので
こちらで指定をしました
さらに番号の箇条書きにも対応できるように
olのものも反映しましたよと
そういった形になります
あとはこちらからこういったカラーの指定とかができますので
これで検証しつつカラーコードで自由にデザインを変更してみてください
1点注意点なんですが
こういった箇条書きのデザインを変更しますと
例えばこういった目字に影響が出てくるという場合があります
この目字はプラグインを使用しているので
もし使ってなかったら不要だったら消すっていう対処法もあるんですが
もしくはこの1234という数字の箇条書きになっているので
54:03
この部分の記述を消すとかっていう形ですね
という形で
ちょっとここら辺の判断難しいかと思うんですけど
対応すると
もしくはこういったところに影響が出ないようにするには
htmlとかcssとかかなりがっつりカスタマイズする必要がありますので
このデザインは元通りに戻してもらうとかっていう形になりますね
これだけ消すとか消せば元通りになりますので
そういった形でちょっと他の要素に影響が出たら
さっきの目字のプラグインなので提出すると
あとはこういった関連記述ですね
表示させるプラグイン
これもプラグインで表示させているわけなんですけど
こういったときに影響が出てしまったら
デザインをやめるかもしくはプラグインを提出させるかっていう形になりますね
ここら辺の判断が難しいかと思うんですけど
もしこういう感じで他の要素に影響が出たら
もう一回言いますと
この記述したコードを消すで更新をするですね
もしくはプラグインでこういった目字実は使ってないという場合は
提出させていただくとかという形ですね
ここのテーマとテーマのコードとプラグインの関連性がちょっとややこしいので
もしややこしくなってしまったらどちらか一方消していただくと
そういった対処をよろしくお願いします
というのが参考記事ですね
見出しと箇条書きのデザインを変更したわけなんですけど
こういった形で参考記事を元にデザインをコピー&ペーストで
基本的にコピー&ペーストですね
で変更できるといった感じでおいておいてください
あと一点ですね
このインポータントですね
とかコメントアウトとか
という形でデベロッパー2と
この記事を参照しつつデザインを変更してみてください
といったところがこの内容になります
はい次ですね
競合サイト多業種のサイトで参考にしたいサイトをピックアップすると
いったやり方をご紹介します
僕らネットサーフィンをしていて
気になったデザインがあったらそれを参考にするといった形でやっていきます
気になる要素をデベロッパー2で確認
そのコードをコピーですね
シンプルカスタムCSSの設定箇所に貼り付けると
必ず保存ボタンをクリックしてください
先ほどは
記事の方では見出しとか
過剰書きといったものを変更しましたので
次はホーム周りのデザインをやってみたいと思います
ホームっていうのはメールアドレスとか名前
ボタンっていう要素で成り立っているかと思います
他にもあるかと思うんですけど
シンプルなのはこの構成ですね
プレスホルダーですね
っていうものがありまして
例えば薄くグレーでメールアドレスのデモで配置してあると
57:02
そうするとなんとなくですけど
視覚的にここにメールアドレスを入力すればいいんだっていうのがわかりますので
そういった機能をご紹介します
名前も同様ですね
例えば田中太郎みたいな形でグレーで表示されていると
ここに名前を入力すればいいんだっていうのが一目瞭然でわかると
それによってコンバージョンとかに影響してきますよといった感じですね
あとボタンですね
ボタンの色なんかもこういった参考サイトからピックアップしていただけと思います
こういったフォーム周りを整えることですね
を EFO と言いまして
エントリーフォームの最適化ですね
という形になります
なのでフォーム周りも結構自由にカスタマイズできるようになると
ユーザーに最適化されたものになりますので
ぜひ覚えていきましょう
では実際の画面を通してやっていきたいと思います
はいでは実際の画面を通してやっていきたいと思います
例えばですけどこのバドゥーというメディアのこの CTA ですね
このボタン
これを参考にしたいとします
なのでこちらをデベロッパーズで確認してみます
そうしますと
慣れてくるとすぐにここに来るのでわかるんですけど
まずはここを見ていただいて色が付いたので
この HTML の要素ですね
ここがボタンなんだなっていうのが判断できますね
で大体こちらをクリックするとこのように
CSS 側ですね
右側の CSS 側の方が表示されますので
バックグラウンドの部分ですね
このオレンジになっているので
大体この当てはまっているのでわかると思うんですが
チェックしてもらうと一番わかりやすいです
消えるのでこの CSS 側
このボタンのデザインになっているんだなというのがわかります
自分のサイトのこちらですね
このボタンを変更してみたいと思います
これも一度デベロッパーズで見てみます
ここをクリック
これがボタンの要素というのがわかりますね
ボタンからこちらに表示されるのでわかると思うんですが
これもチェック外してみると変わるので
これは対応しているものなんだなというのがわかりますね
このようにいろいろあるんですけど
初心者の方は判断できないかと思うので
これは全部コピーしてしまってください
場合によっては削ってもいいんですけど
これは全部コピーしてしまって結構です
1:00:01
これでコピーと
コピーしましたら
シンプルカスタムCSSに移動して貼り付けてください
先ほどのこちらですね
参考にしたデザインのCSSをコピーします
貼り付けます
バックグラウンドカードですね
こちらはバックグラウンドとなっているんですけど
被っているのでこの色のコードだけコピーして
こちらに当てはめます
こちらのインポータントは先ほど解説した通り
最優先でこちらの
例えばこのバックグラウンドカラーの色の指定を指定しますよと
反映しますよと
そういった設定になります
おそらくこれで反映されると思いますので
この更新をクリックします
これで見てみました
まずはキャッシュをクリアにして
更新ですね
このようにデザインが変わったのが確認できています
ですがちょっと幅が小さくなっているので
これですね
この部分ですね
この部分が幅になりますので
これもデベロッパー2で見てみたほうが早いですね
こちらですね
こちらが幅になっているCSSというのがわかりますね
この値を変えていただくと
だいたい90%ぐらいにしておきます
パーセントにしておくことで
例えばスマホになったとしても
画面に合わせて伸縮してくれるので
このままにしておきます
パーセントのままにしておきます
あともう一点カラーですね
カラーも2つ被っているのでこれも消しましょう
でこれ更新をクリックします
これでだいたいOKですね
ちなみになんですけど
こういった形で他のデザインにも反映されてしまいましたので
もし都合が悪かったらその場合は元に戻すという形で調整はしてください
ということでこのCTNのボタンを変更しました
あとはですね
こういったこのボタンをクリックした先の飛び先のページなんですが
こういった箇所のホームのボタンのデザインですね
これを参考にしたいとします
1:03:07
でこちらですね
これもデベロッパーツールで見てもらえばわかります
結構WASBというメディアですね
結構やり手のメディアですので
こういったボタンの色とか参考にすると
もしかしたらですけど
コンバージョン率が上がるかもしれないといった感じですね
こちらがこのサブミットというところですね
タイプサブミットのところがボタンの要素になると
こちらに緑色が表示されてるので
だいたいここかなっていうのが当てがついてきますね
ここですね
これを反映させていこうといった感じになります
だいたいこのホームっていうのは
メール配信サービスの方から持ってくるかと思いますので
それで貼り付けた後にデベロッパーツールで
このように見てもらうと
ボタンはこのタイプサブミットですね
やることが確認できます
これに対応するところですね
これですね
チェックを減らしてみると
反映されるのでここがこのボタンのCSSっていうのが起こります
これをコピーします
もしかしたらすでにインポートアウトついてるので
カスタマーCSSの他に
テーマの方にこういう機能
カスタマーCSSのプラグインの機能が
すでにデフォルトでついてるっていうことがあります
それについてご紹介します
これは完全にテーマではない
自分のテーマいなかったらセルしていただいて結構なんですけど
カスタマイズですね
先ほどクリックした外観のカスタマイズのとこに
こういった追加CSSというのがあります
すでにこのように過去に演習してるんで
ちょっとこれは今回カスタマーCSSを中心に解説していきたいので
外していきたいと思います
これで保存、公開と
もしこういうテーマにこういう機能がありましたら
そっちも利用してみてくださいといった感じですね
なのでプラグインは不要です
話を元に戻しますと
こちらですね
こちらをコピーすると
次ですね
1:06:00
こちらのコードをコピーしてくると
幅の指定は被るので消します
あとバックグラウンドですね
これもカラーコードだけコピーして
こちらに被ってしまうので消します
カラーも被っているので消します
一旦これで更新をしてみて確認をしてみましょう
一度キャッシュをクリアにしてから更新をします
はいこれで変わっているのがわかりますね
1.5のボーダーボトムだけ反映されなかったんですが
ボタンの色が変わったのでこれで良しとします
でなんですけど
プレースフォルダーですね
ここに薄いグレーの方で記載されて
メールアドレスの入力という項目があるかと思います
これがこれですね
プレースフォルダーというものになります
これによって例えばですけど
よくネット上で見かける方多いかと思うんですが
サンプルアットサンプルドットコンみたいな形の
デモでアドレスを入力すると
はいこういう感じですね
これを記載しておきますと
視覚的にわかりますので
ぜひこれも導入しましょうということですね
でこれなんですけど
例えばこういったフォームというのは
メール配信サービスから持ってくるかと思うんですが
この中にタイプEメールというのがあります
その中にこのプレースフォルダーですね
プレースフォルダーイコールダブルクオーテーション
で間にこの例となるアドレスを入力
ダブルクオーテーション
これをこのタイプEメールの中に入れると
そういった形になります
例えばこれが全くプレースフォルダーが
設定されてないという状態を
ベースにして解説していくんですけど
このコードですね
コピーしておきまして
実際の画面に行きます
コテペリの編集ですね
でこのテキストにします
1:09:00
テキストにしましたら
このように検索ですね
ブラウザの検索を利用します
このように検索を利用するには
ショートカットキーが非常に便利です
で覚えておきましょう
Macの方はコマンドFですね
Windowsの方はコントロールFになります
はいするとこのように色が付くので
ここのコードが先ほどのフォームの
メールアドレスの入力欄というのが書けます
そこに行きましたら
色を付けておきますけど
このカッコからスラッシュカッコまでの部分の中の
プラスフォルダー
イコールダブルクオーテーション
でこのアドレスを入力とか
あとはデモのアドレスを
Aとして配置するという形で記述しておくと
いった感じになります
間は必ず半角でお願いします
もしうまく反映されなかったら
結構左側の方に持ってくるといいと思います
今一番右側にあるかと思うんですけど
うまく反映されなかった場合ですね
だいたいこのタイプEメールの
右側あたりに配置していただきたいと思います
必ず間は半角を開けていただくと
いった感じですね
基本的には反映されると思いますけど
そういった形でやってみてください
といったところですね
なので先ほどのこちらですね
こちらにデモのメールアドレスを入力しましょう
といったですね
変えておきましょうか
メールアドレスを入力
よりかは例となるアドレスを入力しておいた方がいいと
こちらにサンプル
アットマークサンプル.com
といった感じですね
1点注意としまして
こちらのプレイスホルダーですね
こちらなんですが必ずメール配信サービスの
埋め込みコードに配置されているとは限らないです
なので多くの場合は自分で埋め込む形になります
ですので書き方を覚えていただくと思います
ちょっと不安な方はこちら検索を受けていただきますと
このように詳しい使い方の解説記事があります
基本的にはこのプレイスホルダー
イコールここですね
ホゲホゲになっている分に値を入力するといった感じになります
なのでこういうとこをコピーしていただいて
実際の画面に移動し
貼り付けていただくといった感じになります
基本的にはこちらですね
ここからここまでになっていますので
この最後の角の中にこれが入っていればいいので
1:12:05
必ずこの前後は反角にしていただくと
もしうまく反映されなかったら
前角になっていることを確認していただくと
こういった形になります
これで視覚的にもわかりやすいといった感じになります
今回は名前の入力欄はなかったんですけど
こういった形でフォームを最適化していただくといった感じになります
他にも先ほどマインドマップで解説したEFOというのは
こういったフォームの数を減らすというのもあたまります
あまりフォームの項目多すぎると
ユーザーも入力するのに面倒になってしまいますので
例えばこういったオフトニーページだったら
メールアドレスのみという形の方が
一番登録率が高いといった感じになります
必要だったら当然あった方がいいんですけど
もし一度考え直してみて
あまりこの項目いらないなと思ったら減らしていただくと
その方が最適化されますよというのがEFOの考え方ですね
あとはこういったものですね
こういった形で例を配置していただくといった感じになります
あともう一点ですね
この送信するとかだとちょっと無機質なので
例えばこの送信するはバリューという値で変更することができます
これを例えば無料で受け取るとかですね
無料でebookを受け取るといった形にしていただくと
送信するよりかは登録率が上がりますよと
無料であることを強調しつつ
安心されるという面もありますので
送信するというよりかはこの文言ですね
ちょっとこだわってみて
無料で何々を受け取るみたいな形で給付していただくと
これもバリューの値ですね
バリューという値で変更できるというのが確認できたと思います
だいたいこの元は送信となってたんで
それと対応するものがこの色がついたコードの箇所ですね
必ずありますので
そこのこの値ですね
イコールダブルクオーテーションの間
これを変えていただくと
そういった形になります
これも正確なので変更していきたいと思います
バリューのところまで移動と
ここが送信するようになっていますので
1:15:00
これを変えていただくと
そうすることで登録率に影響が出ますよといった感じになります
送信するよりかはこちらの方が安心感がありますよね
という形でホーム周りの最適化もぜひ意識してみてください
といったのがこの強豪もしくは
こういった多業種のサイトでもいいので
参考になる部分を見つけましたら
このネットサーフィンをしてください
見つけましたら
ちょっとデベロッパーツールで
コードを確かめてみるという感じにしていただきますと
かなりデザインの幅が広がりますといったところでした
はいでは次の解説に進めていきたいと思うんですが
ここだけ編集できればOKというところですね
色の指定をできればいいかなと思います
なのでカラーコードですね
こちらの編集方法を覚えていただくと
カラーコードの編集を覚えると
例えば先ほど見出しの上下の線とか
あと左側の線とか
そういったところの色の指定ですね
それができれば結構幅が広がるのではないかなと思います
もしかしたらですね
テーマの方で設定できるってこともあるんですが
設定できなかったら
そういったところから始めていただくと思います
あとはですね
もしちょっと難しく感じられたのであれば
まずは見出しからやって
初心者の方は見出しからやっていただくと思います
見出しのデザインだったらそこまで難しくないので
そちらをやっていただけと思います
実際に今回の内容で
HTML、CSSに興味を持ったなら
ぜひ全体像をしてください
もし興味を持ったらですね
.installとかprogateを救うというサイトから
無料で学習ができます
むしろ最初からこちらで学習するよりかは
こういったデベロッパーツールとかで
実際のサイトの行動を見て興味を持ってから
この基礎学習をやった方が
結構有意義な感じで
学習ができるのではないかなと思います
最初から基礎から始めてしまいますと
結構挫折しがちですので
そういった順番でやるのもいいかなと思っております
では最後にまとめですね
今回のまとめとしまして
HTML、CSSは基本的に
コピー&ペーストでOKと
あとデベロッパーツール
参考記事でデザインは十分に変更可能
いろんな変更方法ですね
これを覚えると
それだけでいいかなと思います
あとはワードプレステーマによっては
デザインが被ってしまいますので
1:18:00
これで差別化しましょうというところですね
少しの変更ですね
デザインというのは流行りしたりがありますので
それで少しの変更で
定期の長いサイト運営をしましょうって感じですね
新しいデザインのテーマを買ったとしても
ちょっとしたところを変更できれば
結構幅が広がりますので
それでやっていきましょうということですね
では今回の内容は以上になります
