あとりえ「パ・そ・ぼ」コーナー ★ 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利用メモ

七夕の短冊でお願い★

 今年も、恒例の七夕さまの 短冊を飾りま~す。

 お願い事を一言どうぞ! 短冊にして笹にぶら下げます。
 
 『願いごとのことば』 は、
以下のブログにコメントでお寄せ下さい。
七夕の笹に短冊を飾り、星に願いを託しましょう 
★☆ 七夕の短冊の飾つけ、できました。 
皆さんのお願いが叶うといいですね 
   
2020年の七夕飾りです。
 
2020Gifアニメ第1段
 
頂いたお願いのコメントは、こちらをみてね! 
 ⇒ 七夕の短冊飾ります ~ Myブログ「ベルルのお絵かき・ふりーく」 
  

7月の風物詩と花暦

  

  2020年 7月

 

  新型コロナウイルス 対応! 

 感染者は絶えないが、自粛から自衛の時代だ。『withコロナ』暮らし方を新しく工夫して、

「アフターコロナ」を快適に!

 

 七夕様の短冊に、

  みんなのお願いごとを飾りましょう。

  →  七夕の短冊飾ります 2020

 

  浴衣に団扇、花火 夏ですね。

 

 今年はおうちで涼しく過ごしましょう

 



7月のテーマ ~ 暑中見舞いを作りましょう。

 
オリジナルの暑中見舞いを 作りましょう!
 
住所録から 宛名面を!
文面はデジカメ写真やイラスト使って、アイデアが勝負 

 

7月の花暦 ペンタス


Jimdoブログに「TOPへ戻る」を追加

2020年4月22日 記

最近では、スマートフォンでWebサイトを見ることが多くなっています。

 

パソコンで見ることを主に作っているこのページでも、

Jimdoのスマートフォン対応機能が活かされて

画面サイズに合わせて表示するようになっています。

 

それでも、実際に見ると ページの移動がわかりにくかったりします。

今回は、Jimdoブログで作成したページに、ナビゲーションをつけました。

 

 また、TOPページには、「メニュー」を書き出しました。

 「 三 の メニュー」と合わせて 活用してください。

 

 

 ♪  --  ♪  --  ♪  --  ♪

 

★ 詳細は 以下のとおりです。

 

このWebサイトでは、各ページの 最上段に

 

『あとりえ「パ・そ・ぼ」コーナー ★ パソコンで遊ぼ』

 

を 表記しているので、メニューを使わなくても TOPページに 戻ることができます。

ページの一番下まで行ったら ページTOP(最上部)へ戻るマークが付いています。

 

パソコンで見る場合は、サイドのメニューを使えば、どのページにも自由に移動することができます。

 

★ スマートフォンでも、ほぼ同じです。

 

ページ最上部に リンク付きのロゴが表示されるので、いつでもTOPページに戻ることができます。

 

ページが長くて下の方に行ったとき、簡単にTOPページに戻ることができるように、

あとりえ「パ・そ・ぼ」コーナー のTOP へ戻る』 を追加してみました。

 

このページにも、この下にあります。

便利に使えますように!

 

ウイルス感染予防は手洗い!

 

  2020年 2月から

  新型コロナウイルスが世界中に広がり始め

  日本でも感染者が出ています。

 

  ・ 感染対策で手洗いが基本なワケと正しい手洗い方法
  → 新型コロナウイルス感染症について

   ・ご家族に新型コロナウイルス感染が疑われる場合

  「家庭内でご注意いただきたいこと ~8つのポイント~ 」
  → 新型コロナウイルス(2019-nCoV)関連情報について ~ 国立感染症研究所

 

   

 ウイルス予防に手洗い       ~ ベルルのお絵かき・ふりーく

 

さらに 3密すべて= ゼロ密を心がけよう。

 

これまで必要と思っていた習慣を見直してみましょう!

もっと安全で時勢にかなった方法で実現できることもあります。

発想の転換も必要ですね。

これからの新しい暮らし方を工夫し、実践していこう。

 

2020/05/29 小池都知事の会見「ウィズ コロナ」宣言が TVで流れています。

 

あとりえのひな祭り

「あとりえ」には、リアルなおひなさまも飾っています。


2020年に仲間になったのは、「折り紙」で作ったお雛様。
「折り紙えほん」で折り紙しよう!
~ Myブログ:あとりえ「パ・そ・ぼ」の本棚とノート



2018年に仲間になったのは、「豆親王雛」。 陶芸教室で 作りました!
 ⇒ 2018/1/21 「陶芸教室:9回目」
~ Myブログ「パそぼとベルルのあれこれフリーク」

めも:2018/02/18 CX2 で撮影



 そして 秘蔵のコレクション!?です。

☆ 「山口の大内人形」 ~ 漆に蒔絵 
  コロンとした形が かわいいです。
  お小遣いの範囲で一番小さいものを買ったような記憶があります。


☆ 「鹿児島のさつま郷土人形 糸びな」 ~
  衣装は紙製ですが豪華な感じ
  図柄は物語絵巻の一こまのようです。
  お顔がイマジネーションをくすぐりませんか? 
  流し雛に使われていたのでしょうね。

めも:2006年に撮影



 → 大内人形について | 長州苑 ・ 大内人形

 → 薩摩糸びな ・ 薩摩糸雛: 鹿児島大学総合研究博物館 から
・ かごしま歴史街道vol.10 - 鹿児島西ロータリークラブ
・ 九州のひなまつり(3) - 薩摩の土人形
 


2017/1/6

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



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