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

geocitiesからXreaに引っ越し

2019/2/19 あとりえ「パ・そ・ぼ」のWebサイト 目次ページ(サイトメニュー)は、

  Yahoo! geocities から Xrea(Free) に引っ越しました。

 

CMなしのすっきりしたページは、スマホで見ると感激です!

長期間 お世話になった「Yahoo!ジオシティーズ」は、2019年3月でサービス終了です。

無料キャンペーン利用して、xrea free に 引っ越しました!

xrea freeは、「永年CM無し」が魅力! 

(SSL対応と書かれていましたが当該コースは 非対応とのこと 残念・・・)

 

2019年2月9日より 内容も少し整理して、APNGファイルや MIDファイルの 紹介を追加しています。

 

 これからも よろしくお願いします。 (=^▽^=)

 

あとりえ「パ・そ・ぼ」のホームページ(@Nifty)は、これまで通り  http://pasobo.a.la9.jp/ です。

 

また (2018年4月 リニューアルした My Jimdoページ(ここ)も ごらんくださいね。

 

あとりえ「パ・そ・ぼ」コーナー http://pasobo2002.jimdo.com/

 

 

皆さん、あたらいWeb サイトへ ぜひ遊びに来てね!  

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

  http://pasobo.g2.xrea.com/ 

 

 

3月の風物詩と花暦

  

  2019年 3月

 

  寒さも緩んできました。

  桃の節句、ひな祭り。

  ホワイトデー

  月末には、桜の便りも。

  

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

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

 

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

 

 



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

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

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

 

3月の花暦 マツムシソウ


JimdoブログのURLがタイトルと違う

Webサイトのページをブラウザで見ると、一番上のタブにタイトルが表示されています。

その下に URL が 例えば 「https://timothy-sarah.jimdo.com/」のように 表示されています。

 

Jimdo のブログの場合は、URLが自動で作成されるので、全く気にしていなかったんですが、

タイトルと URL が違っているのを発見しました。

それというのも、英数字の並んだURLが、一部 日本語表記になっていて 初めて気づいたわけです。

 

違っている原因は、

ページの作成時 別の文字を書いていて、その文字がURLに採用され、

その後の 「記事の書き換えはURLに反映されていない」 ということのようです。

 

手動で URLを変更できるので やってみました。

  
  

 

他の Jimdoブログページにも 同様のことがあるかもしれません。

気づいたら、上記を参考に 修正しましょう! 

まずは メモ帳に 修正っしたい新しいURLを 書いてから コピペしたほうが 間違いが少ないです。

 

もう一つの Jimdoページ 「キュートな野鳥たち」にはたくさんの Jimdoブログページがあります。

チェックするだけでも 気が遠くなりそう o(*'o'*)o ~~

 

以下 作業の様子です。

 

 1)タイトル と URL の 日本語表記が

 違っています。

 

 どうして?

 

 

2)ブログ 編集画面

 

ブログ「詳細設定」パネルを開き

  URLを 手動で 書き換えることができます。

ブログのURLは自動的に作成されます。任意のURLにしたい場合はここで変更します。すでにSNSなどへ投稿されているURLからはアクセスできなくなりますので留意ください。

URLを決めるには、うまくいっているページを参考にしましょう。

見本 例 

「2004-04-12-絵本-ティモシーとサラの絵本-9-なないろのキャンディー」

 

 

 

 

 3)修正しました。

 

 2007-02-絵本-ティモシーとサラの絵本-10-ひなぎくひめのおはなし

 

 従来の 英数文字表示では、

 https://timothy-sarah.jimdo.com/%E3%83%86%E3%82%A3%E3%83%A2%E3%82%B7%E3%83%BC%E3%81%A8%E3%82%B5%E3%83%A9%E3%81%AE%E5%AE%B6%E6%97%8F%E3%82%84%E5%8F%8B%E9%81%94/

 

以下 参考ページ

https://timothy-sarah.jimdo.com/2019/02/06/jimdoブログのタイトルとurlのこと/

 


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ブログ「パそぼとベルルのあれこれフリーク」

 

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

 



2017/1/6

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



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