読者です 読者をやめる 読者になる 読者になる

マネー報道 MoneyReport

マネーにまつわる報道を取り上げ、自分の切り口で切り取り、噛み砕いてお伝えします。

新年度の新プロジェクト開始!Bootstrapデザインの導入!

スポンサーリンク
あとで読む

新年度

春もうららな4月の10日。
札幌ではまさかのが降っています(^-^;
もう巷ではスタッドレスタイヤから夏タイヤに換えた人が溢れているというのに、雪降ってちょっと心配です。

さて、4月に入れば世の中は新年度
気持ち新たに新しいことにチャレンジするのに丁度良い季節です(雪は降ってますけどね!)。

で、丁度昨日読者登録しているブロガーさんの記事で気になるものがありました。

誰とも会わずに稼ぐ、インターネットの副業の手法22つといくつかのTips
ここまでアイデアを列挙してきたが、そもそもインターネットで収入を得るために持つべき基本スタンスを書いておく。
インターネットで稼ぎたいと思い立ったときに、まず考えるべきことは「どうやって多くの人を集めるか」ということだ。人が集まればマネタイズは簡単で、誰だってググって情報収集すれば、1時間で収益をあげるためのシステムを作り上げることができる。


まず、自分に特别のスキルや、特别な経験・知識がある人はそれを活かさない手はない。それがユニークであればあるほど、大きな強みになる。たとえば、スペイン語が得意なら初心者向けにスペイン語の勉強方法を紹介するWebサイトを作ってみよう。


誰とも会わずに稼ぐ、インターネットの副業の手法22つといくつかのTips - Literally

という訳で、22種類ほどの副業ネタについて紹介されていました。
副業ネタ自体は特段そのまま「やってみよう!」と思うものは無かったのですが、後半のアイデア部分はなかなか勉強になりました。
とにかく「どうやって多くの人を集めるか」が大事で、後は「自分に特別のスキルや、特別な経験・知識がある人はそれを活かさない手はない」という部分。

そう、私自身はプログラミングが出来ます。
ここを活かさない手はないんだな~、という事。

これまでも勿論、Webサイト開発をメインにやってはいるのですが、人も集めつつ」得意分野で勝負する!というのは抜けていた観点かな、と。

要は、これまで作ってきたWebサイトはこのマネー報道著者のアカウントに紐づく形では公開していません。
理由は色々とありますが、「攻撃されるとマズイので公開しない」というのが一番の理由です。

しかし、このマネー報道著者が私自身に紐づくアカウントで一番強力なアカウントである事は間違いありません(^-^;
お陰様で当ブログは読者数が2,000名を超えるブログに育ち、日々多くの人が色々な記事を読みに来て頂いています。
このマネー報道著者のアカウントを活かす事で「多くの人に周知出来る」という利点が挙げられます。

そこで新年度の新プロジェクトとして

マネー報道 MoneyReportに紐付いたWebサイト構築を図る!

という物を進めていこうかと。

放置したWebサイト

で、「何からやるの?」というところが問題ですが、ずっと放置してきた物があるのでそこから着手していこうかな、と。
私はサブブログとして「Web言語のお勉強~ど素人が往く~」という開発周りの話題をメインにしたブログも持っています。

えぇ、まぁほとんど放置したりたまに書いても役に立たない話題が多いのですが(^o^;

で、このサブブログでずっと放置してきた物があります。

ずっと前に取ったドメインがダメになって、新しいドメインにリンクを張り替えていない

ことです(^o^;

具体的には当初取ったドメインが下記のURLだったのですが、

  • http://moneyreport.main.jp/

これは1年後にレンタルサーバーを更新しなかったので、ドメインが使えなくなっていました(^-^;
サブブログで作ったPHPソースを多数アップしていました。
で、PHPソースは別のドメインを取って別レンタルサーバーにアップはしていたのですが、そのリンクの張替えをしていなかったんです(-_-;
まぁ忙しかったですし、それほど需要もないかな~、と思ったりもしたので(^o^;

ですが、新年度で思い立ち本日一気にリンクを修正しました!
多数のツイートもしています。

で、新ドメインが

になります。
こちらにリンク張り直しました(^o^;

デザインの変更

で、サブブログはしょせんPHPの勉強用コードしかないのであまり意味はないのですが、マネー報道向けに作ったWebサービスもありました。
下記リンクです。

マネー報道 WebService~生命保険計算~

これは生命保険の相談を受けた時に、必要な死亡保険金を算出するためのものです。
粗削りで使いやすくはないですが、PHP勉強当時の最高傑作ではあります(^o^;

どんな画面がかといいますと・・・

f:id:MoneyReport:20160411155024j:plain

シンプルすぎる(^o^;
っというものでした。

ちょっとこのままでは頂けないので、デザインを洗練させたいな、と。
多少中身がイマイチなものであってもデザインが良ければ「なかなか良いね!」と勘違いしてもらえる事もあるのかな、と(^o^;

ではデザインを変えるとして、今時はどんなデザインが良いものでしょうか?

Bootstrap

Webサイトのデザインについては昨年調べている中で「Bootstrap」(ブートストラップ)が良さそうだ、というのだけ知っていました。
ただ、知っているだけで適用した事もありませんし、どんなものかもイマイチわかっていません(^-^;

そこでザザッと適用してみることに!

参考にさせてもらったのは「とほほのBootstrap入門 」というサイトです。

とほほのBootstrap入門


Bootstrap とは
Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。- Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。

  • ライセンスは MIT License で、商用利用も可能です。
  • 現時点(2015年8月29日)時点の最新バージョンは 3.3.5 です。
  • Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。
  • Bootstrap 4 もアルファ版が公開されています。

で、こちらの基本にのっとり「http://getbootstrap.com/」から「CSS, JavaScript, fonts」を手に入れます。
これをレンタルサーバーにアップすれば、ベースはOKと。

さらに基本のテンプレートがありますので、それを適用します。
下記コードがBootstrapのテンプレートになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

これを先ほどの私の生命保険死亡保険金計算に適用します。
適用後が下記。

f:id:MoneyReport:20160411155815j:plain

あれ?
あんまりキレイじゃないですね。
というかほとんど変わっていない(^-^;
Bootstrapってただ単に適用しただけじゃダメなんですかね?

Bootstrapテンプレート

テンプレートが他にも必要そうという事で検索して調べたら下記の様なものがありました。

GetTemplate
縦長のポートフォリオやランディングページをはじめ、複数ページ用に豊富なレイアウトパターンを揃えたものまで、そのデザインやレイアウトも参考になります。


総まとめ: Bootstrapの無料で高品質なテーマファイルがダウンロードできるサイト | コリス

こちらの中の「Magister - Free html5 template by GetTemplate」を適用してみようかな、と。
先ほどのテンプレートよりはゴチャゴチャしていますが、何とか適用してみると・・・

f:id:MoneyReport:20160411160131j:plain

できたー!!!
全然サイトコンセプトとデザインが一致していませんが、まぁ最初のよりは見栄えはする様になったのかな、と(^o^;

Bootstrapデザインの導入方法ってこんな感じで良いんでしょうかね?
手軽に良さげなデザインを適用したいだけなのですが。

まぁ新たな挑戦という事で(^^)v
今年度は当ブログに紐づくWebサイトも公開していきたいと考えていますので、今後ともどうぞよろしくお願い致します。