WEB制作関連

話題の「about.me」でプロフィールページをつくってみた。

最近、Twitterなどでも自己紹介ページとして利用している人が増えてきた「about.me」でプロフィールページをつくってみました。簡単に見栄えのするページができておすすめなので紹介します。

こちらができあがったページ。所要時間は5分程度でしょうか。ここまでの設定方法を解説します。

aboutme_10.jpg

ちなみに自分でデザインができなくても以下のようなかっこいいプロフィールページができてしまうのでぜひ試してみてください。

aboutme_01.jpg

アカウントを登録する。

トップページにメールアドレス・パスワード・URLにしたいテキストを入力します。
ここで入力したURLが http://about.me/xxxxxxxxx のように自分のページのURLになります。

aboutme_02.jpg

次の画面で名前と自己紹介を入力します。

aboutme_03.jpg

“allow visitors to your profile to email you”にチェックを入れると他の人があなたのプロフィールページを通してあなたのEメールにメッセージを送れるようになります。
※アドレスは公開されません。

これでプロフィールページの作成は完了です。ここから自分のページをカスタマイズしていきます。

背景画像を設定

自分の持っている画像を使用したい場合は「↑」から画像をアップロードします。特に画像がないという方は用意されているものから選びましょう。

「Center image」だと画像が中心に置かれ、「Tile image」だとアップした画像が繰り返し敷き詰められます。

aboutme_04.jpg

Biographyの設定

avatarを登録すると名前の下に画像が表示されます。これはなしでもOKです。

名前と自己紹介は登録時に入力していますが、ここでいつでも編集できます。また「Headline」に入力すると名前の下に表示されます。

aboutme_05.jpg

Colorの設定

ここでは背景色とプロフィールエリアの透明度、各テキストの色を設定します。

aboutme_06.jpg

Fontの設定

ここで各テキストのフォントとサイズを設定します。
※まだ、日本語フォントには対応していないようなので設定できるのは欧文のみです。

aboutme_07.jpg

外部サービスの設定

About.meではTwitterやFacebookなどとの連携や任意のURLへのリンクを表示できます。

aboutme_08.jpg

「Add A Service」をクリックすると下の様なウィンドウが表示されるので連携したいものがあれば選択します。

aboutme_09.jpg

これで設定は完了です。各入力項目をまとめると以下のようになります。

aboutme_11.jpg

作成したプロフィールページはこちら

ここで作っておくとなにかと便利ですね。ソーシャルでもプロフィールから職業や趣味の見えない人はなかなか接触しづらい部分もあると思うので、できる範囲で自己紹介のページをつくっておくといいでしょう。あとは定期的な更新も大事ですね。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. WEB制作関連

    必ず入れておきたいポピュラーなフリーフォント30選

    どこかで見たことのあるあのフォントを含め、何かと重宝しそうなフリーフォ…

  2. WEB制作関連

    特化したテーマのWEBデザインギャラリー7選+1

    昨日に引き続いてWEBデザインギャラリーのまとめです。今回はECサイト…

  3. WEB制作関連

    円形を効果的に使用したWEBデザイン50個

    WEBデザインはコーディングを含めグリッドをベースに考えることが多いと…

  4. WEB制作関連

    jQuery+Ajaxで実装するファイルアップローダー

    jQueryを利用したファイルアップローダーのまとめです。 (…

  5. WEB制作関連

    Webサイトをレイヤーに分けて保存できる「Page Layers」

    久々の更新になってしまいましたがおもしろいMac Appを見つけたので…

  6. WEB制作関連

    X’MASにぴったりなPhotoshopのレイヤースタイル

    クリスマスにぴったりなゴールドがお洒落なPhotoshopのレイヤース…

  1. 話題・トレンド

    思わずひきこまれそうな雨をテーマにした35の写真
  2. iPhone

    ホームボタンを使わずにiPhoneを使用する方法
  3. Design Items

    便利でエコなButter Better!!
  4. WEBディレクターズマニュアル

    ツールジプシーの果てに。
  5. WEB制作関連

    jQuery+CSSで実現する効果的な演出20選
PAGE TOP
Top