人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなDiaryのヘッダに皆さんはどのようなものを入れて表示されていらっしゃいますか?

ヘッダに何もいれておらず、サイドバーのほうにいろいろ入りすぎてバランスがうまくとれていません。

アイデア・ご指導、宜しくお願い致します。

●質問者: ???
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:はてな アイデア サイドバー バランス
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● mayumi-m
●40ポイント

手前味噌で恐縮ですが、私は有料オプションの「時計」と、座右の銘を入れています。

「天気・温度テーブル」もヘッダに表示したかったのですが、さすがにごちゃごちゃするのでフッタに入れました。

http://d.hatena.ne.jp/mayumi-m/

◎質問者からの返答

座右の銘をヘッダに入れていらっしゃるのは素敵ですね?!!

天気温度系統、私も入れようと思っていたのですが、きれいに入らずに悩んでおりました。

mayumi-mさんのフッタに、という事気がつきませんでしたので、大変参考になりました。

なるほどなるほど。

回答ありがとうございました。


2 ● くまいみずき
●40ポイント

わたしの場合、

ヘッダ:自サイトや、サブアカウントの日記の紹介

フッタ:参加予定イベントや、自分用のメモ書き

といった形にしています。

サイドバーにはかんたんデザイン設定で設定できる項目以外は入れていません。

ちなみに、サブアカウントはメインアカウントの日記へのリンクだけです。


基本的にヘッダには「見て欲しい情報」や「重要な情報」を置き、

自分用のメモや、そこまで注目しなくてもいい情報などはサイドバーやフッタに入れる方がいいと思いますよ。

あくまで、日記を見てもらうのが目的ですから、その記事がすぐに見られるような形が理想だと思います。


http://d.hatena.ne.jp/

(「見てみたい」と思いましたら、このアドレスの後に「kumaimizuki/」と入れてください)

◎質問者からの返答

頂いた回答文を拝見致しまして、kumaimizukiさんのページにお邪魔させて頂きました。

わかりやすいようにページが表示されていてリンク先へも飛びやすいですね。

フッタに自分用のメモを置くアイデア!!!

なるほどなるほど。

私もその場所に置いてみたいメモやその他がありますので、ご一緒させて頂いても宜しいでしょうか?

回答ありがとうございました。


3 ● ねがい かなみ
●100ポイント

近々、デザインを変更するつもりですが、現況ではこのようになってます。

http://d.hatena.ne.jp/Yuny/

例えば、ご訪問者様への連絡事項を入れています。

展覧会とかに出品する時とかは会期を告知したりしていますね。


それから、カテゴリーのプルダウンメニューですね。

これは、はてなダイアリーヘルプにある「sectioncategoryモジュール」

はてなダイアリーのヘルプ - 日記のカテゴリーを表示する(sectioncategoryモジュール)

<hatena name="sectioncategory" template="dropdown">

でも実現できます。


しかし、私の日記のように、細かい注釈を入れたプルダウンにするには、「デザイン」の「詳細デザイン」の「ヘッダ」を使って、手作業で作る必要があります。

<form method="POST" action="searchdiary">
<p>過去の話題はここから「Go!」</p>
<select name="word">
<option>テーマ別表示へ</option>
<option value="">-----大区分名1-----</option>
<option value="*[カテゴリー1]">****について</option>
<option value="*[カテゴリー2]">****について</option>
<option value="*[カテゴリー3]">****について</option>
<option value="*[カテゴリー4]">****について</option>
<option value="">-----大区分名2-----</option>
<option value="*[カテゴリー5]">****について</option>
<option value="*[カテゴリー6]">****について</option>
<option value="*[カテゴリー7]">****について</option>
<option value="*[カテゴリー8]">****について</option>
</select> 
<input value="Go!" type="submit">
</form>

たとえば、野球とサッカーに関心のある人が、日記を書いていたとしたら、

<form method="POST" action="searchdiary">
<p>過去の話題はここから「Go!」</p>
<select name="word">
<option>テーマ別表示へ</option>
<option value="">-----野球についての話題-----</option>
<option value="*[BS_game]">最近の野球の試合について</option>
<option value="*[ヤンキース松井]">ヤンキースの松井選手について</option>
<option value="*[タイガースふぁん]">阪神タイガースについて</option>
<option value="*[BS_Watch]">野球観戦した時の感想</option>
<option value="">-----サッカーの話題-----</option>
<option value="*[FB_game]">最近のサッカーの試合について</option>
<option value="*[ganbare!J]">Jリーグについて</option>
<option value="*[ヴ神戸]">ヴィッセル神戸について</option>
<option value="*[FB_Watch]">サッカー観戦した時の感想</option>
</select> 
<input value="Go!" type="submit">
</form>

っていう風に書けば、カテゴリ名を本人にしか分からない文字列化していたとしても、他の人にも分かりやすくなります。

sectioncategoryモジュールでは、カテゴリは自動で増えますが、こちらの手入力の場合はカテゴリをその都度増やす必要があります。


あ、松井選手(メジャー試合出場がめでたい!)やその他の球団に付いては別にファンではないですが(お名前お借りしただけです、ファンの方、あしからず!)。


ともあれ、モジュール関連以外は、基本的にhtmlタグで入力して行く必要がありますが、どういうことを実装したいかを考えればいろいろと可能性が出て来ると思いますよ。

◎質問者からの返答

ご丁寧なアドバイスとご指導ありがとうございます。

少しお時間を頂きまして、もう一度ここに返信を記入いたします。

回答をありがとうございました。

=====================================

遅くなりましてすみません。

プルダウンメニューを作ってみました。

まだ途中なのですが・・・

リンクタグを一つずつ記入する必要があるのですよね?

引き続き、手をいれてみますね。

回答ありがとうございました。

=====================================

細かい注釈を入れたプルダウンメニューをヘッダ部分にいれてみました。

メニューは表示されるのですが、項目文字にあわせてボタンをおしてもリンク先にジャンプしていかないので、

ここ数日いろいろ書き直してみていますが、何が不足しているのかわからないでおります。(>_<)

もし、ご迷惑でなければDiaryのほうにお運び頂き書いたタグソースをみてみて下さいませんでしょうか?


4 ● rikuo
●60ポイント

私は、ページ最上部のスペースは閲覧者が始めに目にする要素、と考えて自分のページを印象付けるためにも、イラストを配置するようにしています。

http://d.hatena.ne.jp/rikuo/


そして画像の下に、各種ページへのリンクをアイコンで表現してみました。

これは個人的な好みですが、あまりページ自体の要素を増やしたくない、という意図もあってサイドバーも使わずに このようにしています。また、ちょっとした「遊び」の部分も用意していて、アイコンにカーソルを合わせると、補足説明が表示されるようにしています。

(ただ、ユーザビリティの面では配慮に欠ける構成ですから、その点はちょっと申し訳ないなと感じています)


ヘッダは訪れた人が最初に見る要素ですから、そのページを特徴を表現するためにも、画像に限らず、お薦めのコンテンツや、制作意図などといった最も伝えたいことを載せる、または、全体の雰囲気作りとして内容に合った写真を置く、というのも良いかもしれません。

それと、サイドバーに情報を配置するときには、ヘッダ部分の余白を大きく取ると圧迫感が少なく、全体的なバランスがとれると思います。例えば文章であればマージンなど、画像であれば青空といった空間的に抜きの大きい構図を使う、などですね。

◎質問者からの返答

動きがあって、ページをいろいろみていくのが楽しい作りになっていますね。

ヘッダ部分の意味と印象は本当に重要なのだと実感致しました。

なるほどなるほど。

rikuoさんのようなDiaryに作るのは高い諸々の作成テクとエネルギーが必要に思えますので、

今すぐ自分には無理かもしれませんが、

参考にさせて下さい。

ヘッダ・フッタ以外についても勉強になりました。


ご丁寧なアドバイスと回答ありがとうございました。


5 ● harg
●40ポイント

http://d.hatena.ne.jp/harg/

すでに似たような回答があるのですが、メインの日記のヘッダには、自分のサイトや、オープンソースウェアの宣伝等人に知ってほしい情報があります。

サイドバーは、あまり活用してないですね。

http://sicp.g.hatena.ne.jp/harg/

自分の勉強用のダイアリーでは、モチベーション維持のために、目標をヘッダに書いてあります。こちらは自分の記録用なので、人に見せるということはあまり意識せずに、常に目標を意識できるようにしてあります。

◎質問者からの返答

サイドバーよりヘッダを活用されていらっしゃるのですね。

一つ目のURLのほうへお邪魔させて頂きました。

すっきり・クール・スマートなページに仕上がっていて素敵ですね?

2つ目のURLのほうはアクセスできませんでしたのでヘッダの自分用使用例を拝見できませんでした。(残念)

ヘッダにいろいろ入れてみる事、考えてみますね。

回答ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ