メイン | 2006年05月 »

2006年04月19日

StyleCatcherのサムネイル画像が表示されない

今日はこのサイトのトップページにもブログを設置した。
デザインはこのブログと同じ。
たったこれだけのことに数時間を費やした。
MTカスタマイズの道は長く険しい。

Movable Typeでつくる!最強のブログサイト時間をかけたのはデザインの微調整。
まずこのデザインをオリジナルデザインとして利用可能な状態にする作業(StyleCatcherに登録)をする。

方法は『Movable Typeでつくる!最強のブログサイト』の10章に記載されている。

手順はこんな感じ。

修正したスタイルシートを「mt/mt-static/themes」にフォルダごとアップロードする。
StyleCatcherの設定画面にアップしたオリジナルデザインが表示されているので、それを選択。
次にキャプチャー画像を加工してサムネイル用の画像を2種類用意する。
それを同じフォルダ内にアップする。
もう一度設定画面に移動する。

本来なら、そこで今つくったばかりのサムネイル画像が表示されるはずだが、まったくされない。
これはオリジナルデザインだけでなく、SixApartのライブラリからもってきたテンプレートのサムネイル画像も表示されない。

この問題は原因不明。
調べてみたが、わからなかった。
ただ、そのデザインを選択すれば変更はできる。

この文章を書きながら、もう一度設定を見直してみた。
そしたら、あった。
間違いが!

ロリポップの場合、以下のように設定する。

Theme Root URL : /MTInstallDirectory/mt-static/thems
Theme Root Path : /home/sites/lolipop.jp/users/SERVERNAME-USERID/web/MTInstallDirectory/mt-static/themes

Theme Root URL : /MTInstallDirectory/mt-static/themes
Theme Root Path : /home/sites/lolipop.jp/users/SERVERNAME-USERID/web/MTInstallDirectory/mt-static/themes

赤字のところ、「themes」フォルダ内にStyleCatcherのテンプレート(CSSファイルとサムネイル画像2枚)が入っているのだが、それを「thems」としていた。

設定し直すと、表示された!
よかった。(^_^;σ←MTを挫折する人の気持ちがわかる

カラムのデザイン微調整

SafariとFirefoxとで、左カラムと右カラムのタイトルの位置が違う。
Firefoxではきちんと表示されるが、Safariではナビゲーションのところに、タイトルがずれて表示される。
これをどうにかしたい。
で、スタイルシートをいろいろいじくって、問題の箇所を見つけた。

position: absolute; で位置を決定していたのだが、ブラウザによって同じ数値を設定しても違う位置に表示される。
Safariはやや高い位置に表示されるので、Safariに合わせることにする。
いろいろ試した結果、上から120px でいい感じになった。

次に真ん中のカラム(beta)もちょうどいい位置になるよう微調整する。
やはり、思った通りにデザインできると、気持ちがいい。

2006年04月12日

リキッドレイアウトに変更する

リキッドレイアウトにしてみた。
リキッドレイアウトとは、ブラウザ画面の大きさに左右されないデザインのことで、リキッドデザインとも言う。

小さな画面でも大きな画面でも液体のように可変し、デザインが崩れないのが特徴。

サイズ固定のレイアウトでは、画面が小さすぎると全体が表示されなかったり、デザインが崩れたりする。
また、画面が大きすぎると、やけにスカスカな印象を与えかねない。
つまり、サイズ固定のレイアウトは閲覧者にブラウザの画面を調整してもらわねばならない場合がある。

しかし、リキッドレイアウトでは、どんなサイズだろうと、調整の手間は必要ない。
ユーザビリティの観点からすると、優れていると言える。

変更は簡単で、メインページの<body>タグの属性を修正して、再構築すればいい。

<body class="layout-three-column">
<body class="layout-three-column-liquid">

リキッドレイアウトになったが、どうも表示がヘンだ。
3つあるカラムの真ん中betaは、padding を設定して余白をつくった。

Firefoxはきちんと表示されているが、SafariとInternet Explorer for Macでは左のカラムalphaと右のカラムgammaが上に突き出て、ナビゲーションメニューにくい込んで表示されている。
さらに、Internet Explorer for Macではbetaで設定した余白も反映されない。

う〜ん、なぜだ? (^_^;σ

ナビゲーションメニューを設置

バナーの下にナビゲーションを付ける。
バナーとはタイトルやサイト説明文のある部分だ。

Movable Typeでつくる!最強のブログサイト』のp192にナビゲーションメニューを付ける方法が紹介されている。

まずカテゴリーを5つぐらい作成し、各カテゴリーのトップページへのリンクをエディターで作成する。

次にそれをリストタグ(<ul><li></li></ul>)ではさむ。
そこに「nav」というセレクタ(id)を指定して、その「nav」をcssで定義する。

<ul id="nav"><li><a href="http://seikou.info/blog/">TOPページ</a></li>
<li><a href="http://seikou.info/blog/cat2/">インストール</a></li>
<li><a href="http://seikou.info/blog/cat4/">デザイン</a></li>
<li><a href="http://seikou.info/blog/tb/">TB・コメント</a></li>
<li><a href="http://seikou.info/blog/cat5/">アフィリエイト</a></li>
<li><a href="http://seikou.info/blog/mt/">MT修得日記</a></li></ul>

本に載っている通りに記述し、上記タグをバナーとページボディの中間に挿入して、「nav」の定義を付けくわえたCSSファイルをアップロードしてみたが、リストのまま。
思っていたような表示にならない。

Windowsならきちんと表示されるのだろうか?

きっとそうなのだろう。
だが、SafariやFirefox、Internet Explorer for Mac ではダメ。
「id」を「class」に変えてみたり、<div>で囲んだりしてみた。
結果はダメ。

そこで、『スタイルシート スタンダード・デザインガイド—SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術』のp.168で紹介されている方法を試してみる。

こちらはリストタグを使わない。
<div>タグで各カテゴリーのトップページへのリンクを囲む。
「men」というクラス属性をくっつけて。

<div class="men"><a href="http://seikou.info/blog/">TOPページ</a>
<a href="http://seikou.info/blog/cat2/">インストール</a>
<a href="http://seikou.info/blog/cat4/">デザイン</a>
<a href="http://seikou.info/blog/tb/">TB・コメント</a>
<a href="http://seikou.info/blog/cat5/">アフィリエイト</a>
<a href="http://seikou.info/blog/mt/">MT修得日記</a></li></div>

これをバナーとページボディの中間に挿入して再構築。
次にCSSファイルに以下の記述を付けくわえる。

/* ナビゲーション */
div.men { font-size: 0.75em;
     background-color: #9a6;
     text-align: center;
     height: 2em }

div.men a { color: #ffffff;
      line-height: 2em;
      text-decoration: none;
      background-color: #9a6;
      float: left;
      border-right: 1px solid #ffffff;
      width: 10em;
      display: block }

div.men a:hover { background-color: #32cd32 }

保存して、アップロードする。
見事成功した!

Movable Typeでつくる!最強のブログサイト スタイルシート スタンダード・デザインガイド—SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術

エントリータイトルに趣向を凝らす

StyleCatcher(スタイルキャッチャー)をインストールしたはいいが、気に入ったデザインのテンプレートがない。
しかも英語。(^_^;σ

そこで、頼みの綱『Movable Typeでつくる!最強のブログサイト』で紹介されていた小粋空間へ。

一目見て、配布しているテンプレートを利用させていただく。

さて、デザインのカスタマイズだが、StyleCatcherのテーマ用スタイルシートは管理画面から編集できない。
無理やりやったら、画面が文字だらけになる。(^_^;σ←びっくりしたよ〜

CSSファイルをFTPソフトでダウンロードして、エディターで編集保存、それをアップロードする。

背景色を変えて、枠線の色も変えた。
これは比較的簡単。
エントリータイトルはちょっと凝ったデザインにした。

こんな風になりました

/* エントリータイトル */
.entry-header {
margin: 0px 0 0;
color: #333300;
background-color: #f5f5f5;
font-size: 18px;
font-weight: bold;
padding: 2px 2px 2px 2px;
border-left: 20px solid #9c0
}

MTにアドセンスを設置

記事をアップすると自動的にアドセンスも表示されるようカスタマイズする。
いろいろ場所を検討したが、記事本文(エントリーの内容)と追記記事(more)の間にはさむのがいい感じだ。


<$MTEntryBody$>
 ↑
この間にはさむ
 ↓
<MTEntryIfExtended>


カテゴリーやアーカイブのページにも貼りつけたが、そっちはなぜか表示されない、、? (^_^;σ

今、見たら、表示されてた。(^_^σ♪

カスタマイズ最初の1歩

昨日と今日でずいぶん進んだ。
やったことを列挙する。

  1. StyleCatcher(スタイルキャッチャー)をインストール
  2. ブログデザイン変更
  3. 2カラムから3カラムへ
  4. 付属の検索をGoogleに変更
  5. アフィリエイトリンクを貼る
  6. 背景色をグリーンに変更
  7. h*タグの変更
  8. エントリータイトルの装飾
  9. エントリーごとに日付を表示
  10. エントリータイトルに個別記事ページへのリンクを貼る
  11. 個別記事、アーカイブなど1カラムのページ幅を広くする

2006年04月09日

トラックバック送信できた

つい数分前、「トラックバックが送信できない」という記事を書いた。

金策冒険家エイジのblog|Movable Type 3.2を導入するまで長い夜という私が運営するブログに成功.info blog からトラックバックを送信したのだが、ことごとく失敗した。(30分で7回)

気を取り直して、一つ前の記事「無印良品 ユニットシェルフ考」に、Movable Type 3.2とはまったく関係ないが、トラックバックを送ってみた。

なぜか、成功。(^_^;σ


【現在有力な仮説】

あまりにも新しい記事にはトラックバックを送信できない

30分後、「金策冒険家エイジのblog|Movable Type 3.2を導入するまで長い夜」へトラックバックを送信したら、成功した。
この仮説、正しいと思われる。



カスタマイズ性に優れた高機能ブログソフトウェア

トラックバックが送信できない

最初の記事「MacユーザーがMT3.2を導入するまでの平坦でない道程」に、「最初で最後」と書いたが、撤回する。
このブログをMovable Type 3.2(以下MT)の修得記録として、その日試みたこと、その結果などを書き記していくことにする。

今日やったことは、トラックバックとコメントの設定。
どちらも「受け付ける」設定に変更。
再構築後、最初の記事の一番下に、コメント欄とトラックバックURLが表示される。

そこで実験。

  1. 自分が運営するブログ(JUGEMと楽天広場)へトラックバックを送信。
  2. 自分が運営するブログからこちらのブログへトラックバックを送信。


実験のために、最初に書いた記事「MacユーザーがMT3.2を導入するまでの平坦でない道程」をJUGEMの方へアップする。
記事内容は同一。
タイトルだけ変更。

金策冒険家エイジのblog|Movable Type 3.2を導入するまで長い夜


「長い夜(JUGEM)」の方からこちら(成功.info blog)へトラックバックを送信。
見事成功。

つぎにこちらのブログからJUGEMの方へトラックバックを送信。
なぜか失敗。

以下のメッセージが表示される。

トラックバックか、アップデート情報の送信でエラーがありました。 エラーの場合は、ログをチェックしてください。


ということで、ログをチェックする。
すると、「http://kinsaku.jugem.cc/trackback/282」へのトラックバックは失敗しました: don't accept trackback」とある。
なぜ受け入れない?

というか、「don't accept trackback」って何だ?

とりあえず、気にせずひたすら「http://kinsaku.jugem.cc/trackback/282」へのトラックバックを送り続ける。
くり返すこと7回。
結果は以下の通り。


1分前まで 「http://kinsaku.jugem.cc/trackback/282」へのトラックバックは失敗しました: don't accept trackback ping
18 分前 「http://kinsaku.jugem.cc/trackback/282」へのトラックバックは失敗しました: don't accept trackback ping
24 分前 「http://kinsaku.jugem.cc/trackback/282」へのトラックバックは失敗しました: don't accept trackback ping
26 分前 「http://kinsaku.jugem.cc/trackback/282 http://tb.plaza.rakuten.co.jp/supple/diary/200603290000/」へのトラックバックは失敗しました: HTTP error: 302 Found
28 分前 「http://kinsaku.jugem.cc/trackback/282」へのトラックバックは失敗しました: don't accept trackback ping
29 分前 「http://kinsaku.jugem.cc/trackback/282」へのトラックバックは失敗しました: don't accept trackback ping
30 分前 「http://kinsaku.jugem.cc/trackback/282」へのトラックバックは失敗しました: don't accept trackback ping


ただ楽天広場の方へのトラックバックは成功した。(1回失敗したが……)

ひとまず、ここまで。


[PR] ロリポップならMovableType設置マニュアルも充実。
あなたも月々263円でブログデビューしてみよう!!

MacユーザーがMT3.2を導入するまでの平坦でない道程

MacユーザーがMT3.2を導入するまでの平坦でない道程

今、午前3時5分。
Movable Type 3.2(以下MT)のインストールに成功し、初めてつくったブログに最初で最後の記事を書いている。
ひとまずこのブログはこれからブログのカスタマイズをする際の実験用に使おうと思っている。
今のところ、それ以外の使い道は考えていない。
だから本当は必要ないのだが、ここまで到達した記念に、この記事を書き記しておくことにする。

ここまでくるのに、3時間かかった。


私はMacユーザーである。
MacユーザーがWindowsユーザーよりも不利な点の1つとして、情報が少ない、ということがある。
PCやネットワーク関連の書籍は、読者がWindowsユーザーであることを前提として話が進められることが多い。(というか、世の中にはMacユーザーなど存在しないかのような扱いだ)
Windowsでのやり方はわかってもMacでのやり方はわからないこともしばしば。
また同じことをしようと思っても、調べたり実験したりする時間がかかる分、やたらと手間がかかる。


MTをインストールして、自作ブログをつくる。


これはある程度ブログをやり込んだ人なら一度は考えることだ。
私も1年以上前から、MTを導入できたらもっと更新が早くなり、運営も楽になるのに、と思っていた。
が、今日の今日まで導入できなかった。
MacユーザーにとってMTは、WindowsユーザーにとってのMTよりもはるかに険しくそびえている。

そして実際に険しい。

ここでは、この記事を書くまでにつまずいた箇所とその解決策について記録する。

1:six apartからTypeKeyを取得できない

MTを導入する最初のステップはTypeKeyのアカウントを取得することだ。



カスタマイズ性に優れた高機能ブログソフトウェア


上記バナーを経由してsix apartへ行き、「ダウンロードページへ」ボタンを押すが、途中でウンともスンとも言わなくなる。
Firefoxで試してダメ、Safariダメ、Internet Explorer for Macでダメ。
何回やってもダメ。
セキュリティーの問題かと、ブラウザの環境設定をいろいろいじくったがダメ。
結局six apartへ問い合わせる。

それから17時間後、今度はなぜか一発でダウンロードページへ移動できるようになる。
何だったのか?


2:MT本体をアップロードできない


ライセンスを取得し、明細をプリントアウトした後、MT本体をダウンロードする。
ファイルを解凍後、設定ファイルを修正し、FTPソフトでMTをアップロードする。


MT本体は膨大な数のファイルとフォルダでできている。
まずファイルをアップするのはたやすい。
いつもやっていることだ。
問題はフォルダ。

フォルダをつくって、その中にファイルをアップし、またフォルダをつくって、、、という作業はやっていられない。
フォルダが何階層にもある。
フォルダを中身ごとアップロードする方法を見つけなくてはない。

使用しているFTPソフトはFetch。
このFetchの使い方、完全に理解しているわけではない。
フォルダを丸ごとアップロードする方法を知らなかった。
いろいろ探して、「リモート」メニューに「フォルダとファイルをPut……」をみつける。
アップするフォルダをどんどん「追加」していき、すべてを「追加」したら、「完了」を押す。
成功したようだ。


3:CGIファイルのパーミッションの変更の仕方がわからない


アップロードしたcgiファイル、パーミッションを変更する必要がある。
FTPソフトで変更できるらしいが、これまでやったことがない。
Fetchの「リモート」メニューに「ファイルの権限(パーミッション)の設定」を発見。
どう見てもこれ以外にない。
これをロリポップの場合、属性を「700」に変更する。(サーバーによっては「755」の場合もある)

が、どうやれば属性が「700」になるのかわからない。

Windowsユーザーがよく利用するFTPソフトには「属性」という欄があり、そこを「700」と記入すれば、それで変更できるようだ。
ただそこにあるのはチェックボックス9つ。
そこで、チェックを入れたり解除したりした。
すると、属性が「760」になったり、「740」になったりした。

Fetchの場合、こうやって属性を変更するのか。

これですべてのcgiファイルの属性を「700」に設定できた。




★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
なんと一番安いプランだと月額263円から!これならおこづかいで使えちゃう。
容量も200MBの大容量!CGIにSSI、PHPだって使えるよ。
85個もの可愛いアドレスで、友達に差をつけちゃおう。


4:設定ファイルを修正してもエラー発生


私が利用しているサーバーはロリポップである。
ロリポップにはMT導入マニュアルがある。
そこに書いてある通りに必要な作業をこなしていく。


[PR] ロリポップならMovableType設置マニュアルも充実。
あなたも月々263円でブログデビューしてみよう!!


が、当然そうなるべきことがそうならない。

設定ファイルに必要な修正を1つの間違いもなく行って、アップロードした。
システムチェックも正常終了。
あとはログインしてインストールを開始するだけ。

なのに、MTのシステム初期化画面が現れない。
代わりにこんなメッセージが出る。

Got an error: 環境変数「」が未設定です。(ファイル: /(自分のフルパス)/web/cgi/mt/mt-config.cgi)、70行目)

Movable Typeでつくる!最強のブログサイト何度設定ファイル(mt-config.cgi)見直しても、間違いが見つからない。
Movable Type 3.2
対応の最新の解説本(右画像)を読むが、原因不明。
らちが明かないので、せっかくアップしたファイルやフォルダを削除して、もう一度入れ直す。
でもダメ。

そこで「環境変数 70」で検索。
同じ症状に悩んでいる人を発見する。
リンクをたどっていくと意外な事実が発覚した。
原因はブラウザFirefoxにあった。

ロリポップのMT導入マニュアルをFirefoxで閲覧すると、修正するところ(70行目)が改行されて表示されてしまう。

70行目の #DataSource /path/to/database/directory の先頭の #を外して さらに DataSource / home/sites/lolipop.jp/users/lolipop.jp-cololipo7/web /cgi/mt /db とします。


と表示されなくてはいけないところ……

70行目の #DataSource /path/to/database/directory の先頭の #を外して さらに DataSource / home/sites/lolipop.jp/users/lolipop.jp-cololipo7/web /cgi/mt /db とします。


と表示される。


2行にしていたのを1行に直したファイルをアップロードする。
すると、何事もなかったかのようにMTのシステム初期化画面が現れた。
「インストールを実行」ボタンを押す。
ものの数秒でインストールが完了した。


5:MTにログインできない


インストールが完了したら、ようやく待望のMT管理画面へログインする。
が、ログインできない。
なぜだ?

理由は、TypeKeyを取得したときに設定したsix apartのユーザー名をログインの欄に記入していたからだった。
MTの管理画面に、最初に入るときは、ユーザー名を「Melody」、パスワードを「Nelson」と入力するとのこと。
これは比較的すぐに解決できた。


6:.htaccessファイルを保存できない


MT管理画面へログインはできた。
投稿者プロフィール画面で、ログイン名とパスワードの変更も行った。
すぐにでもブログを新設したいところだが、最後に一仕事ある。
dbフォルダの保護だ。

dbフォルダの中身を覗かれてしまうの防ぐために、dbフォルダ内に「.htaccess」ファイルというたった4行のファイルをアップロードする。

これをエディターにコピペして保存するだけ。
にもかかわらず、その保存ができない。
理由は「.」が最初に付いてるからだ。
これが最初に付いてると保存できない。
当然アップもできない。

どうする?

そこで、「1.htaccess」という名前で保存し、そのファイルをdbフォルダ内にアップした。
もちろんこれでは意味がない。
そこで、Fetochで「1.htaccess」ファイルの名前を「.htaccess」に変更した。
「リモート」メニューから「名前変更」で変更できる。

念のためdbファイルにアクセスしてみる。



指定されたページ(URL)へのアクセスは禁止されています。


と表示された。
これでオッケーだろう。


と、ここまで来るのに3時間。
これを書くのに2時間半。

今、午前5時30分。
さすがにもう寝ようと思う。

 


Copyright (C) seikou.info All rights reserved. Feel free to link this site.(当サイトはリンクフリーです) |管理人へメール