当サイト：MAKOTO × BLOG は自分で１からデザインとコーディングをして作成しました。
プログラミング独学で３ヶ月目のときに作ったので、クオリティはさておき、意外と簡単に作ることができたので、その方法を解説します。
ブログの自作には以下のようなメリットがあります。
ブログを自作するメリット
- プログラミングの勉強になる
- ブログのメンテナンスが簡単
- 細かいデザインの変更をすぐにできる
- 機能の追加が簡単にできる
- 人とかぶらないオリジナルのブログになる
自分でどこをイジればいいのかすぐに分かるので、ここの色変えたいなーとか、こんな機能入れたいなーと思ったら、ソッコーで追加・修正ができます。
既存のテーマだと修正が簡単なものもあるけど、融通がきかないものもあり、テーマを変えればその方法も変わるので、結構たいへんです。
それから僕が一番のメリットだと感じたのは、プログラミングの勉強になるということ。
ブログを自作したことで次のようなスキルが身につきました。
- プログラミング言語（HTML・CSS・jQuery・PHP）
- wordpressのイジり方
- ローカル開発環境の構築
- FTPを使ったサーバーへのアップロード
- サーバーやドメインの契約と設定方法
これら実は、エンジニアとしてwordpress案件を受注する際に必須の知識でもあります。
自分のサイトが作れて、さらにこれだけの勉強が独学でできるので、かなりコスパがいいと思いませんか？
ブログサイト作成開始時のスキル
ブログを作ろうと思い立ったときのスキルは以下のとおり
- 簡単なwebページなら真似して同じものを作れる
- ググれば大抵の機能は実装できる
- wordpressは初めて
- サーバー・ドメイン➝なにそれ？
- ローカル開発環境➝強そう
- FTP➝？？？
こんな感じでした。はっきり言ってザコですね。
そこからとりあえずHTMLとCSSはイジれたので、ブログのトップページから作り始め、ググりながら徐々に完成に近づいていきました。
ブログサイト作成手順と時間
- ワイヤーフレーム作成
- コーディング開始
- ローカル環境でワードプレス化
- 各ページ用のコーディング
- サーバーとドメインの契約
- FTPでサーバーへアップロード
- その都度不具合等の修正
１．ワイヤーフレーム作成
まずはHTMLとCSSで大体のワイヤーフレームを作成しました。
案件のときにはphotoshopやXDでつくりますが、別に自分用に作るだけなので、そんな回りクドいことをする必要はないなーと思い...
それに僕の場合は、そっちのほうが早く作れるのでそうしています。
２．コーディング開始
ワイヤーフレームの段階でほとんどできているので、細かいところを調整。
意識したのは、全体的に要素を整列させることと、余白の統一。
各要素を統一させるのはデザインの基本で、これができていないと少しのズレが気になって記事を読むのに集中できなくなります。
わざとズラすデザインもありますが、ブログは記事がメインのコンテンツ。
ブログのデザインも重要ですが、こりすぎないように。
３．ローカル環境でワードプレス化
ここまでコーディングしてきたファイルをワードプレス化していきます。
ワードプレスサイトで運用できるようにするためにはワードプレスをダウンロードしてきます。
本来ワードプレスサイトをイジるためには、後述するサーバーの契約が必要ですが、ローカル環境を使えばその必要がありません。
ちなみにローカル環境は「Local by Flywheel」という無料ツールがおすすめ。
超簡単にワードプレスのローカル環境が構築できます。
４．各ページ用のコーディング
ここからは「PHP」という言語を使ってコーディングしていきます。
難しそうですがめちゃめちゃ簡単です。
PHPは一言でいうと、プログラミングをHTMLに埋め込むための言語です。
例えば、
カテゴリーが「プログラミング」の記事を最新のものから10記事分のタイトルを順番に表示する
という命令を既述します。
HTMLだとこの通りに自分で既述するしかありません。
新しい記事を投稿すれば、最新10記事のタイトルも変わって来るのでそのたびに自分で入れ替え作業が必要です。
これをプログラミングで自動化するためにPHPという言語が必要というわけです。
それからPHPを使う理由がもうひとつ。
複数のページを持つウェブサイトの場合、ヘッダーやサイドバー、フッターなどどのページでも共通する部分があります。
例えばこのブログのヘッダー部分で言えば、サイトタイトルとヘッダーメニューはどのページにも共通して表示されるようにしています。
各ページごとに同じヘッダー用のコードをコピペしてもいいですが、どこか修正したい点が出てきたときに、全てのページで修正作業が必要になります。
複雑なサイトを作るほど、これは非効率なので、そこでPHPの出番です。PHPを使うと、各ページで共通の部分を「header.php」というファイルで既述しておいて、各ページのファイルの先頭に、「<?php get_header(); ?>」と書くだけ。
修正が必要になった場合は、「header.php」のファイルを修正するだけで、全てのページに変更が反映されます。
５．サーバーとドメインの契約
ここからいよいよインターネット上に自分のつくったサイトを公開します。
サーバーは今まで自分のPCに保存されていた、PHPやCSSファイルを保存しておく場所のことです。
インターネットで公開するには、インターネット上のサーバーにファイルをアップロードしなければ、サイトは表示されません。
それから、ファイルをアップロードしただけでは、サイトを置く場所がありません。
わかりやすくいうと、家や家具の準備はできたけど、土地がないみたいなことですね（そんな状況はありえないけど笑）
そのインターネット上で自分のサイトの住所を表すのがドメインになります。
このブログでいうと「makoto-pro.blog」がドメインになります。
サーバーは「エックスサーバー」、ドメインは「お名前.com」というサイトが有名だし、使いやすいです。
ここでマイナーなサービスを使う必要はありません。
なぜなら、分からないことがあってググったときに、欲しい情報がすぐに手に入るから。
どのサービスも大差はないので、ユーザーが多いサービスを使っていた方が、後々困らないです。
６．FTPでサーバーへアップロード
自分のPC上のPHPやCSSのファイルを契約したサーバー上にアップロードするためのソフトです。
アップロードするだけでなく、ダウンロードして編集するときにも使用します。
公開したあとも、ちょっとイジりたいところができたときにFTPを使って該当のファイルをダウンロードしてきて修正することで、変更が反映されるという仕組みです。
７．その都度不具合等の修正
あとはブログを書きながら、必要だと思った機能を足していったり、デザインを変更したり、その都度アップデートしていきます。
このブログでも、最初は関連記事の表示や、ページネーション機能（ページしたのページ数を表示させる機能）がなかったのですが、これらはサイトを公開した後に追加しました。
追加する方法は６のFTPツールを使って、該当のファイルにコードを既述していきます。
ざっと、こんな感じの手順でブログを自作しました。
もちろん分からない点は、全てググりながらでなんとかなっています。
ブログ作成するときに知っておくといいこと
とりあえず上記のような手順でつくるんだという全体像を把握しておくといいと思います。
何から始めればいいか、次に何をしたらいいか分からなくなるので。
それからPHPを１から勉強しなくてもできるとは思いますが、プログラミングの基本的な知識は必要になります。
HTMLやCSSだけの知識では難しいです。
if文やwhile文が理解できないと苦戦するかもですね。
それから、サーバーやドメイン、ローカル環境、FTPなど専門的な知識も必要です。
専門的とは言っても、そこまで難しくはありません。
ググったり、youtubeなんかで調べればすぐ理解はできるようになるはず！
自身のスキルアップにもなるブログの自作にぜひ挑戦してみてください！
駆け出しエンジニアにピッタリのクラウドソーシングサイト
「FLEDGLING」は駆け出しエンジニアへ仕事を依頼する変わりに、報酬を相場よりも抑えることができるという、新しいクラウドソーシングサービスです。
駆け出しエンジニアの悩みで多いのが、
実績がないから仕事が獲れない。仕事が獲れないから実績がない。
ということです。
FLEDGLINGを利用するメリットは、FLEDGLING内での仕事は全て実績として公開OKということ。
つまり、『報酬よりもまず実績を取りに行きたい』というエンジニア向けのサービスになっています。
詳しくは以下の記事で解説しています。
