HOME 　»　 , , , , 　»　モブログ導入しました【追記アリ】

モブログ導入しました【追記アリ】

2004/12/01　|　Comments & Trackbacks : 12

「KINOKANAL」のじょーじぃさんの所で、クリスマスまでの限定Blogを企画されていて、面白そうだったので私も参加してみる事にしました。
こういう季節ものイベント好きなんです。

ただ、この企画は写真中心のblogなので、さすがにないとマズイだろうと思い、モブログを導入してみました。
プチ苦闘したので、以下に手順を覚え書きしておきます。

利用させて頂いたサービス

dh’s memorandaさんの「moblog mail gateway」

手順

  1. MTメインメニューにある「ウェブログの投稿者を追加、編集」から、モブログ用アカウントを作成。
    与える権限は「投稿」「ファイルのアップロード」のみでOK。
    この時決めたアカウントとパスワードはメモっておく。
  2. MIME-Base64-2.XX（3.XXだとうまく動作しない）をココからダウンロードし、cgi/mt/extlibの下に「MIME」と言うフォルダを作った中に「Base64.pm」だけ入れる。
  3. ココにアクセス。
    「Create new account」へ進む。

    • e-mail
      アドレス（何でもいい。携帯アドレスだと楽チン。）
    • moblog url
      自分のサイトのアドレス（ここならhttp://blog.open-arms.biz/）
    • username・password
      さっき作成したモブログ用アカウント・パスワードを入力
    • weblog xmlrpc url
      MT編集画面トップのアドレスの「mt.cgi」以降を「mt-xmlrpc.cgi」と入れ替えて入力
      （ここならhttp://moso.upper.jp/cgi/mt/mt-xmlrpc.cgi）
    • image archive-path、image site-path
      好みで変更。トップページのアドレスの直下に専用フォルダを作った場合、「image archive-path」で決めた名前の前に「/」を付け加えたものが「image site-path」になる。
    • Publish
      投稿した記事をPublish（公開）かDraft（下書き）にするか決める
    • Public?
      「Moblog Mail Gateway」さんのトップに自分の記事を表示させるかどうかの選択。

    全部記入が終わってエラー表示がでなかったら、モブログ用アドレスに投稿してみる。
    うまく投稿できたら次へ。

    ※　2）・3）の参考記事
    「ヒヨコスタイル」さん：モブログやってみた

  4. cssを変更する。
    そのままだと本文が表示されたすぐ下に写真が表示される。
    写真横に文章を回り込ませたい場合は設定の変更が必要。

    ■css

    モブログの写真のクラスは「photo」で定義されているので、photo用の設定を加える。
    うちはこんな感じ。

    	.photo {
border: 1px solid #999;
margin: 0 10px 5px 0;
float: left;
padding: 0px;
}

    このままだと写真の高さに対して、文章が少なすぎる場合、文章以降の投稿者情報の欄まで横に回り込んできてしまうので、防止策として「.posted」に「clear: left; 」を加えておく。
    こうすると横に回り込むのは本文だけになる。

    ※　4）の参考記事
    「ある1人の地方公務員のBlog」さん：【備忘】画像の回り込み

    ○2005年1月25日現在、写真のクラスは全て「image」で統一されるように変更済みなので、この設定は削除しています。

  5. モブログの「template」を変更する。
    「moblog.uva.ne.jp」の設定画面に戻って、「Movable Type Setting」の「template」の設定を変更する。
    普通の投稿と同じように表示させたいので、写真部と本文部の順番を入れ替えて、本文部のクラスを「blogbody」に変えた余計なdiv指定はしなくても良さそうなので、必要なだけ残して書き換えた。。

    ※　変更前
<div class=\"caption\">%(caption)s</div>\n<div class=\"photo\">%(imagecontent)s</div>

※変更後
<div class=\"photo\">%(imagecontent)s</div>\n<div class=\blogbody\">%(caption)s</div>

template：%(imagecontent)s\n%(caption)s
image template：<img src=\"%(imageurl)s\" class=\"image\"/>
  6. 投稿してみて、うまく表示されたら設定終了。

あうー、疲れました。
ついでに「ごみのやま」さんのこちらの記事を参考に、デフォルトで写真のクラス名が記入されるようにしておきました。
下ごしらえは本当に面倒です(’A`)

Related Posts

Google Adsense

Comments & Trackbacks : 12

Response from じょーじぃ2004 年 12 月 1 日　16時21分

ご参加していただきありがとうございます。

写真なくてもよいですよ。
クリスマスにまつわるエピソードとか、HPとか、商品の紹介でも可です。

参加者が増えるといいなぁ…

Response from Count Down X'mas2004 年 12 月 1 日　23時42分

本日オープンです。

本日よりオープンさせていただきます。

昨夜のうちにバナー作ったりしたかったのですが、帰りが遅かったため断念…
今のところ、「今日の覚え書き」のもそさんが…

Response from もそ2004 年 12 月 2 日　11時23分

そうなんですか？
やっぱりこう、きらきら光るような写真を撮ってくるのがいいなぁ…、と思ったので、ちょっと頑張っちゃいましたよ(;´Д`A “`
でも前からモブログには対応させたかったので無問題ですが（笑）。

Response from yutaka2005 年 1 月 5 日　23時08分

サイト参考にさせて頂きました。すこし教えて頂きたいのですがcss変更部分と「防止策として「.posted」に「clear: left; 」を加えておく。」この部分は何処に記述したらいいのでしょうか？宜しくお願いします。

Response from もそ2005 年 1 月 6 日　17時04分

＞yutakaさま
参考にして頂いたようでありがとうございます。

cssの変更箇所は、ただ単に自分のサイトの画像に関してはclass:imageで設定されているので、モブログ用に.photoの設定を書き加えてあげただけです。
（向こうの当初の設定では写真のクラスが.photoで設定されているため）

でもよく考えたら、元のモブログでの設定をphoto→imageに変えてあげれば全部設定が統一される事に気がついて、今はそのように設定しています。

「clear: left; 」の追加場所は、これは説明がよくなかったですね。
申し訳ありません。
うちの場合「.poted」は「投稿者」「コメント」「トラックバック」が表記されている部分のクラスの事です。
ここのクラスのcssに「clear: left; 」を加えておかないと、本文が短い場合にこの部分まで写真の横に回り込んできてしまいました。
是非加えておく事をおすすめします。

また分からない事がありましたら、どうぞ遠慮なく質問してくださいませ。

Response from yutaka2005 年 1 月 6 日　17時57分

説明を読んでいて
地方公務員のBlog」さん ：【備忘】画像の回り込み のリンク先
から下記のサイトへ行き
http://chiricoyet.ponto.jp/07/archives/2004/0504181220.php
画像にテキストを回り込りこます方法
CMS.pmの変更をやりましたのでダブるのじゃないかと思ったのですが？
あなた様のサイトの説明はモバイル用の説明で又別の設定ということ
でしょうか？現在上の設定後はパソコンからの新規投稿では自動的に回りこんでくれますが、携帯からの投稿は回り込みが出来ない状態です。
申し訳ありません。なんか頭がごちゃごちゃになってますです。

Response from もそ2005 年 1 月 6 日　19時04分

>yutakaさま
えっとですね、地方公務員さん～のサイトで説明されている部分とは「clear: left; 」を入れる事によって改善される部分については根本的に別のモノです。
あちらで説明されているのは「写真の横に文章を回り込ませる方法」です。

携帯からの投稿で回り込まないのは、おそらく携帯から投稿される場合に画像に付加されるdiv class（moblog mail gatewayのデフォルトだとdiv class=”photo”でしょうか？）に回り込みの設定（float：～の付加）がされていないからだと思います。

ちなみに私は画像のクラスを.imageで設定しているのですが、
template：%(imagecontent)s＼n%(caption)s
image template：＜img src=＼”%(imageurl)s＼” class=＼”image＼”／＞
と変更しています。
この設定にすると、パソコンから普通に投稿した場合と同じように写真も文章もupできます。
余計なdiv設定がつかないので、見た目もすっきりしていいです。

で、「clear: left; 」を加える理由ですが。
これは写真の高さに対して文章量が少ないと、本文だけではなくて、その後に続いて投稿者名やコメント・トラックバックの表記部分も一緒に回り込んでしまうので、ページデザインがぐずぐずになってしまうんですね。
これを防止するための処置です。

例えば
http://open-arms.sakura.ne.jp/blog/archives/2004/12/post_79.php
この記事の場合、写真の高さより文章の幅の方がせまいので、これを加えていないと文章の後に破線・カテゴリ－マーク・編集マーク、さらにその後のコメント欄も回り込んできて、おかしな表示になってしまいます。
文章が多ければそんな事にはならないのですが、いつも長い文章を書ける訳ではないので（苦笑）、加えておくと無難ではないかと思います。

違いをおわかりいただけましたでしょうか？
説明がつたなくて申し訳ありません。

Response from yutaka2005 年 1 月 6 日　20時07分

お手数をかけてます。
moblog mail gatewayのテンプレート部分を修正しましたらトラックバック部分が上に寄ってこなくなったんですが….これでも随分ましになった！！
http://open-arms.sakura.ne.jp/blog/archives/2004/12/post_79.php
でも、これと見比べるとなーんか少し違うような？？きっとスタイルシートにclear: left; を入れる位置が違うんでしょうね。探してみます。

名古屋にいらっしゃったんですね～、私名古屋に住んでます。
いらっしゃった日だけですよ雪が降ったのは、でも今日は寒いです

Response from もそ2005 年 1 月 7 日　14時03分

＞yutakaさま
うまくいったようでよかったです！
私もずいぶん悩んでモブログ導入したので、お役に立てたようで幸いです。

ところでyutakaさんは名古屋にお住まいだったんですね。
(゜д゜)＜あら！奇遇。
名古屋面白かったです。
独自の文化が根付いてますよね。
関東でも関西でもないところが気に入りました。

Response from MEINET2005 年 1 月 13 日　0時54分

携帯からもブログライフ

　ってわけで！携帯からもブログへ投稿できるようにしてみましたー。やったーv。当サイトの5周年記念に新…

Response from mini2005 年 2 月 18 日　22時10分

テスト

（追記） モブログテスト。 やっと、モブログできるようにしました。ボダフォンの…

Response from Tea Time Lover2005 年 7 月 27 日　13時12分

モブログ導入-メールでエントリ

携帯メールからエントリーするための手順メモ。 そんなに使う機会はなさそうですけど…