素人がtumblrでコーポレートサイト的HPを作った話
どうも。
僕はHTML、CSS、よくわかってません。bodyとかbrとか言葉だけ聞いたことがある程度。CSSに至っては、さっぱり。
ある日、会社のHPを放置し過ぎだろうということになり、HPを作りなおそうということになりました。僕らは従業員１０人ほどの小さな会社。HPをどっかの会社に作ってもらったは良いけど、コーディングの知識を持ったスタッフも居ないので、そのまま放置し、今に至ります。
で作り直すにあたり、ポイントは
- 低価格
- 更新しやすさ
で、白羽の矢がたったのが僕なのですが、所詮はてなブログやSNSをやっている程度の知識なので、どうやってHPを創るか悩んだわけです。でDreamWeaverとか見ただけで、吐き気がするので、簡単にHPっぽいサイト作れるサービスを調べました。候補として、
（１）wordpress
（２）tumblr
の２つ。で（２）を選んだのですが、（１）は、そうは言っても難しいのでは...と思ったからです（笑）
tumblrは一応かじって、リブログする程度でした。ただ、独自ドメインも対応しているのと、写真を主に取り扱うのにあたり、サーバー容量に限度がないのは嬉しいからです。
tumblr素人さんはコチラをどうぞ↓
Instagramの写真をtumblrにまとめる方法 | nanapi [ナナピ]
ブログにパスワードロックを掛けれる..が注意！
ちなみにtumblrでは、ブログにパスワードロックをかけることが出来ます。ですが、注意点がひとつ！
最初に作った「１つ目」のブログにはパスワードロックを掛けられない！！
ということです。２つ目以降のブログにパスワードロックを掛けられます。なので、１つ目のブログを本番用にすると作り途中もオープンな状態で進める羽目になります。←僕...。
で、問題はコンテンツとデザイン。で、コンテンツはどうにかなりそうだけど、デザインはお手上げです。ということで、プレミアムテーマ（テンプレート）を購入することにしました。やはり無料と有料とでは、デザインのクオリティが違う様です。
で、コーポレートサイトっぽいテーマってことで候補はこの２つ。
まずはこちらの「Blink」というテーマ。
オシャレじゃございませんか。写真スタジオを運営している会社としては、スライドショーも魅力的。アイコンもオシャレ。レスポンシブデザインなので、スマホからの閲覧にも対応しています。
２つ目はこちら
オシャレかつシンプルで、かなり好み。
作りはベーシックなので安心出来るデザインでもありますね。
で結局（１）を選択。スライドショーが好みなのと、デザインにインパクトがあったからです。
購入は簡単です。「設定ボタン」を押してクレジットカード情報を入力するだけ。
間違って違うブログにプレミアムテーマを設定した！
で、ここで問題発生！間違って、一つ目に作ったブログ、すなわちパスワードロックが掛けられない方のブログに有料テーマを設定してしまったのです。有料テーマは１つのブログ対し１つあたりの料金がかかるそうです。で、メールでtumblrに問い合わせたら、翌日に返信が来ました。
プレミアムテーマをあるブログから別のブログへと移すことは可能ですが、 まずはじめに無料のテーマを現在プレミアムテーマを使っているブ ログへインストールする必要があります。その後、 そのブログが無料テーマに変更されたのを確認してから、 こちらのメールに下記の情報を併せて返信ください。
*移動したいプレミアムテーマの名称
*プレミアムテーマが使われていた、元々のブログのURL
*新しくプレミアムテーマを使いたい、ブログのURL
テーマの移動作業が完了しましたらこちらからお知らせいたします。その後、新しいブログのカスタマイズから、 プレミアムテーマをインストールしていただくことができます。
結構面倒くさい。
まとめると、
- 間違えたブログを無料テーマに戻す
- メールでサポートに①移動したいテンプレートの名称 ②元々のブログURL ③移行先のブログURL 以上３つを連絡
- 手続き完了の知らせがサポートより届く
- 自分で有料テーマをインストールする
とのことです。僕は面倒くさいので、そのままパスワードロックのかからない一つ目のブログで作り続けることとしました（笑）
アイコンはアイコン名を打ち込むだけ
ちなみにやりながらページを追加していこう的な無計画でスタート。まずはトップページ。操作は簡単。「カスタマイズ」をクリック。そうするとカスタマイズ画面に移行します。
項目に入力、もしくはスイッチを入れたり切ったりすることで項目の内容と項目自体の表示非表示を設定ができます。
↓こんな感じで反映します
フォントの種類やフォントの色、背景の色等、いろんなカスタマイズが簡単に出来ました。これはそのテーマにもよるんでしょうね。まずは無料テーマを設定して、感覚を掴むと良いと思います。プレミアムテーマは無料テーマに比べて、設定できる項目が多いように思いました。
しかし、使われているSNSなどのアイコン（上の写真のアイコン参照）をどう設定してるのかよくわからず、このテーマのDEMOであるサポートページを調べると、この「Blink」といテーマは「Font Awesome」というシステムを使っているとのことでした。
Font Awesome, the iconic font and CSS toolkit
素人の僕にはよく分かりませんが、特定のコードを打ち込むと、該当する「アイコン」が表示出来るようです。で、それぞれの「icon」の入力画面にアイコン名の文字を打ち込むだけで良いようです。
ちなみにアイコン一覧はコチラ
例えば、comments-oやarchiveと入力すると
真ん中がcomments-oというアイコン、右がarchiveという名前のアイコンが表示されます。テーマには、なんの説明もないので戸惑いましたが、こういうシステムのようです。
ページを追加する（自動まとめページを創る）
これも簡単に出来ます。↓一番下にページ追加のボタンがあります。
で次の３つから選択します
- テーマ準拠デザイン（使っているテーマのデザインでページを追加する）
- カスタムデザイン（自分でhtmlなどを駆使して創る）
- リダイレクト（該当ページにアクセスすると自動で他のページや他のサイトに飛ばす）
で、僕は１と３を駆使して創りました。
ちなみにURLを
◯◯◯◯tumlbr.com/tagged/△△△△
とすると、投稿したものの中で「△△△△」とハッシュタグが
ついた投稿だけが表示されます。簡単に言うとハッシュタグを利用したまとめページを簡単に作れます。
実際に使ったページがこちら↓
http://aliacorporation.tumblr.com/tagged/movie
#movieというタグがついた投稿だけまとめ表示させています。
http://aliacorporation.tumblr.com/tagged/blog
こちらは#blogというタグがついた投稿のみ表示させています。
ちなみに写真のギャラリーは、どうしても必要だったのですが、フォトギャラリーのページ自体は創れても、大量の写真を投稿するとなると、カテゴリ別に整理分類が必要になります。となるとフォトギャラリー内にさらにカテゴリ分類が必要となりますが、この「Blink」テーマは、Menuの項目に子項目を追加することは、容易に出来ませんでした。なのでここで、３のリダイレクトを使います。
フォトギャラリーは、別ブログに自動で飛ばした
Photo Galleryっぽいサイトを探しました。で有料も考えたのですが、意外とこの無料テーマが良かったのでそのまま使うことにしました。
で、さらにこのブログで、さきほどの
◯◯◯◯tumlbr.com/tagged/△△△△
を活用して、写真のカテゴリ別に自動表示するように設定しました。
例えばプロフィール写真は#profile、家族写真の#familyや、のちのち使うであろうハッシュタグとして全身写真の#fullや性別のハッシュタグを付けておきました。
それがこちらのサイト
http://aliagallary.tumblr.com/
すぐに元のメインブログに戻れるように、ページを追加→メニュー表記を「戻る」→リダイレクトで元のURLを設定しておくと良いかと思います。
ちなみに
◯◯◯◯tumlbr.com/archive
とすると勝手に今までの投稿一覧が観れます。ただテーマデザインは無視されます。アーカイブの場合、/tagged/は要らないので注意。
またダッシュボード画面の「人型」アイコンをクリックして「質問を受け付ける」のスイッチを入れると
◯◯◯◯tumlbr.com/ask
で、質問を受け付けるページが簡単に出来ます。
ただ僕は「formmailer」というフォームサービスを利用してるので、さきほどの「２」のカスタムデザインを利用して「Contact」ページを創りました。htmlのコピペです。
コメントを入力出来るようにする
これは超簡単。Disqusという日本ではあまり有名ではないサービスを使います。登録してアカウント名を指定の場所に入れるだけ。
FacebookやGoogle+、Twitterなどのアカウントさえあればコメント出来るようです。使い勝手はまだわかりません。
ただFacebookの埋め込みコメントのようにFacebookのTimelineに反映はしないようです。
さて、こんな感じで出来上がりました。
まだまだ課題も多く、またカスタマイズ出来る範囲も限られてはいるので、若干苦しい部分もありますが、素人としては十分な出来かと思っています。
ちなみに購入したテーマにバグがあって、拙い中学生レベルの英語で問い合わせたら、かなり親切にサポートしてくれ、問題は無事に解決しました。
tumblrの日本での知名度は、まだまだですが、使い方によってはかなり使えると思います！
