WordPress ブログ

WordPressでのブログ作成を初心者向けに1から10まで全部説明する。サイト構築編【インターンブログ#2】

はじめ

こんにちは!家で白日を歌いすぎて、あだ名が白日になってしまった宮原 裕宇みやはら ゆうです。(Internnectでインターンを経験中です。)
僕がWordPressを使って初めて立ち上げたサイトはこちらのブログで、WordPressについての情報をインターネットでたくさん調べて2日で立ち上げました。

しかしその時に感じたのが、「WordPressやることが多すぎて何から始めたらいいかわからない…」「記事が多すぎてどれをみたらいいのかわからない…全部まとめた記事がみたい…」という面倒さでした。


しかし、いろいろなサイトをまとめた記事はあっても1から全部1つの記事で説明してくれているサイトはなかなか見つからない。

この記事さえ見れば完成する!
そんな記事がやっぱり一番楽で嬉しいですよね。

でも、そんな記事が無いということは(少なくとも僕が完璧だと感じた記事は見つからなかったので)、そこに需要があるということ!!
もちろん情報にあふれている社会で、自分が必要としている情報を集める能力は必須です。
しかしそれを何かを始める1歩目で一緒に鍛えようとすると、何が何だか分からないし、時間がもったいないですよね。

というわけで、こちらの記事を書くに至ったわけです!
もちろん、完ぺきに一つの記事で教えるのは難しいので、登校を完了させるまで必要最低限の知識をコンパクトにまとめて伝えます!
(なお、かなり長くなってしまったためサイト構築編①と投稿編②に分けました)

僕と一緒に投稿を1つ完成させるまでWordPressとその周辺の技術について学んでいきましょう!

WordPressじゃないとだめなの?

ここから書き始めると、さすがに情報が多くなりすぎるのではないかと思ったのですが、本当の初心者の方はおそらくこの「無料のブログサイトじゃなくてわざわざWordPressにする必要ある?」という疑問を胸に抱えているはずです。
これについての説明はコンパクトに済ませてはやくWordPress本体のについて説明したいので、ここはわかりやすくまとめてくれている記事を紹介させていただきます!  ↓  ↓  ↓ 

https://www.xserver.ne.jp/blog/wordpress-vs-freeblog/

WordPressを始めて初めににやること

使用言語の選択

まずはWordPressを初めて開くと、下の画像の様に英語表記になってしまっていた。という方がいるかと思います。この場合は、まず下の画像で赤色に囲われている、Settingsの中から、Generalを選択しましょう。

すると、下の画像の様なページへ移ります。ここで赤色に囲われているSiteLanguageから日本語を選択し、このページの一番下のSaveChangesを選択すると、日本語に切り替わります。


タイトルとキャッチフレーズ

そのまま同じページで上にある、サイトのタイトルと、キャッチフレーズを決めましょう。
サイトのタイトルは、下の画像の赤色で囲まれた部分、つまりこれから運営していくサイトホームページのタイトルになります! 
非常に重要で、途中で変更すると定期読者さんが混乱してしまうのでよく考えてつけてください!

つぎにキャッチフレーズはどこに表示されるの?という話ですが、これは僕も初めはわかりませんでした💦 

これは、下の画像で赤色に囲われている部分の様に、サイトのヘッダーのロゴ周辺に出てきます。(これの表示非表示についてはあとで変更の仕方をのせます。)ここも、重要なのでよく考えてつけましょう。
こちらのブログでは普段タイトルとキャッチフレーズを同じInternnect Engineering Blogに設定しています。

アップデートについて

おそらく更新の欄に赤い数字が表示されているかと思うので、そこを押して下のページへ移動してください。

はじめてまだ何もしていない!という方は、上で赤色に囲まれている「今すぐ更新」ボタンを押して更新を開始してください。(テーマの更新などは今は行わなくて大丈夫です。)

しかし、すでに少し作業を進めてしまった方や、これから新しいバージョンアップが行われた際にいきなり更新を行ってしまうと、予期せぬ不具合が生じてしまいます!
なので、まずはバックアップ、それからプラグインを無効にして…など作業が必要になります。

このような場合は、詳しくまとめられているこちらの記事を参考にしてください。

WordPressでは定期的にバージョンアップが行われるのですが、快適さやセキュリティ面を考えて基本的に更新を行ってください。

テーマについて

テーマって何?

基本設定は終わったので、テーマについて話していきましょう。

他のサイトを見てもおそらくWordPressなら初めに導入を勧められ、まずは何となく導入してみるのがテーマではないでしょうか。

テーマとは、簡単に言えばサイトを構築するためのテンプレートです。

少しだけ詳しく説明します。
WordPressはブログ作成用にある程度準備はされているのですが、やはり見やすく、使いやすくするにはCSSという言語を使ってデザインを整えたり、プラグイン(機能を実装するのに必要なめんどくさい作業をまとめてくれているもの)をたくさんインストールしたりする必要があります。

そんな面倒な作業を全部初めからまとめて済ませてくれているのが、テーマです!

もちろん、テーマの中でデザインを調節したり、大枠をテーマで固めて微調整は自分でCSSやプラグインを追加して行うということもできます。

どのテーマを使えばいいの?

ここでテーマを使おう!と思うのですが、無料のテーマから有料のものまでたくさんあって、どうやらその数は数千から一万になるようです。

ここで何を使えばいいのかが分からなくなってしまうと思うのですが、私がおすすめするのは,わいひらさんという方が作成して下さった「Cocoon」という無料テーマです。

まず無料と有料の差なのですが、有料のほうが広告がつけやすかったり、カッコいいデザインを簡単に作成できるなど、多機能なものが多いです。しかし、それ相応の金額がかかります。(数万するものも多いです。)始めて間もないのであれば、慣れるためにも、今後どういう有料テーマを購入するかを考える参考にするするためにも、無料テーマを使って慣れてみるのが良いと思います。

そして、なにより今回紹介する「Cocoon」は有料テーマに引けを取らないほど機能が充実しています!(目次機能、広告の入れやすさ、SEO(サイトの見つけやすさ)、レスポンシブ(サイトを見る機器によって表示を対応させること)などなど…)
もちろん、他のテーマがいいという方は調べて好みに合いそうなものを探してみてください!

それでは、Cocoonのダウンロードを進めていきましょう!

Cocoonのダウンロード方法

https://wp-cocoon.com/theme-install/

こちらのサイトを参考にダウンロードしてください!

途中で、PHPのバージョンの確認方法が出てきます。

補足すると、下の画像の赤い四角で囲まれているサイトヘルスを押すと、PHPのバージョンが確認できます。

ダウンロードを進めるうちに、「どうして親テーマと子テーマを分けて、子テーマを使うの?」と疑問に感じた人がいると思うので、簡単に説明しますね。

テーマを使っていると、テーマの仕様を変更したくなる時があります。

そこでテーマのファイルを変更するのですが、そこで親テーマを使っていて親テーマのファイルを変更してしまうと、ある問題が発生します…

それは、親テーマはWordPress同様いろいろな問題に対応するために、定期的にアップデートが入るのですが、その時に親テーマでオリジナルの仕様に編集したファイルはアップデートで上書きされ、すべてやり直しになってしまうという問題です。

しかし、子テーマは、親テーマと違って基本アップデートされないので、子テーマを普段から使って、子テーマのファイルでカスタマイズすればアップデートに影響されずに済むというわけです。

子テーマを使っていたら親テーマのアップデートは意味がないんじゃないの?と思った方に説明すると、WordPressは子テーマを参照して、そこに欲しいファイルがなかった場合は親テーマを参考するという仕組みになっているのでアップデートは意味があるということです!

つまり、子テーマはアップデートに影響されないカスタマイズのために普段から用いるというイメージを持っていればいいですね!

Cocoonを使ってサイトデザインを整えていく!

難読Cocoonマニュアルについて

これから、Cocoonを用いたサイトデザインを整えていきたいと思うのですが、個人によってデザインは十人十色になります!!
だから、マニュアルを見てみなさんの理想に合わせるのがいちばんいいと思います。

というわけで、こちらにCocoonマニュアルのページを載せますので、このページを参考に頑張ってください!!

https://wp-cocoon.com/manual/#toc24

…どうでしょうか?

いろいろ書いてある量が多すぎて、何から始めたらいいか全くわかりませんよね!笑
Cocoonでできることはすべて書いているのですが、それ故に始めてみたら混乱してしまいます。

というわけで、理想は皆さんの好きなように作っていただくことなのですが、ややこしすぎるので、最初にこれだけ設定すれば、最低限のデザインになる重要な設定を上げていこうと思います。

一緒に基本中の基本の形を整えていきましょう!
(ちなみに、先ほどのマニュアルページから探したいワードをすぐに見つけたい人は、widowsの方はctrl + f 、Mac のかたはcommand + f をすると、検索ウィンドウが出てきます! これはほとんどのサイト、アプリで使えるので便利です。)

それでは、スキン、フォント、ヘッダー、ロゴ、グローバルメニュー、サイドバー(+ウィジェット)についてそれぞれ「簡単に」説明していこうと思います!

スキン

まずは先ほど紹介した要素を編集するページの開き方を説明します。

下の画像で青く選択されている、サイドバーのCocoon設定から操作していきます。
大量にタグがありますね… 
ややこしそうですが、それだけ使いこなせるとすごいというわけです

それでは、上の画像のタグの中にある「スキン」を選択してください。
たくさんタグが出てきたかと思います。

この「スキン」はサイトのデザインを決めるときの根っこの部分になりますので、よく考えて選んでみてください。

それぞれのスキンの雰囲気は下の画像で示した赤い四角の中の写真をマウスホバー(マウスをマークの上に重ねることです)すると、下の画像の様にプレビュー画面が出てきます。
好みのスキンを選んでください!

サイトカラー・フォント

次は、タグから「全体」を選んでください。

そして、スクロールしていくと下の画像のような表示がされると思います。

サイトキーカラーは読んで字の如くサイトの主となる色です。自分の理想のブログのイメージに合うように設定してください。

サイトキーテキストカラーもそのままですが、サイトの全体の文字の色を決めます。

次のフォントで、好きなフォントを選択してほしいのですが、重要な点があります。

WebフォントはWebを読み込む際に一緒にフォントを読み込むため、速度が遅くなってしまうようです。
速度が遅くなると、ユーザの満足度の低下だけでなく、Googleから評価も下がってしまいます。(Googleの評価って?と思った方は投稿編で説明します!)

しかし、どうやら調べてみるとWebフォントは改善されてあまり速度に影響しなくなっているようでした。
しかし多少遅くなるのであればよほど気に入らない限りは普通のフォントを使用することをお勧めします!

全体ページにはサイドバーの設定もあります。
サイドバーは便利ですので、サイトの規模を大きくする予定の方は、そのまま右に配置するデフォルトの設定をお勧めします

当サイトの場合はまだコンテンツも充実しておらず、シンプルな見た目にするためにサイドバーは削除しております。

ヘッダー・ロゴ

つぎはメニュータグから「ヘッダー」を選択してください。

ヘッダーロゴ、キャッチフレーズの配置を進めていきましょう!

まず、ヘッダーロゴは自分で作成したロゴを入れてください。
ロゴ作成方法はこちら↓の記事で詳しく説明して下さっているので読んでみてください。

https://changbeer.site/2020/05/blog-original-logo/

そして、ヘッダーロゴサイズからロゴのサイズを調節できるのですが、注意点がこのロゴはグローバルメニュー(スクロールに合わせてついてくる上のメニューバー)のロゴ(下の画像の赤く囲われている)にも共通のサイズで用いられるという点です。

共通に使われていることで、ヘッダーでは大きく、グローバルメニューでは小さくというのテーマを変更しない限りは実装できないので、小さいグローバルメニューに合わせてサイジングしましょう。

そして、キャッチフレーズの配置では最初に設定したキャッチフレーズが遂に登場します!
最初に説明したように、ヘッダーロゴの付近にキャッチフレーズを設置することができます。


しかし、ヘッダーのコンパクトさは失われるので、キャッチフレーズが必要かどうかを考えて設置するかどうかを決めてください。

インデックス

メニュータグから「インデックス」を選びます。

今回はフロントページタイプとカードタイプを操作します。

フロントページタイプは、初めはデフォルトでいいと思うのですが、タブ一覧を設定すると、上部にタグをまとめたバーが作成され、タグを軸としてサイトを纏められるので、記事が増えてきた際に見やすくなると思います。

カテゴリー別を選択すると、記事一覧の下にカテゴリーごとに分けられて記事が表示されます。

これらはスキン同様画像アイコンらしきものをホバーすると参考動画が見られますので、それを参考にしてください。

カードタイプは、カードの並べ方です。こちらもホバーして、好みのデザインを選択してください。
おすすめは、大きなカード(先頭のみ)で、こちらのサイトもその設定にしております!

サイトデザイン完成!

ここまで長い作業でしたが、お疲れさまでした!
いったんサイトのデザインを、ブログとして公開できるレベルまで上げられたのではないかと思います。
しかし、まだまだ説明できていない部分もありますので、ぜひ最初にあげたマニュアルを見ながら理想のサイトに近づけていってみてください!

また、質問や改善点も募集しておりますので、「ここが分からない…」であったり、「この説明だけじゃ足りない…」といった意見はコメント欄からどんどん送信してください!

もちろんこれからWordPressについての細かい技術も上げていく予定ですので、もし調べていくなかでまたこのブログを発見したらその時はまたよろしくお願いします!

それでは次は投稿編に移っていこうと思います。
投稿の仕方、画像の処理、SEO対策、プラグインをまとめますので、是非投稿編の記事も見てみてくださいね!!

ここまで読んでくださった方は最後までお付き合いしていただき、ありがとうございました!🎉

-WordPress, ブログ
-, ,

Copyright© Internect Engineering Blog , 2020 All Rights Reserved Powered by AFFINGER5.