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

はてなダイアリーの、ページの見栄えを良くしたいです。
そのやり方を教えて下さい。
ほかにも、「はてな記法」の事や、「HTMLタグ」の事などもよく分かりません。
だれか詳しく簡単に教えて下さい。こんな初心者がすみません。


●質問者: Smp@?
●カテゴリ:はてなの使い方 ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● スパロウ

はてな記法は、はてな独自の記法で、例えば表をつけるとき、

|*名前|*説明|
|あいうえお|さいしょのひらがな|
|かきくけこ|つぎのひらがな|


のようなものを、半角で入力すると、

名前説明
あいうえおさいしょのひらがな
かきくけこつぎのひらがな

となるわけです。詳しいその種類は、やはりダイアリーのヘルプから見ることをお勧めします。


HTMLは、簡単に言ってしまえばインターネットのプログラミングです。ここは、かなりの知識が必要なので、HTMLは今すぐやらなくて大丈夫です。HTMLの一部は、はてなからでも紹介している(スターのアイコンを変えるなど)ので、興味があれば教えますよ!


HTMLは、その記述法を詳しく載せたサイトも存在するので、ぜひ上をいったダイアリーを作りたいのであれば、お勧めのサイトのURLを載せますね!載せてほしいと言って頂ければ、載せますよ!


分かり難かったらすみません!


Smp@?さんのコメント
サイトを載せてくれるんですか! 有難う御座います! よろしくお願いします!

スパロウさんのコメント
http://www.htmq.com/htmlkihon/001.shtml これを是非参照に!

Smp@?さんのコメント
ありがとうございます!

2 ● 八咫烏

HTMLに関しては人力検索の回答や返信に使えるので是非身につけるのが良いと思いますよ

まずある程度初心者が参考にするサイトを集めてみました

まずHTMLを実際に入力したり(将来的に使うかもしれないCSSやJavaScriptの反映を確認できるサイトです)

http://jsfiddle.net/

Sample
http://jsfiddle.net/4N2mA/3/

※HTMLと書いている所にタグを入力して上タブにあるSAVEを押せば反映されます
次からはSAVEでなくUPDATEで更新して確認となります




HTMLの基本的なタグの説明が書かれているサイト





色を変える

カラーコード集です

http://www.colordic.org/w/

主なカラーコードの使い方として色を使う場面で多用されます

<div style="color: #007766">色を変える</div>

⇓after⇓

色を変える

#007766

がカラーコードとなります
このあたりはダイアリーHTMLタグ支援機能にありますので
それを何度もうちながら勉強すると良いですよ
後都合上色を変える時
<font color="#007766"></font>

これは使わないほうがいいです、WEBの都合というものです
しかし初めに使う分にはいいかもしれません




P.S
見栄えをよくする以前にややダイアリーの構図が崩れているようですね
もしかしてフッタやヘッダにスタイルシートを編集したのでは無いでしょうか!?
よければヘッダとフッタとスタイルシートの内容を提示してくれると整えられるかもしれません

この3つがある編集ページは

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

こちらになります


Smp@?さんのコメント
詳しく教えて下さり、誠に有難う御座います! 試してみます。 ありがとうございました!

八咫烏さんのコメント
とりあえずヘッダの一番上に <div class="main"> を付けてみてプレビューで見てみてください 横のスライーダーが上に戻ってくるはずです 後ヘッダにパーツを貼ると記事が下の方に行ってしまい見づらくなる原因となります フッタの方に移動するのが良いですよ スタイルシートのデザインとしては余談で >|css| a:hover{ background-color: #DDD; } ||< こんなのを入れてみると リンク先にマウスカーソルが来た時に 色が変わったりします いろいろ置いておきますのでお好きなのをどうぞ >|css| a:hover{ color: #000; } /*↑リンクの所にカーソルがくると文字色が赤くなる↑*/ ||< 背景が変わるのと、文字色を設定したいのであれば 両方を統合します >|css| a:hover{ color: #F00; background-color: #DDD; } ||<

八咫烏さんのコメント
htmlタグの方が消えたので付け足しで >|html| <div class="main"> ||< これをヘッダの一番上に追加してみてください 後スタイルシートですが >|css| a:hover{ background-color: #DDD; } a:hover{ color: #000; } ||< このように同じ物をたてつづけに書いてはいけないという法則があるので 気を付けてください

八咫烏さんのコメント
残り時間が無いので構成だけ戻すようにしてください (予めフッタやヘッダに置いてあるパーツ等は避難させておく) >|html| <!-- ページヘッダ --> <div class="main"> ||< >|html| <!-- ページフッタ --> </div> <div class="sidebar"> <hatena name="profile" template="hatena-module"> <hatena name="calendar2photo" template="hatena-module"> <hatena name="section" template="hatena-module"> <hatena name="comment" template="hatena-module"> <hatena name="trackback" template="hatena-module"> <hatena name="hoturl" template="hatena-module"> <hatena name="sectioncategory" template="hatena-module"> <hatena name="keywordcloud" template="hatena-module"> <hatena name="mycomment" template="hatena-module"> <hatena name="rss" url="http://b.hatena.ne.jp/junpei126/rss" template="hatena-module" listlimit="5"> <hatena name="rss" url="http://f.hatena.ne.jp/junpei126/rss" template="hatena-photo" listlimit="5"> <hatena name="antenna" template="hatena-module"> <hatena name="haiku" template="hatena-module"> <hatena name="hotkeyword" template="hatena-module"> <hatena name="clock" type="analog-metal" color=""> </div> ||< ソースの確認で分かるところまで入れたつもりですが 欠けている分は補充してください ダイアリーを編集するコツとしては デザインした後すぐに変更するのではなく プレビューで状態を確認して最終的に変更ボタンを押すのがいい方法です プレビュー無しで変更すると失敗した時に戻すのが困難になります
関連質問

●質問をもっと探す●



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