あとりえ「パ・そ・ぼ」コーナー ★ 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にTwitterのタイムラインウィジェット差替え

2019/1/15 記

ここの右サイドバー下方にのせていた 「Twitter」タイムラインウィジェットが、

気づいたら機能していません。

 

 

そういえば、Jimdoから「「JimdoにTwitterのタイムラインを掲載してみよう」

という案内が届いていました。

そのときは、「もうやっています!」って 気がい求めなかったけれど、

Twitterの仕様が変わったんでしょうね、表示されなくなっていました・・・。

ウィジェットのコードを差し替える必要があります。

 

参考

ホームページをもっとよくする!Jimdoワンポイント講座

第51回目「JimdoにTwitterのタイムラインを掲載してみよう」

(4)JimdoにTwitterの「タイムライン」を表示させよう

TwitterのタイムラインをJimdoへ表示させたい場合は、

Twitter社が提供している「Publish」という機能を使用します。

 

解説に従って、コードを取得。簡単にできます。(*^_^*)♪

カスタマイズで、高さを指定しないと すごーく長いものができてしまいます。!!(>д<)ノ

 幅220、高さ800と指定。(つぶやき3件程度)にしました。

 

他のブログなどでも、Twitterタイムラインの表示ができなくなっていたら、

同様の作業をしたいと思います。

 

直接 Twitter → https://twilog.org/pasobo もご覧ください。(*^_^*)♪

 


Web本棚mediamarkerの引っ越し先

Web本棚を引っ越しました。

 

最近読んでる本は、FC2ブログ ⇒ あとりえ「パ・そ・ぼ」の本棚とノート

 

2018年まで使っていた「mediamarker」からの引っ越しは、以下のブクログへ

 図書館から借りた本

 ・ IT・PC:koishi-2018の本棚 ~ IT・PC・モバイル・Web・プログラミング関連の本

 ・ 文学・歴史:koishi-2018の本棚 ~ 文学・絵本・歴史・旅行など

 ・ 自然・科学・アート他:koishi-2018の本棚 ~ 上記以外、自然・科学・アート・暮らしなど

 

 木の本棚 ~ 所有している本など

 

 本以外にも PC関連のものや 日常使うものも登録していたので、
Myブログ「ベルルの欲しいなブログ」に新しいカテゴリーを追加して、まとめています。
 ◇聴いた音楽CD(68)
 ◇利用PC・IT関連(36)
 ◇家で使っているもの(30)

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

 

ブクログ IT・PC:koishi-2018の本棚 ~ IT・PC・モバイル・Web・プログラミング関連の本
ブクログ 文学・歴史:koishi-2018の本棚 ~ 文学・絵本・歴史・旅行など
ブクログ 自然・科学・アート他:koishi-2018の本棚 ~ 上記以外、自然・科学・アート・暮らしなど
ブクログ 木の本棚 ~ 所有している本など

 前から使っているブクログ パそぼの2つめの本棚 ~ 読みたい・気になる本を登録しています。

 

キーワード : 本 図書館 読書

2019/1/20で閉鎖されるmediamarker

 

移行先への 引っ越し作業中です。

 FC2ブログと

 ブクログの新しい本棚サイトへ 

 

mediamarkerに書いた本の抜粋と2018年以降の本

  ⇒ Myブログ:あとりえ「パ・そ・ぼ」の本棚とノート

 

mediamarkerでとりあげた本以外の物や音楽 

  ⇒ mediamarkerより ~ Myブログ「ベルルの欲しいなブログ」

 

引っ越し作業について

 ⇒ 『メディアマーカーがサービス終了、どうする?

 ~ Myブログ「パそぼとベルルのあれこれフリーク」

 

どうぞよろしく お願いします。

 


1月の風物詩と花暦

   あけまして

 おめでとうございます。

 

2019 亥年 今年もどうぞよろしく! 

 

 1月は、初詣、おせち

 書初め、初売り 七草粥 ・・・。 

 

 新年会や、お餅つき大会もあります!



明けましておめでとうございます

今年も よろしく!

 

 1月のテーマ  ~ 年賀状と住所録の整理

素敵な年賀状が 届きましたか?
では、地味な作業ですが・・・ 住所録の修正、出し受けのチェック!

寒中見舞いも出しましょう

 

1月の花暦 スイセン


Jimdoアドベントカレンダー2018

Jimdo 恒例の Jimdo アドベントカレンダー 2018

 

ステキなプレゼントが日替わりで当たるんですよ!

 

今年もチャレンジ 。

 

なんと2018年12月4日、当りました! ラッキー (*^_^*)♪  

 

ブラックベリーのスパークリングワイン

「津田農園」 https://www.tsudafarm.com/
12/22に届きました、ありがとうございます。
クリスマスイブに いただきます。(*^_^*)♪
 

mediamarkerから引っ越し:テスト

mediamarkerがサービスを中止すると発表してから、対応策を検討中。

2019/1/20サービス終了 詳細はこちら

 

小さいほうの本棚「木の本棚(kinohondanaのバインダー) を HTMLエクスポートして、

そのまま Jimdoの「ウィジェット」にコピペしてみました。

 → 「木の本棚より」

全部で201冊なので、1ページとしては多すぎますが・・・。

たぶん 2019/1/20 からは、本の表紙画像は 表示されなくなると思います。

本のタイトルからAmazonへのリンクは、大丈夫だといいのですが。

 

同じものを、あとりえ「パ・そ・ぼ」のWebサイトにも作りました。

 

 ⇒ 読書コーナー 「あとりえ「パ・そ・ぼ」:木の本棚より」

 

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

 

メインの本棚:pasoboのバインダー(本棚)については、以下のとおり。

 

本以外は「ベルルの欲しいなブログ」へお引越し中です。

 ◇聴いた音楽CD

 ◇読んだ本

 ◇利用PC・IT関連

 ◇家で使っているもの

 

本は、検討・作業中です。

 



2017/1/6

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



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