CSSで無料サイトでカッコよく

CSSを編集することでかっこいいデザインが可能です。

上の画像はエディターで原稿を書いていますが線は見えません。CSSを『ダッシュボード』の『外観』『カスタマイズ』で『追加CSS』を開きます。下記の画面です。

CSSでかっこよく

このデータはJAJAAAN!さんのサイトから引用です。そのデータにCSSのクラスを設定しています。

.pink_a1 {
  font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'Hiragino Mincho ProN', 'HGS明朝E', 'MS P明朝', serif;
  position: relative;
  padding: 1.5rem 2rem;
  -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
}
.pink_a1:before,
.pink_a1:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
  background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
}
.pink_a1:before {
  top: 0;
}
.pink_a1:after {
  bottom: 0;
}

このCSSはクラスは pink_a1 です。元々のセレクターH2を変更しています。それで、編集画面に戻り『ブロック』でタイトルを書き、書式をセンターにします。その行を選択状態にして右側の『ブロック』から『高度な設定』『追加CSSクラス』で 「pink_a1」をしていします。編集画面は変わりませんが通常に表示させると高級感のある見出しになります。CSSクラスで複数指定する場合は半角スペースでつなぎます。追加CSSも ドットから始まる適当な名前を付けて追加します。下の画像は追加CSSクラスの場所です。

JAJAAAN!のサイトのはカッコいいデザインの見出しが多数あります。ぜひ参考にしてください。

JAJAAAN!
Pluginの追加-Yoast SEO

無料で使える幾つかの必要最低限のプラグインを追加します。

Yoast SEO SEO対策用プラグイン

このプラグインは全機能を使う場合は有償で、一部機能なら無料で使えます。インストールして有効化します。

SEOが設定画面に追加され下記画像の初回SEO設定をクリックして手順どうりに進めます。

初回SEO設定

YoastSEOのページ1
次へを押します。
YoastSEOのページ2
次へを押します。
YoastSEOのページ3
次へを押します。
YoastSEOのページ4
次へを押します。
途中は省略です。設定しながら次へを押します。
最後のページ

これで閉じるを押せば設定完了です。

SEOデータの最適化を開始します。

SEOデータの最適化を開始します。を押して下記画像がでれば終りです。最適化はあるタイミングででる場合があり、その都度実行します。

 

その後に必ず確認する事は「投稿一覧」などの表示にSEO対策が追加されています。下記写真

投稿一覧

ここのタグは重要です。タグを付けないとそのキーワードで検索されにくくなりますので必ずタグをつけてください。タグの付け方は投稿の編集で「投稿」から「新規タグを追加」で行います。

Pluginの追加-Contact Form 7

無料で使える幾つかの必要最低限のプラグインを追加します。

Contact Form 7 メールの送信用フォームです。

Contact Form 7の設置方法は他のサイトを参考にしてください。以下の説明は有効化後の説明です。

普通に入れるとスパムメールがたくさんきますのでGoogleのreCAPTCHAを利用します。
Googleのアカウントが必要ですが無料で利用できます。

Contact Form 7

上記画面の黄色いマーカーreCAPTCHAを押すと解説がでてきますのでその通りに進めていきます。
ただ、解説が英文の場合は下記画像の右側の黄色いマーカー『日本語』を選択します。

reCAPTCHAを設置

説明に従ってサイトを登録してサイトキーシークレットキーの2つのキーを取得します。
そのキーをWorldPressの下記の画面 お問合せインテグレーションを開きreCAPTCHAに設定します。

reCAPTCHAを設置

reCAPTCHAが有効の場合はGoogleのreCAPTCHAにはサイト別にレポートが表示されます。

reCAPTCHAの不正アクセス
World Pressの設定-1

サーバーインストール時に決めたIDとPAsswordをログインします。初期状態では
https://アドレス.com/wp-admin/でログイン画面が開きます。

取りあえずデータを入力する

「投稿」と「メディア」と「固定ページ」にデータを入力します。文書は「投稿」、画像は「メディア」です。「固定ページ」は主に「お問合せ画面」や「利用規定」など決められたページの設定です。

その他、「コメント」の設定も必要です。WEBページからのコメントを許可するのか、許可する場合は選別するか、しないかなどの設定があります。そのあたりの設定は「設定」の中にあります。今は外観の設定のための確認用としてデータを入れる事を優先します。

文書は「投稿」から入力してください。

新規追加 で投稿してください。今の状態で『公開』してもだれも見てないと思いますが、いくつかデータを登録します。

ある程度、データを入力したら「外観」で新しい外観を選びましす。外観テーマ

 

テーマの画面の一覧でお気に入りが無ければ新しテーマの追加を追加を押します。

テーマがどんな感じにるのかが気になりますが、テーマにカーソルが触れると『ライブプレビュー』となるか『プレビュー』になると思います。

ライブプレビューとは入力したデータを表示して実際に近い状態が確認できます。プレビューは入力したデータは反映せず、大まかな感覚的な表示です。インストールでデータをサーバー側に持ってくるとライブプレビューになります。

テーマがサーバー内にデータがあると、有効化ライブプレビューとなり、サーバー外部にあるとインストールプレビューになります。最終的に決めた時は有効化にします。

テーマデータがサーバー外部の場合有効化にするには、一旦インストールしてからになります。テーマを選ぶ場合にインストールしたデータで使わないテーマは削除できますのでセキュリティー上削除しておきます。

また、テーマは更新するので、定期的にチェックしてアップデートします。

このテーマは無料分ですが、完全無料と無料後、有料にして機能アップするのと、最初から有料テーマの3種類があります。検索すると色々とでてきますが、無料分を使い慣れてから有料に移行していいと思います。このページのテーマは無料を使っています。

 

ドメインとサーバーで次はWorld-Press

WEBプログラムをhtmlやJavascriptで書いて初めてもいいでしょうが、World-Pressを使うのが早いです。

前回の書いてますが、World-Pressの手動インストールもそんなに難しい事はありませんが、手っ取り早く簡単インストールで動かしましょう。

事前に決めておくことは、下記の図はX-serverのWorld-Pressの簡単インストール画面です。

これだけの設定で簡単インストールされます。「サイトURL」はドメインの最初のページなら空欄です。その下の階層なら、そこを指定してください。例えば「NEWS」ならnewsですね。一旦公開すると自由に編集が出来なくなるので練習用でもう1つ作っても後々便利です。

SEOでどのように公開するかですが、WEBサイトには一つ前のページ情報が残っています。何処にも公開していないのに、Googleで検索すると出る場合があります。

例えば、「新しいページ」を見た後に「Yahoo」を見ると、Yahooに「新しいぺージ」のアドレスが見られます。設定でデータを消す事も出来ますが、ほとんどはそのままです。そこでデータが収集されます。

アマゾンなどはユーザーが別サイトで商品情報を見て、自社商品と比較するとその金額を収集していると言われています。(高いと値段を下げるとか)

話はそれましたが、孤立サイト(練習用サイト)にする場合はプラグインを入れて管理者しか入れない設定にします。

World-Pressを手動でインストールする。
手動でインストールするメリットはMy-Sqlが10個などと少ない時は、1つのMy-sqlの中に複数のWorld-Pressを入れる設定ができます。

下記ががその設定個所です。複数 WordPress サイトのインストールを参考にしてください。

WorldPressの設定

Word-Pressを手動でインストール

world-pressのサイト

World-Pressのサイトに詳しく書かれていますのでそちらを参考にお願いします。

MuuMuuDomainでドメインを取得

MuuMuuDomainはこちら

ほしいサイト名を仮に「hoge」とします。

 

ドメイン名には、半角英数字と「-(ハイフン)」が使用できます。
※始めと最後には「-(ハイフン)」は使用できません。
※ドメイン名は3文字以上32文字以下で入力ください。

hoge.websaiteが見つかりました。最初の1年は121円、2年目以降は4,378円です。
2年から高いです。

 

 

2021/4/24日現在
ドメインとは

WEBサイトのアドレスがドメインです。

お名前.comムーム―ドメインなどで取得可能か、取得されているかわかります。
例えば、wan-wan.comは取れませんがwan-wan.funなら最初の1年は90円です。でも2年目は3,000円以上ですね。(2021年4月23日時点)、.comは2年目で1408円/年です。wan-wan-wan-wan.comなら1年目は35円です。
ドメインは複数年もつので2年目以降の金額も確認しましょう!
ドメイン料金一覧で2年目以降も確認してください。
onamae.com料金一覧へMuuMuuDomain料金一覧 この2社の運営母体は同じGMOです。

別の組織という意味ではGoogleもGoogleDomainsで扱っています。私は3社とも使っています。

理想のドメインとは

  • サイトの内容が名前から分かりやすい事
  • 2年目以降も含めて価格が安い事
  • なるべく短い事
  • -(ハイフォン)は無いか、できるだけ少ない事
  • 使わないかもと思っても、早めにとる事(取得年月日が古いほうがSEOにはプラスになる)

このpink-cats.comは2001/11取得です。ドメインには歴史は必要です。

もっと詳しく知りたいならAIアナリストブログさんが分かりやすく書かれていますので参考にしてください。

サブドメインとは

1つのドメインでもサブドメインを使ったり、または下層を指定する事でサイトは増やせます。
https;//www.nesw.あ~たら.comとか、https://www.neko.あ~たら.comのサブとメイン方式やhttps://www.あ~たら.com/nesw/https://www.あ~たら.com/neko/とか階層を変える方法です。

メリットはドメインが1つで済む事、デメリットは関係が見えてしまう事です。別の所でも書きましたが、SEO対策でInstaGramやFacebooknなどとつなげる場合、もし炎上させたら同じドメインなら延焼する危険があります。

関係を見せる方が良い場合もあります。関係を見せたくなければ別サイトです。

ドメイン名はお宝

近年はWEBサイトは減少傾向です。世界のTOP100WEBサイト

TOP100
世界のTOP100  

SEO対策はWEBサイトだけでなく、YoutubeやFacebook、Instgramなどを活用しますが、名前はWEBサイトに因んだ名を使います。

もし、別のサイトを作るなら今のサイトを変更するのでは無く新しくサイトを作りましょう!

サーバーとは

Webサイトを公開するデータを保存したり更新したりする部分で、契約を数カ月単位、年単位で借ります。サーバの条件としては

 

  1. 価格が安いこと
  2. 無料SSLが使えること
    これは、公開するサイトのアドレスは「http://あ~たら」とか「https://あ~たら」 ですが、データの通信方式が異なります。「http://」は通信データを暗号化していない。「https://」通信データを暗号化しているの違いです。例えば「お問合せ」画面から入力したデータがそのままの平文か暗号化されたデータかの違いです。
    WEBのデータは何か所も中継されるので平文は見られる可能性があります。
    SEO対策で検索した時のヒット件数に影響するのでSSL化は必須です。
  3.  複数のサイトが作れる事
  4. WORLD PRESS が使える事
  5. 独自ドメインが使える事

 

 

サーバープラン容量月額MySql独自ドメイン備考
ロリポップハイスピード300G825円無制限無制限独自ドメイン1つ無料
XserverX10300G1100円無制限無制限独自ドメイン1つ無料
Wingベーシック300G931円無制限無制限独自ドメイン2つ無料
Z.com WPエントリープラン10G440円51Worpress専用5つまで
SSLが110円

価格は年間契約の月額料金です。価格は変動する場合あり各社の内容は日々変化します。
各社とも独自ドメインが無料なのは年間契約で、自動更新をした場合です。
WorldPerssは基本1つ(1つのサイト)でMysqlを1つ使います。(自動インストールでは必ず!)

その他費用が必要な事もあります。World-Pressの自動設定が2つ目は有料とか、サービス期間中や、無料期間中、契約期間なので価格は変動します。必ず自身で確認してください。

契約順番

ドメインを取得してサーバーかサーバーを決めてドメインかですが、サーバーでドメインが付いていく事もあります。その場合はサーバーが先になります。

ドメインが付いてなければどちらでも大丈夫です。
また、ドメインの設定はネームサーバー程度しかありませんので、価格が大きく変動しない限り契約を移す事はありません。サーバーは機能的な問題や価格的な問題で引越す(移す)ことがあります。その為、同じ会社で契約していると面倒な事もあります。

ドメインの設定でネームサーバーの設定画面があります。ネームサーバーを変更する事で、ドメイン⇒サーバーにつなげます。

以下の画面はお名前ドットコムのネームサーバーの設定画面です。

お名前ドットコム

私の場合は、ドメインが「GogleDmain」、サーバーがX-Serverとか、ドメインが「お名前ドットコム」でサーバーが「GoogleCloud」とか色々な組み合わせがあります。

準備の手順
  • どのようなサイトを作るか
  • どのサーバーを使うか
  • World Perssの勧め
  • プラグインを入れる
  • 文書を充実させる。

どのようなサイトを作るか

なにか趣味はありますか?
ゲームでもいいですよ。
料理や掃除でも大丈夫です。
資料や写真準備しましょう。

わんこの記録
無料で始めれるのかな

タダで、収益化するのは無理です。無駄な努力はあきらめお金を払いましょう!

年間費用 10,000円以内で始める事ができる!
WEBサーバー費用 6,000円程度~
ドメイン費用 1,500円~

ここではパソコンを持っていて、通信環境がある事が前提です。携帯での編集は書きません!

ここがページの先頭です。ここから上に移動してください。