あとりえ「パ・そ・ぼ」コーナー ★ Jimdoで作ろう、ステキなページ


トップページの例 B


トップページの例 デザインB

 

トップページに多くの内容を盛り込むデザインです。

本文部分を、縦にカラムで2分割、それぞれを 横に区切っています。

 

この例の特徴

 

・ トップページに、多くの情報を載せるデザイン

   トップページに、サイトの概要と最新情報を載せる例です。

   サイトを訪れた人がこのページだけで、情報を得ることができます。

   上下のスクロールが多くなりますが、クリック移動は少なくてすみます。

 

・ 上部に画像つきメニューを置いたこと。

   Jimdoのテンプレートの左サイドバーのメニューとダブっています。

   Jimdoの別デザイン 上部に横にメニューがあるタイプなら、

    メニュー直下に画像を並べることができるかもしれません。

    まだ、試していませんが・・・。

 

・ カラムで縦割りにした本文それぞれを横に区切ったこと。

   右サイドバーが有るようなデザインです。

   それぞれの部分でカラム幅は調節できません。 

   縦には柔軟なデザインが可能です。

 

・ Jimdoのブログ機能の記事を 下部にピックアップして掲載。

   これは、カラム表示はできませんし、文字サイズなども既定のままです。

 

 

トップページに、多くの情報を載せるデザインのポイントは、

・ トップページだけで、サイトの内容を一覧できること

・ サイトの更新した部分がはっきりわかること

・ 新しい情報は、このページに集約していること

 

Jimdoでは、全ページ共通のサイドバーがありますので、あとの部分を縦2カラムにわけて使います。

 

このデザインでは、左メニューのテンプレートを採用。 

 メニューとサブメニューが左上にまとまっているのが使いやすい。

 更に、上部にイラスト付きのメニューの要望があったので、メインメニューと同じ物を作りました。

 

本文部分は、縦にカラムで2分割、それぞれを 横に区切っています。

 

 


Jimdoで作ってみよう

Jimdoでホームページ(Webサイト)を作ってみましょう!

 

あとりえ「パ・そ・ぼ」で、実習中です。

 

こちらもどうぞ → キュートな野鳥たち

---------------------------------------------------------------

トップページのデザイン

まずは、レイアウトを選びます。

今回の条件は、

・ 左サイドバー

・ メインメニューの下にサブメニューが表示される

・ 2カラム

・ すっきり


人間工学的に言うと、視線はZで移動します。トップ左上にサイトのタイトルを持ってきてオリジナル画像(ロゴ風)にしましょう。

サイドバーは、右か左かは好き好きです。

マウスを右手で持っているので、右のほうが近いし、画面を横切らないのでいいかもしれません。

今回は、試しに左にサイドバーをおいてみました。

ちなみに私のブログでは、右サイドバーが多いですね。

ホームページは、左にメニューがあります。

 

 

 

 

 

これは、すっきり 左サイドバー
色は変更できないらしい。
第一候補です。


メニューの構成

 

メニューの構成は重要です。

 

従来のサイト作成では、ページの配置を変えるとリンクを貼り替える作業が大変でした。

Jimdoのような「CMS」システムでは、それがいとも簡単にできるます。

メニューの前後や上下移動、表示・非表示が簡単に変更でき、即ビジュアルで確認できます。

納得がいくまで、調整しましょう!

消さずに非表示にして置けるので、作業メモを書くページにも使えます。

 


コンテンツ

 

 

コンテンツの例

 

キュートな野鳥たち

 

 

TOPページには、どんなコンテンツを載せればいいでしょうか?

Topページはすっきりしてページのイメージを伝えればいいと考える人もいれば、目次(メニュー)の役割が主のもの、TOPページにすべてをてんこ盛りにして多くの情報を伝えたいと考える人もいます。

 

ただし、TOPページにFlash画像だけ、それもスキップボタン無しは、よくありません。

見る側は、散々待たされた挙句、見たい内容があまりなかったら 2度と来ないでしょう。

映画の公式ページはこのタイプも多いけれど、スキップできるようになっています。

 

主にメニューのページの例

 あとりえ「パ・そ・ぼ」の Webページへようこそ!

トップページの例B
トップページの例B

あとりえ「パ・そ・ぼ」のWebページへようこそ!
あとりえ「パ・そ・ぼ」のWebページへようこそ!



以上では、本文を2カラムに分けて作ってみました。左サイドバーと合わせると 3カラムです。

 

以下は、カラムわけにしていないコンテンツです。

 

Jimdo利用メモ

クリスマス飾りやイルミネーション

早くも11月から街を彩る様々なイルミネーション。

クリスマスツリーやデコレーションも楽しいですね!

 

今年(2021年)も、お出かけ自粛。

これまで NHKホールや代々木公園、美術館めぐりなどで見つけたクリスマス飾りをどうぞ!

 

ブログもご覧ください 

   → これまでのツリーの飾りつけと出来上がり ~ ベルルのお絵かき・ふりーく)

   → イルミネーションの飾りつけ ~ Niwa niha Hana (庭には花)

   → クリスマス ~ パそぼとベルルのあれこれフリーク

 


12月の風物詩と花暦:2021

  

  2021年 12月

 

 12月といえば、毎年飾り付けている

 クリスマスツリー

 

  → これまでのツリーの飾りつけと出来上がり

 

 

  来年のカレンダーを作ろう!

 

 大掃除!も 頑張ろうね

 

 



 

今月のテーマ ~ オリジナルの年賀状を 作りましょう!

おしゃれな X'masカードを作ってみませんか。

オリジナルの年賀状を 作りましょう。 住所録から 宛名面が簡単に!
文面は デジカメ写真やイラストで。 アイデアが勝負 

 

12月の花暦 シクラメン (篝火花)


カラフルな秋をスケッチ

 

輝く銀杏並木、風に舞い落ちる色とりどりの木々の葉。

 ユニークな木の実たち。

写真に撮ったり、お絵描きしたり。

 

オリジナルの絵はこちらをみてね。

  ⇒ 紅葉やドングリシリーズ 2008 ~ Myブログ「ベルルのお絵かき・ふりーく」

カラフルな葉の四季の写真はこちら
 ⇒ 色づいた葉 ~ Myブログ「散歩道の野草と風」
 ⇒ 落ちた実や花・葉 ~ Myブログ「散歩道の野草と風」

 

10/31 ハロウィンを遊ぼう

 10月は、ハロウィンの季節

 

         おうちでハロウィン2021

 

 今年は、お家で楽しく過ごしましょう!

 かぼちゃのお料理、作ってみませんか。

 

公園などの ディスプレイ、

これまでの写真をピックアップしました。

 

こちらもみてね
 ⇒ Myブログ:ハロウィン
・ 毎年の「ハロウィン」の記事 ~ Myブログ「ベルルのお絵かき・ふりーく」
・ 10/31 ハロウィン!  ~ Myブログ「ベルルの気ままなブログ」
・ Myブログ:ハロウィンだ!かぼちゃで遊ぼう
・ Myブログ:「ハロウィンにかぼちゃのデザートを作ろう!」

 

まとめです。

 → ハロウィン ~ パそぼとベルルのあれこれフリーク

 → ハロウィン ~ ベルルのお絵かき・ふりーく

 → ハロウィン ~ ベルルの欲しいなブログ

 

ハロウイーン(Halloween)は、キリスト教の 諸聖人の日(万聖節)の前晩(10月31日)に行われる伝統行事。

参考 フリー百科事典『ウィキペディア(Wikipedia)』 → ハロウィン万聖節(諸聖人の日) 

(ハロウィン ハロウィーン ハロウイン ハロウイーン Halloween Hallowe'en)

 


秋の七草

秋の七草 全部 言えますか?

 

■ハギ・キキョウ / クズ・フジバカマ / オミナエシ / オバナ・ナデシコ / 

 

秋の七草 これまでの写真を、並べてみました。 萩(ハギ)  2010年10月24日

 

 

キキョウ 桔梗  2012年9月1日

 

 

クズ(葛) 2009年8月25日

 

 

フジバカマ 藤袴 ⇒ 2007年10月20日

 

 

オミナエシ(女郎花) ⇒ 浜離宮恩賜庭園 2010/10/17

 

 

オバナ 尾花 ススキ  2011年10月7日

 

 

ナデシコ 撫子  2009年9月24日

 

 

    ♪ ---- ♪ ---- ♪ ---- ♪

 

こちらも見てね!  

⇒ 秋の七草 ~ Myブログ「Niwa niha Hana」  

⇒ 秋の七草 ~ Myブログ「散歩道の野草と風」

 

春の七草 は、 ♪ セリ · ナズナ · ゴギョウ · ハコベラ · ホトケノザ・ スズナ · スズシロ 

春の七草  

⇒ 春の七草 ~ Myブログ「Niwa niha Hana」  

⇒ 春の七草 ~ Myブログ「散歩道の野草と風」

 

2017/1/6

flicker のウィジェットは削除しました。



あとりえ「パ・そ・ぼ」コーナー ★ Jimdoで作ろう、ステキなページ