WordPressのサイト構成を考える

ユーザーの大半はスマホから見ます。

サイトの性質にもよりますが、大体どんなサイトでも7割以上がスマホから見ています。

9割を占めることも珍しくないです。

ブログ作成はPCでやるのが普通なので、PCでの見た目を優先しがちですが、それは自分都合です。

自分専用のブログなら自分都合でいいですが、今後アフィリエイトで稼ぐため、自分以外の人に有益な情報を発信していくためのブログを考えているなら、その人たちの視点で優先順位を考えましょう。

とりあえずPC版は置いといてスマホ版だけでもいいです。
PCで見たときに左右に余白がめっちゃ出ることになりますが、それでも一応普通に見れます。
逆に、PC用のサイトをスマホで見るのはかなりしんどいです。
画面が横にはみだすので縦スクロールだけでなく横スクロールもしないといけない、そもそも文字が小さくて読めないなど。

さっき挙げたいろんなパーツはあくまでこの機能を使いやすくするためのものであり、ないならないでなんとかなります。

Windowsで作業を進めますが、MacユーザーならWindowsでの作業をMacに置き換えることは慣れてると思うので大丈夫ですよね。

テキストファイルの作り方は
・フォルダ内を右クリック
・新規作成→テキストドキュメントを選ぶ

このとき拡張子が表示されているか確認してください。

拡張子とはファイル名の最後にある「.txt」とか「.jpg」など、「.（ドット）」のあとに続く3～4文字のアルファベットのことです。
これがそのファイルがどんなファイルなのか（画像なのか文書なのか音楽なのかなど）を表します。

作ったテキストファイルの名前が「新しいテキスト ドキュメント.txt」ならOKです。
「.txt」がなくて「新しいテキスト ドキュメント」だけだったら拡張子が表示されない設定になっているので、エクスプローラーで「表示」→「ファイル名拡張子」にチェック入れると表示されます。

エクスプローラーはフォルダをダブルクリックしたときに開く枠のことです。

厳密にはWordPressは.htmlじゃなくて.phpですが、それはまたあとで

また、ファイル名が「index」なのも意味があります。
indexにすることで、ブラウザでそのページを表示するときにファイル名を省略できるのです。

hogeというフォルダにあいうえお.txtというファイルを置いたとします。

この場合、ブラウザでこのファイルを開こうとするとURLは

（そのフォルダまでの階層）/hoge/あいうえお.txt
となります。

が、ファイル名がindex.htmlだと
（そのフォルダまでの階層）/hoge/index.html
と、わざわざファイル名まで書かなくても、
（そのフォルダまでの階層）/hoge/
だけで表示できるのです。

一般的にホームページのURLが「/」で終わってるのはファイル名がindex.htmlにしてあるからということです。

ファイルをダブルクリックすると編集画面が開きます。
その中に「こんにちは」と記入し、「ファイル」を押して「上書き保存」を押すと保存されます。

いきなり見慣れないプログラミングみたいな表記が出てきて抵抗感があるかもしれませんが、深く考えずにコピペしてみてください。

今は理屈を理解することより、プログラムが動くことを実感することが大事です。

ちなみにこれは、「bodyのcolorをredにしなさい」と言う命令です。

bodyというのはサイトの1ページ全体のことです。

なので、「このページの文字色を赤色にしなさい。」という命令になります。

今回の場合、index.htmlに書いた「こんにちは」がbodyに当たります。

この命令を実行することで、さっきの「こんにちは」が赤色に変わります。

これは、さっきとはまた別の命令文。

link→紐付ける
stylesheet→スタイルシート
href→リンク先
という意味になります。
つまり、
「スタイルシートは「style.css」に書いてあるからそれを読み込んで適用してね。」という命令になります。

スタイルシートとは見た目に関する命令が書かれたファイルのことです。
文字の色を変えたり、大きさを変えたり、っていうのは見た目に関することですよね。

スタイルシートは「CSS（シーエスエス）」とも言います。

このブログでも今後スタイルシートのことは「CSS」で統一します。

CSSに命令を書き、index.htmlに紐付けたことで「こんにちは」が赤に変わるはずですが、変わりましたか？

ならない場合、いくつか原因が考えられます。

・スペースがない
・全角文字が使われている
・不要なスペースが入っている
・「”」ではなく「`」を使っている
・「”」がない
・文字コードが誤って認識されている

これらのミスを防ぐためには、自分で手打ちするのではなく、上のコードをそのままコピペするのが確実です。

1行目）「link」の後のスペースが半角ではなく全角
2行目）stylesheetが「"」で括られていない
3行目）「style.css」の閉じ「"」がない
4行目）「href」の前のスペースが半角ではなく全角
5行目）「<」が半角ではなく全角
6行目）「<」「>」の前後に不要なスペース

基本的にプログラミングで、全角文字を使うことはありません。
（検索かけるときの対象が日本語だったり、HTMLの画像説明が日本語だったら全角文字が混ざることはありますが…）
プログラミングでのコピペは単に手打ちが面倒だからするのではなく、間違えないためにやる行為です。

これを怠ったがために丸一日作業が滞ってしまうことということはプログラミングを仕事にしている人なら誰でも一度は経験していると思います。

ただ、タイプミスはコピペを徹底すれば防げるので大した問題ではありません。

また、「”（ダブルクオート）」を「’（シングルクオート）」にするのは、既にHTML以外のプログラミングを勉強した人が陥りやすいところですが、HTML以外のプログラミング言語はダブルクオートとシングルクオートどちらも使えることが多い（その意味合いは違いますが）ので、念のため。

ホームページを見ていて派手に文字化けしているのを見たことありませんか？

あれは文字コードを正しく認識していないために起こっています。

日本語と英語みたいなもんです。

日本語で「サン」というと数字の「３」を思い浮かべますが、英語だと「太陽」ですよね。

いきなり「サン」とだけ言われても何語の「サン」なのかわからず、正しい意味を理解できません。

WordPressのファイルの中身も、それが何語なのか最初に宣言した上で、いろいろ書いていかないと意味が理解できず、文字化けしてしまうのです。

ただこの解決は簡単です。

文字コードをUTF-8にすればOK。

話し言葉の言語は全世界共通言語というものがなく、しばしば言語の壁にぶつかりますが、プログラミングの場合はその点ラクです。

全世界共通の言語があるからです。

それが「UTF-8」という文字コード。

これを設定すれば日本語だろうが英語だろうが全て正しく認識されます。

だったら最初からそれを標準にすればいいじゃないかって？

全くそのとおりです。

実際のところ、ほとんどのプログラム言語はUTF-8が標準です。

MacでもLinuxでもUbuntuでも。

ただひとつ、Windowsを除いて。

厄介なことに世界No.1のOSであるWindowsだけ世界の常識から外れているのです。

WindowsはMacをパクって作られたOSなので、なんとか差別化をはかろうとして、やってはいけないところで差別化してしまったんですね。

タスクバーはMacでは上にあるのに、Windowsは下ですよね。
デスクトップのファイルはMacでは右から並ぶのに、Windowsは左から並びますよね。
それは慣れればいいだけですが、文字コードを変えるのはダメだろJK。

Windowsの標準文字コードはShift_JIS（シフトジス）というものです。

名前だけは聞いたことがある方も多いんじゃないでしょうか。

なので、Windowsで作られたファイルは何も指定しないと問答無用でShift_JISになってしまいます。

さっき、index.htmlとstyle.cssをメモ帳で作りましたよね？

文字コードを何も指定してないので、あのファイルの文字コードは今はShift_JISです。

ブラウザで開いたとき正しく開けたからShift_JISでも別にいいじゃないかって？

確かにそうなんですが、それはブラウザが空気を読んでるだけです。

空気読みはいつも期待通り動いてくれるとは限りません。

別のページから飛んできたときに、元のページがUTF-8だったら飛んできたこっちのページもUTF-8だろうと空気を読んでUTF-8で表示しようとします。

が、あなたの作ったページはShift_JIS。

この瞬間、文字化けが起こります。

他にもさっきのindex.htmlのようにファイルを作って入力するとき。

テキストファイルの中身を入力するメモ帳のようなアプリを「エディタ」といいますが、このエディタもいろいろあります。

で、最近のエディタは全部UTF-8が標準です。

たとえば僕が使っているエディタ「Sublime text」で、さっきのindex.htmlを読むと見事に文字化けします。

エディタで最近主流の「Visual Studio Code」では、「これはたぶん製作者が意図しない文字コードだろう」と事前に察して、文字化けした結果ではなく、エラーメッセージを出します。

meta→このファイルについての設定をしますという宣言
charset→charが文字、setはセットなので、文字のセット＝文字コードという意味

つまり、「このファイルの文字コードはUTF-8です」と宣言していることになります。
「<」と「>」でくくることでHTMLの1つの命令として認識されます。

これにより、<head>と</head>の間にかかれていることは「そのファイルに関する設定」として認識されます。
書かないと「本文」と認識されてブラウザ上でそのまま表示されてしまいます。

となります。全部つなげて

と書いてもいいです。
つながってると、これからどんどんこのような命令を追記していったときに、ごちゃごちゃして自分が困るので、改行やインデント（字下げ）を入れて、入れ子関係をわかりやすくしています。

<head>や<meta>の命令を正しく書くことで、ブラウザがその情報を読み取り、それに基づいて中身を表示させることで、中身が正しく表示されるという仕組みです。

ついでに説明するとブラウザで見たときに表示される部分は全体を<body>と</body>で囲みます。

全てのホームページは<head>と<body>の2部構成で作られているのです。

つまり、最初に書いた「こんにちは」は、正しくは、

<body>
こんにちは
</body>

と、書かなければいけなかったということです。

書かなくても期待どおり表示されたのは、ブラウザが空気を読んだからです。
結果オーライだったわけですが、だからといってこれに頼り切るのは危険です。

この先、手を加えて、複雑になっていくと、解釈が変わって今まで期待通り動いていたところも変なことになってしまう可能性があります。

それを防ぐためには空気読みに頼らず、
「ここが<body>だからな！」
「ここが<head>だからな！」
とクドクド言い聞かせましょう。

プログラムと人間で、唯一違うのはどれだけクドく言っても怒らないことです。

ちなみに文字コードを変える・変えないに関わらず、Windowsに最初から入っている「メモ帳」アプリはWordPressやホームページを作るときには使わない方がいいです。

理由は、

・文字化けする
・不可視文字が見えない

からです。

いくつかリンクがありますが、過去のバージョンが履歴として残ってるだけなので、一番上のもの（末尾が「.md5」ではなく「.zip」のもの）を押してダウンロードしてください。

デスクトップでもいいし、「ドキュメント」フォルダの中でもいいですが、
アプリは普通、

C:\Program Files
か、
C:\Program Files (x86)
にインストールされるので、特にこだわりがなければ、この中に移しておくといいです。

今のままでは、テキストファイルをダブルクリックして開いたら、Windows標準の「メモ帳」で開くはずです。それでは結局サクラエディタを使わないままになってしまうので、サクラエディタで開くように設定を変えます。

まず「index.php」を右クリックして「プロパティ」を押します。

「プログラム」のところに、「メモ帳」が指定されています。

ここで指定されたアプリが、ファイルをダブルクリックしたときに自動的に開くアプリになります。
「変更」を押して、サクラエディタを選びます。