ご希望の玉を押してください。

ネットはみるだけでなく、ブログ配信!はじめませんか!

このサイトは、こんな人におすすめ
  • 時間が余り、することがない(定年退職者など)
  • インターネットで配信したいんだけど何からすればいいのか分からない(一度失敗した)
  • 有機栽培などの野菜をインターネットを使ってPRしたい(野菜の良さを伝えたい)
  • 新聞、雑誌関係に仕事をしたかった人。(自分で全部できます)
  • 物忘れが多くなった人

パソコンはワープロ程度は使えますが、ブログは初めてです。何からすればよいですか。

博士
博士

 プレミアムドメイン(daiki.comやyukari.jp)を取得している敷島がシニアにも簡単にできるブログを紹介します。
 必要な方は、扉(目次)を開いて、ご覧ください。

1.ブログするなら知っておくべきポイント3選

どうやってブログを作るのですか。

博士
博士

プラモデルを作る感覚で、回答を選ぶ試験のように、誰でも簡単にできます。デザインは着せ替え人形のようです

博士
博士

突然ですが、鉄人28号の歌、おぼえていますか

(問題)
 鉄人28号の歌詞を回答番号で、お答え下さい。
(回答番号)
 ①ガオー ②ダーン 
 ③バーン ④ビユーン

(答え)
 ビルのまちに、( ① )
 夜のハイウェイに( ① )
 ダダダダ( ② )とたまがくる
 ババババ( ③ )とはれつする
 ( ④ )と飛んでく鉄人28号

 簡単に答えられましたか?真っ白い答案用紙に答えを書くのが、HTMLと言う言語を使って作るウェブサイトです。解答欄から答えを選ぶ感じで作るのがワードプレスを使ったブログです。
 ブログには答えを選ぶだけの「無料ブログ」と問題も自分で作れる「有料レンタルサーバー」があります。

「有料レンタルサーバー」は、ドメイン維持料と合わせて年間16,500円程度の費用がかかりますが、「ワードプレス(無料)」のテーマを使い“きせかえ”感覚で、自由にデザインの変更ができ、世界で一つの「独自ドメイン」が取得できます。

博士
博士

まずは、ドメイン・レンタルサーバー・ワードプレスの3つの仕組みを理解しましょう。

①ドメインとは

ドメインとは、何ですか。

博士
博士

ドットコム( .com)、聞いたことありますか。


ドメインとは、ウェブ(Web)サイトの住所です。
ご覧のサイト「玉手箱」のドメインは、
tamatehako.com(たまてはこドットコム)です。

ドメインは世界に一つで、同じものはないことから早いもの勝ちです

ドメインとは、Webサイトを表示するための住所です。Webサイトは、電話番号のようなIPアドレス(123.45.678.9)で識別していますが、IPアドレスにドメインを関連づけることで、これを覚えやすくしています

サイトの名称(玉手箱)は、“たまてばこ(tamatebako)”ではないのですか。

博士
博士

tamatebakoは先に取られていましたので、tamatehakoにしました。案外、気にいってます。
 私、自分の名前(プロフィール)daiki.comと農園yukari.jpを昔に取得しました。

 一般的に、ドメインは、.jpや.comで覚えやすく、入力しやすいものを取得するのがおすすめです。
 野菜の販売をお考えの方は、ブランド名をドメインすればPR効果
が倍増します。

②レンタルサーバーとは

レンタルサーバーとは、何ですか。

博士
博士

サーバーは、ネットの世界では土地になります。

ホームページやブログを発信するためには、サーバーに画像や文書を預ける必要があります。このサーバーには、①無料サーバーと②有料レンタルサーバーがあります

①無料サーバー
・利用料金(家賃)は無料。
・集合住宅ですので、住所(サイト名)は部屋番号。
・アメーバブログなど

②有料レンタルサーバー
・利用料金(家賃)が必要。
・一戸建てのため、住所(サイト名)はドメイン取得で選択可能。
・ワードプレスを使いモデルハウス感覚で間取りやデザインも自由。
・Xサーバーなど

 レンタルサーバーにドメインとワードプレスを登録すれば完成です

博士
博士

ワードプレスは、パソコンでもスマホでも、ネットにつながれば操作できます

③ワードプレスとは

ワードプレスとは、何ですか。

博士
博士

ワードプレス(WordPress)は、特別な知識がなくてもブロブなどのサイトが作れるソフト(道具)です。
さあ、ワードプレスで家を建てましょう。

 これらのサイトは、無料テーマのCocoon(コクーン)のスキン(衣装)をかえることで、見栄えをかえています。
 ワードプレスは、テーマやスキンの“着せ替え”でレイアウトの変更ができます。

画像や文字を表示するには、どのように入力しますか。

博士
博士

この会話風(吹き出し)の操作を説明します。

💭吹き出しの作り方は、
+ クリックするとブロックを表示します。
💭吹き出しクリックしてください。
悩むおじさん(左)チェックしてください。
フラットチェックしてください。
⇒⑤左チェックしてください。
丸(枠線あり)チェックしてください。
「画像や文字を表示するには、どのように入力いますか」入力してください。


   

博士
博士

できそうですか 答えを選ぶだけで完成です。
このサイトのマネをすれば誰でも簡単にできます。
※もう少し学習される方は、次の固定ページに進んでください。

2.さあ はじめよう ドメイン・レンタルサーバー・ワードプレスで

何から始めれば、いいですか。

博士
博士

ブログを始めるには、ドメイン・レンタルサーバー、ワードプレスが必要になりますが、ドメインとレンタルサーバーを利用するには、賃貸契約が必要になります。

ドメインとレンタルサーバーの契約はどのようにしますか。

博士
博士

 ドメインとレンタルサーバーの契約は、同じ会社と契約する方法と別々の会社にする方法があります。

同じ会社

・ネームサーバーにドメインを登録する操作が必要ない。
・キャンペーンなどでサーバー契約期間中はドメイン無料の時もある。
・超簡単インストールのクイックスタート等が利用できる。

・サーバーの契約を変更した時複雑になる。
・キャンペーンなどがないと比較的に契約料が高い。

別々会社

・レンタルサーバーの契約先の変更が容易である。
・契約料が比較的に安価である。

ネームサーバーにドメインを登録する操作が必要である。

レンタルサーバーのおすすめはどこですか。

博士
博士

 レンタルサーバーは、“エックスサーバー株式会社”との契約を例として、説明します。
 玉手箱も他社から乗り換え“エックスサーバー株式会社”で運営しています。

エックスサーバーの優れているポイント
・WordPressのインソールが簡単。
・電話サポートがある。
・処理速度が満足できる。
・不正アクセスのログイン制限やSSL等のセキュリティが十分である。
・利用者が多いので、操作方法などのサイトが豊富で安心できる。

一番簡単で、早くブログが始められる方法を教えてください。

博士
博士

ワードプレスをインストールしてブログを始めるには、Xサーバーでは①超簡単なクイックスタートと②通常インストールがあります。

希望ドメイン名は考えましたので、契約の説明をお願いします。

博士
博士


事前に準備するものを用意してください

操縦画面で操作を説明します。

事前に準備するもの

・スマートフォン、携帯電話(SNSで認証コードが送られる)
・メールアドレス(連絡用のメール※renracu@gmail.comを使い説明します)
・希望ドメイン名(drone28go.comを例に説明しています。)
・ブログのタイトル
・ブログ管理画面用のユーザー名、レンタルサーバーのID
・ブログ管理画面用のパスワード、レンタルサーバーのパスワード

①超簡単クイックスタート(同じ会社)でワードプレスをインストールする方は、

OP№ xq1
クイックスタートログイン

「Xサーバー」をクグッてお申し込みはこちら10日間無料お試し 新規お申込みクリックしてください。


OP№ xq2
XSERVE申込フォーム

サーバーIDは、表示のままでも自分で決めるで修正もできます。
プランは、X10で十分です。(プランで料金が異なります。)
WordPressクイックスタートにチェックをしてください。
Xserverアカウントの登録へ進むクリックしてください。


OP№ xq3 事前確認
⇒Ⓐクイックスタートは「10日間無料のお試し期間」がありません。「お申し込みと同時にサーバー料金の支払い」が発生します。「支払いはクレジットカードで自動更新」として契約が自動的に更新されます。
確認しましたクリックしてください。


OP№ xq4 サーバー契約
サーバーの契約期間希望の期間を選択ください。利用料金が表示されます


OP№ xq5 ドメイン契 約
希望ドメインを入力し、トップドメイン.comなどを選択してください。
すでに登録されている場合は登録できません✖。


OP№ xq6 WordPressの登録
ブログ名あとで変更できます。(例:ドローン28号)
ユーザー名ワードプレス管理画面のログインに使用します。
パスワードワードプレス管理画面のログインに使用します。
メールアドレスワードプレス(ドローン28)からの通知用メールアドレスです。メールアドレスは連絡用に作成したもの(renracu@gmail.com)を表示していますので、ご自身のものを入力してください。
Xserverアカウントの登録へ進むクリックしてください


・ユーザー名とパスワードは、メモってください。
・パスワードは、大小文字・数字・!#$%=~^|:_[].+-*/などを使い複雑なものを設定ください。
・パスワードは後で変更できますが、ユーザー名は追加できても変更できません。

OP№ xq7 
XSERVE申込フォーム

メールアドレスは、Xサーバーの連絡用です。WordPress用と同じでもOKです。
パスワードは、Xサーバーの利用に使います。
登録区分は、該当をチェックしてください。
⇒Ⓓ氏名・フリガナ・郵便番号・住所・電話番号(SNS認証コードに使用)を入力してください


OP№ xq8 カード情報
クレジットカード情報を入力してください。
インフォメーションの配信は、チェックするとキャンペーンなどの情報が配信される。

利用規約と個人情報に関する事項】
内容を確認、次へ進むクリックしてください


OP№ xq9 認証入力
Xサーバーに登録したメールアドレスに認証コードが届きます。

【メール認証コード入力】
メールで届いた認証コードを入力、次へ進むクリックしてください


OP№ xq10 サーバー契約
登録内容を確認、SNS・電話認証へ進むクリックしてください。


OP№ xq11 SNS・電話認証
⇒Ⓐ認証コードを受ける電話番号を入力してください。
⇒Ⓑテキストメッセージの取得をチェックしてください。
SNS・認証コードを取得するクリックしてください。


SNS認証コード
認証コードが登録した電話に届きます。

OP№ xq12 
XSERVE申込フォーム

SNSで届いた認証コードを入力、
認証して申し込みを完了するクリックしてください。

申込が完了しました。


博士
博士

登録できましたか。
サイトURLにアクセスして、サイト名・Hell world!が表示されれば完成です。

②通常インストール(同じ会社)でワードプレスをインストールする方は

通常インストールでワードプレスをインストールする方法を教えてください。

博士
博士

クイックスタートを使った方もドメインの追加などの参考にしてください。

レンタルサーバーの契約をするには

OP№ xn1 通常契約ログイン
「Xサーバー」をクグッてお申し込みはこちら⇒スタート10間無料お試し 新規お申込みクリックしてください。


OP№ xn2 通常契約ログイン
サーバーIDは、表示のままでも自分で決めるで修正もできます。
プランは、X10で十分です。(プランで料金が異なります。)
⇒Ⓒ利用するチェックしないでください。
Xserverアカウントの登録へ進むクリックしてください。


OP№ xn3 通常契約ログイン
メールアドレス~電話番号までの必須項目を入力します。㊟メールアドレスは連絡用に作成したもの(renracu@gmail.com)を表示していますので、ご自身のものを入力してください。
インフォメーションの配信は、チェックするとキャンペーンなどの情報が配信される。
【利用規約と個人情報に関する事項】
内容を確認、次へ進むクリックしてください。


【認証メール】
Xサーバーに登録したメールアドレスに認証コードが届きます。

OP№ xn4 通常契約ログイン
メールで届いた認証コードを入力、次へ進むクリックしてください


OP№ xn5 契約内容確認
登録内容を確認、SNS・電話認証へ進むクリックしてください。


【SNS認証コード取得】
認証コードが登録した電話に届きます。

OP№ xn6 
XSERVE通常契約申込フォーム

SNSで届いた認証コードを入力、認証して申し込みを完了するクリックしてください。


博士
博士

登録できましたか!
次に、Xサーバーのキャンペーンで無料の独自ドメインを取得するため、利用料の支払いをします。
支払い方法は、コンビニ支払いを選択しています。

OP№ xns1 
XSERVEアカウントログイン

⇒ⒶXserverアカウントに事前に登録したメールアドレス・パスワードを入力してください。
⇒スタートログインクリックしてください。
サーバー等の内容を確認、料金支払いクリックしてください。


OP№ xns2 料金支払い
⇒Ⓐ契約期間を選択してください。(お支払金額が表示されます。)
支払方法を選択するクリックしてください。
コンビニエンスストアをチェックしてください。(クレジット・銀行振込も可能です。)
決済画面へ進むクリックしてください。


OP№ xns3 請求書発行
Ⓐ支払店舗~メールアドレス(必須)を入力します。㊟メールアドレスは連絡用に作成したもの(renracu@gmail.com)を表示していますので、ご自身のものを入力してください。
確認画面へ進むクリックしてください


OP№ xns4 請求書発行確認
内容を確認、お支払い手続きを行うクリックで手続き完了l


OP№ xns5 コンビニ振込票
確認メールがとどきますので、「コンビニ振込票」を最寄りのコンビニで提示し、料金を支払います。(スマホでメールを受け取ると画面に振込票を表示できますので、連絡用メールを事前に設定ください)


支払が完了すると「【Xserver】コンビニでのお支払い受付のお知らせ」メールが届きます。

ドメインの契約をするには

博士
博士

サーバーの契約が完了しましたので、いよいよドメインの取得です。

ここで問題です。プレミアムドメインのdaiki.com(氏名)やyukri.jp(農園名)をどのようにして取得したか。

答えは簡単です。早く申請したから(笑) daiki.comは20年以上前に取得しました、

 ブログ名や野菜のブランド名を考え、取得するドメイン名を検討してください。
※希望のドメインがすでに取得されている場合は、工夫が必要です。例えば
・このサイトtamatehako.comのように読み方を工夫する。
・音読み、訓読みで工夫する。
・Kをcにする。
・数字やーを追加する。 など

博士
博士

ドローン用サイトの(ドローン28号drone28.comを例にドメインとレンタルサーバーが同じ会社のXサーバーの契約で説明します。

Xserverでは、キャンペーン(無料)Xdomain(有料)で取得する方法があります。

③レンタルサーバーと別々の会社でドメインを取得するには、

博士
博士

希望のドメインは決まりましたか!ドメインは早い者勝ちです。
レンタルサーバー(Xサーバー)と別々の会社(お名前ドットコム)でドメインを取得する方法を説明します。

レンタルサーバーにドメインを設定する

博士
博士

他社で取得したドメイン「ゆかり農縁yukari.jp」を例として、Xサーバーにいワードプレスを設定する方法を説明します。
事前にネームサーバーにドメインを登録する必要があります。

OP№ xds1
XSERVEパネルログイン

契約時に設定したメールアドレス又はサーバーID・パスワードをXサーバーのサーバーパネルに入力してください。
ログインⒷ①をクリックしてください。


OP№ xds2 ドメイン設定
ドメイン設定クリックしてください。


OP№ xds3 ドメイン設定追加
ドメイン設定追加クリックしてください。


OP№ xds4 ドメイン設定
yukari.jp(※ご自身のドメイン)を入力してください。
⇒Ⓑ無料独自SSLを利用す」・「高速化・アクセス・・・」を必ずチェックしてください。
確認画面へ進むクリックしてください。


OP№ xds5 ドメイン設定追加
確認後、通知するクリックしてください。


無料独自SSLの設定に最大1~2時間程度中断します


ワードプレスをインストールする。

博士
博士

希望のドメインは取得できましたか。
次はいよいよ、ブログを動かす無料ソフトWordPress(ワードプレス)のインソールです。

OP№ wpk1 WordPress簡単インストール
Xサーバーサーバーパネルログインしてください
設定対象ドメインに設定したドメインがあるか、確認してください。
WordPress簡単インストールクリックしてください。


OP№ wpk2 
XSERVEドメイン選択

該当のドメイン選択するクリックしてください。


OP№ wpk3 
XSERVE簡単インストール

設定ドメインの確認、WordPressインストールクリックしてください。



OP№ wpk4
WordPress簡単インストール

⇒Ⓐ設定対象ドメイン名選択してください。
⇒ⒷサイトURLドメイン名と同じか確認ください。
⇒Ⓒブログ名:あとで変更できます。(例:ゆかり農縁)
Ⓓユーザー名:ワードプレス管理画面のログインに使用します。
⇒Ⓔパスワードワード:プレス管理画面のログインに使用します。
Ⓕメールアドレス:ワードプレス(ゆかり農縁)からの通知用メールアドレスです。メールアドレスは連絡用に作成したもの(renracu@gmail.com)を表示していますので、ご自身のものを入力してください。
⇒Ⓖキャッシュ自動削除:ONにするチェックしてください。
⇒Ⓗデーターベース:自動・・・チェックしてください。
確認画面へ進む④クリックしてください。


・ユーザー名とパスワードは、メモってください。
・パスワードは、大小文字・数字・!#$%=~^|:_[].+-*/などを使い複雑なものを設定ください。

OP№ wpk5
WordPress簡単インストール
⇒Ⓐ以下の内容でWordPressをインソールしますか?確認してください。。
インストールするクリックしてください。
⇒Ⓐ内容確認、誤りがなければメモしてください。
インストール完了です。



OP№ wpk6
WordPress簡単インストール

ログオフクリックしてください。


サイトを常時SSL化する。

常時SSL化とは何ですか。

博士
博士

 サイトを訪れ、利用する人の通信データを暗号化する仕組みで、安全に利用できるようにすることです。

SSL化しないと、どうなりますか。

博士
博士

 webブラウザのアドレに警告が表示されます。
 「Xサーバー」クイックスタートの方は自動でSSL化されています。

【iphoneサファリの表示】
SSL化(https://)していないと安全ではありません等の表示がされます。

OP№ ssl1 通常契約ログイン
グーグルなどにワードプレス管理画面URL①を入力してください。
⇒Ⓐユーザー名とパスワードを入力してください。
ログインクリックしてください。


OP№ ssl2 WP一般設定
ワードプレス左側の管理画面(ダッシュボード)の設定一般をクリックしてください。


OP№ ssl3 WP一般設定
⇒Ⓐサイトのタイトル・キャッチフレーズを修正できます。
⇒ⒷWordPressアドレス・サイトアドレスのhttp://にsを追加してください。(※必ず半角:1バイトで)
変更を保存クリックしてください。


OP№ ssl4 サーバーパネル
ホームページ⇒htaccessクリックしてください。


OP№ ssl5 ドメイン選択
該当のドメインの選択するクリックしてください。


OP№ ssl6 htaccess編集
設定対象ドメイン確認、htaccess編集クリックしてください。
htaccessのソースコードが表示されます。


OP№ ssl7 
htaccess編集追加

⇒Ⓐ3行目に追加するため、スペースを作り、中断します。


OP№ ssl8 XSERVEマニュアル
📖マニュアルクリックしてください。
マニュアルの検索に常時SSL入力検索🔍クリックしてください。
1..htaccess>Webサイトの常時SSL化クリックしてください。


OP№ ssl9 
マニュアル常時SSL化
コソースコードをコピーしてください。

ソースコード

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]


OP№ ssl10 SSL化追加
コピーしたソースコード3行を張り付けてください。
⇒⑪確認画面へ進むクリックしてください。


OP№ ssl10 ssl11
htaccess編集完了

実行するクリックしてください。
ログアウトクリックしてください。


博士
博士


「http://~」のURLでアクセスした時、自動的に「https://~」のURLへ転送されていれば全ての設定は完了です。

3.ブログの操作方法

ワードプレスのインストールは完了しました。操作方法を教えてください。

博士
博士

ブログの操作に必要な最低限の設定と操作のポイントを『ゆかり農縁yukari.jp』を例に説明しましょう。

①管理画面の基本操作

博士
博士

最初にワードプレスを操作する基本操作画面を説明します。

管理画面の基本操作
ユーザー名、パスワードログインクリックしてください。
■Ⓑ管理バー:サイトの表示と管理画面を切り替えます。
■Ⓒサイドバー:管理画面メニュー、選択します。
■Ⓓユーザー名:管理画面からログアウトする時にクリックしてください


②ブログの表札(ファビコン)の作成

博士
博士

ワードプレスの家ができたら、ペイントで表札を考えましょう。ワードプレスの表札は操作画面にファビコンを設定します。
表札ですので、なくてもかまいませんけど。

OP№ fa1 ファビコン操作
・GoogleやiPhoneの画面に表示されるWordPressのアイコンをファビコンを設定することで独自作成の表札できます。
・ブログ名、キャッチフレーズが表示されます。
・オリジナルのファビコンを設定しないと、ワードプレスのアイコンになります。


ブログの表札のようなファビコンは、小さいアイコン(マーク)のため、複雑なものや色数の多いものは避け、シンプルでわかりやすいものが好ましいです。

博士
博士

Windowsのおまけ(アクセサリー)ソフトのペイントで作る方法を説明します。

Windows ペイント操作
Windowsアクセサリ⇒ペイント①クリックしてください。
⇒②サイズ変更クリックしてください。
⇒③ピクセルチェックしてください。
⇒④縦横比を維持するチェックを外してください。
⇒⑤512を縦横に入力してください。
⇒⑥Aクリックしてください。
⇒⑦文字サイズ250入力してください。
⇒⑧色選択してください。
⇒⑨文字入力してください。
※フォントも好みに修正しれください。
⇒⑩ホームクリックしてください。
⇒⑪□クリック、文字を囲んでください。
⇒⑫囲んだ文字を移動できます。
⇒⑬ファイル名前を付けて保存PNG画像クリックしてください。


私はゆかり農縁に、初めて来た(自生)草花のクローバーをファビコンに加工しました。

ファビコンの設定方法を説明します。

OP№ fa2 ファビコン操作
ワードプレス管理画面サイドバー 外観カスタマイズクリックしてください。
⇒サイト基本情報②クリックしてください。
サイト基本情報下段サイトアイコンを選択③クリックしてください。
⇒ファイルを選択④クリック、パソコンから作成したアイコンをインストールしてください。


OP№ fa3 ファビコン操作
インストールするとワードプレスのメディアライブラリーに保存されます。
該当のファイルを選択、選択クリックしてください。
サイト基本情報
⇒削除・画像の変更Ⓑができます。
公開クリックしてください


表札(ファビコン)の出来栄えはどうですか。
表札の次は、ユニットのハイムのようなテーマCocoon(コクーン)を使い、家を建てます。


③無料テーマCocoonのインストール

博士
博士

Cocoon(コクーン)は無料のテーマですが、オプションのブロックが豊富で快適なブログが作りやすいですのでおすすめします
では、テーマの設定方法から説明します。
最初にCocoonの親テーマと子テーマをダウンロードファイルにダウンロードします。

OP№ tc1 
Cocoonダウンロード

Cocoonの公式サイトhttps://wp-cocoon.com/ダウンロードクリックしてください。


OP№ tc2 
Cocoon親子ダウンロード

スクロールする親テーマダウンロード”Cocoonテーマ”をダウンロードクリックしてください。
スクロールする子テーマダウンロード”Cocoonテーマ”をダウンロード②子クリックしてください。


『親テーマ』とは『テーマの本体・元』、『子テーマ』とは『カスタム用』になります。
『親テーマ』がアップロード(更新)されても、『子テーマ』があれば上書きによってカスタマイズが修正されることがありません。
『親テーマ』『子テーマ』の両方をインストールして、『子テーマ』を有効にしてください。

OP№ tc3 
テーマ設定
WordPressの管理画面外観テーマクリックしてください。


OP№ tc4 
親テーマインストール

新規追加又は新しいテーマを追加クリックしてください。


OP№ tc5 
親テーマアップロード
テーマのアップロードクリックしてください。


OP№ tc6 ファイルの選択
ファイルの選択クリックしてください。


OP№ tc7 
Cocoon親ダウンロード

ダウンロードⒶ⇒cocoon-masterⒷ⇒⑦開くクリックしてください。


OP№ tc8 
Cocoon親テーマのアップロード

cocoon-masterⒶ⇒今すぐインストールクリックしてください。


OP№ tc9 
Cocoon親テーマ設定完了

アップロードしたファイルからテーマをインストールしています。
インストール完了
外観テーマクリックしてください。


OP№ tc11 
子テーマアップロード

テーマのアップロードクリックしてください。
ファイルの選択クリックしてください。


OP№ tc12 ファイルの選択
ファイルの選択クリックしてください。


OP№ tc13
Cocoon子テーマダウンロード

ダウンロードcocoon-chiid-masterⒷ⇒開く(o)クリックしてください。


OP№ tc14
Cocoon子テーマアップロード

cocoon-chiid-masterⒶ⇒今すぐインストールクリックしてください。


OP№ tc15 
Cocoon子テーマ設定完了

アップロードしたファイルからテーマをインストールしています。
インストール完了
有効化クリックしてください。


OP№ tc16 
Cocoon子テーマ有効化

cocoon-chiid-master子テーマの有効化確認してください。


博士
博士

Cocoonをインストールすることでサイト(ゆかり農縁)の骨格、柱の部分ができました。

④プラグインの設定

博士
博士

 次に、さらにワードプレスの機能を拡張(オプション)できるプラグインの導入を説明します。

OP№ wpp1 
WordPressプラグイン

管理画面プラグイン新規追加クリックしてください。


OP№ wpp2 
WordPressプラグイン追加

プラグイン検索に追加するプラグイン名(例WP Multibyte Patch)を入力してください。


OP№ wpp3 
WordPressプラグイン設定
今すぐインストールクリックしてください。インストール中表示になります。
有効化クリックしてください。


OP№ wpp4 
WordPressプラグイン一覧

プラグイン一覧に表示されます。
新規追加クリックしてください。

※推奨のプラグインの追加を繰り返してください。


博士
博士

 テーマCocoonに相性の良いプラグイン7選を紹介しますので、続けて導入ください。。
 なお、操作方法や設定の詳細はプラグイン操作方法に進んでください。

推奨プラグイン5選
  1. WP Multibyte Patch⇒2バイト系の日本語を適正にすることができます。
  2. Category Order and Taxonomy Terms Order⇒投稿のカテゴリーの表示順番を変更できます。
  3. Contact Form 7(設定必要)⇒お問い合わせフォームを作成できます。
  4. EWWW Image Optimize⇒画質を劣化させることなくサイズを圧縮できます。
  5. Invisible reCaptcha(設定必要)⇒スパム対策を行います。

⑤WordPressの初期設定

博士
博士

ここからは、最後の仕上げを「ゆかり農縁」のサイトyukari.jpを例に立ち位置を変えて説明します。
まずはWordPressのサイトレイアウトの名称を確認ください。

WordPress一般設定

博士
博士

最初は、一般設定でサイトのタイトルやキャッチフレーズを変更できます。

OP№ wpi1 
WordPress一般設定開始

管理画面設定ダッシュボード一般クリックしてください。


OP№ wpi2 
WordPress一般設定
変更

サイトのタイトル、キャッチフレーズ修正できます。
変更を保存クリックしてください。


WordPressの表示設定

博士
博士

WordPressの表示設定では、サイトの最初のページ(フロント)を設定できます。

OP№ wph1
WordPressh表示設定開始

管理画面設定ダッシュボード表示設定クリックしてください。


OP№ wph2
WordPressh表示設定変更

ホームページの表示最新の投稿チェックしてください。
検索エンジン表示検索エンジンがサイトを・・・チャックしてください。
サイトの完成後は、チェックを外してください。
変更を保存クリックしてください。
※投稿と固定ページは、後ほど説明します。


WordPressユーザー設定

博士
博士

WordPressユーザー設定では、ブログ上の表示名はIDからニックネームに変更しましょう。

OP№ wpy1
WordPressユーザー設定開始

管理画面ユーザーユーザー一般クリックしてください。


OP№ wpy2
WordPressユーザー設定選択

ユーザー名クリックしてください。


OP№ wpy3
WordPressユーザー設定変更

ニックネーム(必須)ユーザー名を「管理者など」に修正しましょう。
ブログ上の表示名「管理者」を選択します。
新しいパスワードを設定クリックしてください。
修正する場合は、表示された強力なもの又は自ら考えたものを入力してください。
プロフィールを更新クリックしてください。


WordPresパーマリンク設定

博士
博士

パーマリンクとは、固定ページや投稿ページのURLになります
「数字ベース」や「日付と投稿」などのシンプルで分かりやすいものが好まれます。
『ゆかり農縁』は農園日誌がメインですので、「カテゴリーと日付」を設定し、カテゴリーには作物の種類を登録しています。

OP№ wpp1 
パーマリンク設定開始
管理画面設定設定パーマリンク設定クリックしてください。


OP№ wpp2 
パーマリンク設定変更
カスタム構造チェック、囲み内の表示を削除してから、カテゴリー%category%(a)年%year%(b)月%monthnum%(c)日%day%/(d)数字%post_id%(e)をクリックしてください。
変更を保存クリックしてください。


WordPresディスカッション設定

博士
博士

WordPresディスカッションでは、スパムを防止するためコメントの許可をしないに設定し、なおコメントはお問い合わせページを利用します。

OP№ wpds1 
ディスカッション設定開始

管理画面設定設定ディスカッションクリックしてください。


OP№ wpds2
ディスカッション設定
変更

デフォルトの投稿設定新しい投稿へのコメントを許可チェックを外してください。
変更を保存クリックしてください。


⑥ウイジェットとサイドバー

博士
博士

ウイジェットとは、あらかじめ用意している部品を使ってサイトに情報を表示する機能です。
このウイジェットでサイドバーを変更しましょう。

OP№ wpu1 
ウイジェット設定

管理画面設定ダッシュボード設定ウイジェットクリックしてください。


OP№ wpu2 
ウイジェット
追加
ドラック&ドロップ
⇒②Ⓐ人気記事を引っ張ってサイドバーのボックスまで移動する。

表示項目とボックスが離れている場合
画像②Ⓑクリックしてください。
サイドバーにチェックをしてください。
ウイジェットを追加②Ⓒクリックしてください。
タイトルを入力すると項目名を変更できます。
完了クリックしてください。
⇒削除④クリックすると項目を削除できます。


ゆかり農縁は栽培情報が主なサイトですので、サイドバーはカテゴリー・最新の情報にしています。
カテゴリーはタイトルを「ご覧になりたいのは」に修正、親に栽培日誌、子に各作物を設定する予定です。

OP№ wpu3
ウイジェット
修正

⇒Ⓐタイトルを「ご希望の項目をクリック」に修正しています。
⇒Ⓑ階層を表示チェックしています。
保存クリックしています。


表示項目名の前に[c]の表示があるのは、Cocoonのオリジナルですので、テーマを変更すると影響がでます。

⑦Cocoonのカスタマイズ(前編)

博士
博士

最後の設定です。
Cocoonカスタマイズは、窓、看板、壁などを選ぶようで楽しいですけど、少し時間がかかりますので、主なものだけ紹介します。

OP№ coc1 
Cocoonカスタマイズ開始
管理画面設定ダッシュボード設定Cocoon設定Cocoon設定クリックしてください


博士
博士

スキンは、イージーオーダーの洋服のようで簡単に着せ替えできます。

OP№ coc2 
Cocoonカスタマイズ
スキン

スキンクリックしてください。
⇒③カーソルをあてるとサイトサンプルが表示されます。
⇒③チェックしてください。
変更をまとめて保存クリックしてください。


博士
博士

全体は、文字のサイズを変更できます。
通常は変更しませんが、シニアのために2ポイント大きくしています
スキンを選ぶとスキン制御で変更できない項目もあります。
スキンを使わないでオリジナルの場合は、キーカラーを設定すると簡単に色調整ができます。

OP№ coc3 
Cocoonカスタマイズ
全体

全体クリックしてください。
サイトフォント20pxクリックしてください。
モバイルサイトフォント18pxクリックしてください。
変更をまとめて保存クリックしてください。


博士
博士

ヘッダーは、看板ですので設定でイメージが大きくかわります。
プレビューで確認ください。
スキンによっては、メニュー等が表示されない場合があります。

OP№ coc4 
Cocoonカスタマイズ
ヘッダー

ヘッダークリックしてください。


OP№ coc5
Cocoonカスタマイズ
ヘッダー

ヘッダーレイアウト
センターロゴ
(デフォルト)②Ⓐ
(トップメニュー)②Ⓑ
(スリムメニュー)②Ⓒ
(スリムトップメニュー②Ⓓ
好みのものを選択してください。


OP№ coc6
Cocoonカスタマイズヘッダー

ヘッダーレイアウト
トップメニュー②Ⓐ
(右寄せ)②Ⓑ
 小②Ⓒ
 小(右寄せ)②Ⓓ
好みのものを選択してください。

 


博士
博士

ヘッダー(看板)の文字の位置と全体の大きさがきまれば、文字のデザイン(ロゴ)です。
ペイント等のソフトでロゴを考え、ヘッダーに設定しましょう。

OP№ coc7
Cocoonカスタマイズヘッダー

ヘッダーロゴ1選択クリックしてパソコンからロゴをインストールしてください。


OP№ coc8
Cocoonカスタマイズヘッダー

ヘッダーレイアウトⒶ選択クリックしてください。
ヘッダーロゴインストールしてください。
キャッチフレーズの配置チェックしてください。
変更をまとめて保存クリックしてください。


博士
博士

OGP画像は、ツイッターやFacebook等のSNSでブログのURLをシェアしたときに表示される画像です。
デフォルトの画像をCocoonから入れ替えましょう。

OP№ coc9
Cocoonカスタマイズ
OGP
OGPクイックしてください。
画像のアップロード入れ替えてください。
変更をまとめて保存クリックしてください。


博士
博士

インデックスは、画像や文字の表示内容を設定します。

OP№ coc10
Cocoonカスタマイズ
インデックス

インデックスクリックしてください。
カードタイプ選択クリックしてください。
自動生成抜粋文字数入力してください。※本文の表示文字数です。
投稿関連情報の表示チェックすると本文が表示されます。
変更をまとめて保存クリックしてください。


Cocoonのカスタマイズを行うため、設定を中断して説明例(ゆかり農縁の投稿をしてみます。

⑧投稿ページと固定ページの活用

博士
博士

ワードプレスの投稿には、投稿ページと固定ページがありますので、用途に応じて使い分けしてください。

投稿ページ
  • 頻繁に情報を更新するのに適しています。
  • 情報はカテゴリー別に時系列に表示され、本来のブログ的使い方ができます。
  • 野菜の栽培日誌、生産履歴(使用した資材)など向いています。
固定ページ
  • 更新頻度が低く、s固定している情報に適しています。
  • フロントやメニュー等でリンクしないとたどり着けません
  • 野菜の基本的な栽培情報、プロフィールなどに向いています。
博士
博士


投稿ページでカテゴリーを設定すると、内容が区分整理され情報の抽出などに活用できます。
では、親カテゴリーに「農園の物語」「栽培日誌」、子カテゴリーに「玉ねぎ」「ジャガイモ」等作物別を設定しています。

投稿ページとカテゴリー

OP№ wptc1 WordPress投稿カテゴリー
管理画面ダッシュボード投稿カテゴリークリックしてください。
名前「農園の物語」入力しています。
スラッグ「story」入力しています。
新規カテゴリーを追加クリックしてください。


スラッグとは、カテゴリーがURLに表記される時、使用します。例えば玉ねぎの投稿のURLはhttps://yukari.jp/oinon/2020/11/13/になります。

OP№ wptc2
WordPress投稿カテゴリー追加

続けて追加
名前「玉ねぎ」入力しています。
スラッグ「onion」入力しています。
親カテゴリー農園日誌クリックしてください。
新規カテゴリーを追加クリックしてください。
未分類編集クリックしてください。


博士
博士

未分類は削除できませんので、カッコ悪いから「農園の物語」に修正します。
アイキャッチ画像に表示されるカテゴリー名の背景色を四つ葉ロゴと同調色にします。

OP№ ptc3
WordPress投稿カテゴリー
修正

名前農園の物語に修正入力してください。
スラッグstoryに修正入力してください。
親カテゴリーを設定できます。
カテゴリ色背景色色を選択クリックしてください。
カラーコードを入力してEnterしてください。
文字色で変更が可能です。
更新クリックしてください。


博士
博士

カテゴリーも設定しましたので、新規追加から投稿を行います。

 投稿内容に関連した画像をアイキャッチ画像をとして設定すると目に留まりやくなります。
 アイキャッチ画像は一記事に一つですが、グロックを使えば本文に写真などの画像を設定できます。

OP№ wptp1 
WordPress投稿ページ

投稿新規追加クリックしてください。
⇒Ⓐタイトルを入力します。
⇒Ⓑ文章入力してください。
投稿(公開状態)今すぐクリックすると公開日を修正できます。
公開日に未来を入力すると設定日に公開されます。
カテゴリーチェックしてください。
+ブロックの使用例は後ほど説明します。
⇒②アイキャッチ画像を選択クリックしてください。


OP№ wptp2 
WordPressアイキャッチ

⇒Ⓐファイルアップロードクリックしてください。
該当の画像チェックしてください。
⇒③開くクリックしてください。
該当ファイルチェックしてください。
⇒④アイキャッチ画像を設定クリックしてください。
事前にパソコンの画像ファイルをメディアライブラリーにアップロードしておき、メディアライブラリーから選択もできます。


OP№ wptp3
WordPress投稿公開

■Ⓐアイキャッチ画像が表示されます。
公開クリックしてください。
公開してもよろしいか?公開クリックしてください。
公開しました✖クリックしてください。
投稿を削除する場合は
投稿④⇒編集ゴミ箱へ移動クリックしてください。


投稿に画像や模様をブロックで表示する方法を説明します。

OP№ wptp4
WordPress投稿編集

投稿①⇒編集クリックしてください。
⇒Ⓐブロックを確認してください。
③㋐クリックしてください。
※主なブロックが表示されますが、全てのブロックを表示するにはすべて表示又はをクリックしてください。
画像と文字を表示する場合
メディアとテキスト(ブロック)クリックしてください。


OP№ wptp5
WordPress投稿ブロック

メディアエリアアップロードクリックしてください。
該当ファイルチェックしてください。
開く(O)クリックしてください。
画像や文字の位置変更
⇒⑧上揃えクリックしてください。コンテンツ(文章)が上に移動します。


OP№ wptp6
WordPress投稿ブロック

フォントサイズクリックしてください。入力した文字サイズが変更されます。
コンテンツに文章を入力しないでEnterクリックして改行してください。
クリックしてください。ブロックの追加ができます。
白抜きボックスクリックしてください。


OP№ wptp7
WordPress投稿ブロック

色設定ボーダー色(枠)・背景色・文字色チェックしてください。
更新クリックしてください。


投稿をしましたので、サイトのフロントページを確認をします。

固定ページとメニュー

博士
博士

固定ページも投稿ページと同じでブロックを使用します。
固定ページは積み重ねて最新の情報には更新しません。まさに固定です。
固定ページのアドレスは、カテゴリーを使わないで直接設定します。

OP№ wpkp1
WordPress投稿ブロック

管理画面ダッシュボード固定ページ新規追加クリックしてください。
タイトルを追加入力してください。
⇒Ⓑ文章を入力、またはブロックを選択します。
⇒Ⓒ・Ⓒブロックを追加できます。
⇒Ⓓ固定ページとブロックの項目を切り替えできます。
パーマリンククリックしてください。
URLスラッグ固定ページの名称を英語で入力してください。
アイキャッチ画像を設定できます。
公開クリックしてください。


博士
博士

固定ページは、メニューによって案内されます。
メニューはヘッダーやフッター、さらにサイドバーに設定できます。
ここではヘッダーメニューやフッターメニュー操作方法を説明します。

OP№ wpkm1
WordPressメニュー

管理画面ダッシュボード外観メニュークリックしてください。


OP№ wpkm2
WordPressヘッダーメニュー

メニュー名「ヘッダーメニュー」入力してください。
メニュー設定ヘッダーメニューをチェックしてください。
メニューを作成クリックしてください。


博士
博士

メニューの表示項目名と表示順を変更できます。
固定ページのタイトルからメニューにするものを選択してください。

OP№ wpkm3
WordPress
メニュー表示順
メニュー項目追加すべて表示クリックしてください。
メニューにする固定ページチェックしてください。
メニューに追加クリックしてください。が表示されます。
⇒Ⓕ項目を引っ張って順序を変更できます。
項目を右に移動することで子メニューになります。



博士
博士

サイトのデザインにあったメニュー項目に省略して修正します。

OP№ wpkm4
WordPressメニュー
ラベル修正
ナビゲーションラベル修正入力してください。
削除クリックしてくださいメニューが削除されます。


外部サイトのリンクをメニューに設定できます。

OP№ wpkm5
WordPressメニュー
カスタムリンク
カスタムリンク▼クリックしてください
リンク先のアドレスや項目入力してください。
メニューを保存クリックしてください。


OP№ wpkm6
WordPress
フッターメニュー

新しいメニューを作成しましょう。クリックしてください。


OP№ wpkm7
WordPress
フッターメニュー

メニュー構造メニュー名ヘッダーメニュー入力してください。
メニュー設定ヘッダーメニューにチェックしてください。
メニューを作成クリックしてください。
以降はヘッダーメニューと同様の操作をしてください。


⑨Cocoonのカスタマイズ(後編)

博士
博士

投稿をしましたので、Cocoonのカスタマイズを続けます。

博士
博士

投稿は、投稿ページの関連記事やパンくずリストなどの表示設定ができます。

パンくずリストとは、ご覧いただいているWebサイトの階層構造を表示しています。
 言葉の由来は、童話「ヘンゼルとグレーテル」の話の中に主人公の兄弟が迷子にならないようにパンくずを置いていった事が語源になっています。

OP№ coc11
Cocoonカスタマイズ
投稿
Cocoon設定⇒投稿クリックしてください
関連記事設定等を入力してください。
 表示タイプ
 表示数
 枠線の表示
 最大自動生成抜粋文字数
 投稿関連情報の表示
コメント設定チェックを外してください。
パンくずリスト設定チェックしてください。
変更をまとめて保存クリックしてください。


博士
博士

固定ページでは、パンくずリストなどを表示することができます。

OP№ coc12
Cocoonカスタマイズ
固定
Cocoon設定固定ページクリックしてください。
コメント設定チェックを外してください。
パンくずリスト設定表示位置を選択チェックしてください。
変更をまとめて保存クリックしてください。


博士
博士

本文は、外部・内部リンクの開き方や日付等を設定できます。
外部リンクは新しく開き、内部リンクは継続にしています。

OP№ coc13
Cocoonカスタマイズ
本文
Cocoon設定本文クリックしてください。
外部リンク設定Ⓐ⇒新しいタブで開く選択クリックしてください。
内部リンク設定変更しない選択してください。
投稿情報表示設定投稿関連情報更新日のチェックを外します。
変更をまとめて保存クリックしてください。


博士
博士

次は目次の設定です。
目次は、最初の見出しの前に設定した状態で表示されます。

OP№ coc14
Cocoonカスタマイズ
目次
Cocoon設定目次クリックしてください。
目次の表示チェックしてください。
目次切り替えチェックしてください。
変更をまとめて保存クリックしてください。


博士
博士

SNSシェアは、SNSボタンの種類や位置等を設定できます。
ボタンは本文の次に表示しました。

OP№ coc15
Cocoonカスタマイズ
SNSシェア

Cocoon設定SNSシェアクリックしてください。
トップシュアボタンの表示チェックを外してください。
トップシュアボタンの表示チェックしてください。
お好みのSNSをチェックしてください。
カラム数選択クリックしてください。
変更をまとめて保存クリックしてください。


博士
博士

画像は、アイキャッチ画像をページの始めに表示するか、設定できます。

OP№ coc16
Cocoonカスタマイズ
画像

Cocoon設定画像クリックしてください。
アイキャッチの表示チェックしてください。
変更をまとめて保存クリックしてください。


博士
博士

通知は、ヘッダー下にメッセージを表示できます。

OP№ coc17
Cocoonカスタマイズ
画像

Cocoon設定画像通知クリックしてください。
通知の表示チェックしてください。
通知メッセージ入力してください。
変更をまとめて保存クリックしてください。


博士
博士

おすすめカードは、ヘッダー下にカード(アイキャッチ画像)
メニューを表示できます。
メニュー設定でおすすめカードのメニューを設定してください。
カードは偶数で表示バランス的に4個がきれいです。

OP№ coc18
Cocoonカスタマイズ
おすすめカード

メニュー設定
管理画面ダッシュボード外観メニュークリックしてください。
メニュー名「おすすめカード」入力してください。
新しいメニューを作成しましょうクリックしてください
メニューを作成クリックしてください。


OP№ coc19
Cocoonカスタマイズ
おすすめカード

メニュー設定

固定ページ選択チャックしてください。
表示順位クリック引っ張ってください。
おすすめカード設定
Cocoon設定おすすめカードクリックしてください。


OP№ coc20
Cocoonカスタマイズ
おすすめカード

おすすめカードの表示選択クリックしてください。
メニュー選択選択クリックしてください。
変更をまとめて保存クリックしてください。


カルーセルは、アイキャッチ画像をヘッダー下にスライド表示します。

OP№ coc21
Cocoonカスタマイズ
カルーセル
Cocoon設定カルーセルクリックしてください。
カルーセルの表示選択クリックしてください。
表示内容チェック・選択クリックしてください。
オートプレイチェックしてください。スライドします。
オートプレイインターバル選択クリックしてください。スライドの間隔が設定できます。
変更をまとめて保存クリックしてください。


博士
博士

APIを有効化して高速化しましょう。

OP№ coc22
Cocoonカスタマイズ
API

Cocoon設定APIクリックしてください。
APIの有効化チェックしてください。
変更をまとめて保存クリックしてください。


⑩Cocoonの知っていると便利な裏技3選(カスタマイズ上級編)

博士
博士

Cocoonのカスタマイズは完成しましたか。
ここからは上級編ですので,必要な方はご利用ください。

 Cocoonのカスタマイズ上級編は、ショートコードやCSSの追加・修正を行います。これは直接プログラムを変更することですので、誤ると突然、画面が真っ白になって入力できなくなる場合があります。
 操作するまでに、必ずバックアップすることを勧めます。
 

博士
博士

 私も、真っ白になって、バックアップをしていませんでした。
 普及できなったのを機会にサーバーのレンタル先をWordPresの得意な会社に変更しましたが、バックアップは定期的に行うことが必要です。

 それでは、裏技によるカスタマイズをご覧ください。

簡単操作でサイトマップを設置する方法

博士
博士

ショートコード[sitemap]を入力するだけで、サイトマップが作成できます。

OP№ wpsm1
Cocoon
サイトマップ設置

固定ページ新規追加クリックしてください。


OP№ wpsm2
Cocoon
サイトマップ
固定ページ

タイトルを追加⇒Ⓐサイトマップ入力してください。
クリックしてください。


OP№ wpsm3
Cocoon
サイトマップ
ショートコード①

⇒Ⓑ下にスライドしてください。
ショートコードクリックしてください。


OP№ wpsm4
Cocoon
サイトマップショートコード

ショートコード
[sitemap] 入力してください。
固定ページクリックしてください。


OP№ wpsm5
Cocoon
サイトマップURL

⇒⑤下にスライドしてください。
URLスラッグsitemap入力してください。

メニューと固定ページの順序を同じにするための設定をします。

OP№ wpsm6
Cocoonサイトマップ
固定ページ順序

⇒⑥さらに下にスライドしてください。
順序入力してください。


OP№ wpsm7
Cocoonサイトマップ
ページ公開①

目次を表示しないクリックしてください。
公開クリックしてください。


OP№ wpsm8
Cocoonサイトマップ
ページ公開

公開クリックしてください。


OP№ wpsm9
Cocoonサイトマップ
ページ
完成

クリックしてください。


固定ページの日付を非表示にする方法

博士
博士

指定した固定ページのテーマの次に表示される日付を非表示にするこができる操作を説明します。

OP№ wpd1
ワードプレス固定ページ一覧

固定ページ固定ページ一覧クリックしてください。


OP№ wpd2
ワードプレス
日付表示ID

⇒ⒶID確認してください。


博士
博士

日付を非常にする固定ページのIDをメモってください。

OP№ wpd3
ワードプレス
日付表示CSS追加①

管理画面外観テーマエディタークリックしてください。


OP№ wpd4
ワードプレス
日付表示CSS追加②

CSS貼り付けてください。

css
/*---------------------------------
複数の固定ページの日付を非表示にする、おまじない
--------------------------------*/
.post-●● .date-tags,
.post-●●.date-tags,
.post-●● .date-tags {
  display: none;

●●はIDです。


サイトの最初に表示されるアイキャッチ画像を非表示にする方法

投稿ページにアイキャッチ画像を設定して、最新の記事に画像を表示します。
非表示は、本文の最初にアイキャッチ画像が表示されないようにします。

OP№ wpi1
アイキャッチ画像 非表示
⇒カスタムCSSⒶCSS張り付けてください。

.eye-catch {
display: none;
}


博士
博士

これで、WordPresとテーマCocoonの主な設定は完了です。
ブログを使って、あなたも商品情報等を発信してください。

タイトルとURLをコピーしました