Flickr連携で写真ギャラリーを作る [プロフサイト編]

Flickr連携で写真ギャラリーを作る [プロフサイト編]
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

本日、smart4meに「Flickr」モジュールが追加されました。
アカウントを入力するだけで、Flickrのsetが自動的にスライドショーになる機能です。

フリック、スワイプの操作ができ、スマホからの閲覧がスムーズ。

ギャラリーが簡単に作れてしまいます!

Flickrモジュールを使ってプロフィールサイトを作ろう!

今回の記事では、
簡素なプロフィールサイトを作りながら、Flickrを連携させたギャラリーページの作り方を説明します。

■まずはラフスケッチ。


smart4meを立ち上げる前に、ざっくりとサイト構成図を書き起こしました。
今回は、このラフ案を元に進めていきたいと思います。

■入れ込む要素はこちら

・トップページ
サイトのタイトル
自己紹介のテキスト
写真(Flickr連携)

・下層ページ (MUSIC)
バックヘッダー(戻るボタンが付いたHeader要素)
好きな音楽アルバムとレビューテキスト

・下層ページ2 (TWEET)
バックヘッダー
つぶやき(Twitter連携)

■事前に準備すること
・Twitterのアカウントを取得 (公開アカウントのみ連携表示が可能です)
・Flickrのアカウントを取得し、写真をアップロード後、いくつか「set」を作成しておきます。

■それでは実際にsmart4meでサイトを作ってみましょう!

ステップ.1
smart4meにログインし、「smart4meを始める」をクリックし、設定画面を起動します。
http://smart4me.net/
(↓smart4meの設定画面です。まだサイトを作っていないので「ページ編集」エリアは空です。)

ステップ.2
右の「パターンの選択」からパターンを選び追加します。

ステップ.3
サイトのタイトルを入れたいので、
「パターンの選択」から「ヘッダー」を選択し、追加します。

「ヘッダー」のテキストを編集、任意のタイトルをつけます。
(今回はプロフィールサイトなので、自分の名前にしました。)

同じように「パターンの選択」から「TextImage」モジュールを追加、
プロフィール画像とテキストを入力します。

テキスト編集機能は、フォントの太さや大きさ、カラーが変更できます。

ステップ.4
次はFlickrのアルバムを連携させます。
(Flickrの写真をsetにまとめ、準備しておきましょう。)

「パターンの選択」から「Flickr」のモジュールを選択します。

Flickrのアカウント名を入力します。
「ページ編集エリア」にユーザー名の入ったモジュールが表示されたら連携完了!


(注意: smart4me設定画面では、連携中のプレビューはされません。エクスポート後にスマートフォンでご確認ください。)

ステップ.5
フッターメニューにアイコンを追加します。
フッターパターンを追加後、ページ編集エリア内をクリックすることで編集ができます。

アイコン一覧の中から、好きなアイコンを選べます。

フッターにアイコンを追加します。

アイコン名は任意の名称へ変更ができます。(英語、日本語どちらでもOK)

これでトップページの要素の入れ込みが完了しました。

ステップ.6
トップページが完成したので、次は下層の「MUSIC」ページの作業へ。
「新規ページ」をクリックし、「MUSIC」という名称のページを作成します。

新しく作ったページは、ページマネージャーで確認できます。

ステップ.7
どんどん要素を入れ込んでいきます。

おすすめアルバムのコンテンツを入れ込みました。

ステップ.8
リンクの設定を行ないましょう。
オプションメニューから「リンクを追加」を選択してクリックします。

リンクマネージャーが表示されます。各リンクはこの画面より設定できます。
(メール、電話、外部リンクなどさまざまなリンクの設定が可能です。)

リンクの設定が完了しました。
(リンクされると、赤いリンクマークが表示されます。)

ステップ.9
下層ページ2を作っていきます。
同じように「新規ページ」をクリックし「Twitter」ページを作成。
「パターンの選択」からTwitterのモジュールをクリックし、アカウントを入力、連携設定を行ないます。

ステップ.10
ページが揃ったので、次はテーマの設定です。
今回は「Black Metal」という真っ黒なデザインを選んでみました。

ステップ.11
プレビューボタンを押し、サイトの動きをチェックしてエクスポート。
サイトが公開されました。

ステップ.12
作ったサイトを実機でも確認してみましょう。

ステップ.13
今回作成したサイトはこんなかんじです。
Flickrを連携させた部分はスライドショー形式のギャラリーになります。



いかがだったでしょうか?
連携機能を使えば、サイトをすばやく立ち上げることができ、とても効率的です。
ぜひ、サイト制作時にご利用ください。

コメントを残す

メールアドレスが公開されることはありません。