伊豆・伊東情報館 Blog

現在、ワードプレスの勉強中でして…
1）　http://izuito.net/wp/
2）　http://izuito.net/wp2/　で遊んでます（苦笑

で、
2）の方は、しばらく放置。
1）の方で、ガチャガチャやってます。　(*>ｖ<)

きっかけはコチラ。

WordPressデザインブック

思わずポチッてみたものの…
手に取って読んでみると、言わんとしてる事はわかるんだけど
どうやら理解を深める為には…

WordPress ステップアップブック

こちらを先に読む必要があるみたいです。
そんな訳で、こちらもポチッ。

兵糧攻め中なのに痛い出費です。　il||li ＿|￣|○ il||li

ただ、やる以上、ある程度は理解しておかないとねぇ～
「乗りかかった船」状態になっちゃいました（苦笑

とりあえず、書かれた通りに
・single.php
・style.css　等を作成・編集。

こんな感じになりました。

ちなみに…
テーマを一から作ってる状態。
まだ、投稿記事・個別ページしか作成していないので
作業中は、アクセスされても真っ白になります。

なので、真っ白だったら…
ガチャガチャやってるな。と思って下さい（苦笑

テーマを戻すと、こんな感じ。

確かにテーマで雰囲気が変わるのは面白いけど…
ガッツリ管理しようとすると、不便な気がしないでも。　┐(^-^;)┌

実際、細かい部分が気になって手を加えていくと…
スタイルシートが凄い事になりそうな…　*o_ _)o

つか、こんなに通信量（たかが知れてる？）を
無駄に増やして良いのでしょうかね？

最後にコメント部分。

天邪鬼なので、（特に配色）は
本を無視している部分があります（苦笑

前回の続き

まずは気になっていた
PR部分の画像の大きさ。

元画像は、120*60。
が、勝手に拡大表示されるように。

まぁ、作り直せば済む話なんだけど…　('A`)メンドクセ
って事で、子テーマでサイズを変更させないように。

あとは…
左寄りだった、amazonのウィジェットを右寄せに。

カレンダーも子テーマでデザインを変更しました。
その他もろもろ変更。

ただ、正直…
作っているというより…
作らされている感が半端無いです。　orz

とりあえず…
ワードプレスで遊んでみた結果、今日はココまで。
http://izuito.net/wp2/

今読んでいるのが
「いちばんやさしいWordPressの教本　第2版」なるモノ。

まぁ、確かにやさしいんだけど…
テーマが固定（指定）されています。

ただ…
以前、遊んでいたページ。
http://izuito.net/wp/

こっちは、変にプラグインを追加したり
その度に子テーマを編集した結果…
訳ワカメになりました。　≧∇≦ブハハハハハ

なので、全体的な流れを勉強するには
テーマ固定で勉強する方が良いかもです。
まぁ、当たり前か。　(*>ｖ<)

それにしても…
老眼が進み、本を読みながらパソコンを操作。
キツイ作業になってきました。　il||li ＿|￣|○ il||li

遅ればせながら、コツコツとレスポンシブ化を進めています。
　>>　伊豆・伊東情報館
日記を引っ越したのも、それが理由だったんですけどね。
　>>　古い日記

「freo」を選んだのは「Web Diary Professional」のデータを引き継げそうだったから。
ただ、設定を間違ったようで…
分類やタグ・リンクなど、ちょっとおかしくなっています。　orz

とにかく、5000ページ近くあるので、隙を見て修正していこうかと。
ちなみに現在、～4180・730～1までは修正済みです。
誤字脱字等も気付けば一緒に。　(*ノノ)

リンクに関しては
　×　http://izuito.net/_cgi/freo/archives/△△.html
　○　http://izuito.net/_cgi/freo/index.php/view/△△
こんな感じです。　orx

で、本題のレスポンシブ化。
一応、Chromeの検証機能で確認はしてるんですけど…

ぶっちゃけ、まだガラケーなんですよねぇ～
≧∇≦ブハハハハハ

なので、自分の目で実際に確認出来ないという気持ち悪い状態。

もちろん、そんな時はググる先生。
モバイルフレンドリーテストなるページで確認しています。

んが。。。

ページ全体（body）は
ブラウザの幅に合わせて
ちゃんと修正されているんだけど…

ググる先生には怒られちゃいました（テヘペロ

まぁ、なんとなく予想は付いているんですけどね。

予想していた部分をコメント化すると成功。

原因は、amazonの「ぐるぐるウィジェット」でした。

それにしても…
('A`)メンドクセ

どうせ、そのうちスマホの方が
レスポンシブ化してないページに対応してきそうだし。

まぁ、CSS3で出来る事は面白いので
ググる先生の評価は気にせず、遊んでみます（苦笑

主に別館（http://izuito.net/index2.htm）の方を大規模改造。
ペタペタ貼ってあったアフィを「くるくるウィジェット」に変更。

各ゲームの攻略ページ自体に貼ってあったアダルト系アフィは撤去。
該当するゲームの購入用アフィのみにしました。

それにしても…
くるくるウィジェット、おもしろいわぁ。
表示される商品も（日毎？）微妙に変化してるし。

amazonって食品も扱ってたのね。
いつも欲しい本・ゲームが出た時にレビューを参考。
で、近所で買えない時にポチッと。　そんな感じ。　(*>ｖ<)

下の「くるくるウィジェット」は
「今一番ほしい物リストに追加されている商品」のゲーム全般。

昨日、ネット上の知人とtwitterで話題になった「スカイリム」も入ってますね（2011/11/13　12:33現在）
確かに面白そうだけど…　PS3かぁ。　Wiiなら参戦できるんだけど。
あ、でもLAN接続をできるようにするアダプタが必要になるか。

まだまだ、当家のオンラインゲーム化は先になりそうです。　orz

とりあえず、アクセス数は無視するとして…
・本館
・別館
・売店　と、三本柱で運営していたんだけど…

amazonの「くるくるウィジェット」とか使ってみると、とうの昔に「オワコン」になってたと痛感。
まぁ、気になった商品をペタペタとアフィってただけだしね（苦笑

自分用の意味合いが強かったんだけど、
いざ利用しようと思うと商品情報が変更されていたり…
で、気づいた以上、無視するわけにもいかず修正。　これがまた面倒で（苦笑
そんな訳で、サクッと削除しました。

ん～　すっきりした。　ヽ(´▽｀)/

とりあえず、（多くの人が）欲しいものリストに登録している商品リストを使用。
カテゴリは「3DS」

本当は自分でピックアップした商品とも思ったんだけど、
自動的に更新してくれるタイプの方が楽だし…
いちいちサイトをチェックしなくても「こんな商品出るんだ～」と分かるし。　(*>ｖ<)

あ、他のページにも実装させてみようかな。
どれだけ効果があるのかは微妙だけど。　(*>ｖ<)

ただ、日記を書いてるだけじゃアレなので…
amazonアソシエイトにも参加してみようかと。

惜しむらくは、自分での購入は規約違反になるんだよねぇ。
まぁ、強制的に退会させられる訳じゃなく、
その分の入金が無くなるだけだけど（たぶん）

そんな訳で試しにペタリと貼ってみます。

先日、IE8にした事で…
既存のサイトに色々と問題が発生している事が発覚。

ブラウザ毎にCSSの解釈が違うってのが原因なので
（たぶん）神経質な私でも「気にしてられん」と、余程の崩れが無い限り目を瞑ってきました。

まぁ、ページ数が多く…
全ページを確認していられないってのが本音だけど（苦笑

つうか、ブラウザが更新される度に振り回されるぐらいなら
いっそスタイルシートなんて止めて、昔の手法であるテーブルレイアウトで作りたいぐらいです。
まぁ、それでも似たような問題は出るだろうけど。　orz

で「IE8　CSS」で検索してみると、おもしろいツールを発見。
早速、インストールしてみました。

Microsoft Expression Web SuperPreview for Windows Internet Explorer

IEのバージョンによって、どう違って見えるか。　それを比較してくれるツールです。
全ブラウザに対応してくれれば助かるんだけどねぇ。

起動後、上部中央部分にファイルを指定、またはURLを入力。
で、ボタンを押すと二画面に分かれて表示されます。

画像は左のタイトル画像を選択した状態。
各左下部分には、その選択エリアのサイズ（横×縦）と左からの位置、上からの位置が表示されます。

こちらはページ上部という事もあり共に同じ数値で問題無いけど…

数値が違うと赤文字で警告してくれます。

また、左の要素を選択した場合、右画面には、その左要素の位置が四角で表示されます。
もちろん、逆も可。

この場合、左（IE6）よりも右（IE7・8）の方が画像が6px分、下に表示されている事になります。

原因は、画面では表示されていないリンク部分。　※発売日と関連ゲームの間部分

高さを指定していないので、そこで解釈が狂ったもよう。
ピッタリ6pxの差がありました。

どうしても狂いが許せない場合…
ガチガチにwidth・heightを指定した方が良さそうです。
なんか、本末転倒な気がしないでもないけど（苦笑

ちょっとした誤差も積み重なると、ここまでの違いに。

以前（製造業の）設計をしていた頃、
上司に耳にたこができる程、教わってきた事ですね（苦笑

誤差の積み重ねが大きな違いになる事と、誤差を0にするのは不可能って事。
なので、寸法線は誤差が許される部分にまで書くな。と。

まぁ、個人的にはデザインなんてのは二の次で、
まずは、読む事が出来るのが第一かと。

ある意味、現実逃避でもあるんだけど…
そうとでも割りきらなきゃ、やってられません。　orz

本日、色々とあってIEのバージョンをアップする事に。
IE6から一気にIE8へとなったんだけど…

どうも馴染めない（苦笑

かと言って、6に戻す訳にもいかないし。
とにかく慣れるしか無いようです。

で、ページを確認していると…
一部、表示が乱れている部分を発見。
まぁ、画像の隙間が無くなってるとか、その程度の事なんだけど
気になったので調べてみると…
やはり、皆さん悩んでおられるようです。

とりあえず、ヘッダ部分に
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
を追加すると応急処置にすぎませんが表示が直りました。
しばらくは、これで凌ぐ事にしておきます。　orz

それにしてもIEはやっかいだねぇ。
それでもIEをずっと使い続けた理由は、まずユーザが多い事。
それと、5ボタンマウスで「戻る」「進む」が動作する事。　だったんだけど…
どうやらIE8にすると、マウスボタンが動作しなくなるようです。　orz

いっそ、火狐に切り換えようかしら？

で、もっと困ったのが…
IE8をアップする際、一緒に新FONT（MSゴシック・MS明朝）も入れてみたんだけど
この字体が、何とも読みにくい。
まぁ、こちらも慣れなんだろうけど、
さすがに耐えかねて、こちらはアンインストールしました。

せめて別フォントとして使えるならともかく、今のフォントを置き換える感じになるから
メールから何から、全ての字体が変更されてしまう状態に。

il||li ＿|￣|○ il||li　本当、余計な事ばかりするなぁ。