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

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年3月27日

隠居のMovableType:データベースをMySQL4 から MySQL5 へ 


 今までのブログ以外にサイトを開設する気になった。新しいサイトをつくるにあたっては、最新の MovableType5(MT5) を導入して見ようと考えた。MT5 では、ブログだけでなくウェブページも管理しやすくなっているらしい。早速、【基本からしっかりわかる Movable Type 5】という参考書を購入して、これに倣ってトライしてみることにした。

 新しいサイトのために、独自ドメインをレンタル・サーバー先の Xserver から取得した。サーバーは、今のところに余裕があるので、これを使うことにした。
 MT5 の導入については、また別のエントリーで記録することにして、今回は MT5 で使用する推奨データベース MySQL5 を設定したときに気をつけねばならない事項を備忘録として記録することにした。
 Xserver では、ドメインが異なっても、同一アカウントではデータベース MySQL のバージョンは複数では運用できないようだ。同じサーバーを使うのだから当然なのかもしれないが。
 知識のない人間がデータベースをいじるので、いささか勇気がいるが、Xserver には MySQL4 から MySQL5 への移行サービスがあるので、これを使って移行した。
 移行の結果、ブログのページを見ると、一見うまく移行しているように見えたが、次のページへリンクできなくなっていた。
  • ブログ内で作成した Webpage
  • ブログ編集画面が開かない
  • アクセス解析の Research Artisan Lite の表示(再設定を求められる)

 対処をネットでググってみると、MT4 のインストール以降いじったことのない mt-config.cgi というファイルにある DATABASE SETTINGS で指定しているデータベース MySql の項にある DBHost をXserver で移行したときに示されたホスト名(私の場合、localhost ⇒ mysql14.xsever.jp )に変更しなければならないことが分かった。
 FFFTP でホストにある mt-config.cgi ファイルを ローカルにダウンロードして、【秀丸】で該当箇所を修正して、再度ホストにアップロードした。すると、今までのブログ編集画面( http://xxxxxx/cgi/mt/mt.cgi )が開くようになった。ここで、ブログごとに再構築を行うと、Webpage へのリンクは復活した。
 また、再設定を求められる Research Artisan Lite は、【「public_html(ドキュメントルート)」ディレクトリの下の階層にある「setting」ディレクトリ】のアクセス権(パーミッション)を書き込み可能("777")に変更する必要があるが、再設定画面でホスト名を変更(他の項目は変更なし)すると、結果が表示されるようになった。
 DB を移行すると文字化けがよく起こるようであるが、文字コードを MT の基本である UTF8 に指定したためか、今のところ文字化けは起こっていない。
 今後も、いろいろと問題が起こるかもしれないが、それぞれで対処していくことになるだろう。これで、MT5 を設定する環境は整った。

   
基本からしっかりわかるMovable Type 5 (Web Designing BOOKS)
田口和裕
毎日コミュニケーションズ
売り上げランキング: 53216
 

2010年5月28日

隠居のブログ:Google AdSense を置いてみた

 5月28日で、Research Artisan のアクセス解析サービスが終了したので、右メニューに置いてある【昨日のページ別:アクセスランキング(Best 10)】の表示はなくなった。なんでもResearch Artisan から来た5月27日のメールでは、有料での再開を考えているらしい。Resarch Atritisan Lite というフリーのソフトで、ほとんど同じサービスを設定することができたが、アクセスランキングについては簡単に設定できるサービスはない。少し勉強して自分でプログラムを作ってみようと思ったが、再開まで待つことにした。来年には古希を迎えるので、残された時間は少ない。有効に使わねばならない。

 アクセスランキングを削除すると右メニューが寂しくなることもあって、ちょっとしたブログのサイトによく見かける Google AdSence を収益は全く期待はしないが、導入してみることにした。登録は簡単である。それこそ、Google で【Google AdSence 】でググると出てくる Google AdSence のページで、アカウントを登録すればよい。もちろん、Google AdSence をはりつけられるようなサイトを持っていなければならないが。

 登録には Google の審査をパスしなければならない。審査を受けるために、次の項目を通知しなければならない。
  • ウェブサイトの URL
  • ウェブ サイトの言語
  • アカウントの種類(個人か、ビジネスか)
  • 国または地域
  • 広告料の支払いを受け取る人と住所など

 審査にパスすると、Google から、「Google AdSense へようこそ」という承認メールが届く。

 そのメールにも示されている URL から、 Google AdSence にログインすると次のような画面となる。
Adsence_02.JPG
 自分のサイトのページに Google AdSense を載せるためのHTMLコード( JavaScript ) を得るためには、【AdSense 設定】タブをクリックして【広告の取得】タブをクリックする。クリックすると掲載できる AdSence の種類が次のようにでてくるので、【コンテンツ向け AdSence 】を選択した。
  • コンテンツ向け AdSense
  • 検索向け AdSense
  • フィード向け AdSense
  • ドメイン向け AdSense
  • モバイル コンテンツ向け AdSense
【コンテンツ向け AdSence 】には、【広告ユニット】と【リンクユニット】の二種類があり、用途に応じて選択できる。私のサイトの場合、右メニューには 160x600pix の【広告ユニット】を、本文下には、728x15pix の【リンクユニット】を選択した。
 デザインについては、次のようなページがでてくるので、文字の色とか背景色・枠線などを好みに応じて設定できる。
Adsence_05.JPG

 このような設定をして、【>>続行】ボタンをクリックすると【チャネル】を設定する画面がでてくる。【チャネル】というのは、どのサイトに、どれくらいの表示回数でクリック数がどれだけあったかの情報を得るために、 AdSence を載せるサイトあるいはページを指定することである。そこまで細かく情報を得る必要がなければ、ドメイン全体の指定で良い。そのような設定をして、送信ボタンをクリックすると、 Google AdSense を載せるためのHTMLコード( JavaScript ) を表示してくれるので、これをページの適切な場所に Copy&Paste すればいい。

 実際に貼りつけてみると、そのページに記載したコンテンツに応じた AdSence が現れる。これが面白い。広告というより、コンテンツに関する世の中の情報を教えてくれるような感じである。AdSense を載せた本人が、クリックしないようにとの指示があるが、どのような内容の広告なのかを知るのはかまわないだろう。

 以下に、アクセスする毎にその内容は変わるが、ページ別の AdSense を例示してみたいと思う。
ページ別の AdSense 例
隠居のジャズ:Radio Senboku で Bebop 特集を組む隠居の庭:4年目のローズアーチ 隠居の探鳥ウォーク:キジに遭遇隠居のDIY作品集
Adsence_06.JPGAdsence_07.JPGAdsence_08.JPGAdsence_09.JPG

 タイトルに、「隠居」という言葉を使っているので、「退職後」とか「老後」といった言葉の入った広告が表示されるのが面白い。実に巧妙である。

  なお、AdSense を別Window に表示するには【Shift】キーを押しながらクリックし、別のタグに表示するには【Ctrl】キーを押しながらクリックしなければならない。このことについては、隠居のパソコン備忘録:IE7 で新しいタブにウィンドウを開く方法(2)に詳しく書いている。

 

2009年12月31日

Atelier Shuhei Weblog の一年を振り返って

 今年も、多くの方々に、Atelier Shuhei Weblog に訪問いただきました。ありがとうございました。
 どのページに、どれぐらい数の方々が訪問されているかなどを分析する無料のアクセス解析サービス Artisan を導入しています。この解析によれば、2009年のアクセス総数は、52,300 件(31日15時現在)でした。この解析結果にもとづいて、この1年間でのアクセスが多かった Best 10 を並べてみました。

  1. 隠居のDIY作品集:5,119
  2. IE7の不具合:起動しない : 1,941
  3. 隠居、友人のPCを LogMeIn でリモート操作する : 1,302
  4. 隠居のDIY:組み立て作業台: 1,091
  5. Home Page : 1,066
  6. DIYアーカイブ : 908
  7. 隠居のデジカメ写真整理:Picasa で取込・編集・送信する : 871
  8. 壊れたJPEG.Fileの復元:デジカメ写真 : 817
  9. MP3 音量一括調整ソフト MP3Gain HELP の日本語化 : 767
  10. 隠居の音楽:mp3 ファイルのID3 タグを編集する : 672


 この Aritisan というアクセス解析サービスは、もちろん商用あるいはプロパガンダ用にページを開設している人・団体のページ管理者が利用していると思われる。 だが、私の場合はアクセス数を増やそうとすることはしていないが、毎日 200 ? 300 人の方が訪れてくださっているので、どんなページにアクセスしていただいているのかが気にかかるからである。

 以前に「隠居、ネット時代の『知的生産の技術』を考える」シリーズでも書いたように、私のブログは 平凡な引退生活者の日記として続けている。ほとんどの内容が、自分用の備忘録である。続けるために、梅棹忠夫さんが『知的生産の技術』の「日記と記録」の章で書かれているように、
いろんなくふうをかさねて、「自分」をなだめすかしつつ、あるいははげましつつ、日記というものは、かきつづけられ
てきて、5年が経とうとしている。このブログのおかげで、引退後の生活経緯は物忘れがひどくなった頭にもかなり鮮明である。

 上の多くの方が訪問してくれているページを見ると、自分用の備忘録が、同じようなことに関心を持たれている方々には、いくらかの参考になっているのかもしれないな思っている。来年も、自分をなだめすかしつつ 記録していくつもりである。

 

2008年12月25日

隠居、Google Chrome をインストールしてみる

 最近、ブラウザーは Internet Explorer もどきの Slepnir を使い、トップ画面は iGoogle としている。
  • 予定が書き込めるGoogle カレンダー
  • Google の WebMail である Gmail へのリンク表示
  • Google 乗り換え案内
  • 気になるサイトへリンクするダイジェスト表示
  • Google Map
などGoogleが提供する種々のサービスを自分の好みで配置できるので、ポータル画面として便利である。

 この iGoogle で最近 Google が開発した(?)まだベータ版であるがブラウザーの案内が Gmail をより高速に と表示される。うたい文句は、"スピード、安定性、セキュリティに優れたブラウザ" とあり、Gmail の展開が早くなるらしい。
 ISP やレンタル・サーバーへのアドレスに送られてくるメールを転送している Gmail の動きが最近悪くなっているのが気になっていたのでインストールしてみることにした。

 体感的に、Gmail の展開は圧倒的に早いようである。通の間では、Google がGoogle Chrome を発表したときからそのスピードに注目をしていたらしい。
 Google Chrome は、文字の表示などが下のscreenshot で見ていただいたら分かるように、Mozilla Firefox と似ている。Google は、この Mozilla の大口出資者でもあるから当然かもしれない。最近リリースされた FireFox 3.0 でも、Gmail の展開が早いことをうたっているから、同様の技術なのかもしれない。

左から Google Chrome、 Mojilla Firefox 3.0、 IE 7.0 、Slepnir 2.8 の画面
クリックすると大きな写真になります
 Google Chrome の画面
クリックすると大きな写真になります
 Firefox 3.0 の画面
クリックすると大きな写真になります
 Internet Explorer 7.0 の画面
クリックすると大きな写真になります
 Slepnir 2.8 の画面


 右端の Slepnir 2.8 は、IEとほぼ同じであるが IE でありがちなバグが少ないので愛用している。
 Google Chrome をまだ少ししか使っていないが、Gmail など Google が提供するサービスには使い勝手が良さそうだ。

クリックすると大きな写真になります 私のブログへのアクセスを解析するフリーのサービス Artisan のデータでは、12月1日?24日まで訪問していただいた 9230 人が使っているブラウザーは、23種類である。その割合は、左の screenshot にあるように 73% が Internet Explorer 7, 6 であり、次が firefox で 18% くらいである。 Google Chrome は9月にリリースしたばかりなのに第5位で 2%となっている。
  Google Chrome を含めて Mojilla Firefox 系が増えてきているので、ブログの表示は Internet Explorer だけを意識するだけでなく Mojilla Firefox 系を考慮する必要がある。
 現在分かっている Google Chrome での問題点は
  • 私のブログ表示で、上の screenshot で分かるように IE にくらべて文字や行間が大きくなることがある。
  • 画像を拡大表示するときに使っている lightbox のキャプション部分が隠れてしまう。
  • VISAの利用明細がMycrosoftMoneyにダウンロードできない
などである。同じURLコードを書いていてもブラウザーによって表示が異なるのは困りものである。
  Internet Explorer と Netscape 以来の確執の世界であるが、なんとか細かい点まで統一をしてほしいものだ。