カスタマイズ(店の内装)


《カスタマイズとは・・・看板や色も大切だけど、宴会が入ったらパッとパーティションを外せて、親子連れがくればパッと分煙できる、そんなお店がいいな……。》

その4『カスタマイズ(店の内装)』


  • ダッシュボード・・・『親方の部屋』
  • 外観・・・『工具箱』
  • 情報・記事・・・『料理』
  • 商用サイト・・・『飲食店』

まずはサイトの見た目(外観)を作っていきましょう!


 『外観』⇒『カスタマイズ』 の順でクリックすると、こんな画面が出てくると思います。

外観の編集画面

  カスタマイズ(上図、コレ。1)の中にはさらに、8つの項目があります。 


サイト基本情報

ヘッダーメディア

メニュー

ウィジェット

ホームページ設定

テーマ設定

追加css


 では細かく見ていきましょう。


1.『サイトの基本情報』


サイトの基本情報とは?

サイトの一番大きな情報を伝える項目ですね。

飲食店に例えると……、

大看板。(文字)


 項目は4つ。

ロゴ』・・・ロゴマークが入ります

『サイトのタイトル』・・・一番大きな文字が入ります。

『キャッチフレーズ』・・・『サイトのタイトル』 の下に小さな文字として入ります。

『サイトアイコン』・・・ブラウザのタブや携帯に表示される小さな画面が入ります。



2.『色』


色とは?

イメージカラーを塗ります。

飲食店に例えると……、

壁や看板の色。


『ライト』『ダーク』 カスタム』 の3パターン。

 自分色にこだわるなら

『カスタム』を選択します。

 『カスタム』を選択すると細いパレットが現れます。ここで選んだ色は、トップメニューの文字の色に反映されます。(画像内の緑の部分)

 『ヘッダーテキストの色』の『色の選択』をクリックすると、四角いパレットが出ます。ここで選んだ色は1.『サイトの基本情報』で指定した、大看板の文字の色に反映されます。(画像内の赤の部分)


まあ色はいろいろ……。好きな色を当てればいいと思います。

3.『ヘッダーメディア』


ヘッダーメディアとは?

 ヘッダー画面に画像(動画)を設定します。

飲食店に例えると……、

大看板。(絵)

項目は3つ。


上から、

ヘッダー動画』・・・大看板に『動画』を指定します。

ヘッダー画像』・・・大看板に『絵』を指定します。

現在のヘッダー』・・・今現在、表示されている絵を表示してます。


ここで面白いのがその下の……、

『アップロード済の画像をランダム表示』

ですね。

何が面白いかって?

  ここに複数枚の絵を指定すると、それを『ランダムに表示』してくれるのです。

     たとえば、

私はここに、『ネコがいる絵』と、『ネコがいない絵』を指定してるんです。

窓辺に注目してください。

ほらね!アクセスするたびに、ネコがいたり、いなかったりするんです。

楽しいでしょ?

4.『メニュー』


メニューとは?

これはそのままメニューですね。

飲食店に例えると……、

お品書き。(グランドメニュー)

項目は2つ。

『メニュー』をクリックすると、『トップメニュー』と『ソーシャルリンクメニュー』2つのメニューが現れます。

トップメニュー

 トップメニューは上の画像の赤で表示している部分です。


『トップメニュー』・・・訪れた人がまず目にするのがこのメニュー。サイト内の情報が一堂に見渡せるようになってます。


『トップメニュー』をクリックするとこんな編集画面が出ます。

トップメニュー編集画面

 ご覧の様に(上図 コレ。)メニューの項目は『入れ子状態』に設定できます。

 飲食店に例えると……、

『和食』を選ぶと、その中で『肉・魚』を選べ、さらになら『豚・鶏・牛』なら『白身・赤身』と細かく選べるようになってます。

やり方は簡単、メニューから入れ子にしたい項目をドラッグ&ドロップするだけ。


『ソーシャルサイトメニュー』・・・facebooktwitterなどのSNSや、外部サイトリンクします

飲食店に例えると……、

系列店一覧、とか、クーポン券が使用できるお店の紹介。


『ソーシャルリンクメニュー』をクリックすると、こんな編集画面が出ます。

ソーシャルリンクメニュー編集画面

ソーシャルサイトメニューは画像の緑で示した部分です。

画面の一番下まで移動すると、すでにFacebookとInstagramのアイコンがありますね。(コレ。)

項目 を増やしたい時は『項目を追加』を押して……、


開いたメニューの項目から、随意のモノを選びます。(コレ2。)

TwitterInstagram『カスタムリンク』として既に登録されているので、クリックしてアドレス欄に自分の随意のアドレスを入れればリンクが完成します。

   『カスタムリンク』とは?

『ソーシャルリンクメニュー』では『カスタムリンク』『固定ページ』『投稿』『カテゴリー』『タグ』『フォーマット』など、必要に応じて設定できますが、あまりゴチャゴチャしない様に私は、トップメニューには内部のリンクソーシャルリンクメニューには外部のリンクを張るようにしています。


5.『ウィジェット』


ウィジェットとは?

常に表示される情報案内します。

飲食店に例えると……、

『時計』『定休日のお知らせ』『非常口』『お手洗い』『お会計』などの案内。

項目は3つ。


 『ウィジェット』をクリックするとこんな画面が出ます。

ウィジェット編集画面

『ブログサイドバー』『フッダー1』『フッダー2』と縦に3つ並んでいます。(コレ。)

まず初めに、『ブログサイドバー』をクリックするとこんな画面が出ます。

ブログサイドバー設定画面

 私はここに『自己紹介』『カレンダー』と『カテゴリー検索』を追加してみました。項目の追加は『+』の枠をクリックして、好きな項目を選ぶだけ。『自己紹介』という項目はないので、自分で新規画像に、見出しや段落を使って入力してください。


↓サイトにはこんな感じで反映されます。↓


サイト画面

 ここでの設定は、『投稿ページ』のどのページでも常に表示される事になります。

つまり、

お客さんが店のどの場所にいても常に目に留まる情報

という訳です。


『フッダー1』『フッダー2』

 常にサイトの表示されている『ブログサイドバー』と同じように常に表示されているにもかかわらず、サイトの一番下、つまり足元、『足⇒フット』に表示される『フッダー1』『フッダー2』はあまりインパクトがないようです。しかし大企業のサイトは大概ここに会社概要や、最新記事や、サイトマップ、FAQプライバシーポリシーなどを大切な情報を表示しているものです。


飲食店に例えると、

 入り口がどんなに綺麗でも、裏口に回れは残飯や段ボールの空き箱が溢れてて、野良犬が鶏ガラを咥えて唸っているような店はあまり印象がよくありません。裏口もちゃんと綺麗にした方がお店の印象が良くなります。

 『フッダー1』と『フッダー2』に設定すれば、どんな感じにサイト画面に反映されるのかだけ、私のアイコンでお知らせしておきます。


『フッダー1』『フッダー2』表示画面

 


6.『ホームページ設定』


ホームページ設定とは?

サイトのコンセプトの基本的な分別を設定します。

飲食店に例えると、

『店内・持ち帰り』など、それぞれのニーズに合わせた受け渡し窓口を区分。


『ホームページ設定』をクリックするとこんな画面が出ます。



 これはこの章の冒頭に書いた、

『宴会が入ったらパッとパーティションが外せて、子供連れが来たら、サッと分煙できる』

 という例えに通じる部分です。まずは、左の『ホームページ表示』の下の『最新の投稿』『固定ページ』の2つのボタンを見てください。(上図 ココ。)

これは、

 この選択一つで、店内の様子をガラリと、ワンタッチで変えてしまえる凄い機能でもあります。

飲食店に例えると、

「あ!団体さん!」 となると大広間に、「あ!バギーママ軍団!」となると、『オムツ替えルーム』と店内のレイアウトを変幻自在にメタモルフォーゼ《変身》できる革新機能。


『最新の投稿』か『固定ページ』か。


『最新の投稿』を選択すると、トップ画面には常に最新の投稿が最優先で表示されるようになります。これは、きっとseo対策にもいいと思います。動きがあって情報がジャンジャン更新されるサイトは、クローラさんも嫌いじゃないはず。

『最新の投稿』の編集画面

 しかし反面、ちょっとした、ほんのどうでもいいような情報でも、アップするたびにトップ画面に表示されてしまうというわずらわしさもあります。


飲食店に例えると

先週の『汁なし担々麵』美味かったのに、今週のメニューにもう載ってないんだよなぁ。仕方がない、ちょっと違うんだけど、今週の『ゴマみそ冷やし中華』で我慢しとくか……。

となりかねません。

その点、


『固定ページ』を選択すると、トップページには常に同じ画面が表示されてサイトの見た目を保つことが出来、看板的効果があり、訪れた人の記憶には残りやすいです。

『固定ページ』の編集画面

 しかし反面、『最新投稿』に比べてサイトの動きは鈍く静的になります。

飲食店に例えると

いやーいつ食っても美味いなぁ。でもちょっとバリエーションがないんだよなぁ……。あまり変わらないと飽きちゃうんだよ。ほら、客だって知った顔ばっかりになってきたじゃん。

となりかねません。

どっちが正解かは、あなた次第。


『ホームページ』と『投稿ページ』にはそれぞれ2つの固定ページを設定することが出来ます。『ホームページ』を選択すると、そこで選んだ固定ページが常にトップ画面に表示され、『投稿ページ』で選択した固定ページには、投稿した記事が新しい順に表示されます。


7.『テーマ設定』


テーマ設定とは?

 固定ページのレイアウトを分割します。

飲食店に例えると、

 客席を『喫煙・禁煙』トイレを『男子トイレ・女子トイレ』など、完全に分割する形で間仕切り、客の動きをスムーズに制御するための設定。


テーマ設定の画面

 テーマ設定の画面には合計4つののセクションがあります。ここに『固定ページ』を設定する事で連続して表示される設定ですね。最近はスマホでのアクセスが9割近い状況にあって、『縦スク』(縦スクロール)設定は必須なのかもしれません。(実際、携帯漫画も『縦スク』のモノが増えてますしね。)


そしてその上の小さなボタン。(上図、コレ。)


『1カラム』『2カラム』

これは、

画面を1枚で使うか、2分割して使うか、

という設定です。

『カラム』とは画面の分割の事を言います。『2カラム』なら2分割。『3カラム』なら3分割。ここで『2カラム』を選択すると、左側には、『ページのタイトル』が表示され、ページの内容は右側に表示されるようになります。


1カラム設定

2カラム設定

飲食店に例えると……、

 突然、2組の団体の予約が入った!1組は『絶対喫煙のサラリーマン集団』、もう1組は『絶対禁煙の子連れママ軍団』。 これは完全に分けなければいけない。トイレも、いっそ入口も分けてしまおう!そこで入口をパーティションで区切って(2カラム) 一方に、『サラリーマン様』もう一方に『ママさん様』案内(ページタイトル)書いて、メニューもサラリーマンの方は『飲み放題付き』、ママさんの方は『ケーキ食べ放題付き』。しかしそれ以外のメニュー(四つのセクション)は同じでお願いします!

と言った感じでしょうか。これはあくまでも使用方法、使用目的によって都合がいい方を選ぶためなので、何が何でも両方使いこなす、なんて変な力を入れなくても、あ、こう分けたら、面白いかも!と何か閃いた時に使えば全然かまいませんよ。


8.『追加CSS』


追加CSSとは?

 お店(サイト)の繊細な部分に変更を加える項目です。

飲食店に例えると、

 壁にちょっとだけ穴をあけてドリンク受け渡し窓』を作ってみました。

のような感じ……。


CSSとは『カスケーディング スタイル シート』の略で、ザックリ言うとサイトの装飾など、HTML言語では賄いきれない細かい設定をするための機能です。


 『あ、テーブルのこんなところに、傘を掛ける窪みがある!』

って感じの

より細やかな顧客対応、とでも言いますか……。


追加CSS編集画面

 しかしご覧の通り、『追加CSS』の編集画面は、今までで見てきたどの編集画面よりも面倒くさそうな、シリアスな顔つきをしておりますが……、

 実際そうなんです。

 本来、親テーマのCSSファイルに直接データを追加したり書き換えたりして新しい仕様に作り替えるのですが、これは下手をすると元に戻せなくなる危険をはらんでいるいるんです。

 初めに例えた、『壁にちょっとだけ穴を開けて、ドリンクの受け渡し窓を作ってみました。』にしても、あまり不用意に壁に穴をあけてしまうと強度が落ちて、店が傾いててしまう危険性も、まあ、無きにしもあらず……。

 ですから、別に必要がないという人は触らないのが無難です……。


追加CSSのやり方。

追加CSSの編集画面。

 まずはどのページに、どんな編集を加えたいか、そこを絞らなければいけません。それには編集したいページごとの『ID』をまず初めに記入する必要があります。

『ID』!

 でたでた!『ID』。こういうの出てくるとやめたくなる。確かに。

でもやり方さえわかれば大したことはありません。

ページごとの『ID』の調べ方。


 ページごとの『ID』を調べるにはまず、ダッシュボードから、投稿『投稿一覧』固定ページ『固定ページ一覧』を開いて、変更を施したいページにカーソルを持っていきます。

すると、画面の左下に小さな窓が開き、そこに『https:/〇〇〇(サイトのアドレス)/wp-admin/post.php?post=○○○○(数字)』と表示が出ると思います。(上図 ココ。)

この、

post=あとの○○○○(数字)が、そのページの『ID』になります。

試しに私のページの『CATS ROAM THE WORLD』のフォントを変えてみます。


追加CSS編集画面

この画面の左側に、CSSのコードを書き込むわけです。今のフォントはゴシック体。それを、明朝体に変えてみます。


わかりますか? この『追加CSS』のいいところは、書き加えた瞬間にその変化が確認できるところです。ここで『追加CSS』に書き込んだコードは、


.post-●●●●(ページID)

{font-family:serif;

}

これだけです。意味は、

『.post-●●●●というページの、文字の種類(font-family)を、明朝体(serif)に変更する』

というモノです。


CSSに関しては

CSSとは?

で説明します。



 最後に『プチ耳寄り情報』ですが……、

 画面の中にある、青い丸い鉛筆のマークをクリックしてもそれぞれの編集画面に入れます。

子テーマの作り方。


《子テーマ・・・お父さんにそっくりなのに、とっても美人な女の子、みたいな……。》


子テーマとは?

同じテーマを長く使用していると、我々には直接関係がなくても、構造上、或いは防犯上の様々な機能を維持し充実させるためのアップデートが欠かせなくなってきます。しかしその際に、これまで苦労してカスタマイズした部分まで一新されてしまう事があるのです。

『え!あのテーブル、まだ使ってたんですか?古くなってたから捨てちゃいましたよ!』

なんて事になっても後の祭り。思い出のテーブルは戻りません。そんな事故を防ぐためには、今の店の状態のデータ(設計図や写真)を、別の場所に保管して、復元できるようにしておく必要があるんですね。その『設計図・写真』と、それを格納する引き出しの事を『子テーマ』というのです。


 さて『子テーマ』を作るにはまず、2つのファイルと、それを格納する1つのフォルダを作る必要があります。

1.テンプレートファイル(functions.php)

2.スタイルシート(style.css)


★頭がクラクラする前に宣言しときますが……★

『ファイル』なんてモノは一律に、コンピューターのために書かれたモノであって、我々が読める必要は少しもないんです。だから……、

丸写ししましょう!

 文章作成アプリを開いて、以下の文字列をそのままコピー&ペーストしましょう。


《functions.php》


<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

《style.css》


/*
Theme Name:★-child
Template:○
Version:●
*/

*style.css はちょこっと、書き換える必要があります*


この、『★』『○』『●』のところに、

★・・・フォルダの名前

○・・・使用している親テーマの名前

●・・・使用してる親テーマのバージョン

を書き入れてください。


あ!フォルダーまだ作ってなかった!

急遽、作りましょう!

 フォルダー作りは簡単。パソコンの画面のどこでも、空きスペース(壁紙のところ)右クリックしてください。『新規作成(x)』にカーソルを持ってくと、『フォルダ』って出ますよね。そこを左クリックすると、画面上に『新しいフォルダ』が作成されます。

 フォルダの名前は、一般的には、『(親テーマ)-(child)』とするらしいです。

私なら、『twentyseventeen-child』 となりますね。

でも私はなぜか『hiza-tre.child』にしてますね。何でか知らんけど……。

今回は、

★フォルダの名前・・・twentyseventeen-child

○親テーマの名前・・・twentyseventeen

●親テーマのバージョン・・・5.4

とします。テーマのバージョンは、『設定』→『テーマエディター』で確認する事が出来ます。


 ウィンドウズについている『メモ帳』だと文字化けする場合があるという情報がありましたので、もしそれ以外の文章作成ソフトをお持ちなら、そちらでコピ&ペーストした方がいいかもしれません。

 《文章作成ソフト(無料)》


have a break

『ファとフォの違いを5秒で解説!』

ファイルは書類、フォルダは入れ物!

《閑話休題


 さあ、『functions.php』『style.css』の2つのファイルが出来ました。名前はそのまんまそれぞれ『functions.php』『style.css』がわかり易くていいと思います。さて、じゃあこの2つのファイルを入れたフォルダ『twentyseventeen-child』を、いったいどうすれば、『子テーマ』として立派に就役をさせることが出来るのでしょうか。

まずは『twentyseventeen-child』フォルダを圧縮します。圧縮?

圧縮する方法はこれもまた簡単。『twentyseventeen-child』フォルダを右クリックすると『送る』という項目があります。そこにカーソルを持っていくとさらに『圧縮(zip形式)フォルダ』というのがありますからそこを左クリックしてください。すると、ファイルは見事、圧縮されるわけです。何でか知らんけど……。

そしてダッシュボードから『外観』『テーマ』『新規テーマを追加』をクリックすると……、

さらに、『テーマのアップロード』をクリックすると……、

さらにさらに『ファイルを選択』で、さっきの圧縮した『twentyseventeen-child』を選択すると……

そして最後に、『ファイルを選択』『twentyseventeen-child』フォルダの圧縮された方(後ろにzipと入っている方)のファイルを選択して 『今すぐインストール』をクリックします。

これでミッション終了!『テーマ』に戻ると、ちゃんと『twentyseventeen-child』のフォルダが、子テーマとして(登録)されているのがわかりますね。最後に画面赤矢印の『有効化』をクリックします。

これで『twentyseventeen-child』フォルダは見事、『子テーマ』として登録されました!

あっけないでしょ?

これなら誰にでもわかる。専門用語をすべて、飲食店に例えた、超初心者向け、ネットショップ開設方法。


はじめに。

これは大金を稼ぐノウハウではありません。商売なんて当たるも八卦。まずはその足掛かりが欲しい!!でも専門用語の意味がさっぱり分からん……、という方のために、元調理師の私がネットの世界すべて飲食店に例えてわかりやすく説明します

もくじ



その1『レンタルサーバ(場所の確保)』

《場所の確保とは・・・まず地面を借りて、そこに建物を建てて……。》


  • 記事・・・『料理』
  • サイト・・・『お店』
  • サーバー・・・『土地』
  • サーバーID・・・『地番』
  • レンタルサーバー会社・・・『不動産屋さん』
  • アカウント・・・『土地の権利書』
  • パスワード・・・『権利書を入れた金庫の鍵』

  情報を提供するにはまず、そのスペースを持たなければなりませんね。

これを飲食店に例えると……。

料理を提供するにはまず、店を確保しなければなりません。

それにはまず、土地を借りて、その土地の上にお店を立てなければならない。さて、どの場所に、どれぐらいの広さの店を構えればいいのか……。


  とにかくまずは『土地』を借りましょう! ネットでは土地の事を『サーバー』といいます。この『土地(サーバー)』 を、『借りる(レンタルする)』事を、

 レンタルサーバーと言いい、それを仲介する会社の事を、レンタルサーバー会社と言います。

 例えるなら不動産屋さんですね。

 サーバーには『サーバーID』という番号・記号が付いてます。これは『土地』で言うところの『地番』と同じですね。違うところは、『サーバーID』には自分で名前を付けてもいい、というところです。ただし、メアド同様、同じ番号が二つあることは許されませんので、世界に一つだけの番号を考える必要がありますね。この名前は一度決めたら変更は出来ません。是非、カッコいい奴を考えてください。

 さて、どの不動産屋で借りるか……。不動産屋(レンタルサーバー会社)もいっぱいありますからね。

出来るだけお安くて、駅チカで、地の利が良くて、日当たりのいい路面店で、治安が良くて、高校や大学が近くにあって、いつもにぎわってて、多くの外国人訪れて、流行の発信源で、テレビや雑誌の取材が引きも切らず……。


 是非、いろいろな条件を加味しながら、どこか一つ、選んでみてください。 

 私はここで、店を持つ!

↓↓↓↓

お勧めレンタルサーバー10選

因みに私はエックスサーバーを使っています。なぜかというと、友達が使っていたからです。これ重要ですよね。「あぁ、この不動産屋いいよ。この場所、問題ないよ」って言われているようなもんですから。

 ですからここからはエックスサーバーを例に説明、例えさせていただきます。


あなたはサーバーを借りるため、エックスサーバー社のビルに赴きます。

すみませ~ん。とドアを開けたら……

「あ、毎度!おおきに!」

という声が。

(エックスサーバーの本社は大阪)


《アカウントの取得》


 まずはアカウントを取る作業に入るわけですね。

 出た出た!

何かと目にするこのアカウント』とは? いったいナニモノ? 

『アカウント』とは土地を借りる際の『権利書』のようなモノだとお考え下さい。『アカウント』を取得する事で、貴方がこの土地の権利者である事が確約されるのです。


では『契約書』(申し込みフォーム)に書き込んでいきましょう!

↓記入画面はこんな感じ。↓


『初めてご利用のお客様』をクリックします。すると必要な項目を記入する画面が……。

『サーバID 』これが地番です。画像中央の★6つのところには、

あらかじめ会社が決めた6ケタの数字が入ってます。その前の『XS』は

『X-SERVER』の略でしょう。知らんけど……。

『自分で決める』と言う選択もありますね。是非、カッコいいのを。

そしてその下、プランというところに、3つのプランがありますね。

『×10 ¥990 300GB』

『×20 ¥1980 400GB』

『×30 ¥3960 500GB』

カレーの辛さじゃありません。いわばこれが、店の『広さ』です。

どれぐらいの広さの店にするか……。

大きな物件はそれなりにお値段も張る、と言うところです。

私は一番小さい、『×10』で借りています。画像や動画をたくさんアップするなら別ですが、

 普通の写真と文章なら、300GBで充分な気がします。個人経営の飲食店なら、お客さんの顔が見える程度の広さがちょうどいい。

細かい料金設定に関しては、こちら をご覧ください。

            *

 そして下にスクロールすると、さらにデータを入れる欄が登場します。

まずは、

『メールアドレス』

『パスワード』

『登録区分』

『メールアドレス』は、お使いのパソコンでも携帯でも、どちらでも。連絡先ですね。

『パスワード』これは『権利書』を入れた金庫の鍵の事です。『開けゴマ!』的な呪文にも例えられます。だから間違えると、開きません……。

『登録区分』については、『個人』ですね。続いて、

『名前』

『フリガナ』

『郵便番号』

『住所(都道府県など)』

『住所(細かい番地など)』

『住所(建物の名前など)』

『電話番号』などの個人情報の記入が続きます。

何だか、ちょっと、気持ち悪いですね……。大丈夫かな、って思います。

でもこの情報は公開されませんので正直に書きましょう。


そして確認ボタンを押して、書き間違い、エラーがなければ完了します。

登録が完了した内容を知らせるメールが登録したメールアドレスに届くはずです。

このメールには重要な情報がたくさん入ってますから、必ず保存してください。

さあ、これでようやく土地だけは借りる事が出来ました。まだ更地ですが……。

(この登録が実行されるまで丸一日以上かかる場合もありますので、登録してすぐ見られないからと言って慌てないようにしてください。代書屋さんも、忙しいんだなぁ、ぐらいに思っておいてください。)

 あとは家賃の支払い方法ですが、レンタルサーバー会社のホームページ、この場合はxserverのサイトのホーム画面から訪れる事が出来ます。

 ホーム画面の、料金お支払方法 と進み、そこにある支払方法から随意のモノを選んでください。 これを確定すると引き落としが開始されます。さあ!店が動き始めました! まだ更地ですが……。


その2『ドメイン取得(店の確保)』

《お店の確保とは・・・いよいよ新築店舗!別に、居抜きでも、よかったんだけどね……。》


  • WordPress・・・『工務店』
  • ドメイン・・・『建物の名前、または、店の屋号』
  • 有料サイト・・・『戸建て店舗』
  • 無料サイト・・・『フリーマーケットの露店』
  • Google AdSense・・・『居酒屋のお通し』

  土地(サーバー)を借りれば次に、店(サイト)を作ります。

 店を作るったって、あなたはきっと大工じゃないでしょ? 今時流行りのD.I.Y.でもいいですが、カウンターがグラグラしている様じゃお客はたまりません。ここは素直に、工務店に依頼しましょう。

「うわぁ、またお金が掛かるのか……」とあなたはちょっとブルーになる。

 とその前に……。

泥棒を捕らえて縄をなう。

 いざ店が完成した時、看板屋さんに「カンバンになんて書きます?」なんて言われてハッと気づく。あ、全然、決めてなかった……。

 そうならないために、まずは『ドメイン』の取得します。

 ドメイン?? また変なのが出てきた! 

何それ? サーバーIDとは、何が違うの?


  サーバーIDは、土地の名前(地番)。ドメイン(domain)は、その土地にほどなく立つであろう建物の名前。店の『屋号』にも例えられます。

 ドメインとは、

ここに私の店がここにありますよー!

と、

世界中に店の存在を知らせるための大切な目印なのです。店を訪れる人はみんなこのドメインを目印に訪れるわけですからね。

  よく目にする『~.com』とか『~.jp』の『~』がそれです。

 でもいくら素敵な屋号だからと言って、勝手に名乗ってはいけないのです。それはラーメン屋の『大勝軒』にしろ、蕎麦屋の『長寿庵』にしろ同じで、暖簾を分けていただくにはそれ相応の手続きや許可、まあ場合によっては、お足(money)が必要になってくるケースもあるでしょう。

「なんだよ、またお金か……」いえ、いいんですよ、タダでも。土地(サーバー)を契約した時、レンタルサーバー会社からもらったあの、味気ないアルファベットと数列……。

あれをそのまま使ってもいいんですが……、

『お食事処、東京都狭山市新狭山9-21-4新狭山ハイツ207号』なんて名前の店だときっと、なかなか覚えてもらえません。

それに……、

もし、店を引っ越す事になったらどうします??


サーバも住所と同様、いろんな事情で引っ越す事があります。

住所が変わってるのに、

『お食事処、東京都狭山市新狭山・・・・・』ではおかしくないですか?

もし『大勝軒』とか『長寿庵』なら、全国どこでもオッケーでしょ??

そういう訳です。


 xserverにおける、ドメインの種類と料金はこんな感じです。

ちなみに私は、hiza-tre.comというドメインを取得してます。小さな店ですが覗いてみてください。

ドメインの取得なら有名なところで『お名前.COM』というサイトがあります。

 しかしここで……。

「別に無料のサイトでいいんじゃん……

という素朴な疑問が出てくるはずです。

 その通り!

 世の中には無料で借りられるサーバーなんていっぱいあります。つまり、家賃なしで開業できるのに、なんでわざわざ有料サイトを借りなければいけなんだい?? 

という疑問。

 その通り! 出来ます。ブログとか、趣味ならね。でも、

 商売するとなるとある程度セキュリティーがしっかりしていないと困ります。お客さんの情報も扱う事になりますしね。その点は有料サーバーはしっかりしていますからね。それに無料のサイトにはサービス会社側の都合で突然終了、なんてこともありえます。せっかく店がうまくいっていても、サービス会社から「はい、今日でここ終わり」と言われたら、何の書面も交わしておらず、家賃も払ってないあなたは立ち退くしかない。……。

 それと……。

  有料レンタルサーバーでは『うちの広告を貼りませんか?』大手企業のお誘いがあることがあるのです!

 それは映画『ロッキー』に例えると、無名の3回戦ボクサーのロッキーバルボアのところに、いきなり世界チャンピオンのアポロクリードから対戦のオファーがあるようなモノです(古)。

 是非貼りたいじゃないですか!店の壁に『サイゼリア協賛!』とか、『すかいらーくとコラボ!』 なんて広告を貼れば信頼度も広告効果も絶大です。

しかし……。

 その広告は無料サイトには貼ってもらえません。

  いえ別に、無料サイトを卑下するするつもりは毛頭ありませんよ、ありませんが、ここはひとつ、モノの例えとして……。

 無料サイトは、フリーマーケットの露店とか、学園祭の模擬店の様なモノに例えられます。

 住所、屋号、地番は、あってないようなモノなんですね。大企業としては、なるべく安定したお店に広告を出したい、そう思うのも頷けます。

 Google AdSence

 ある日、友達とお酒を飲んでいて、「何か儲かる話はないかなぁ」と呟いたところ教えてくれました。『グーグルアドセンス』。これはgoogle社が実施するアフィリエイト広告で、訪れたお客さんがクリックするだけで料金が発生するという、なんとも魅力的な広告なのです。居酒屋のお通しのようなモノでしょうか。『椅子に座る(ワンクリック)』で、料金が発生する。

 一般のアフリエイト広告は、お客さんがクリックするだけでは料金は発生しません。そこからそのお客さんが、商品を購入して初めて、料金が発生するのです。

 しかしその分、Google adsenceの広告を掲載するには、申請して審査に合格する必要があるんです。つまりこちらから『広告を貼ってくれませんか?』お願いしなければならないわけです。世界チャンピオンのアポロクリードロッキーの方から電話しないといけないわけですね。私ですか?私はもちろん電話しました。

 審査を通過するにあたり、『ブログを毎日更新しないと審査を通らない』とか、『1ブログ当たりの文字数が2000字以上でないと審査を通らない』とか『あまりに思想的、政治的内容だと審査を通らない』など、いろいろなプレ情報がありましたが、実際はあまり関係ないようです。 私は比較的すんなりと審査を通過する事が出来ました。 

 まあ、これは店が出来てからの話。そして安定した顧客を得て、口コミで評判が広がってからの話。

 余談でした。グーグルアドセンスに関しては、なくても全然かまいません。


その3『テーマ(店の仕様)』

《店の仕様とは・・・どういうテーブルと、どういう照明と、どういうメニューと》


  • WordPress・・・『工務店』
  • plug in(プラグイン)・・・『配管、配線工事』
  • theme(テーマ)・・・『内装、外装工事』
  • リンク・・・『棚、引き出し』
  • ダッシュボード・・・『親方の部屋』
  • ダッシュボード左側の項目・・・『工具棚』

 検索サイトで『工務店』(ホームページビルダー)を探していると一つ、とても目立つ広告が目に留まると思います。

『Word Press』

ワードプレス。これは超有名な工務店です。しかし外資系です。英語、自信あります?

 いえいえ、冗談、大丈夫です。この会社は世界の4分の1のサイトが、ワードプレスで作られていると言われているほど、世界で圧倒的な顧客シェアを誇る大企業なのです。日本支店もあり、日本語のサービスも充実していますから。

ここで私は『大企業』に例えましたが、実際にはこのWord Pressは、

サイトを作成するためのソフトの事なのです。(CMS=コンテンツ・マネージメント・システム)といい、文章や画像などの『情報(コンテンツ)』を、見る人に有益なように『管理(マネージメント)』する、『仕組み(システム)』なのです。 

つまり、

人間ではないのです。

 人件費は一切かからず、収入はすべてスポンサー契約で賄われるため、我々使用者には一銭の負担も掛からない。


タダで店を立ててくれる!!

夢のような大企業!! 


 あなたが『WordPress』と書かれた外資系会社の大きなビルに入ると、そこに人間の姿はなく、ロビーにはたくさんの受付端末機が並んでいます。前に立つと、機械音声と共に WELCOME!と表示されます。画面は二分割されていて、左には『plug in』、右には『theme』と表示されています。意味が分からないあなたはとりあえず、『日本語』というボタンに触ります。すると……。


『plug in』『配線・配管工事』と翻訳され、

『theme』『外装・内装工事』と翻訳されました。


 実際にも、店を作るとなると、屋根や柱や床や棚を作る工事と、水道やガスや電気を設置する工事の、大きく分けて二つの工事が必要になりますよね。これに例えられるように、

 ネットショップも、実際に訪れた人が直接目にして触れてみることができる、照明やカウンターテーブルやドアや棚にあたる部分と、運営するうえで必要なパワーユニット設備の2つを構築しなければいけないのです。


あなたはまずtheme『外装・内装工事』をタッチします。

すると……、

 画面にはたくさんの親方衆の顔写真が現れました!

 これは何を例えているのかというと、


 Word Press にあらかじめ用意された『テーマ』というモノがあります。そう、さっきの『theme』は テーマと読みます。

テーマ??

『テーマ』とはザックリ言うとモデルルームです。あらかじめ用意された『お店の間取り』プリセットパターンです。洋服屋さんラーメン屋さんでは当然、お店の間取りが違ってきますよね。それを選べるわけです。親方衆はいずれ劣らぬ腕に自信がある強者ばかりですが、やはり一人一人得意分野があって、二世帯住宅ならだれにも負けねぇ!という親方もいれば、飲食店なら任せてくれ!という親方もいて、いろんな個性が揃っているわけです。自分の用途に合ったものを選びたい。お洒落で、使い勝手良くて、明るくて、清潔で、風通しが良くて、地震に強い……。

 このテーマには、無料のモノと、有料のモノがあり、無料でも素敵なテーマがたくさんあり、デザインも豊富で、充分かと思いますが、有料のテーマはよりアレンジが自由であったり、最新の技術に対する対応が優れていたりします。こだわる人には有料テーマ魅力的ですね。


 あなたがどのテーマにしようか迷っていると……、

 『毎度!』

という声と共に、さっきエックスサーバーにいた、関西弁の男の顔が大写しにされました。

 「え? あぁ、どうも、先ほどはお世話になりました。

 「いえいえこちらこそ、末長ごぉ、お願いしすわ。ほんで?どんなテーマお探しですか?


 実はこのWordPressは、さっきのエックスサーバー社 業務提携していたんです。エックスサーバーだけじゃありません。契約したレンタルサーバー会社のサイトにログインして見てください。そこにはほら、ちゃんと『word press』の文字がありますね。フロアの隅に、小さなブースを構えてたんですね。

 こんな感じで……。

 

  WordPressはあまりにも有名なため、様々なレンタルサーバー会社コラボしてるんですね。それぞれの会社のホームページから直接アクセスできるようになっている。

まるでコンビニの『レジ横チロルチョコ作戦』。

 ではここで実際にこの『テーマ』にはどういったものがあるか紹介します。その前に、『Word Press』インストールしましょう!


《have a break》

『ダウンロードとインストールの違いを5秒で説明すると?』

ダウンロードは本を買う事、インストールはその本を読むこと!

 《閑話休題》


 WordPressのインストール方法はどのサイトでもそうは変わらないと思います。『エックスサーバー』の場合、『WordPress簡易インストール』というボタンをクリックすれば終了。インストールが終了したら、『ダッシュボード』を開いて、『外観』『テーマ』で、『新しいテーマを追加』をクリックすると、ほら、こんな感じに無料のテーマが続々出てきます。

theme 実際の映像。

テーマについて詳しく知りたい方には、詳しく説明しているサイトがありました。

『ワプ活』

有料テーマについてはこんな素敵なサイトをみつけました。

TCDWordPress Theme


じゃあいよいよ、店作り始めましょう!

まずは、棚(たな)を作ってみましょう。この『棚』は何を例えているかというと、『リンク』ですね。

クリックするといろんな情報(料理・品物)が出てくる。

『引き出し』でもいいかもしれませんね。

 どちらにしても、店のレイアウトはスッキリと、お客さんも店側も使いやすくないといけません。ネットのお店の場合は基本、すべてセルフサービスになってしまいますからね。お冷のグラスも、メニューもお箸も、すべてお客さんが用意する事になります。

 グラスがどこにあって、ウォーターサーバーがどこで、メニューがどこにあるのかさっぱりわからない。にはいつから置いてあるのかわからない油染みた古い雑誌やマンガがが山の様に積まれていて、ようやくメニューをみつけても油まみれでよく読めない。

 そんなお店は、例え料理がおいしくても、お客さんは2度と来てくれないでしょう。

 わかりやすく、シンプルに。そこで……、

シンプルで、感覚的にエディットがしやすいと評判の、そして、

私も選んだテーマ、『twenty seventeen』で説明させていただきます。

WordPress テーマ『twenty seventeen』

 とってもかわいいこのデフォルトのサボテン(?)の映像はとりあえずそのままにして、

 を作るにもまずは、twentyseventeen親方に挨拶しないと始まりません。『礼に始まり、礼に終わる』のが職人の世界。親方がいる部屋の名前は『ダッシュボード』。

 

 あなたはやや緊張しながら扉をノック(クリック)します。すると、

 やあ!お待ちしてました。と爽やかな声。シュッとした見た目は、『親方』というよりも、『アーキテクト』と言った面持ち。

 実際にこの『twenty seventeen』というテーマは、シンプルでオシャレでシュッとしたデザインとして好評なんです。

  親方の部屋(ダッシュボード)の中を見渡すと左側『専門工具』(項目)がずらりと並んだ『工具棚』があります。↓(下図 こうぐだな。)↓


『ホーム』『更新』『投稿』『メディア』『固定ページ』『コメント』『外観』『プラグイン』『ユーザー』『ツール』『設定』などなど……。



 親方はまず、工具棚から『外観』という工具箱を持ち出しました。


  『外観』は読んで字の通り、サイトの見た目、つまりレイアウトを担当している項目で、

『テーマ』『カスタマイズ』『ウィジェット』『メニュー』『ヘッダー』『テーマエディター』

6つの項目があります。

これも全部、飲食店・料理に例えると……。

《外観ー6つの要素》


●テーマ・・・店の間取り。

●カスタマイズ・・・店の内装。

●ウィジェット・・・店のインフォメーション。

メニュー・・・お品書き。

●ヘッダー・・・看板。

●テーマエディター・・・出納帳。

となります。


 6番目の『出納帳』がちょっと怪しい……。

 『出納帳』? これは『テーマエディター』の何を例えかというと、これがないと、以前どういう注文を、どれだけの量、どこの問屋から幾らで買い付けたのかわからなくなって、最悪の場合、メニューの内容を変更せざるを得ない事態になりかねません。また、不測の事態、(火事・洪水など、)に見舞われた時、『秘伝のレシピ』が失われてしまうかも知れません。

 まだちょっと強引な気がしますが……、つまりこの『テーマエディター』は店の状態を、レイアウトも、メニューもすべて含めて、『保存しておく』、重要な項目になるのです。

そしてこれは次の『子テーマ』と重要な関係を持っています。


《子テーマとは


カスタマイズ(店の内装)

に続きます。