携帯 カスタマイズ vol.19

moblogを導入して携帯から画像のUPを可能にする

携帯からでも投稿、閲覧可能にするで、携帯からも閲覧可能にはしましたが、MT4iでは画像の投稿が出来ません。しかし、携帯からででも画像をUPさせる方法はいくつか存在します。レッツPHP!の写メールBBSを使った物、noblog::短気な猫3rdのpost2mtという物、QUIXOTIC PIXELSを使った物とありますが、ワタクシはmail2entryを使ってゲートウェイサービスを行っているdh's memorandaのmoblog.uva.ne.jpを利用させて頂く事にしました。

最初は、お勧めのとおりに別にBlogを作って画像UP専用の物を作ろうとしましたが、当分携帯からしか閲覧出来ないので別に作るとMT4iもいぢらないといけないので既存のBlogにUPさせる事にしました。

moblog.uva.ne.jp - moblog mail gatewayの手順を追って行けばなんなくレジストリは完了出来ると思います。

talk to oneself 2 moblog テスト／設定方法

が、かなり分かりやすいです。

気を付けるのは、このmoblogの投稿の仕方は設定したメールアドレスに返信して投稿するので、これが他人に知られるとアドレスを知っている人でも投稿出来てしまいます。もしもの被害を最小限に留める為にMT管理画面で新たに投稿者を作りましょう。

後は、デザインをいぢる訳ですが、moblog template samplesを参考にします。
ここでは、既存のBlogに投稿するので必用なのは、now.htmlとCSS、サイドメニューに最新の一件を表示させる為のMTインクルード、

<div class="sidetitle">

moblog

</div>

<div class="side">

<$MTInclude file="../mt/now.php"$>

</div> 

だけで大丈夫です。
うちではphpで出力してるのでnow.htmlはnow.phpでテンプレートを作成します。

パスはmt.cfgからのパスになるので一個上に戻るので../mt/now.phpとしてます。
また、既存のBlogに表示させるのでCSSはサイドメニューのみに適用させます。.side .photoみたいにしてサイドのみに適用されるようにします。
※エントリー下部に既存のBlogでnow.phpを表示させる際にmoblogだけを抜き出す方法を記してます。
※MTインクルードでなくPHPインクルードに変えました。<?php include("now.php)"; ?>と入れ替え。

now.phpテンプレート作成、Main IndexテンプレートにMTインクルード（phpインクルードしてる場合はSide Indexに）、CSSの調整で完了です。

欠点としては、
・パケ代がかかる
・若干重くなる？
・概要が記入出来ない
・キーワードが登録出来ない
・エントリーの本文がCaption要素になる
・テキストの回り込みの設定が変更出来ない
・moblog.uva.ne.jpにプレビュー表示されるので恥ずかしい写真はUP不可（笑）
といった所ですかね？概要とキーワードがちょっと痛いかも知れません。

と導入してはみたものの、ワタクシ現在、N502itを使用しておる為に投稿テストが出来ません（苦笑）。
人に借りてテストしたいと思います。

追記：
おろろ、Moblogに最新の一件が表示されちゃいますな。
<MTEntries lastn="1">
になってるから当たり前ですな…うーん。

解決：
<MTEntries lastn="1">だと最新の一件が表示されてしまうので、category="category name"で特定のカテゴリーのみに適用されるようにします。now.phpの先頭のMTEntries部分を、

<MTEntries category="Moblog" lastn="1">

という風にすれば、カテゴリーMoblogの最新の一件を拾うようになります。

追記2：
デフォルトのまま、だと、

みたくなってしまいます…。上がSafari、下がMozillaでIEはSafariと同じ見え方です。どうやって改善しよう。
多分、moblog.uva.ne.jpでログインして変更出来るMoblog settingのtemplateとCSSで出来ると思うんですけどねぇ…う〜ん。あ〜blogbody内のimgをfloat:leftで指定してるのも駄目なのかも知れない。

解決2：
かなり悩みました…。

WKNS 2ndStage Moblogテンプレートの修正
Web Graffiti 写メールでMoblog
日々のノート モグロブPublic?

にあるようにやはりMoblog settingのtemplateを編集する事で出来るようですが、Macな所為か何回やっても駄目。\n\n（¥は/の反対の奴）の部分がどうしてもblog上に表示されてしまうのです。Winの友達に代わりにログインしてもらってコピペしてもらいましたけど、やっぱり同じ。

とりあえず、画像がblogbodyの中に作っているbloginbodyというクラスの中からハミ出しているのを解決しようと思いました。これは心当たりがあって調べてみるとやっぱりfloat:leftでテキストの回り込みをさせているからでした。

CSSバグリストのどこかで見ました…（苦笑）。

CSSで.blog imgで指定していたのを消すとちゃんとbloginbodyの中に画像が収まりました。ここで画像をfloat指定するんでなく、captionをfloat指定するとどうなる？と思ってやってみたら、いけました。

.caption {

  float: left;

  text-align: left;

  } 


.bloginbody .photo {

   text-align:right;

   }

こんな感じでテキストの右に画像を回り込ませる様にして、さらに画像をbloginbodyの右端に行く様に指定してやれば大丈夫でした。画像を左、テキストを右には残念ながらワタクシの知識では思い付きませんでした（泣）。

まぁ、PCからの画像は左、Moblogからの画像は右に行くようになったと思えば割り切れます（笑）。ただ、何かSafariで見ると横スクロールバーが以上に伸びてるんですよね…。キャッシュがまだ消えないのでMoblog settingで変なtemplate指定したときの名残だといいんですけど。

追記2-1：
長い文章だと上のやり方だと駄目っすね…。
うーん…どぅしたら…。

解決2-1：
レイアウトのまとめ：
カスタマイズ vol.19-2