
どうも、そいる塾長です。
最近お会いする先生方やTwitterのTLでこのブログサイトを褒めていただけるようになりましたが実は特に何か難しいことをしているわけではありません。全く知識ありませんので(゚Д゚;)
ということでここまでやったことを簡単にまとめてみました。これをやると誰でも簡単にこれと全く同じサイトが出来上がります(笑)
これからブログをWordpressで始めようと思っているもののCSSやらPHPやらの専門知識がなくて躊躇している方の参考になれば幸いです。
まずはWordpressを始める。

記念すべきこのサイトでの最初の投稿。ここでは具体的なやり方を書いていなかった気がするので一応書いておきますね。細かな情報はこの辺見てください。私が参考にしたサイトです。

あ、一応書いておくと、最初私は間違ってこのWordPress.orgとWordPress.comなるものとを間違えてしまいました。なんでこんなややこしいものが存在するのかわかりませんが、とりあえず.comではない方ですのでご注意くださいね。一応この辺を参考に。

サーバーを借りる
WordPressはこの辺の初期設定だけ面倒ですが多分30分もあればできますよ。クレジットカードだけ用意しておいてください。
やり方はこの辺を参考にしました。

ということでサーバーはエックスサーバーでプランは「X10」。とりあえずチキンなので最初は6か月のプランにしちゃって7000円くらい。来年2月までですね。今なら思う、もっと長くてよかったなと(笑)3年で32400円。めっちゃ損した気分です(笑)次は必ず3年で更新します。
このサイトが詳しいです。なかなか難しそうですがとりあえずこういうサイトの言う通りにしていけば問題ないと思います。

エックスサーバーのサイトはこちら。
ドメインを取得する
次はドメインです。ドメインはこちらで。

こちらでsoil19.comのドメインを取得しました。取得費用1000円くらいやったかな。毎年更新料がかかります。(適当ですみません。)

一応塾名は考えていたのですがこのドメイン名をとるためにここで確定させました(笑)私と同じく開業前の方はここでちゃんと塾名なんかは考えておいた方が良いかなと。「301リダイレクト」とかで対処はできるかもしれませんが。
このあとちょっとひと手間必要です。

このサイトに沿ってサーバーとドメインを関連づけたら最初の難関突破です。
エックスサーバーのページからWordpressがインストールできますのでとりあえずこれでWordPressスタートですね。ログインしてみましょう。
こんな感じになるかなと。なんかこのページのテーマ色も変えることができます。特にこの色にしている意味はありません(笑)
WordPressの初期設定
とりあえずアクセス解析などの初期設定をしました。Googleアナリティクスやサーチコンソールの登録ですね。プラグインで割と簡単にできます。
有料のものもありますが私は無料のものしか使っていません。ということで下記サイトなんかを参考にしながら最初にいれたプラグインを紹介しておきます。

プラグイン①【All in One SEO Pack】
まず最初に入れたプラグイン。こちらで基本設定は簡単にできます。ただなんでその設定が必要かは理解しておらず下記サイトなどで言われるがままやっただけです。勉強においてはこういう姿勢は良くないですね^^;
プラグイン② Google XML Sitemap
これ使ってGoogleサーチコンソールにサイトマップを送信するとなんかいいことあるそうです(笑)
プラグイン③ Akismet
こちらはスパム対策。お守りに入れておきました。
プラグイン④ WP Multibyte Patch
これは最初から入っているプラグイン。日本語入力に関するやつみたいなのでとりあえず有効化ボタンをポチっと。
プラグイン⑤ BackWPup
とりあえずデータが飛んだりしたら泣くしかないのでバックアップのためのプラグインを。
テーマをインストール
この辺の作業が終わったらいよいよテーマをインストールです。いろいろ試すのも面倒ですし、ネットで評判が良かったCocoonにしました。

正直無料でここまでできるのかという驚愕レベルです(他のテーマを知らないくせに言ってみた笑)
とりあえず結論から申しますと私のサイトはこのCocoonの標準機能で出来ることしかやっていません。つまりCSSだPHPだのといった専門知識はほとんど使っておりません。ボタンをポチポチするだけで大概いけます。
無料テーマCocoonでやったこと。
とりあえずCocoonの設定でやったことを書き出してみますね。
ここで全体のテーマカラーとかヘッダーの画像とか設定します。
吹き出しをつくる。

これもCocoonの標準機能。好きな画像で作れます。
スキンを変更する
これに気が付いたのが最近でして( ;∀;)
まず最初にhタグと言われる見出しを変更しようと思ったんです。ちゃんと調べず前のブログで経験があったのでCSSをいじって好みの見出しにしたんです。

ところがこのスキンを変更すると簡単に今の状態になりました。たまたま私が使っていた見出しとほとんど同じ形の見出し、テーマカラーも近いスキンがあったので、最初からこれに気が付いていれば無駄な労力を使うことはなかったなと。
私が選んだのはミックスグリーン [作者: y.hiroaki]というスキンです。これをポチっとすると今の感じになります。

それ以外にもいろいろありますが、好みに応じてぽちっとすると初心者には絶対できそうにないクオリティのサイトに仕上がります。
なおこないだ私がTwitterではしゃいでた記事のリンクがPCでカーソルを乗っけるとふわっと浮くのもこのスキンの標準装備。
こういうのはCSSをいじくってもできますがこれだと何もしなくて良いので楽ちんです。
style.cssでやったこと
ここに関しては「CSSって何?」という人はまったくやる必要ありませんのでスルーしてくださいね。
私も本当にほとんどやってません。やったものといえばそれいる?的なものばかり。(トップページのアイコンが動くとか…^^;)
なお、これは「難しいことは分からない!」という方は全くやる必要ないので
とりあえずコードを書く(コピペする)にあたってはCocoon内にstyle.cssを変更するエディタ機能はついていますが、なんかここでやるのは危険だよっていろんなサイトで書いてあったのでFTPソフトでやるようにしました。FTPソフトならバックアップも簡単だしもしも404エラーが出たとしてもすぐに修正できます。
実際私もおかしなことをしてしまい一度これが表示されて焦りました(゚Д゚;)
もっと怖いのが下手するとWordpressの画面が真っ白になることがあるんだとか。聞いただけで怖い(゚Д゚;)そんなときはFTPソフトでしか修正できません。(だそうです)
ということでFileZillaを導入。

ついでにテキストエディタをSublineに。
どちらもネットでなんかいいよってことで(笑)そもそもほとんど使っていないのでまだ良さも何もありません(笑)
以下一応CSSで書いたものというかコピペしたものとそのコピペ元のサイトを。
hタグ(見出し)
なおどうでもいいこだわりですがh1タグ(記事タイトル)はこのサイトのCSSのコピペです。
