ドリームジャンボコロッケを求めて (`・ω・´)

つぶやき程度のうんたらかんたらが綴られています
ブログ主への連絡を必要とする場合は掲示板までお願いします















15:22 12月29日 [火]
はてなダイアリーの本気を引き出そう

"シンプル" & "分かりやすい" & "運営が良質" とそろったはてなダイアリー


この3点がそろっているためにネット初心者さんでも安心して始められるし

ブログを書く上でそこまで不便に感じることはあまりない!・・・はず(´・ω・`)


しかしブログを書くのに慣れてくるとどうしても若干物足りなく感じてくるのは事実


だがそれは事実に非ず!

はてなダイアリーの力はまだ引き出せる(`・ω・´)シャキーン


このエントリーは

1.ブログを始めてみたいけどはてなダイアリーは何ができるの?という人2.はてなダイアリーをもっともっと使いこなしてみたいけど長い公式説明なんか読めるかという人

というような人に向けて書いていこうかと思います(`・ω・´)


逆に次のような人には余り必要のないエントリーです

1.HTMLは得意でタグなんか余裕で使いこなせる人2.はてな記法は完璧にマスターしてるぜという人

必要のありそうな人だけどうぞ続きを

少々長くなるので分けてみました(´・ω・`)


ここからは"編集画面モード"を使用していることを大前提として説明していきます

f:id:Hukkun:20091229055627j:image

編集画面モードへの変更は 管理 > 設定 > 編集設定 から上記の部分を選択でできます

また選択済みになっているとは思いますが同じ画面からバックアップを作動することができます


ブログを書いてる間の不慮の事故に備えてバックアップ設定も増やしておきましょう

f:id:Hukkun:20091229060036j:image

だいたい10MB以上あれば問題ないと思います

これでIEがフリーズして落ちたりしたときでもさっきまで入力していたデータを復活させることが可能になります



以上の基本的な設定ができている人は次へ読みすすめてください

テンプレートの変更は見れば分かるとはいえ後述します (管理 > デザイン の部分で変更可能)



1.文章を書く


  • 行間の設定

はてなダイアリーでは改行したときの行間の距離などが決められています

なのでまず最初にこの設定を自分好みに設定しておきましょう

f:id:Hukkun:20091229061109j:image

管理 > デザイン > 詳細 からスタイルシートの部分に

div.section P {    margin-top: 12;    margin-bottom: 8;}

を貼り付けましょう

"margin-bottom : X"の部分が行間の距離の指定ですのでお好みの距離に変更を



  • 文章の強調などの修飾方法

まずは基本の文章修飾です

f:id:Hukkun:20091229062151j:image

標準搭載の編集機能ではこの部分を利用します

左から"太字","斜体","削除部","サイズ変更","色変更"になっています


またここにない機能でも使えるものがこのあたり

それぞれ"XXXX"の部分に発動します大文字(重複可) : <big> XXXX </big>小文字(重複可) : <small> XXXX </small>下線 : <u> XXXX </u>打ち消し線 : <s> XXXX </s>

これらを使用して文章を書いていけばいいでしょう



  • 連続して改行をしたいとき

はてなダイアリーでは複数改行しても反映されない仕組みになっています


というわけでそういうときは改行タグというのを使います

改行 : <br>

これをいれればガンガン改行することが可能になります



  • 文章内で他のサイトを紹介したいとき

f:id:Hukkun:20091229063343j:image

このボタンを押してURLを入れれば相手のサイトのタイトルが入った状態でリンクされます

また"AAAA"という部分を選択してこのボタンを押してURLを入れた場合には"AAAA"がリンク部分になります


URLをそのまま貼り付けてもリンクされるので面倒くさい場合はそのまま貼り付ければOKです



  • 原文をそのまま表示したいとき (若干違う雰囲気を出したいとき)
<pre> AAAA </pre>

これで囲めばほぼ原文がそのまま表示されます

多段改行もbrタグを使う必要はありません



2.修飾し見やすくする


  • 続きを読むを使いたい

他のブログではよくある"続きを読む"という機能

もちろんはてなダイアリーにも搭載されています

====

と記入すればそれ以降の記述は全て"続きを読む"を押すまで展開されません

なお直接その日付のエントリーを開いている場合は"続きを読む"は表示されません



どうしてもエントリーを立てる上でただ文字のサイズを変えたりしただけでは

いまいち読みやすくならないのは悩むところ(´・ω・`)そこを説明します


  • エントリー内で表を使いたいとき

モノの表を表示したいときは

| A | B || C | D |

と入力すれば

A B
C D

のように表が自動生成されます

tableタグを使用することもできますがおそらくこの方法で事足ります



  • エントリー内の文章を箇条書きにしたいとき

体裁を整えるのに便利なのが箇条書きです

-揚げ物--コロッケ---安い---うまい---最強

と入力すれば

  • 揚げ物
    • コロッケ
      • 安い
      • うまい
      • 最強

のように箇条書きの体裁が取れます



  • エントリー内の文章を箇条書きにしたいとき 2nd

数字で番号を振ることも可能ですよ

+コロッケ+メンチカツ+ハムカツ

と入力すれば

  1. コロッケ
  2. メンチカツ
  3. ハムカツ

のように番号が振られます



  • エントリーを複数に分けたいとき

エントリーを複数に分けたい時はこのように書きます

*ウッーウッーウマウマ(゚∀゚)

すると"ウッーウッーウマウマ(゚∀゚)"というタイトルのエントリーが生成されます

この記入をしたあとの文章は全て"ウッーウッーウマウマ(゚∀゚)"のエントリーの内容になります

また"**XXXX"とすれば小見出しだけが作られエントリーが分けられることはありません


ちなみに"-"も"*"も半角空白を前に入れることで作動させないようにできます



  • 文章を区切りたいとき

そのような場合はこのように記述します

区切り : <hr>

これで区切ることができます

オプションとして次のような指定が可能

太さ : <hr size="1">色指定 : <hr color="#ffffff">

"X"の部分を変更することで指定が可能です



3.画像/音楽/動画を貼る


画像や音楽や動画をエントリー内に載せたくなるときもあります(´・ω・`)ここではそれを


  • 画像を表示したいとき

f:id:Hukkun:20091229065012j:image

このボタンを押して出てきた画面から画像をアップロードし表示することができます

参照部分に画像のあるURLを入力すればインターネット上の画像をそのままアップロードすることもできます


またフォルダ容量オーバーにならなければ何枚でもアップロードできます

対応する形式は"bmp","jpg","gif","png"などです



  • 音楽をのせたいとき
[音楽のアドレス:sound]

こう記述すれば載せることができます

音楽自体は手持ちのサーバーか何かにアップロードしてください



  • 動画を表示したいとき
[動画のアドレス:movie]

こう記述すれば表示することができます (対応 : flv/mov/qt/wmv/avi/mpg/mpeg/mp4 )

動画自体はやはり手持ちのサーバーか何かにアップロードしてください



  • 動画サイトの動画を表示したいとき
[動画のアドレス:movie]

やはりこの記述で表示することができます

ニコニコ動画とYouTubeでは作動してくれました



まとめ


運営が以上のことをまとめた画像を作ってくれているのでそれを貼り付けます

f:id:Hukkun:20091229071954j:image

はてな記法一覧 - はてなダイアリーのヘルプ

はてなグループ - はてなグループのヘルプ


ここまではブログの基本のエントリー部分を説明してきました


続いてブログ自体のデザインについて説明します

影響が大きい部分から順番に説明していこうかと思います


  • テンプレートの変更の仕方

流石に説明の必要性は薄いとは思いますが一応

f:id:Hukkun:20091229193907j:image

この部分から "ブログ自体のテーマ" "ヘッダの色" "ヘッダサイズ" が変更できます

SEO的にはヘッダサイズは太いほうがいいようですが見栄えを優先して私は細いヘッダを使っています



  • サイドバーの変更の仕方

何かと変更を加えたいサイドバー

そのサイドバーの細かい変更の仕方を書きます


サイドバーとはモジュールという構成部品の組み合わせでできています

なので追加したいときや並び替えたいときはこのモジュールの部分をいじります


変更のためデザインのフッタ部分をいじっていきます


例 : ドリームジャンボコロッケを求めて

</div><div class="sidebar"><hatena name="profile" template="hatena-module"><hatena name="calendar2" template="hatena-module"><hatena name="section" template="hatena-module"><hatena name="comment" template="hatena-module"><div class="hatena-module"><div class="hatena-moduletitle">リンクサイト</div><div class="hatena-modulebody"><ul class="hatena-urllist"><li><a target="_blank" href="http://nya.xxxxxxxx.jp/"><font color="#00ff00">● </font>Nekotan - True of Liberty Cat</a></li>// 省略 //</ul></div></div><hatena name="pv" template="hatena-module"><hatena name="searchform" template="hatena-module"><div class="hatena-module"><div class="hatena-moduletitle">スカウター</div><div class="hatena-modulebody"><div align="right"><a href="http://ja.webscouter.net/info.phtml?u=http%3A%2F%2Fd.hatena.ne.jp%2FHukkun%2F"><img src="http://jaicon.webscouter.net/icon.phtml?u=http%3A%2F%2Fd.hatena.ne.jp%2FHukkun%2F" alt="スカウター : ドリームジャンボコロッケを求めて (´・ω・`)" border="0" width="80" height="15"></a></div></div></div></div>


仕組みの説明 01

</div><div class="sidebar">この部分がサイドバー</div>


仕組みの説明 02

</div><div class="sidebar"><hatena name="profile" template="hatena-module">// →プロフィールを表示<hatena name="calendar2" template="hatena-module">// →カレンダーを表示<hatena name="section" template="hatena-module">// →最新のタイトルを表示<hatena name="comment" template="hatena-module">// →最新のコメントを表示</div>


仕組みの説明 03

</div><div class="sidebar"><hatena name="profile" template="hatena-module"><hatena name="calendar2" template="hatena-module"><hatena name="section" template="hatena-module"><hatena name="comment" template="hatena-module">// 自分で作りたい部分は以下のように<div class="hatena-module"><div class="hatena-moduletitle">タイトル表示</div><div class="hatena-modulebody">この部分に内容</div></div></div>


仕組みの説明 04

</div><div class="sidebar"><hatena name="profile" template="hatena-module"><hatena name="calendar2" template="hatena-module"><hatena name="section" template="hatena-module"><hatena name="comment" template="hatena-module"><div class="hatena-module"><div class="hatena-moduletitle">リンクサイト</div><div class="hatena-modulebody"><ul class="hatena-urllist"><li><a target="_blank" href="http://nya.xxxxxxxx.jp/"><font color="#00ff00">● </font>Nekotan - True of Liberty Cat</a></li>// 省略 //</ul></div></div><hatena name="pv" template="hatena-module">// →ページビューを表示<hatena name="searchform" template="hatena-module">// →検索を表示<div class="hatena-module"><div class="hatena-moduletitle">スカウター</div><div class="hatena-modulebody"><div align="right"><a href="http://ja.webscouter.net/info.phtml?u=http%3A%2F%2Fd.hatena.ne.jp%2FHukkun%2F"><img src="http://jaicon.webscouter.net/icon.phtml?u=http%3A%2F%2Fd.hatena.ne.jp%2FHukkun%2F" alt="スカウター : ドリームジャンボコロッケを求めて (´・ω・`)" border="0" width="80" height="15"></a></div></div></div></div>


といったような感じになっています(´・ω・`)

モジュールという仕組みがわかってもらえたでしょうか

"div"は常に終了の"/div"と対応するようにしてください


上に上げた以外のモジュールとしてはこのようなものがあります

// 以下転載 // はてなダイアリー機能一覧 - はてなダイアリーのヘルプ

簡略版 : はてなモジュール一覧 - はてなダイアリーのヘルプ * サイドバー以外のヘッダ・フッタのモジュールを含んでいます

ナビゲーション ページトップに戻るページトップに戻る

情報表示 ページトップに戻るページトップに戻る

オプション ページトップに戻るページトップに戻る

参考 : はてなダイアリーガイド「サイドバーに何かを入れる」とは - はてなキーワード



  • JavaScriptの使い方

はてなブログでは本文サイドバーなど問わずにJavaScriptの使用が禁止されています

しかしどうしても表示したいときがあるのも事実(´・ω・`)そんなときの対策をここに


// この部分はほぼ完全な転載です // はてなダイアリーで JavaScript eval - てっく煮ブログ


Googleガジェットを使うことでJavaScriptを読み込むことができるようになります

また前記の通りにすればサイドバーのモジュールにも追加できるのでサイドバーの活用度が広がります



このように実行できます(´・ω・`)もちろん転載


http://gmodules.com/ig/creator?synd=open&url=http://nitoyon.googlepages.com/js_eval.xml

のアドレスから生成したタグを貼り付けることで使用することができます




最後の最後が完全な転載なんてかっこ悪い(´・ω・`)!

それはともかく以上で終わらせていただきます


読みにくくてごめんね(´・ω・`)!

あなたのブログでの日々に役立てていただければ幸い


ちなみにサイドバーと同じ要領でヘッダやフッタを書き換えれば

やっぱりデザインを色々と変えられるのですが正直需要を余り感じないので今回はスルーします


興味がある場合はこちらをどうぞヘッダ・フッタに情報を載せる - はてなダイアリーのヘルプ


favicon登録の方法もおなじくスルー(´・ω・`)力尽きた


f:id:Hukkun:20091229195155j:image

クリックしたら負けだと思う(´・ω・`)それっぽいけどさ

22:18 03月05日
apple2527
Hukkun さん<br><br>先日、僕のブログにコメント頂いて有難う御座いました。<br><br>Hukkunさんのブログ見て、少しづつ勉強してみます!<br><br>頑張ります!
コメント投稿の受付は終了しました。
携帯向けRSSATOMGoogleSitemap管理ページ