記事内に商品プロモーションが含まれる場合があります
今回はTumblrというサービスを使っておしゃれなWebポートフォリオサイトを作る方法を解説します。おそらく1〜2時間ほどあれば「写真」や「動画」「イラスト」「アート」などのポートフォリオサイトを作ることができます。是非参考にしてみてください。
例として作るポートフォリオサイト
この記事では例としてこのようなポートフォリオサイトを作っていきます。
実際の作成にかかった所要時間は1.5時間ほどです。この例では写真をのせていますが、イラストやアート画像などのポートフォリオサイトにしても問題なく使えるはずです。
手順3：写真・作品画像をアップロード
次に写真、イラスト、アート作品などポートフォリオに載せたいものをTumblrに全てアップロードします。手順は以下のようになります。
ダッシュボードの上の方にある［画像］をクリックし…
［画像をアップロード］をクリックすると選択ウィンドウが開くので、画像を選びます。
必要に応じて説明を入力して［投稿する］をクリックします。
写真を複数枚選んで一気にアップロードすることもできるのですが、きれいに一覧表示されるように1枚ずつ投稿していくのがおすすめです。面倒ですが、［画像をクリック］⇒［画像を選ぶ］⇒［投稿する］を繰り返しましょう。
なお、説明コメントなどはアップロード後でも簡単に編集ができます（投稿の横に表示される歯車マークをクリックするだけ）。そのためとりあえずコメント無しでアップロードしてしまっても良いかと思います。
ブログページでは、アップロードした画像がこのように一覧で表示されます。
自分のブログページのURLはこちらの手順で調べられます。
動画をアップする場合
ポートフォリオに動画をアップロードすることもできます。［動画］をクリックした後に表示される［動画をアップロード］をクリックすれば、自分のPCから動画をアップロードすることができます。
一方、［ウェブから画像を追加］をクリックすると、URLの入力画面が開きます。ここにURLを貼り付ければ、YouTube動画をサイトに埋め込むことができます。
手順4：ポートフォリオのデザインをカスタマイズ
次にデザインをいろいろとカスタマイズして、よりポートフォリオサイトらしくしましょう。
4-1. カスタマイズページを開く
ブログページの画面右上に「Edit theme」と小さく表示されていると思います。ここをクリックして、テーマの編集画面を開きましょう。
こちらがテーマの編集画面です。左側のサイドバーで各種設定を行います。
右側にはサイトのプレビュー画面が表示され、設定の変更がここに反映されます。
4-2. ヘッダー画像を設定する
サイドバーの［ヘッダ画像］の横にあるアイコンをクリックします。画像の選択ウィンドウが開くので、ポートフォリオで１番見せたい作品画像を選びましょう。
例としてヘッダー画像にアイスランドの写真を選びました。画像を選ぶと、このように自動でプレビュー画面に反映されるはずです。
4-3. アイキャッチタイトルを変更する
画像の上に表示される文字については［タイトル］の部分から変えることができます。
このタイトルがGoogleなどの検索エンジンに認識されるポートフォリオサイト名となるのでご注意ください。日本語でもOKですが、英語の文字にした方がオシャレに見えます。
4-4. タイトル下に説明文を入れる
［説明］欄に入力した文字は、このテーマだとタイトル下に表示されます。
4-5. ヘッダー画像をスライダーにする
[Slider photo ほにゃらら]という欄の右側にあるアイコンをクリックすると、スライダー画像を選ぶことができます。
このテーマでのスライダー画像は「時間が経つと自動で写真が切り替わる」というものです。3枚まで画像を選ぶことができます。
4-6. 背景色を変える
作品一覧の背景色は［Body background color］から変えることができます。
例として黒に近い紺色に変えてみました。濃いめの色を選ぶと全体的に締まった印象になります。作品の雰囲気に合わせて変えましょう。
4-7. 日付とシェアボタンを消す
それぞれの画像の下に投稿日時とシェアボタンが表示されてしまっています。
ポートフォリオなので投稿日時は無くても良さそうですね。投稿日時はサイドバーの［Show date］をオフにすることで消すことができます。
投稿ごとのシェアボタンを消したい場合には［Show Share button］という項目もオフにします。
手順5：詳細設定をする
ここからは少し細かな設定をしていきます。どれも重要なので飛ばさないようにお願いします。
モバイル表示設定
Tumblrの初期設定では、スマホから閲覧したときにTumblr共通のモバイル用のデザインテーマが自動表示されてしまいます。つまり、せっかくインストールしたおしゃれなデザインテーマがスマホ表示だと使われなくなってしまうのです。以下の手順で、スマホ表示でもインストールしたオリジナルテーマが使用されるように設定します。
カスタマイズページのサイドバーを１番下までスクロールして［詳細設定］をクリックします。
このような画面が開きます。この中の［デフォルトのモバイルテーマを使用］をオフにします。
ついでに［Tumblrを広める］もオフにしておきましょう。
[Tumblrを広める]がオフだと、他の人が見たときにこの部分が表示されなくなります。ただし自分用には表示され続けるので注意。
投稿表示数を変更
［ページごとの投稿］から、ページを開いたときに（始めに）読み込まれる作品数を決めることができます。
特にこだわりが無ければ10のままで良いのではないかと思います。 これらの設定ができたら忘れずに右上の［保存］をクリックしましょう。
スマホ表示のポップアップを消す
この状態でスマホ表示からポートフォリオサイトにアクセスすると、上下にこのようなポップアップが表示されてしまいます。これはかなり目障りですよね…。
というわけでサクッと消してしまいましょう。
コードをコピー
以下のコードをまるっとコピーします。
.tmblr-iframe-pushdown {
padding-top: 0!important;}
.tmblr-iframe--app-cta-button {
display: none!important;}
.tmblr-iframe--unified-controls {
height: 0!important;
display: none!important;}
body#dashboard_iframe {
display: none;
}
カスタムCSSに貼付け
［詳細設定］の１番下に［カスタムCSSを追加］という枠があります。ここにさきほどのコードをまるごと貼り付けます。その後［保存］をクリックしましょう。
これでスマホからアクセスしてもポップアップが表示されなくなります。
手順6：プロフィールページを作る
ここまででだいたいサイトが出来上がりましたが、ポートフォリオなので「プロフィールページ」が欲しいですね。というわけでこちらもサクッと作ってしまいましょう。
カスタマイズページのサイドバーの下の方にある［ページの追加］をクリックします。
すると上の画像ような新規ページの作成画面が開きます。下の解説を参考に入力していきましょう。
解説
- ここはオンのままにしておきます。ポートフォリオに「プロフィールページへのリンク」が表示されるようになります。
- プロフィールページのURLを自由に決めることができます。英数字を使うようにしましょう。
- プロフィールページのタイトルを入力します。
- プロフィール本文を書きます。カメラアイコンをクリックすれば、画像を挿入することもできます。
- ここまで出来たら［プレビューを更新］をクリックします。
プロフィールページがプレビュー表示されます。確認して問題なければ［保存］をクリックします。
ウェブポートフォリオのメニュー（）を開くと、プロフィールへのリンクが作られているのが分かるかと思います。
完成！立派なポートフォリオサイトに
これで完成です。このようにウェブデザインやプログラミングの知識が無くてもサクッとWebポートフォリオサイトを作ることができるのです。
デスクトップ・タブレット表示
ページを開くと下のような画面が開きます。
下にスクロールすると、作品の一覧がグリッド状（格子状）に並びます。最大投稿数を超えた分は下にスクロールすると自動で読み込まれるかと思います。
モバイル（スマホ）表示
モバイル表示の場合、ポートフォリオサイトを開いた瞬間にはヘッダー（スライダー）画像とタイトルだけが見えています。
下にスクロールすると、作品が並んで表示されます。メニューからはプロフィールページなどに飛ぶことができます。
このようにTumblrを使えば、簡単にWebポートフォリオサイトが作れちゃうのです。もっと細かくカスタマイズしたいという方には「デザイニング・タンブラー」という本が参考になるはずです。Tumblrのデザインカスタマイズのノウハウが詰まっている本です。
