Atelierで“MT4”タグの付いているブログ記事

2013年1月11日

隠居のパソコン備忘録: ブログ(MT4.1)の表示レイアウトを変更する


 私のブログ(Atelier Shuhei Weblog)に訪問してくださる方たちの訪問内容を分析するサービスがある。私は、古くから Reasearch Artisan Lite というサービスを使わせてもらっている。

 この分析項目の一つに、訪問者がどのような解像度のモニターで表示されているかが示される下のスクリーンショットのような表がある。最近3ヶ月の訪問内容を調べてみた。

0111_1.JPG
 最近の液晶モニターは、解像度が向上してブラウン管のモニターが大勢であったころの 1024x768 のモニターは少数派となってしまった。私のブログは、1024x768 のモニターで見てもらうことを前提に、ブログのレイアウトを構成してきた。
 ブログのテンプレートは、MovableTypeのエキスパートである小粋空間が提供するテンプレートから、横幅がモニターの解像度に合わせて伸縮するリキッドレイアウト(2段)を使ってきた。もともと横幅を1024ピクセルに合わせて、テーブルなどを作成してきたので、最近の横幅 1280 や 1600 などのモニターで画面一杯表示させると、非常に間抜けた表示になってしまう。多くの方が、このレイアウトの崩れた画面を見ておられることになる。
 実は私も、普段は横幅 1600 ピクセルのモニターを使っていて、自分のブログを表示するときには、縮小モードで横幅を 1024 近くで表示させているのだ。
Google や Yahoo! のページでは、どのような解像度で見ても対応できるように作られているが、このようなページを作るには難易度が極めて高そうだ。
 それで、先の小粋空間さんのページをはじめ多くのページで採用されている横幅が固定したレイアウトに変更することにした。それほど難しくは無いだろうと始めた作業は、結局丸2日ぐらいかかってしまった。今後のために、試行錯誤の作業を記録しておきたい。

  1. 小粋空間のサイトで探し当てた【テンプレートセットの入れ替え】というページにもとづいて、「2カラム(右サイドバー)・リキッドレイアウト(layout-two-column-liquid-right)」から、「2カラム(右サイドバー)・固定レイアウト(layout-two-column-right)というレイアウトにデザイン適用を行った。だが、これからが大変だった。
  2. 後でわかったことであるが、レイアウトを入れ替えると、ブログのテンプレートが初期化された。(追記:2013/1/17)私のブログだけだったようで、初期化されるのはスタイル・シートだけである。 問題は、長い間にわたってカストマイズしてきたインデックス・テンプレートの、スタイル・シート、メインページが、テンプレート・モジュールのヘッダー、サイドバー2、サイドバー、コメント入力フォームが初期化されたことである。幸い私の場合、友人のブログをほぼ同じようにカストマイズしてきていたので、これらの内容をコピペすることで、かなりの部分が助かった。だが、私のブログ用にかなりいじっている部分もあったので、これを修復するのが大変だった。
    カスタマイズしたテンプレートは、事前に別ファイル名でコピー保存しておくことが必要だ。
  3. 一番の苦労は、2カラム(右サイドバー)・固定レイアウト用に、スタイル・シートをいじることであった。レイアウトの全幅は #box、 記事部分は #content 、右サイドメニューは #links-right-box、にピクセル数を与えながら設定した。

まだ、原因が判明できないバグがあるが、おいおいと修正したいと思う。まあ、苦労したお陰で、仕組みの理解は少し進んだかもしれない。
歳をとっての、このような作業は辛いが、ボケ防止になるだろう。

2011年4月18日

隠居のMovableType備忘録:MT5 で lightbox2.05 を動かしてみる 

 限定メンバー用に、新しいサイトを MovableType5(MT5) で作成してみることにした。MT5 は基本的には、MT4 と変わらない。MT5 では、ブログだけでなくウェブページも管理しやすくなっているらしい。早速、【基本からしっかりわかる Movable Type 5】という参考書を購入して、これに倣ってトライしてみた。

 この本の Chapter 2 【Movable Type 5 のインストール】に書かれている通りに行うと、問題なくインストールできた。ただ、レンタル・サーバー(私の場合、xserver )で用意してくれているデータベースMysql はバージョン4から5に上げる必要がある。ここでの注意点は、3月27日の【隠居のMovableType:データベースをMySQL4 から MySQL5 へ】で記録した。

 MT4 で愛用している サムネイル画像をクリックするとWebブラウザ画面上に拡大画像を背景をフェードアウトして表示するためのプラグインである Lightbox を、MT5 でも使いたかったのでインストールした。少々のカスタマイズもしたので備忘録として記録しておきたい。
  • MT4 では、lightbox2.04 はうまく動作しなかったのでlightbox2.03 を使っている。開発元の Lokesh Dhakar のページに訪ねると、バージョンは 2.05 がこの3月18日にリリースされていた。これを導入するとすんなりと動いてくれた。
  • 導入の方法については、ググってみると最近は多くがヒットするが、前にもお世話になったページを参考に導入した。
  • そのページにもあるように、.css .js ファイルを MT5 のヘッダー部に挿入しなければならない。MT5 でも MT4 と同じように、各ブログのモジュールテンプレートの【ヘッダー】の </head> 直前に挿入した。
    <!-- lightbox2.05 -->
    <link rel="stylesheet" href="http://xxxxxxxxx.net/home/lightbox205/css/lightbox.css
    " type="text/css" media="screen" />
    <script src="http://xxxxxxxxx.net/home/lightbox205/js/prototype.js" type="text/javascript"></script>
    <script src="http://xxxxxxxxx.net/home/lightbox205/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="http://xxxxxxxxx.net/home/lightbox205/js/lightbox.js" type="text/javascript"></script>

  • カスタマイズのひとつは、グループ表示するときに、拡大画像に表示される【PREV】【NEXT】【CLOSE X】ボタンを自分でデザインした に変更したことである。
     変えるのは、自分でデザインしたボタンを、lightbox2.05 の images フォルダーにある prevlabel.gif nextlabel.gif close.gif をファイル名をそのまま直接置き換えることでできる。
  •  MT で画像をアップロードする場合に Lightbox 使うためには、MT で生成されるコードに、title="" rel="lightbox[]" を挿入しなければならない。これをそのたびに挿入するのは面倒なので、MT の /cgi/mt/lib/MT/Asset フォルダーにある Image.pm ソース・プログラムの320行目あたりにある行を、青字のように変えた。これは、MT4 で実施した方法でうまくいった。これが、カスタマイズの2つ目である。
    # '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
    '<a href="%s" title="" rel="lightbox[]"><img alt="%s" src="%s" %s %s /></a>'

  • 背景色を変えるなどその他の細かいカスタマイズは、以下のページを参考にさせてもらった。


 

2008年6月24日

隠居、MT4.1 でのコメント編集HTMLタグボタンを設置

 MT3.3 のときには、コメント入力ボックスの縁に、HTMLタグボタンをカストマイズで設置していた。MT4 にバージョンアップして、新たに「小粋空間」さんの MT4.1 テンプレートセットを導入したが、「コメント入力フォーム」には、このHTMLタグボタンがついていない。

 コメントも単純なテキスト文書でなく、冗長な絵文字までいらないが、文字の一部分を太字にしたりリンクを張ったりしたい。HTMLタグは使える設定にしているので、タグを書けばよいのだがいちいち面倒である。それで、新しい「コメント入力フォーム」にもHTMLタグボタンをつけることにトライすることにした。

 「MT4 コメント編集ボタン」でググルとすぐにでもありそうなのに的確にヒットしない。そこで、MT3.3 のときにお世話になった「小粋空間」さんの「コメントにHTMLタグ挿入ボタンをつける(改)」を参考にさせてもらって、MT4 に応用してみた。カスタマイズの記録として記しておきたい。

 「小粋空間」さんのエントリーの順に従って、変更した部分を書き留めたい。
  1. コメント欄でのHTMLタグの使用を有効にする。
    →MT4 では、「ブログの設定」→「コメント」→「コメントポリシー:HTMLを許可」をチェック
  2. 編集ボタン用画像のコピー
    →バックアップでおいてあった MT3.3 のときのファイルを <$MTBlogURL$> (私の場合:http://n-shuhei.net/atelier/ )に images フォルダーを作ってアップした。
  3. JavaScriptファイルの作成>
    →提供されている JavaScript のスクリプトを秀丸に文字コードを UTF-8 として Copy&Paste とし、ファイル名を commentButton.js として保存した。このファイルを <$MTBlogURL$> のフォルダーにアップした。
  4. 編集ボタン表示スタイルの追加
    →提供されているコードをスタイルシート(styles-site.css)に追加した。ただし、実際の表示をみて、以下のコードの赤字部分を修正した。
    /*  field buttons */
    .field-header {
        width: 400px; /* ボタンを配置するエリアの幅 */
        height: 30px; /* ボタンを配置するエリアの高さ */
        position: relative;
    }
     
    .field-label {
        position: absolute;
        bottom: 30px;
        left: 0px;
    }
     
    .field-buttons {
        position: absolute;
        bottom: 0px;
        right: 0px;
    }
     
    .field-buttons img {
        border: 0;
        margin: 0px 0px 0px 3px;
    }
    

  5. テンプレートの修正(JavaScriptファイルのインクルード追加)
    →モジュール・テンプレート 「ヘッダー」の </head> 直前に、
    <script type="text/javascript" src="<$MTBlogURL$>commentButton.js" charset="utf-8"></script> 
    
    を挿入した。

  6. テンプレートの修正(個別エントリーアーカイブへ編集用ボタン設定)
    →モジュール・テンプレートの「コメント入力フォーム」の次の部分をコメントアウトし、その直後に提供されているコードを挿入した。
     <!--<p id="comments-open-text"><label for="comment-text">コメント:<MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>-->
    
    <div class="field-header">
    コメント:
    <div class="field-buttons">
    <a title="太字" href="#" onclick="return formatStr(document.comments_form.text, 'strong')"><img class="button" src="<$MTBlogURL$>images/html-bold.gif" alt="太字" width="22" height="16" /></a>
    <a title="イタリック" href="#" onclick="return formatStr(document.comments_form.text, 'em')"><img class="button" src="<$MTBlogURL$>images/html-italic.gif" alt="イタリック" width="22" height="16" /></a>
    <a title="アンダーライン" href="#" onclick="return formatStr(document.comments_form.text, 'u')"><img class="button" src="<$MTBlogURL$>images/html-underline.gif" alt="アンダーライン" width="22" height="16" /></a>
    <a title="ハイパーリンク" href="#" onclick="return insertLink(document.comments_form.text)"><img class="button" src="<$MTBlogURL$>images/html-link.gif" alt="ハイパーリンク" width="22" height="16" /></a>
    <a title="引用" href="#" onclick="return formatStr(document.comments_form.text, 'blockquote')"><img class="button" src="<$MTBlogURL$>images/html-quote.gif" alt="引用" width="22" height="16" /></a>
    </div>
    </div>
    
    

以上で、「コメント入力フォーム」にコメント編集ボタンは表示されるようになった。MT4 では、「コメント入力フォーム」がモジュール化されているので、コメントの「確認」画面でも、コメント編集ボタンは表示される。
(追記:2009/3/2)サインインなしのコメントのための Captcha を設定したときに、HTMLタグのアイコンが消えてしまっていたので、修正した。また、一部の記述を変更した。

2008年6月13日

MT4.1 での画像UP練習:初夏の花など

080612_009.jpg080612_002.jpg MT4.1 にしてからテンプレートばかりいじってきたので、新しいエントリーをアップする機会がなかった。写真をアップする方法が少し違っているようなので練習を兼ねてアップしてみた。
 MT3 のエントリー編集画面では、左メニューに「ファイルのアップロード」という項目があったが、MT4 では、編集画面上に並んだアイコンの右端に、「画像の挿入」と「ファイルの挿入」アイコンがある。
クリックすると大きな写真になります 「画像の挿入」で行うとファイルのアップロードまでの操作は、MT3 のときとほぼ同じだが、エントリー画面に取り入れを指定する方法が少し便利になっている。サムネイル画像を作る指示で、画像の幅を指定すると元の比率を維持したまま、画像の高さを決めてくれる。また、今までエントリーの中で指示していた(私の場合、CSS に属性を作成し、class で指定していた)文章の回り込みが指定できるオプションがある。
 今まで、作られたHTML コードは C&P していたが、MT4 では、自動的にエントリーの先頭に貼り付けられる。場所を移動する場合は、やはり Cut&P しなければならないが。
 それと私の場合、lightbox を導入しているので、そのための属性コードは挿入しなければならないのは、MT3 のときと同じである。

 孫の運動会見物の昼休み、校庭のそばのハルジオンなど野草が茂る土手で、モンシロチョウが羽化(と思うのですが)しているおり、その周りを2羽の蝶が飛び回っているのを見つけた。