【スクール不要】自分のブログをレスポンシブデザインで作ってみる

4

みなさんこんにちは、杉下です。こちらの就活市場さんで記事を書かせていただくのも今回で6回目になりますので、もうそろそろ「みなさんこんにちは、杉下です」って、したり顔で挨拶しても良い頃合いですよね?憧れだったんですよ、こういうの。

ブログ作りに必要なステップ

 前回の記事では阿部寛のためにホームページの制作を行っていましたが、今回は自分のホームページ(ブログ)を作っていこうと思います。
まずはブログ作りに必要な以下のステップが5つありますので、それを考えていきます。

  • (1)ブログのコンセプトを決める
  • (2)サーバーをレンタルする
  • (3)ドメインの取得
  • (4)ワードプレスをインストール
  • (5)ブログのデザインを考える
  • 1つずつ詳しくみていきます。

    (1)ブログのコンセプトを決める

     
    ブログを始めるにあたってはコンセプトが必要です。つまり「ブログで何を発信するのか」ということです。
    自分が感じたことを日記のようにを書き連ねるブログも悪くありません。しかし、読み手に何を伝えたいか、がはっきりしている方が読みやすいブログになるので、最初に決めておきたいと思います。

    僕がブログを通じて伝えたいことは「本質的なこと」そして「おもしろいこと」です。

    なぜこの2つを伝えたいかというと。むしろその2つの事しか考えていないからです。基本的に僕は「何も出来ないヤツ」なので、それ以外のことは書こうと思っても書けません。
    この時ばかりは「何も出来なくてよかった〜〜〜〜!!」と誇らしげに叫んでやろうかと思いましたが、秋風が心の奥まで吹き込む気がしたのでやめておきました。

    ブログのコンセプトが決まればあとはタイトルを決めるだけです。阿部寛へのリスペクトを込めて「杉下康平のホームページ」にしようかと思いましたが、一周回ってオリジナリティが無いのでやめました。

    やはりタイトルというのはコンセプトから考える方が良さそうですね。なんだか自分の子供の名前を考えているみたいでワクワクします。

    1

    出来ました。
    コンセプトである「本質的なこと」そして「おもしろ」を組み合わせた結果、本ブログのタイトルは

    ゴウンジョーク

    に決定しました

    とんだキラキラネームになってしまいました。

    この名前にした理由はいつか自分のブログにて書こうと思っているので、気になる方はぜひ楽しみにしていてください。

    キラついたブログのタイトルも決まったところで、次はより実践的なステップに入りましょう。

    (2)サーバーを借りる

     このステップではサーバーを立てていきます。以前の記事では自分のパソコン上にホームページを制作するため、MAMPというアプリケーションをインストールしました。しかし、今回のホームページはインターネット上に公開するため、レンタルサーバーを借りなくてはいけません。

    ちょうど有名レンタルサーバーの「Xserver」が11月30日まで10日間無料キャンペーン中だったのでこれを使ってみたいと思います。

    2

    無料期間だったので支払い方法の入力なども必要無く、ものの3分程度で契約が完了しました。あまりに簡単すぎて拍子抜けしてしまうほどです。

    (3)ドメインの取得

     では、次に「ドメイン」を取得していきます。ドメインというのは言わば住所です。
    この就活市場さんでいうならURLの中に書かれている『shukatsu-ichiba.com』の部分の事です。

    そして、この「お名前.com」と言うサイトがドメイン取得の代行サービスを行っているので、今回はここからドメインを取得していきます。
    もちろん、これは代行サービスなので料金がかかります。そしてその値段もドメインによってまちまちですが、ほとんど場合は年間1000円以下で収まるので、そんなに心配はありません。

    今回取得するドメインはサイト名にちなんで「goun-joke」としてみましょう。ただ、もしこのドメインがすでに誰かに使われてしまっている場合は使用する事が出来ないので、まずはその使用状況を検索しなくてはいけません。

    3

    調べたところ、誰も使っていないようですね。
    これはラッキーです。「.com」から「.jp」まで誰一人として使っていないのでまさに選び放題、どれにしようか迷ってしまうほどです。

    と言う事で今回は「goun-joke.com」のドメインを取得しました。料金は年間910円と言う事ですが、食費を切り詰めればなんとか運営できそうです。

    (4)ワードプレスをインストール

     サーバーを借り、ドメインも取得の取得も完了しました。あとは最後にWordPressをインストールし、ページを構築するだけです。

    以前、MAMPにWordPressをインストールした時は、WordPressのファイルのダウンロードし、データベースと繋げる事でインストールしました。しかし、今回は「Xserver」側がすでにそのファイルを用意してくれていたので、管理画面から「インストール」を押すだけで済みました。驚きの簡単さです。

    そして、サーバーからWordPressの管理画面に入ると

    4

    こうなります。僕は自分のホームページを作ったのはこれが初めてなので、なんだか少し感慨深いものがあります。これが有料だと思うとなおさらです。

    (5)ブログのデザインを考える

    では、ここから実際に自分のブログを構築していくわけですが、WordPressの場合、ホームページを1から作る必要はありません。

    なぜなら、すでに完成度の高いデザインがたくさん用意されているからです。

    もちろん、それらはただの雛形にすぎませんので、そのままでは使えません。実際にはそれをカスタマイズする事で初めて「自分のホームページ」が完成しますが、これらを利用する事で「完成度の高い」ホームページを「素早く」作る事ができます。さらに、デザインによっては有料のものもあります。有料のものを使うと、ホームページがより「イイ感じ」になるそうです。(使った事がないので細い事はわかりません)

    しかし、これ以上食費は切り詰められそうにないので、今回は無料のテーマ(デザイン)をベースにカスタマイズを行っていきたいと思います。

    今回使用するテーマは「Simplicity」です。無料テーマ界では1、2を争う人気を誇るこのデザイン。その特徴は何よりシンプルである事。全くそのままですね。これは裏を返せばカスタマイズできる幅が広い、という事にもなりますね。今回はこれを使っていきましょう。

    5

    たったのワンクリックでここまでレイアウトが変わりました。この手軽さはWordPressの魅力ですね。

    そして、カスタマイズもとても簡単にできるようになっています。

    6
    7

    こんな風に、文字や色、フォントや画像などはとても簡単に編集することができますので、全くの初心者でも簡単に自分のデザインにすることができます。

    しかし、このカスタマイズで変更できる要素はテーマに依存しています。なのでテーマによってはもっと多くのカスタマイズを施すことができます。

    特に有料のテーマだとこの部分が充実していることも多いようです。自分でホームページを作りたいと考えている方は自分の目的や好みにあったテーマを探してみるのも楽しいのではないでしょうか?

    目次へ 人事から直接フィードバックをもらおう!

    自分のブログをさらに自分のものにする

    先ほど、少しだけカスタマイズ施しましましたが、まだ満足な出来ではありません。これからもっとカスタマイズすることで自分色に染め上げて行きたいと思います。
    そして、見た目を自分色に染め上げると同時にしっかりと「本質的なこと」と「面白い」ことを発信していくことで、名実ともに「自分のブログ」を作っていかなくてはいけません。

    それは今から未来の話になるので、ここにその過程を書くことは出来ません。
    しかし、この記事を最後まで読んでくださったみなさんには、これからもその過程を見ていってほしいと思います。
    ここまでこの記事を読んでくださって本当にありがとうございました。またブログでお会いしましょう。

    Fラン文系学生がSNSで就活したら5社から内定が出た
    Fラン若大将が2週間でプログラミングを覚えた話
    【入門編】初心者文系学生はじめてのHTMLによるWebコーディング
    【実践編】デザインデータを元にphpでWordpressプログラミング
    【スマホサイト制作】実際に阿部寛のホームページをスマホサイト化してみる

    関連記事

    ピックアップ記事

    1. pexels-photo-296282
      最近、ベンチャー企業へ就職を考えている就活生は多くなってきております。 しかし、ベンチャー企業へど…
    2. 01d542488c30a8493ac354bdbb8b0067_m
      大学生活も3年生になると、周りは皆就活を始めて、焦り始める方も多いのではないでしょうか。 いざ、就…
    3. 9_26_2_16545022
      就活生に見られる2つのパターン 2017卒就活生のデータにおいて、2016年8月1日時点で「内…
    最短内定・就活プロフェッショナル
    ページ上部へ戻る