プログラミング完全初心者のブロガーがプログラミングを効果的に学習するための体系的なノウハウがあれば教えてください。
この疑問にお応えします。
- ブロガーがプログラミングを学びカスタマイズできる
- ブロガーがWordpressのプログラミングをカスタマイズ
- ブロガーがプログラミングで月5万円を安定的に稼ぐ方法
- まとめ:ブロガーはプログラミングで稼ぎやすい【Q&A】
こんにちは『プログラミングの王様』編集部のヒロキ(@pgm_osama )です。
2005年よりプログラミングで稼ぎながらも、最近はブログから月7桁の収益を達成しています。
そこで本記事では、最低でも月5万円くらいをブロガーがプログラミングで稼げるレベルを目指すための内容をまとめようと思います。
こんな読者に最後まで読んでもらいたい
- WordPressでブログを書いている人
- WordPressのカスタマイズはできない人
- プログラミングは完全初心者の状態の人
- これからブログのカスタマイズを自分でやりたいと思ってる人
- プログラミングで月5万円ほど稼げるようになりたい人
もともと2005年からMovable Typeというブログシステム(CMS)のカスタマイズを専門にプログラミング学習をしてキャリアをスタートさせてきましたが、初心者のころは「livedoorブログのカスタマイズがしたい」と思って勉強し始めました。
当初は「ブログのヘッダーを変えたい」とhtmlやcssを数時間触った挙句にレイアウトが崩れて、結局は最初からやり直し!という不毛な作業を延々と繰り返していましたが、その原因は「簡単にプログラミングができる方法ばかり探していた」からでした。
そこで本記事では表面的な答えの提示ではなく、本質的なプログラミング方法を解説します。
大半の人が求める「答え」だけを教えてもスキルの上達はしませんよね。
WordPressでヘッダー位置にバナーを配置したい
→ 簡単に配置できるプラグインを教える → プラグインを入れて結果的にサイトが重くなる → SEOに悪影響になる → 答えしか知らないので原因が分からない
こういった状態にならないためにも、3ヶ月ほどの学習期間で「本質を理解した上でWordpressのカスタマイズを自分でやれる状態」を目指せる内容を書こうと思います。
プログラミング初心者のブロガーが継続的に学習してスキルが上達できるように学習方法や動画を順次掲載して紹介するので、ぜひこのページをブックマーク等に入れておいてくださいね。
ブロガーがプログラミングを学んでWordpressをカスタマイズする方法
ブロガーがWordpressブログを自分でカスタマイズするためのプログラミング学習の手順を解説します。
必要な知識は上記の3つです。
これらを理解できれば、WordPressを自分で自由にカスタマイズすることができるレベルになります。
※Wordpressのフルカスタマイズは別途学習が必要ですが、あくまで基礎知識の理解まではいける内容です。
HTMLとCSSの基礎知識を学習する
WordPressをカスタマイズするための入り口は、まずはHTMLとCSSの理解からです。
この辺りはWebプログラミングの登竜門になるので、基礎知識をまずは2週間ほどでマスターしてしまいましょう。
HTMLとCSSを無料で学習する方法
ドットインストールという動画サイトで学習することができます。このサイトなら無料で講座を受けることができるので以下のリンクより受講しましょう。
また、注意点としては動画講座を単に見るだけではなく、同時に手を動かしながら一緒に学習していきましょう。頭だけで勉強した気分になってもプログラミングスキルは身につきませんよ。
また、上記のドットインストールの講座を見ても理解が不十分な人は下記の動画も合わせてどうぞ!
基礎から覚えたい人のためのHTML入門講座【無料の学校】
基礎から覚えたい人のためのCSS入門講座
上記の無料講座を見るだけでも、基礎スキルは習得できますね。
2005年に独学で苦しみながら学修していた自分にとっては、プログラミングが無料で学べる時代が来るとは思ってもいませんでした。
マジで素晴らしい時代になりましたね。現代が羨ましい・・・。
WordPressの構造を理解する
WordPressの構造はかなり複雑で、全ての構造原理などを理解しようとすると半年くらいかかりますので、基礎部分だけ1ヶ月ほどで理解していきましょう。
WordPressはphpと言われる動的なプログラミング言語で構築されています。
動的とはプログラムには「●●に該当する場合は□□のデータを表示させる」といったように、臨機応変に必要なデータを読み出して表示させる仕組みです。
本記事の目的が「Wprdpressのカスタマイズを自分でできるようになる」ということなので、まずはWordpressの基本的な構造だけを抑えておきましょう。
WordPressの基本構造
- templateでデータを呼び出す(get_template_partの理解)
- デザインの編集は全てstyle.cssで行う
- 記事ページのテンプレート編集はsingle.php
- トップページの編集はindex.phpとhome.php
- 固定ページ(静的ページ)はpage.php
例えば全ての記事ページにバナーを掲載したい場合はsingle.phpにバナーを配置するためのHTMLコードを記述してstyle.cssでデザインを編集すればカスタマイズ完了です。
get_template_partは任意のテンプレートを読み出すphp変数なので、この辺りも順次以下の動画を見て学習していきましょう!
WordPressの基礎知識を学習
WordPressの学習もHTML/CSSと同じくドットインストールを見ながら学習していきましょう!
一度だけ見ても理解できないはずなので、繰り返し何度も見て学習してください。
特に上記に記載したget_template_partの考え方や、各phpページの構造はしっかり理解できるようになりましょう。
また、ドットインストールの動画講座だけでも十分に基礎スキルは身につきますが「Wordpressって楽しいぞー」と思たら、さらなるスキルアップを目指して以下の参考書もどうぞ!
WordPress関連の参考書の中で一番分かりやすかったのでオススメしておきます。
こんな感じでhtml/cssで組み立てたサイトデータをWordpressに落とし込む手順を網羅しているので、これ1冊で独学は完了します。
開発ツールを使いこなす
HTML/CSSを理解して、Wordpressの基本構造が分かれば、あとは実践的にWordpressをカスタマイズしていく行動フェーズです!
しっかり学習に取り組める人は3ヶ月ほどで、ここまでスキルアップできると思うので、最後は「開発ツール」について解説しておきます!
開発ツールとは「デベロッパーツール(開発者ツール)」と呼ばれていて、エンジニア向けの検証用ツールです。
検証用ツールは実はブラウザGoogle Chromeにも搭載されており、ブラウザを見ながらHTMLやCSS等の修正を行って、検証することが可能です。
開発ツール(検証)の使い方
ブラウザで「右クリック → 検証」 からツールを表示させます。
使いこなせれば、かなり便利で、適応されているスタイルシートを調べたり、開発検証をブラウザ上で行うことができます。
開発ツールの使い方を学習する
以下の記事を読めば理解できます。
ドットインストールの方が学習しやすい方はそちらを確認しましょう!
以上の開発ツールまで理解できれば、初歩的なカスタマイズの知識レベルは完了です。ここからは実際に手を動かしてWordpressをカスタマイズしていく実例を交えてさらに深く解説していきます。
頭だけの理解よりも、目で見て学ぶ方が理解は深まるので以下をどうぞ!
プログラミングを勉強したいけど何を勉強したら良いのかわからない...
独学で勉強しているけど、よくわからない...
そんな方も多いと思いますが、朗報です!
有名プログラミングスクールのテックアカデミーの講座を
無料で受講することができます!
パソコンさえあれば、自宅で学習をすることができます。
30秒で登録が終わります。
いつまで無料で体験できるかわからないので、
今すぐ無料体験に登録してみてください!
» TechAcademyの無料体験に申し込む
ブロガーがWordpressのプログラミングをカスタマイズ【実例編】
本ブログを実例に、2パターンのカスタマイズ実例を紹介します。
なお、プログラミング初心者にとっては現時点では「何のことやら?」だと思いますが、今は理解できなくても「3ヶ月後にはこれを理解できて、プログラミングできる自分に成長しているのかー」とワクワクしながらイメージを掴んでもらえればと思います。
トップページにバナーを配置しよう
本ブログは「JIN」という最強に綺麗なWordprssテーマを使っておりますので、同じデザインが良い場合はご利用ください。
※当ブログはJINをさらにカスタマイズして利用しているので、完全同じにはなりません。
上記の位置にバナーを掲載したい場合は、開発ツールで要素を入れる位置を確認します。
今回だと<div class=”pickup-contents-box animate“>が4つ並んでいるバナーになるので、その上部にhtmlを追記します。
追記するファイルはトップページになりますが、home.phpを見ると、この部分はheader.phpを読み込んでいることがわかるので、header.phpを見てみると
上記の部分の上に
<a href=””><img src=”images/bunner.jpg” class=”toppage_main_bunner”></a>
といったhtmlデータを記述しましょう!ちなみにcssはtoppage_main_bunnerのクラスを指定しているのでstyle.cssでtoppage_main_bunnerでデザイン設定しましょう。
記事の下側に人気記事を入れよう
次はブログの記事の下に人気記事のリンクを掲載する方法です。
上記の赤い部分ですが、上記の記載にはWordpress独自のカスタマイズ手順が必要になります(中級者向けです)。
- 記事下に表示させるウィジェットエリアを作成
→ 参照:wordpressテーマ「JIN」の記事下にウィジェットエリアを作成するカスタマイズ - ウィジェットエリアにHTMLを記述
- 個別ページ(single.php)にウィジェットを表示させるコードを挿入
- style.cssで追記したHTMLのCSSを編集
この辺りは、かなり複雑になるので上記の参照サイトなどをググって探して、1つ1つ問題解決していくスキルが必要になります。
参考までに、以下のようなイメージになります。
ウィジェットを追加できたら、そのウィジェットにカスタムhtmlを記述する。
その後、single.phpで追加したウィジェットを表示させる場所に
<?php dynamic_sidebar(‘under-article-widget’); ?>
を追記する。
ということで、以上がブロガーがプログラミングでWordpressをカスタマイズする方法の解説でした。
大雑把にまとめてみましたが、上記の内容通りにドットインストールの講座を見て学習すれば、最後のウィジェットのカスタマイズなども思い通りにできるようになるので、頑張って勉強していきましょう!
ブロガーがプログラミングで月5万円を安定的に稼ぐ方法【2種類を紹介】
最後に、ブロガーがプログラミングで稼ぐ為の2種類の方法をサクっと解説して終わりにします。
- ブログから案件を受注する
- クラウドソーシングで案件を受注する
ブログから案件を受注する
例えば、この記事のように「記事下にウェジェットを配置して人気記事を配置する方法」などのWordpressカスタマイズ記事を書くことで、同じ内容の仕事を受注することができます。
例えばwordpressテーマ「JIN」の記事下にウィジェットエリアを作成するカスタマイズのような記事を書いて、記事の最後に「Wordpressのカスタマイズは5000円で対応致します」と申し込みに繋げればOKです。
実際に、こういったプログラミング系の記事を書いていると、企業などから「サイトのカスタマイズをお願いしたい」といったお問い合わせをかなり頂きます。
プログラミングの知識をブログで情報発信すれば、かなり稼げるという証拠になりますね。
クラウドソーシングで案件を受注する
クラウドソーシングで発注されている案件を積極的に受注していけば月に20〜30万円は稼ぐことができます。
例えばランサーズで「Wordpress カスタマイズ」で検索すれば5〜10万円案件がゴロゴロと出てきます。
こういった感じで、Wordpressのカスタマイズができない人は世の中にたくさんいます。ということで、まずは基礎スキルが身についた段階でランサーズで案件を受注していき、さらなるスキルアップに繋げましょう。
ちなみに、ランサーズで案件がなかなか受注できない人はランサーズで受注できない人の特徴を解説【受注テンプレを無料配布】で鬼詳しく営業方法をテンプレ紹介しているので、ぜひご覧ください。
ランサーズで毎回、案件獲得が面倒な人はタイムチケットを使おう
ランサーズやクラウドワークスのクラウドソーシングサイトは、多くの案件がある一方で、安定的に受注するには、それなりの提案レベルが必要になります。
「そんなの面倒くさい」という人向けにタイムチケットを使った稼ぎ方がオススメです。
タイムチケットでアカウントを登録しておき「Wordpressのカスタマイズを5000円から引き受けます」といった内容で販売するだけでも、月5万円は達成できるはず!
ということで、最後はブロガーがプログラミングで稼ぐ方法の解説でしたが、本記事は以上となります。
かなり長くなりましたが、今後も情報追加していき、より精度の高い記事にしていくのでブックマーク等しておいてくださいね。
まとめ:ブロガーはプログラミングで稼ぎやすい【Q&A】
今回の記事は「ブロガーがプログラミングを学び、稼ぐ方法」のまとめ記事ですが、不明点などはTwitterにて質問ください。できる範囲でお答えしていきます。
質問
プログラミングの完全初心者ですが、どれくらいでマスターできますか?
回答
完全初心者の場合は、1日に学習できる時間にもよりますが、だいたい3ヶ月で基礎レベルはクリアできます。初心者のプログラミングの始め方は【初心者向け】わずか3ヶ月でプログラミングを学習してお金を稼ぐ方法でもまとめていますのでご覧ください。
質問
クラウドソーシングでどうやったら、案件を受注できますか?実績がないので、なかなか難しいです。
回答
ランサーズなどはお互い(発注者と受注者)の顔が見えないサービスなので、何よりも信頼が必要になります。その信頼の積み重ね方もいくつかあるのでランサーズで受注できない人の特徴を解説【受注テンプレを無料配布】をご覧ください。
テンプレに沿って行動してもらえれば、確実に受注できる内容になっています。
人気記事フリーランスエンジニアが年収1000万を簡単に稼ぐ5つの方法【環境を変える】
人気記事【無料あり】ネットで稼ぐためのプログラミングスクール3社