kyabana's blog

ユルいめのブログ

デコもじ で はてなブログ をユルくする

デコもじはてなブログ に使うとなかなかユルくておもろい。

今はまだ記事ごとに同じjavascriptを仕込む必要があったり

(そのうちいい感じになってくれるはず)

【追記:2012/01/18に機能追加されて、記事ごとにJavascript仕込む必要がなくなりました】

デコもじ がOpera非対応だったりとクセがあるけども

トライアルプラン」ならば無料で利用できるし

鋭意開発中の はてなブログ を楽しむにはもってこいのアイテムだと思うので

設定の仕方などをまとめてみました。

 

ユルいめの文字でつらつらとお送りします。

 

会員登録 と サイト(ブログ)登録

  1. デコもじ のトップページで「無料トライアル」をクリック。

    f:id:kyabana:20111120113215p:image

  2. 会員登録に「はてなID」を使えます。ありがたいですね!はてなIDを入力。

    はてなID以外でもデコもじ を利用できます。お好みのものを選びましょう。

    f:id:kyabana:20111120113231p:image

  3. メールアドレス/名前・フリガナ/生年月日/性別/職業を入力。

    f:id:kyabana:20111120113228p:image

  4. あっという間に登録が完了。「webサイトを追加する」をクリック。

    f:id:kyabana:20111120113218p:image

  5. サイト名にブログタイトルを、URLにはてなブログで取得したURL(http://×××.hatenablog.com/など)を入力して「登録する」をクリック。

    f:id:kyabana:20111120122909p:image

  6. 設置用のjavascriptが発行されるので控えておきましょう。

    ※ここで控えなくても、デコもじのヘッダーにある「サイト情報」からいつでも参照することができます。

    f:id:kyabana:20111120113230p:image

使うフォントを選ぶ と 表示設定

  1. 続いてブログに使うフォントを選びます。

    「編集」をクリック。

    f:id:kyabana:20111120113220p:image

  2. 「フォントを追加してください」をクリック。

    f:id:kyabana:20111120113222p:image

  3. 『トライアルプラン』で利用できる「お試しフォント」をクリック。

    f:id:kyabana:20111120123146p:image

  4. 使いたいフォントを選んで「利用する」をクリック。

    f:id:kyabana:20111120113224p:image

  5. フォントの追加が完了しました!

    選んだフォントが使えるように設定をします。

    「すぐに編集を行う」をクリック。

    f:id:kyabana:20111120122535p:image

  6. ブログ全体にフォントを適用させたいので、ページ右側にある「上級者向けセレクタで表示設定する」のフォームに「body」と入力して「+」ボタンをクリック。

    これでデコもじサイト側での設定は終了です。

    f:id:kyabana:20111120113226p:image

記事にjavascriptを仕込む

追記:記事ごとに同じを仕込む必要がない方法を紹介しました→「 もっとラクに デコもじ でユルくする

  1. 普通に記事を書いたら「HTML編集」をクリック

    f:id:kyabana:20111120140927p:image

  2. 1番最初の行に『会員登録 と サイト(ブログ)登録 - 6』で控えたjavascriptをペースとして「公開する」をクリック。

    これで仕込み完了です!簡単ですね。

    f:id:kyabana:20111120140928p:image

デコもじを部分的に使う

「ブログ全体じゃなくて、部分的にデコもじを使いたい!」

って方は、『使うフォントを選ぶ と 表示設定 - 6』で「body」ではなく下記のidやclass(#blog-title-innerなど)を設定してみましょう!

 

#blog-title-inner
ブログ名
f:id:kyabana:20111120113207p:image
#blog-description
ブログの説明
f:id:kyabana:20111120113208p:image
#blog-title
ブログ名 + ブログ説明
f:id:kyabana:20111120113209p:image
.date
日付
f:id:kyabana:20111120113210p:image
.entry-header
タイトル
f:id:kyabana:20111120113211p:image
.entry-content
本文
f:id:kyabana:20111120113212p:image
.comment-content
コメント文
f:id:kyabana:20111120113213p:image
.entry-inner
日付 + タイトル + 本文 + コメント部分
f:id:kyabana:20111120113214p:image

以上です。

body に設定すると「読み込み中」もユルくなって和みます。 f:id:kyabana:20111120144300p:image