WordPressで「はてな記法」WP HatenaNotation

hatena WordPress

WP HatenaNotation

はてなダイアリーを利用していた人が、自分でドメイン取得してWordPressでサイト、ブログを更新するようになる。なんて方は結構多いと思うけど、これはそんな移行がスムーズにいきそうなプラグインを発見。
手慣れた「はてな記法」を使ってこれまで通りにWordPressで記事を更新できるって、かなりハードルが下がるんじゃないだろうか。

参考記事

WordPressではてな記法を使えるプラグイン「WP HatenNotation」導入とカスタマイズ方法

"Snow Float" はてなダイアリーデザイン公開開始

hatena diary design

作成し始めて約3日ほどですが、はてなダイアリーの公開デザイン第1作目をリリースしました。
お気に召しましたらどうぞこのテーマを使ってくださいまし。

Snow Float

http://d.hatena.ne.jp/designset/1855
Top画面の表示。
2カラム固定幅でオーソドックスに作成。
main/sidebarをfloat指定。
アーカイブページの表示。
この1カラムで大きめの紹介ページはabout/keywordページにも適用。

"Snow Float"は背景色と背景から浮いてるボックスの感じからとりました。

シンプル/メイリオ/浮いてる/影/画像未使用/IE不向き

■注意書
・InternetExplorer(以下IE)ではCSS3のボックス要素の影やテキストの影を指定するtext-shadow/box-shadowなどのプロパティに対応していないため、FireFox/GoogleChrome/Safariほど綺麗に表示されません。
・IE6では表示が崩れる可能性があります。(IE6の場合は最新のIE8、IE9にアップデートするのがオススメです。)
・サイドバーを編集したい場合は、デザインの編集から「ページのフッタ」の"はてなモジュール"の中で要らないものがあれば毎に削除して下さい。(反対にはてなモジュール一覧の中から好きなものを追加することもできます。)

■不具合、要望などについて
verdana@live.jp
もしくはd:id:verdana
http://d.hatena.ne.jp/verdana/
にコメント等ください。
（スター☆やはてブでのリアクション頂けたら嬉しいです〜）

■最終更新日
2011/9/1 - Snow Float 公開デザインアップ

なんだかんだでテーマ作成結構楽しいな。今度は画像もいくつか使ってみようかな。全く違った雰囲気にするのも面白そう。

はてなダイアリーの公開デザイン作成開始

hatena diary design

はてなダイアリーで公開デザインを作成しようとちょっと手をつけてみました。
CSS3の表現力に驚きつつも、のんびりやって行こう。
とりあえず、現段階ではこのダイアリー内での表示を目安に作成中〜。


【現状】
表示確認：Google Chromeのみ。
mainコンテンツ：#days/.day/blockquote/img表示
はてなモジュール：カレンダーのtable / liタグ


細かく設定しようとすると結構時間かかりそう。。まぁCSS3の勉強もかねて。それにしてもtext-shadowとbox-shadowだけでずいぶんスタイリッシュになるものだ。

デザイン確認用テスト投稿

diary design

テキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

テキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

テキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

テキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

デザイン確認用check テキストテキストテキストテキストテキストテキストテキストテキスト。
デザイン確認用check テキストテキストテキストテキストテキストテキストテキストテキスト。
デザイン確認用check テキストテキストテキストテキストテキストテキストテキストテキスト。
デザイン確認用check テキストテキストテキストテキストテキストテキストテキストテキスト。
デザイン確認用check テキストテキストテキストテキストテキストテキストテキストテキスト。
デザイン確認用check テキストテキストテキストテキストテキストテキストテキストテキスト。

CSS3　スタンダード・デザインガイド

CSS3　スタンダード・デザインガイド

ハリー・ポッターと死の秘宝 PART1 (1枚組) [DVD]

ハリー・ポッターと死の秘宝 PART1 (1枚組) [DVD]

ハリー・ポッターと死の秘宝 PART1 (1枚組) [DVD]
ハリー・ポッターと死の秘宝 PART1 (1枚組) [DVD]
ハリー・ポッターと死の秘宝 PART1 (1枚組) [DVD]
asin:B004LQ081U
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
]テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

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

  • テキスト
  • テキスト
    • テキスト
    • テキスト
  • テキスト
    • テキスト
      • テキスト
  1. テキスト
  2. テキスト
    1. テキスト
    2. テキスト
      1. テキスト
      2. テキスト
テキスト
テキスト
テキスト
テキスト:テキスト
テキスト
テキスト:テキスト:テキスト

キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

名前 色 個数
りんご 赤 1
みかん だいだい 2

*1

キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

accelerate utilities 
整形済みテキストです。

#!/usr/bin/perl -w
use strict;
print <<END;
<html><body>
  <h1>Hello! World.</h1>
</body></html>
END
 class Foo
   def bar'baz' # return baz
   end
 end

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html xmlns:og="http://ogp.me/ns#"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
<title>accelerate utilities</title> 
<link rel="start" href="./" title="accelerate utilities"> 
<link rel="help" href="/help" title="ヘルプ"> 
<link rel="prev" href="/verdana/?of=5" title="前の5日分"> 
<link rel="stylesheet" href="http://d.st-hatena.com/statics/css/base.css?b17a5c8b5ea3eb86bf2b56c8e015f3965e8e59b8" type="text/css" media="all"> 
<link rel="stylesheet" href="http://d.st-hatena.com/statics/css/headerstyle_bl.css?031d9f2299a3235ea02565e84936ee0c39ee837b" type="text/css" media="all"> 
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://d.hatena.ne.jp/verdana/rss"> 
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://d.hatena.ne.jp/verdana/rss2"> 
<link rel="meta" type="application/rdf+xml" title="FOAF" href="http://d.hatena.ne.jp/verdana/foaf" /> 
<link rel="search" type="application/opensearchdescription+xml" href="http://d.hatena.ne.jp/verdana/opensearch/diary.xml" title="accelerate utilities内日記検索" /> 
<link rel="search" type="application/opensearchdescription+xml" href="http://d.hatena.ne.jp/verdana/opensearch/archive.xml" title="accelerate utilities内一覧検索" /> 
<link rel="shortcut icon" href="http://d.hatena.ne.jp/images/diary/verdana/favicon.ico">

<script type="text/javascript"> 
Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.section': {
      uri: 'h3 a',
      title: 'h3',
      container: 'h3'
    }
  }
};
Hatena.Author  = new Hatena.User('verdana');
Hatena.DiaryName  = new Hatena.User('verdana');
Hatena.Visitor = new Hatena.User('verdana');
</script>

*1:キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

MiMiC LABO 新規開設お知らせ

/index web site diary

ここはてなダイアリーでブログ更新してきましたが、新しくチャレンジしてみようと、tumblrにて独自ドメインを利用したブログ『MiMiC LABO』を開設いたしました。
http://mimic-labo.com/


こちらのダイアリーの更新も続けようと思ってます。（更新頻度は最近はめっきりだけど...）今はtumblrのブログをTopとして更新していきますが、予定ではMiMiC LABOの配下にブログを移して、他コンテンツについても作成していければと考えてます。


ここで更新してくままでもありだけど、理由がいくつか。

  1. 独自ドメインでのコンテンツ蓄積でサイト自体が自分所有の財産になる
  2. tumblrは画像などのコンテンツの見せ方が綺麗
  3. 今日ではソーシャルとのつながりも技術的に比較的簡単
  4. まさに↑の技術として勉強になる
  5. さらに↑の技術をブログで発信もできる



なんて都合のよいことをふと思い立ち、衝動的にやり出したわけです。


ちなみに2番目の理由については、tumblrは数多くの種類の画像が公開されていて、中でも海外の面白い素敵なショットを簡単にリブログで記事にできる。はてなで言うと、フォトライフとダイアリーが融合して良い感じって具合かなー。まだちょっとしか記事ありませんが、アーカイブページなんかは一覧の見せ方として良いなと。


3番目の理由をちょっと実践してみたのが、Facebook、はてなブックマーク、mixi、Google+、twitterなどのボタン設置と、はてなスターを設置してみました。設置の仕方とか色々記事を徘徊してなんとか可能になったので、その方法もいずれ更新しよう。


はてなスターってFacebookみたいな「いいね!」なんかより、全然気軽に「いいね!」出来て便利な機能だったんだなぁと改めて思った。