妻からの転職条件 〜半年で副収入 月10万円〜

なんとしても副収入目標額を達成して希望職に就くためのブログ

勉強開始から3週間、Webページ初作成

HTML&CSSの勉強を初めて約3週間

 勉強時間の取れた日数は限られますがProgate HTML&CSSコース着手から3週間、上級コースまで受講し終えたのでWebページ作成に取り掛かります！

 

 

 

Webページの内容は自己紹介+ポートフォリオ(作品集)

 自己紹介に加え、今後いろいろアウトプットしていくものをまとめるポートフォリオを作成します。

 

 簡単2ステップでWebページ作成

①ローカル環境でHTML&CSSコーディング

テキストエディタ(私が使用しているのはVisual Studio Code)でコードを書いてChromeで内容を確認しつつ修正します。

今回作成したのは下記3ページ。それぞれ作成所要時間は2.5時間/1時間/1時間くらいです。

f:id:kt78:20181230225701p:plain

トップページ

f:id:kt78:20181230225809p:plain

自己紹介ページ

f:id:kt78:20181230225834p:plain

制作物を載っけてくページ

 

②Github PagesでWebページを公開

下記リンクを参考にGitHub Pagesからページアップロード！Gitのインストール時の設定でターミナルからはgitコマンド使えないようにしていたので少しもたつきましたがすごく簡単に公開できました。

参考ページ：GitHub PagesでWebページを公開する方法 | TechAcademyマガジン

 

↓↓完成したWebページがこちら↓↓

https://bora-san.github.io/index.html

 

リンクもちゃんと繋がってるしレスポンシブデザインも最低限できているのではないでしょうか…ProgateのHTML & CSSコースでは出てこないtableについて検索しながら学んで書いてみました。

 

初Webページ公開、ここからどんどんアウトプット出していけるように精進していきます。

はてなブログ無料版で使える文字装飾(HTML編集)

こんばんは。残業続きで睡眠時間確保するのもやっとな師走ボラです。

 

辛うじて作れる寝る前の1時間を積み重ねてprogateのHTML・CSSコースを中級までクリアしました。

 

そこで学習した内容をブログで活用できないかな～と調べてみたのですが、

 

「 はてなブログでCSS編集できるのは有料版のみ」ということが発覚

 

がっくりきましたが更に調べるとどうやら

 

無料版のHTML編集のみでも本来CSSで規定するようなプロパティでの装飾ができるようなのでいろいろとと試してみます。

 

①文字に背景色を付ける

上の文で使っているように蛍光ペンを引いたような装飾になる書き方です。コード例は下の通り。

<span style="background-color: #f6bfbc;">無料版のHTML編集のみでも本来CSSで規定するようなプロパティでの装飾ができる</span>

要点を強調する際に良さそうです。

 

②文字色を変える

これは「見たまま編集」でも変更できますがHTMLでコード記入することで文字色を自由に変えられます。

<span style="color: #oooodd;">HTMLでコード記入することで文字色を自由に変えられます。</span>

 

③文字を線で囲む

引用する場合などによく使いそうな書き方。コード例もこの書き方に背景色を付けたものです。

<span style="border: 2px solid #88FFFF;">コード例もこの書き方に背景色を付けたものです。</span>

「border: 線の太さ 線のスタイル 線の色」で指定します。線のスタイルは下記の4種類です。

  • 「solid」-実線
  • 「dashed」-破線
  • 「dotted」-点線
  • 「double」-二重線

spanをdivに変えると下記のように行全体を囲います(ただし文中には埋め込めません)。

<div style="border: 2px solid #88FFFF;">spanをdivに変えた場合</div>
<div style="border-radius: 8px; border: 3px dashed #ff0000;">border-radius:8pxと角の半径を指定して丸めることもできます</div>

さらに、「border-bottom」、「border-left」のように線を引く方向を指定してすることもできます

<div style="border-bottom: 5px solid #008080;">下側に線を引く場合</div>
 
<div style="border-left: 5px solid #008080;">左側に線を引く場合</div>

 

④文字のサイズを変える

文字通り、フォントサイズの指定です。

<span style="font-size: 300%;">フォントサイズの</span><span style="font-size: 50%;">指定です</span>

基本設定では200% / 150% / 100% / 80%の指定のみなので自由に変えられるようになります。

 

④太字、アンダーライン、斜体、取り消し線

これは「見たまま編集」で設定できるものと変わらないので参考まで。

  • 太字　　　<strong">太字</strong>
  • アンダーライン<span style="text-decoration: underline;>アンダーライン</span>
  • Italic　　　<em">Italic</em>
  • 取り消し線　<span style="text-decoration: line-through;>取り消し線</span>

 

⑤コードを書く際の注意事項

ここまでグレーのボックスでコード記入例を書いていますが、HTML編集画面でそのままコードを書いてしまうとそのコードの設定が反映されて余計な装飾が入ってしまいます。

①の背景色を例に取ると、

無料版のHTML編集のみでも本来CSSで規定するようなプロパティでの装飾ができる

このようにコードが設定する背景色が反映されてしまいます。

これを防ぐためにはコード中の「<」を「&lt;」に、「>」を「&gt;」に書き換える必要があります。

 

最後に

余白の指定方法など細かいところは他にもありますが、以上が無料版はてなブログのHTML編集でできる主な装飾方法かと思います。

コードを組み合わせたり、カラーコードを見やすい色に変えてみたりして自分なりの装飾方法を模索してみます。

 

<カラーコード参考リンク>

www.netyasun.com

html-color-codes.info

何はともあれインプット

こんばんは。職場の忘年会幹事業務に全くやる気が起きないボラです。

積極的に俺の目を死なせにくるんじゃないよ。

インプットの日々

12月に入ってprogate有料プラン登録(月額¥980)し、

とりあえずPython5コースを受講し終えました。

内容は本当に基礎の基礎といったところで、これを履修したからと言って明確にこんなアウトプットが出せる！とイメージは付きません。

でもアウトプットしたいんだもん！

すみません、息子の口癖が移って気持ち悪い感じになってますが、

アウトプットしなければ上達なんかしないでしょ！ということで

Pythonでのアウトプットはざっくり大別すると下記のような感じ

参考サイト
http://blog.pyq.jp/entry/python_first_180625
https://dividable.net/python/how-python-is-useful/

必要関連知識の少なそうなwebスクレイピングで近々アウトプットを出してみます。

経験から1番取っつきやすそうなデータ分析については、Pandas、Matplotlib、Numpyなどのライブラリの知識が必要そう。解説サイト漁りつつwebスクレイピングと合わせたものを作りたい。
　
webサービス・アプリケーション作成に必要なHTML、CSS、javascriptやSQLは引き続きprogateで学習を進めます。


果たしてこれらは副収入に繋がるのか？

このブログ全くアクセス増えてないけど大丈夫なのか？

そもそもアフィリエイトなんかの登録全くしてないけどやる気あるのか？

ツッコミどころは多々ありますがとにかく進めていきます！

自分の立ち位置

どうもボラです。

繁忙期が過ぎたのに残業がなくなる気配が全くなく目が死んでいくばかりのここ最近です。

嫁子どもの体調不良も相まって諸々着手できていませんが、いろいろ調べている中で自分の立ち位置が朧げながら見えてきてる気もします。


クラウドソーシングのマクロ作成等の募集には時間を十分に割けるその道のプロが集まり、

pythonの勉強で着手し始めたprogateは全5コースを履修して初めてスタートラインに立てるレベル、

他の言語等のコースもエンジニアとしての基礎的なものなので一通り学んでおくべき。

………。

なるほどなるほど、よーくわかりました。

足を止めてる暇は一切ないってことがね！


とりあえずクラウドソーシングはそれなりの時間を掛けて小さく稼ぐような形式なので後回し。

まずはprogateで一通りプログラミングの学習を済ます。
(python→HTML&CSS→jQuery→javascript→SQL→git、みたいな感じかな〜)

途中でwebページ作成しながらアイディア溜めてwebサービス提供、

やれる分野を広げてもう一度クラウドソーシング見てみるような流れで進めてみます。

やりたいことがありすぎてクラウドソーシングなんてやってる暇ねえよ！となれば理想ですね。

クラウドソーシング始めました

転職の際の年収差を副収入で埋めることもできるのでは？と思った理由の一つがこの「クラウドソーシング」を知ったことです。

「クラウドソーシング」とは？

クラウドソーシング - Wikipedia

クラウドソーシング（英語: crowdsourcing）とは、不特定多数の人の寄与を募り、必要とするサービス、アイデア、またはコンテンツを取得するプロセスである。このプロセスは多くの場合細分化された面倒な作業の遂行や、スタートアップ企業・チャリティの資金調達のために使われる。群衆（crowd）と業務委託（sourcing）を組み合わせた造語で、特定の人々に作業を委託するアウトソーシングと対比される。

クラウドソーシングは狭義では、不特定多数の人に業務を委託するという新しい雇用形態を指す。広義では、必ずしも雇用関係を必要とせず、不特定多数の人間により共同で進められるプロジェクト全般を指す場合もあり、その場合オープンストリートマップ（OSM）やreCAPTCHAなどが代表例として挙げられる。

ざっくり言うと「デジタル内職」のようなイメージで遠くないかと思います。

 

クラウドソーシングサイトの比較

株式会社クラウドワークス

最も人気の高いクラウドソーシングサービス。経験者・プロを対象にしたものから、初心者でも対応できるものまで幅広い案件があるとのこと。

 

私がVBAの経験で副収入稼げないかと検索してヒットしたのもこのサイトの案件一覧でした。

 

無料で利用可能、手数料は報酬の5～20%程度。

 

クラウドソーシングなら日本最大級の「ランサーズ」

クラウドワークスと同規模の案件数を扱うサービス。ライティングやデザインに関する案件が多いのが特徴？実績を積むと「認定ランサー」の称号が与えられる制度あり。

 

匿名での取引も可能。こちらも無料で利用可能で。手数料5～20%程度。

 

その他にもそれぞれ特徴のあるサービスがあるようです。

 

とりあえず登録してみる

主要どころの「クラウドワークス」と「ランサーズ」に登録してみました。

所要時間はそれぞれ5分、3分程度でしょうか。

 

ユーザー名はどちらも「Bora_san」で登録したのでこのブログを見て依頼していただける方がいればお願いします。笑

 

ひとまずは登録まで、Excel、VBA関連の案件を中心に明日以降検索してみたいと思います。

 

まずは簡単な案件から始めてもいいかな。

副収入を得る方法

Google先生にお尋ねして出てきたのは概ね以下のような内容

副収入を得る方法

半年後の10万円の目標内訳

クラウドワーキング　6万円
ブログ運営　2万円
その他投資関係　2万円

知識も何もないですが概ねこんな内訳をイメージして進めてみます。

リスクのある投資関係は優先順位を落としました。

既に多少の知識のあるEXCEL VBAを用いたクラウドワーキングを主軸にして、ブログ運営での収入の得方もいろいろと考えていきます。

まずはタイムマネジメント

時間は有限です。

目標達成のためにはまずタイムマネジメント。

現状

6:30　　　　　息子と起床
7:40　　　　　家を出発
8:10　　　　　出社
12:00〜13:00　昼休み
　　 〜20:00　帰宅
20:00〜22:30　夕飯、風呂、妻と会話
23:00　　　　 就寝

自由にできる時間の配分

出社・帰宅の車中(20分×2)　英語の勉強(主にTED)
昼休み(30分)　月水金 統計学勉強、火木 ブログ記事作成
23:00〜24:30　月水金 クラウドワーキング、火木土 Python勉強
その他空き時間　ブログ運営についての調べ物



家族との時間をないがしろにしてはいみがないので土日は基本的に家族との時間を優先します。

まずはこのスケジュールで2週間続けてみます。