プロフィールサイトを作成しましょう!❷【テンプレートの取得方法】

みーちゃん

プロフィールサイトを作りたいよー。

 

でも、1から作るのは大変。。

 

カッコいいサイトを作りたいんだけど。。

 

どうにか簡単に作れる方法はないのかな??

 

そんな疑問に答える本記事です!

 

こんにちは。いちかわともや(Twitter: @tomochan8282)です。

 

サイトを制作する時、1からコーディングができれば最高です。

 

しかし、初めのうちはテンプレートを使って、それを改造しながら制作をしましょう。

 

テンプレートを使って納品しても、サイトを作りあげた経験は自信になります。

 

テンプレート販売サイトはたくさんありますので、気になるデザインを見つけてみるのも面白いです。

 

クライアントさんとイメージを共有したいときにもテンプレートは役に立ちます。

 

FTPアプリケーションをまだ設定していない方はこちら。↓

 

それでは、テンプレートの取得方法いってみましょう!

 




プロフィールサイトを作成しましょう!❷【テンプレートの取得方法】

テンプレートを検索

 

THEMEWAGON(テーマワゴン)のサイトに行きます。

 

プロフィールサイトを作成したいので、「Profile」と入力して検索をします。

 

 

検索結果が現れます。今回は、こちらの(↑)オレンジ色の無料テンプレート「PROFILE」を使用したいと思います。「PROFILE」をクリックします。

 

テンプレートをダウンロード

 

「PROFILE」の詳細ページが現れます。

 

メールアドレスを入力し、「Get Download Link」をクリックします。

 

 

入力したメールアドレスに、確認メールが届きます。

 

「Click Here to Start Download」をクリックすると、ダウンロードが開始されます。

 

 

ZIPファイルをクリックして解凍しておきます。

 

「profile-master」のフォルダができました。

 

※ZIPファイルをそのままアップロードする方法もありますが、説明を簡単にするため、本記事では扱いません。

 

Cyberduckにアップロード

 

次は「profile-master」のフォルダを、Cyberduckにアップロードしましょう。サーバーをクリックします。

 

 

サーバーが開きますので、「profile-master」のフォルダを、ドラッグしてアップロードします。

 

 

このような画面(↑)になれば成功です。

 

もしエラーになってしまったら、1ファイルずつ正確に移動をさせましょう。

 

それでもエラーになった時は、FTPアクセス制限に問題があることが考えられます。こちらを参考にしてください。

>>参考:ロリポップ!FTPアクセス制限の設定

 

独自ドメインを設定

次は、サイトで使用するドメインを設定します。ロリポップ!より、独自ドメイン設定を開きます。

 

  • 設定する独自ドメイン→プロフィールサイトで使用するドメインを入力
  • 公開(アップロード)フォルダ→「profile-master」を入力

 

今回は、「tooomoya.site」というドメインをプロフィールサイトに使用する前提で説明をします。

 

ご自身のドメインに置き換えて進めてください。

 

「profile-master」は、先ほどCyberduckにアップロードしたフォルダの名称でした。

 

入力が終わったら、「あとで認証する」をクリックします。

 

 

確認画面が出ますので、「設定」をクリックします。

 

 

「ムームードメインコントロールパネル」をクリックします。

 

 

コントロールパネルが開いたら、「tooomoya.site」をクリックします。

 

 

「セットアップ」をクリックしましょう。

 

 

「tooomoya.site」のサービスは、「ロリポップ!」をチェックします。

 

そして、「セットアップ情報変更」をクリックしましょう。これで、独自ドメイン設定は完了です。

 

サイトを確認

 

ブラウザを開き「tooomoya.site」を入力すると、プロフィールサイトが表示されました!

 

さぁ、これでプロフィールサイトの形が整いました。1からコードを入力する必要もなさそうです。

 

そして、無料テンプレートなのにちょっとカッコいい感じです!

 

次は、HTMLとCSSを入力するための、テキストエディタを準備します↓↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA