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


トップページの例 A


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

 

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

本文部分を、横に区切った部分ごとに 2~3列にカラム分けしています。

 

この例の特徴

 

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

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

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

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

 

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

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

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

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

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

 

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

   それぞれの部分でカラム幅を調性できるので、柔軟なデザインが可能です。

 

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

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

 

トップページに多くの内容を盛り込むポイントは、

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

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

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

 

上下スクロールは必要ですが、クリックでのページ移動が少なくてすみます。

 

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

 

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

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

 

更に、上部にイラスト付きのメニューの要望があったので、

 メインメニューと同じメニューをサンプルとして作りました。

画像つきメニューの例
画像つきメニューの例

 

 

 

 

 

ここで使っている画像は、サンプルなので 統一性はありません。

実際は文字だけの画像、バナー風、イラストなどで統一しましょう。

全ページに、このメニューを使ってください。

 

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

使っているJimdoの項目

 

例A 本文

・ タイトル

・ 文章  ・ 写真つき文章

・ カラム ・ 表

・ Jimdoのブログ

・ ウィジット

 

左サイドバー

・ 文章  ・ 写真つき文章

・ ウィジット

・ Twitter  ・ Facebook

 



Jimdoで作ってみよう

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

 

 初めての方でも、Jimdoなら、簡単にできます。

 最初に、サイトの目的、見て欲しい人(ターゲット)をはっきりさせましょう。

 

 出来上がってからの、更新が重要です。

 

Facebook、Twitterなどと連携して、常に新しい情報を!

 


トップページのデザイン

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

今回の条件は、

・ 左サイドバー

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

・ 2カラム

・ すっきり

おすすめの本

 2017/1/6

ウィジェットは無効にしました。

2016/12/24
Jimdoの変更に伴い、ウィジェットが表示できなくなっています
修正はこれから行いますので しばらくお待ちください。 m(__)m
詳しくはこちら → 

HTTPS、SSLサーバー証明書の対応ついて 



これは、すっきり 左サイドバー

色は変更できないらしい。

第一候補

トップに太いライン

後は、F4081と同じ

だが、印象はずいぶん違う。

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

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

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

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

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

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

 


サイドバーのメリハリがいい。

サイドバーがおしゃれ

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

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

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

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

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

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


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

コンテンツ

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

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

 

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

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

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

 

Jimdoでは、簡単にコンテンツを追加できます。

自分のアカウントや興味のあるFacebook、Twitterを表示さましょう。

ブログパーツも、サイドバーや本文中に取り込むことができます。

 

キュートな野鳥たち
キュートな野鳥たち
あとりえ「パ・そ・ぼ」のWebページへようこそ!
あとりえ「パ・そ・ぼ」のWebページへようこそ!

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

Jimdo Meetup vol.37 のお知らせ

Jimdoのサイトは、昨年レスポンシブ対応になって、モバイルからのアクセスにも ばっちり対応していると思ったけれど・・・。
Jimdo Meetup で そのことがレクチャーされます。

[3/21火] Jimdo Meetup vol.37 Jimdo Events
2017-03-21(火)19:00 - 21:00
ニフティ株式会社(新宿)
 〒169-8333 東京都新宿区北新宿2-21-1 新宿フロントタワー 18F

イベント内容
Jimdo Meetup vol.37 今回のテーマは
「検索判定がスマホ優先に!?スマートフォン時代に大事なサイト作りのコツ」

近年のスマートフォンの普及、利用者の増加に伴い、ウェブサイトもパソコンだけでなく、モバイルで見た時のわかりやすさなどの重要性が高まっています。
さらに、Googleが、検索結果の表示に関して、モバイル対応サイトを重要視するという「モバイルファースト インデックス」という仕組みの導入を発表しました。SEOの面からも今、モバイルを意識したサイト作りが注目されています。
そこで今回は下記項目を中心に、具体的にはどのようにすればより訪問者にわかりやすく、Googleからも評価されるサイトになるのかを、しっかりとお伝えします!
 ・ Googleモバイルファースト インデックスとはそもそもどういうことなのか?
 ・ データから分析する モバイルページで大事なポイント
 ・ 見やすい、使いやすいモバイルページをJimdoで作成する時のポイント
 
Jimdoはレスポンシブデザインを標準としているので、モバイルからのアクセスにも自動で対応しています。

ですが中身を作成や更新する時に、気をつけるべきポイントをきちんと知っていれば、より効果的なサイト作りにつながります!
ぜひ一緒にしっかりと学びませんか?
 

2017年初めのメンテナンス作業記録

2017/1/6

 昨年末からの Jimdo の変更に 対応して行った対策

リンクURL リンク先のページURLは、HTTPのままで問題なし

  

◆ 全頁のカギのマークに △!がついていないか確認。OK

 修正 flicker のウィジェット 削除 OK

 トップページのデザイン A、B  ウィジェットをすべて削除 OK

 様々なコンテンツ テスト 音声 <== 音声ファイルはJimdoにUPできないので仕方がない。

                 その他 のインラインフレームは削除 OK

 リンク りんくいろいろ Amazonの本の紹介を削除 OK

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

 

  HTTPS で安全   HTTPSで安全は不確か  一般的なHTTPサイト

 

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

様々なコンテンツ Jimdoのコンテンツ

  地図 1ポイント表示の地図になった。 (gooleMyマップの作成はしない)

 

サイドバー

◆  FC2 アクセスカウンターを付けた

◆   フェイスブック 「いいね」が 0 を 復元

 

・ Jimdoの変化に対応しなくては 2016/12/24

 ・ 地図のポイントが消えたなんて! 2016/12/24

 

◆ 次に 重要メールの作業をしよう。

 【重要】HTTPS対応に伴う Google Search Console (Googleウェブマスターツール)の設定のご案内

 Jimdo では常時SSL 対応のために、http:// から始まる URL でウェブサイトにアクセスすると自動的に https:// から始まる URL にアクセスするように設定をしております。

 

この変更に伴い、お持ちのウェブサイトがHTTPSで稼働していることを Google 側に検知させるよう、下記の実施をお願いいたします。

  •  Google Search Console プロパティの追加
  • XML サイトマップの追加
  • Fetch as Google インデックスの送信

  ・ Google Search Console の再設定方法

 ・ Google Search ConsoleとJimdoの繋げ方

 よくわからなかったが 指示通り 行った。

 


Jimdoの変化に対応しなくては

2016/12/24

クリスマスだからと 友人のJimdoページを見たら カウンターの数値が消えていた。

もう一つの jimdoサイト (あとりえ「パ・そ・ぼ」コーナー)を見るとやはり消えている!

 

その後、ここの My本棚 ウィジェットが表示していなくて、修正しようとしたら

エラーメッセージが !!(>д<)ノ

 

それで、「<重要>すべてのJimdoサイトがHTTPS対応になります」

というメールが来ていたことを思い出しました。

 『嬉しいニュースのお知らせです。』 という出だしだったので 深く考えていなかったが。

 

詳細は → <HTTPS>すべてのJimdoサイトのセキュリティを強化しました

 

それによると、

・カスタマイズしている方はご確認ください


  • 手動で[ヘッダー編集 ]や 各項目の[HTML編集]へ記述を行なっている場合
  • 外部サービスを[ウィジェット/HTML ]で利用している場合

表示するページ内に[http://]ではじまる項目がある場合、該当ページはHTTPS対応にはなりません。HTMLの編集で[http://]からはじまるコードを手動で入力している場合や、HTTPS未対応の外部サービスを利用しているページは、お客様ご自身で [https://]  へ記述を変更するか、もしくは別の外部サービスを利用する必要があります。該当する方はアドレスバーにエラーメッセージが表示されますので、以下のサポートセンターで詳細を確認しながら、記述の変更をお願いします。

 

 → HTTPS、SSLサーバー証明書の対応ついて

 

[HTML編集]や 外部サービスを[ウィジェット/HTML ]の利用をしているので、

これから 修正作業をしなくてはいけない。

 暮だというのに、がっくり。

 

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

 

まずは、修正箇所をリストアップ

HTTPS未対応のサービスは、乗り換えも考えなくては。

のんびりやりましょう!

 

 12/24 My本棚ウィジェット(メディアマーカー) 

     [https://]  へ記述を変更しても 効果なし 

 

未対応

 フェイスブック 「いいね」が 0

 カウンター

 地図

 ウィジェット

 

2016/12/24

それにしても、Jimdo ページを表示するまで ものすごく時間がかかる!

これじゃぁ、修正もできない。 何とかして!

 


地図のポイントが消えた

2016/12/24

「Googleマップのコンテンツが新しくなりました」

 

というお知らせが出ていたけれど・・・、

まさかこれまで地図にポイントしていた地点が消えてしまうとは!

Googleマップのほかに、ポイントした場所の情報が一覧で表示されていたのだが、

それも消えている。

せめて 場所のテキスト情報でも残っていれば 新しいマップに変更もしやすかったのに。

もう、やる気は失せてしまった・・・。

 

こういうサービスに たくさんの情報を盛り込んで時間をかけていいページを作ろうとするのは 無駄なことのようで寂しい・・・。

 

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


「Googleマップのコンテンツが新しくなりました」
Jimdoサイト内に地図を設置する「Googleマップ」コンテンツを、よりシンプルに、使いやすく機能を見直しました。

サイトに訪れた方はGoogleマップ上の「ルート」や「拡大地図を表示」をクリックすると「Googleマップ」に遷移することができ、より簡単に場所を確認することができるようになりました。

※機能の見直しに伴い、これまで提供していたいくつかの機能は提供終了となりました。
新しい「Googleマップ」コンテンツの詳細についてはサポートセンターをご覧ください。
 → Googleマップ


インラインフレームが表示していない

2016/12/24 

「最新情報」ページの中ほどの『あとりえ「パ・そ・ぼ」の最新情報』ですが、

 なぜか インラインフレーム要素 ( iframe )  が、表示していない。!!(>д<)ノ

このページは、あまりチェックしていなかったので いつからなのかは 不明。

作成したのは、2016年になってからだと思う。

 使えない HTML 要素なら 初めから警告してくれればいいし、仕様が変わったなら告知してほしい。

 どこかに、Jimdoでの HTML利用 可不可が書かれた最新ページ あるのかしら?

 

そう思って調べたら、Jimdo からメールが届いていたのが、この件だったようです。

Jimdoの変更に伴い、HTMLやウィジェットが表示できなくなっています
修正はこれから行いますので しばらくお待ちください。 m(__)m
詳しくはこちら → HTTPS、SSLサーバー証明書の対応ついて 



2017/1/6 ブログ「あとりえ「パ・そ・ぼ」のITノート」は、 休止中なので ウィジェットは 削除しました。


 

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