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

Jimdoサイトをリニューアル

2018/4/7

4/5に思いついて、このサイト あとりえ「パ・そ・ぼ」コーナーを リニューアルしています。

 

あとりえ「パ・そ・ぼ」には、

 目次風の Yahoo!geocitiesのサイト『あとりえ「パ・そ・ぼ」の Webページへようこそ!』

 メインの @Niftyのサイト 『あとりえ「」へようこそ』

があります。

どちらも、改良を加えながら長く使ってきましたが、

内容やレイアウトは パソコン画面で見るように作っていますので、

最近のスマートフォンでの閲覧にはむいてない個所もでてきました。

また、Flashのサポートが終了したため、Flashページは他の方法に変更する必要もあります。

 

  ここらで心機一転 リニューアルをしてみます。

   目次風ページを、Yahoo!から あとりえ「パ・そ・ぼ」コーナー(Jimdo)に変更です!

 

従来のページは そのまま継続の予定ですが、一部改良します。

 

今回のリニューアルに伴い、他のブロブやSNSなどの、リンクの修正が必要になります。

 たくさんある~~。 がんばります。(*^_^*)♪

 

    ~ ~ ~ ~ ☆ ~ ~ ~ ~ ☆ ~ ~ ~ ~

 

4/7 

・ フッター 基本設定で、「http://pasobo.a.la9.jp/」に変更

・ ページ追加(外部サイトへ直接リンクは、利用不可)

   あとりえ「パ・そ・ぼ」サイトへ

   Myブログたち最新記事

 

4/6 作業開始、「ホーム」をリニューアル

・ 内容をほぼそっくり、ここの「ホーム」にコピーし整形した。

・ メニューの表をカラムにしてみた。

・ 固定部分と 毎月差し替える部分を切り離して作成。

・ カレンダー画像の表示をJimdoのコンテンツを利用するようにやり直した。

 

4/5 準備と計画

 急に思いついて、このサイトを リニューアルすることにしました。

 これまで長年利用してきた Yahoo!サイトは、気に入っていましたが

  数年前から CM表示が2カ所に増えた。

  レイアウトがスマートフォンでは見づらい。

 何とかしなければ!

 内容をほぼそっくり、ここの「ホーム」にコピーし整形しました。

 

 また、メインサイト(@Nifty)も、改良を加えながら長く使っています。

 昨年 Flashがサポートされなくなりました。

 多くの人は、わざわざブラウザの設定変更してまでは閲覧しないでしょう。

 画像のギャラリーは、HTML5とJavaScriptなどで、作り替えてもいいのですが、

 Jimdoサイトで お手軽リニューアルしようと思います。

 


4月の風物詩と花暦

  

  2018年 4月

 

  3月末から一気に桜が開花。

 ソメイヨシノの次は八重桜、

 次々と春の花が楽しめますね。

 

 新しいスタートの季節。

 仕事や勉強、趣味に

 ひとつ成長した自分をめざそう!

 

 

 



4月のテーマ ~ 家計簿・お小遣い帳をつけよう

 

新学期、新生活~! お財布の管理もパソコンでらくらく

地球の自然環境を考えよう! 環境家計簿で、CO2削減!
 子供と一緒に考えよう。 Kakeibo 環境家計簿 for kids

 

4月の花暦 ボタン 4月です! 


Jimdoブログの複製は便利

Jimdoのブログでは、コンテンツを組み合わせて記事を作ることができます。

 

 カラムを使ったコンテンツは、新しく作るのはめんどう。

 

で、すでに作ってあるブログ記事を複製して、作業の手間を省きましょう!

 

<やり方>

左上の編集メニュー から ブログを 選び、

ブログ一覧から 同じレイアウトのブログを選びます。

右端のメニューから複製を選びます。

 

複製したブログ記事の右がわの、編集をクリックすると

ブログの編集画面に切り替わります。

 

内容を新しいものに書き換えましょう。

左の ブログ 基本設定で タイトルを書き

まだ「公開ボタン」左(非公開)で 「保存」

詳細設定で 元記事のブログカテゴリがついているので、確認と修正。

保存します。

次に、右側の 本文や写真の差し替えを行ないます。

 

こまめに 保存をするといいですね。

では、がんばって!

 


3月の風物詩と花暦

  

  2018年 3月

 

  寒さも緩んできました。

  桃の節句、ひな祭り。

  平昌パラリンピック、

   ホワイトデー

  月末には、桜の便りも。

  

 3月は、別れと節目の季節。

 ひとつ成長した自分をめざそう!

 

  2/15~3/3 ひなまつり 
  バーチャル雛飾り☆

 

 



3月のテーマ  ~ 春の旅行計画と旅行アルバム 旅の想い出へ

 
旅行は、計画を立てるときから ワクワクします。 

Webでお得な情報をGetしましょう。
 
帰ったら写真の整理。 かかったお金もチェック!
写真は印刷したり、Webアルバムやブログ旅日記もおすすめ!

 

3月の花暦 ノースポール 3月です! 


2月の風物詩と花暦

 2月の 風物詩

 

  

  2018年 2月

  今年は 連日寒いですね

  2月 といえば

   節分 と 立春

   バレンタインデー

 

 お雛様も準備しなくっちゃ!

 立春から2月中旬に飾るそうです。

 また、二十四節気のひとつ

「雨水(うすい)」2月18日、19日

 に飾るとよいともいわれるとか。

 

 バレンタインデーが終わって

 落ち着いたら、飾りましょう!

 

 2/15~3/3 ひなまつり 
  バーチャル雛飾り☆

 




2月のテーマ ~ 手作りバレンタインデー (お絵かきブログへ)

バレンタインデーのプレゼントは手作りで! ハートをキャッチするカードを作ろう!
レシピを探して 手作りチョコ ⇒ 超簡単チョコレシピ
地球の自然環境を考えたチョコをゲットしよう
【フェアトレード】 商品がおすすめです! ⇒ フェアトレード(公平貿易)とは

 

2月の花暦 クリスマスローズ  2月です!  



2017/1/6

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



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