2015年10月25日日曜日

グーぺでプロフィール紹介ページを作る方法




グーぺで、

スタッフ紹介ページや店長などのプロフィール紹介ページを作るのに、

自分はフリーページで作成した。


写真付きで紹介ページを作成する場合は、

”フォトアルバム更新”のところで作成すれば代用できる。


ただ、フォトアルバムでプロフィール紹介ページを作成しようとすると、

スマホの表示は問題ないが、

PCのフォトアルバムの1ページ目の写真は、小さいサイズで表示され、

それぞれの写真をクリックすると、大きく表示される。


自分は、PCのフォトアルバムの1ページ目の写真が小さくて見づらく、

そこがとても気になったので、フリーページを使って作成することにした。


グーぺでプロフィール紹介ページを作る方法


ここでは、プロフィール紹介を写真付きで表示する方法を書いておく。


プロフィール紹介ページに載せたい写真は、

あらかじめ、グーぺの管理画面、ホームページ設定の中の、

”画像アップロード”で写真をアップロードしておく。


この時、ブラウザがchromeだと画像がうまくアップロードされず、

ブラウザがエクスプローラだとアップロードできた。


もし、普段chromeを利用しているのであれば、

エクスプローラからアップロードすることをおすすめします。


画像のアップロードができたら、”フリーページ更新”を開く。



”新規作成”タブを開き、



”ページの内容”の中の、下段の右の方の”テンプレート”をクリックする。





上のように”テンプレートの挿入”画面が開くので、

テンプレート名で、自分の好きなプロフィールの写真の位置を選択して

右下”OK”をクリックする。

このテンプレートはいくつでも挿入可能。



上の画像のように、

上段の眼のアイコンの左側の”文章の区切りを点線で表示”をクリックすると、

プロフィールの文章部分の作成がしやすくなる。


左側の豚の画像の部分をクリックすると、豚の画像部分の色が変わる。

その状態で、下段の”画像”アイコンをクリックして、

先ほどアップロードした画像を選択すれば、画像を貼りつけられる。

眼のアイコンでプレビューが見られるので、それを見ながら作成すると良い。


グーぺでスマホ版プロフィール紹介ページを作る方法


グーぺのテンプレートのデザインで、

スマホ対応のマークのデザインを選択している場合は、

スマホ表示もきれいに表示される場合が多いが、

スマホ対応されていないデザインのテンプレートを使用している場合、

上記のようなやり方で、プロフィールページを作成すると、

スマホからの表示が、非常に見づらい状態となった。


その場合、スマホ表示用に別にプロフィール紹介ページを作成する。




先ほど、操作した”ページ内容”の2行下に

”モバイル用簡易ページ内容”の文章をクリックすると、

上の画像のようなページが開くので、そこから作成する。


モバイルでの表示は、こちらで入力した内容が優先される。


”画像タグ”をクリックして、アップロードした画像を選択すれば、

画像表示に必要なソースコードが貼られるようになっている。

作成例


<img src="http://goope.jp/goope/*****/*****************_m.jpg" /><br/>
<font size="5">ここに名前</font><br/>





上のコードに、

”ここに名前”の部分に名前を入力すれば、写真と名前を表示することができる。

上のコードの、名前の部分のフォントサイズは、5にしてある。


<img src~>の部分が、先ほどの”画像タグ”クリックで挿入される部分。

<br/>は、改行になるので、名前の後にも<br/>をつけてある。


その後に、プロフィールの詳細などを入力して、

<br/>(改行)をつけて上記のコードをコピーすれば、

何人分でもプロフィールを作成することができる。


モバイル用の簡易ページを作成したら保存して、

スマホ等で表示を確認しながら、

細かいところを修正していくと良い。




スポンサーリンク