伊豆・伊東情報館 Blog

今更ながら勉強中。
もう、何度も頭が「バーン」なってます…　o..rz

他の言語も含め、今までは本＆ネットを中心に独学で覚えてきたんだけど
今回、縁あって動画視聴というスタイルでお勉強。

これが忙しい忙しい（苦笑
複数のウィンドウを開いて動画を再生しながら文字を入力。

私（心の声）「ちょっと待ってぇぇぇ」
入力が追いつかず、慌てて動画を停止。　みたいな。　(*´艸`*)

クラスだの…
インスタンスだの…
言われた通りに作っているけど、意味がちんぷんかんぷんです（キリッ

まぁ、な～んとなくイメージはできるけど
なんか靄がかかっている感じです。

昔（Win95・98時代）は、
ブラウザで「javascript」を使えなくする事が推奨されていたのにねぇ。

ちなみに「html」「CSS」も再勉強中。
フレックスボックス…　なんて便利なんだ…

「Float」と闘った時間を返してくれ。　il||li ＿|￣|○ il||li

普通、web用のページは「html」で記述され専用のソフトやテキストエディタが使用されます。
テキストエディタの代表はWindowsに最初から含まれている「メモ帳」ですね。

テキストエディタ（txtデータ）の特徴としては
・（基本的に）動作が軽い
・汎用性が高い

まぁ、文字を装飾する事もせず、ただただ文字を入力するだけなので軽いのは当然ですね。
（基本的に）というのは…
フリーソフトでも優秀なテキストエディタは数多くあり
それに対応するプラグインも多数、用意されています。
なので、欲張ってプラグインを入れ過ぎると「重くなるかな？」と。

自分は経験無いですけどね。　(ﾟ～ﾟ)

汎用性の高さは言うまでも無いですね。
そもそもデータが文字だけなんだし。
ただ…　エンコードの問題もあるので完全とは言えませんが。

で、本題。
そんな基本txtデータであるhtmlを書いていく際に、表計算ソフト「Excel」が役立つ事も。

色々と活用方法があり、全てを書くと長ぁ～～～くなるので
今回は基本的なやり方のみ。

まぁ、聞けば「そんな事か」ってレベルかと思いますが。　orz

私の場合、ゲームの攻略ページを主に作っているので
とにかく　tableタグのお世話になります。

でもデータをまとめるには「Excel」が便利。
なので、データは「Excel」に入力しています。

画像は某ゲームのレベルと、それに必要な経験値をまとめた表…
と、経験値を50増やすアイテムを使う場合の必要な数。
こういう処理は「Excel」さんの専門分野です。

このデータは今後も追加などで利用するかもなので、
シートをコピーして
「入力用シート（元データ）」と
「出力用シート（作業するデータ）」に分けておきます。

ちなみに元データが他のブックやシートを参照している場合は
新しいシートに「値のみコピー」で貼り付けた方が面倒な事にならずに吉。

で、実際にweb上に表示させる形に整形。
※画像ではレア度を左から低い順に直したので数値が変化しています
各データ間に列を挿入していきます。
一度挿入したら、あとは挿入したい列を選択＞「F4」でサクサクです。

今回は見出しもありますが、Excelの関数を使うような必要が無ければ
データ部だけで十分です。
<tr><th>…　と、手打ちする量は変わらないし。　(*´艸`*)

で、用意した空白行にタグを埋め込んできます。
最初の行には「<tr><td>」
最後の行には「</td></tr>」
その間の行には「</td><td>」
これをオートフィルで下まで引っ張れば全ての行にタグが追加されます。

間の「</td><td>」は1行分をまるまるコピペの方が早いかな？
キーボード操作に慣れてる人なら最終行の下に「-」など不要な記号で行を埋めて…
「Ctrl」+「Shift」+「↓」からの「Ctrl」+「D」で一気に埋める方法もあります。
で、最後に不要な行を削除して完成。と。

全体を確認して問題が無さそうなら、
この表全体をテキストエディタにコピペします。
Excelデータを貼り付けるとセル間に「タブ」が設定されます。
※画像での右矢印（薄いグレー）

この「タブ」を置換で削除すれば、
あとはhtmlに貼り付けるだけのデータが完成します。　ヽ(´▽｀)/

tableタグは、そんなに需要が無いかもだけど
オートフィル機能を使えばタグを一気に入力できるってのは
非常に便利なので覚えておいて損は無いと思います。

今回は単純なタグの挿入にしかExcelの機能を使っていませんが
今後、これらの応用編も書いていければと思っております。

できるポケット　HTML&CSS全事典

先日、「レスポンシブ化　table編」にて
通常（PC）では横長の表をレスポンシブ化。
結果、スマホ等では縦長の表に。

ググる先生の許可（モバイルフレンドリー）も出たので
まぁ、いっか。と。

しかし…
その後、各ページを動作確認しているうちに
「これは使いにくいなぁ。」と。

特にデータ量の多い項目だと
上にも下にも逃げ場の無い状態に（苦笑

そんな訳で
ちょっとスライドすると目次が表示されるようにしました。

縦長に伸びたグダグダ感は一緒だけど
とりあえず逃げ道確保。って事で。　(*>ｖ<)

前回は「table」の「td」タグを縦組みに変更して、
レスポンシブ化に対応させたんだけど…
レスポンシブ化　table編

こんな感じの表を
上記の方法でレスポンシブ化させると
無駄に縦長な表になる事に。

横方向で比較したい部分もあるしね。

ちなみに、width指定を解除する等して
レスポンシブ化させると、こんな感じ。

日本には縦読みの文化もあるから
「効果」の部分が読みにくい読みにくい。
┐(-_-;)┌

ただ…
この状態でもググる先生からは
モバイルフレンドリーとして「OK」がもらえます。

まぁ、人間に読みにくくても
comに読みやすい（解釈しやすい）か？って話ですからね。

とはいえ、さすがにこのままじゃねぇ。って事で
レスポンシブ化　img編　の手法を採用する事に。

widthを表示に差し障りないサイズに指定し、
overflow-x: scrollで横方向にスクロールできるように。

そのままだと、目で追うのが大変なので
背景色を交互に変更してみました。

付け焼き刃感は否めないけど…
まぁ、仕方無いでしょう。　(*>ｖ<)

今度は画像編。

一応、ヘタッピなりにも攻略っぽい事もやっていたりして…
その場合、Excel等で作成した大きな画像を用意するケースも。

大体幅800が多いかな？
それを細工せずに使用すると、…
「モバイルフレンドリーじゃねぇぞ。　ゴルァ」
と、ググる先生に怒られます（苦笑

じゃあって事で
・max-width: 100%
・height: auto
を指定すると、ウィンドウサイズに合わせ
自動的にサイズが修正されます。

が…
要は画像が縮小表示されるだけので
風景や写真の画像なら問題無いかもだけど
文字が入った画像なんかは潰れちゃって何が何やらな状態に。
┐(-_-;)┌

さすがに、それじゃ不親切だよなぁ。と。

そんな訳で画像を「div」で囲み専用のclassを用意。
・max-width
・height
・overflow　等を指定。

画像は100％サイズで表示させ、
スクロールで操作できるように変更しました。

ただ…
スマホには拡大させる機能もあるそうで…

拡大させる方がラクなのか、
スクロールさせる方がラクなのか…

ガラパゴス住民には判りません。
≧∇≦ブハハハハハ

ここしばらく放置していた、ホームページのレスポンシブ化。

ほとんどが「ゲーム攻略系ページ」だったので
ま、いっか。　┐(^-^;)┌
なんて、気楽な気分で放置していたんだけど…

ここ最近、日記をサボっている事もあって、
一部の攻略ページにアクセスが集中している事が判明。

とはいえ、作業量としては、なかなかのボリューム。
ようやく重い腰を上げ、全ページのレスポンシブ化を終了しました。

こちらはPC用のページ。

基本的に、攻略というよりもデータをまとめた内容が多く
かなり「table」タグを使用しています。

まぁ、ぶっちゃけ…
ヘタッピだしね。　(*>ｖ<)

これを文字サイズを小さくしたり、余白を小さくするなど
強引にレスポンシブ化すると、こんな感じに。

まぁ、読めない事は無いと思うんだけど、妙に窮屈な仕上がりに。

まだ、このページはマシな方で、
酷いページになると、2文字ずつ縦方向に伸び
非常に読みにくい状態に。

そんな訳でググる先生に質問してみると…
「おぉ　(ﾟ▽ﾟ*)」という方法を発見。

それは…
・見出し「th」を「display: none」で非表示に
・データ部分「td]を「display: block」で縦表示に
・「td:before」「display: block」で枠を用意する
・「td:nth-of-type(X):before」「content: "○○"」で枠に文字列を追加する

その他、もろもろ微調整した結果…

こんな感じに。

無駄に縦方向に伸びちゃったけど。　┐(-_-;)┌

個人的には気に入らないんだけど、
上の画像よりはデザイン的には、マシかな？と。

で…
本来、CSSは外部ファイルで指定するのがスマートなんだけど
あえて、ページ内で「style」指定する方法を。

ぶっちゃけ…
自分一人で作成しているので…

定義がメチャクチャなのです。　＼（＾o＾)／

それでも、ググる先生からはOKを頂けました。　orz

ただ…
過去にも書いたけど、当家は愚妻も私もガラケーなんですよね～　ヾ(;´▽｀A``

自分で確認する事ができないし、
そもそも、スマホでの操作も解ってないです。　orz

あ。
「全ページのレスポンシブ化を終了しました。」と言いましたが、
あくまでレスポンシブ化を終わらせただけで、
各ページの修正は、随時行っていきます。　il||li ＿|￣|○ il||li

なんか、無駄にゴチャゴチャしている気が…

スマホへの対応もあるのでしょうが、
妙にスライドショー的な演出…

私（心の声）「何？　デフォなの？」
私（心の声）「それ、本当に必要？」　ってぐらい（苦笑

その中でも、イラッとするのが動画の自動再生。
特にFBに多いかな？

まぁ、私がオッサンだから仕方無いのかもだけど…

再生のタイミングぐらい、こっち（訪問者）に任せろよ。　と。

なんでも、5秒以上の再生でカウントされるらしく
そのカウント数を増やす為に
酷い場合は、2～3の動画が再生される状態に。

( -。-)スゥーーー・・・ (ｏ＞ロ<)ｏ＜　うぜ～よ

とりあえず、ググる先生のおかげで自動再生を停止できました。　orz

これが時代の流れってヤツなのかもだけど…
望んでいない情報が押し付けられる現状は…
正直、苦痛です。　il||li ＿|￣|○ il||li

( -。-)スゥーーー・・・ (ｏ＞ロ<)ｏ＜　必要な情報は自分で調べますから～

先日、日記を引っ越したモノの
設定ミスで、リンクやカテゴリがおかしな事に。
http://izuito.net/_cgi/freo/index.php/view/4919

本日、ようやく完了しました。　orz

作業的には難しいモノじゃないんだけど
なにせ、ページ数がねぇ。　ヾ(;´▽｀A``

内容はどうでも良いモノが多いので
全部削除って事も考えたんだけど…
なんか「負け」の気がして、コツコツ修正。
やりとげました。

見えない敵と戦うって大変だねぇ。
まぁ、今に始まった事じゃないけど。
≧∇≦ブハハハハハ

とりあえず、こんな感じですかね。
http://izuito.net/wp/

あとは、本を読み直しながら
気になった点を変更していきます。

まだ、イマイチ理解できてないんだけどね（苦笑

テスト用のページが残ってますが
徐々に戦国IXA用のページにしていこうかと。

需要があるかどうかは別として。　(*>ｖ<)

ワードプレスの勉強も何とか終盤へ。
まぁ、買った本の内容をガチャガチャ弄ってるだけなんですけどね。
つうか、もう一冊残ってるし…
更にPHP+MySQLの本も残ってるし…　il||li ＿|￣|○ il||li

とにかく、「もうすぐ終わる…」
私的には今日中に「WordPress ステップアップブック」を終了させる予定だったんだけど…

思わぬ事態に。

カスタムタクソノミーで新しいカテゴリを追加したものの、
ページを表示しようとすると、404エラー。　※P.294

何度も「functions.php」の内容、
[taxonomy-area.php]のファイル名を確認。

でも、やっぱり…　404エラー。

コロン（：）と、セミコロン（；）の違い。
○○と、○○sの違い、等々。
よくあるミスを確認しても、一向に改善されず。

もう、何が何やらです。　il||li ＿|￣|○ il||li

そこで、ググる先生に相談。

どうやら、[設定]　>　[パーマリンク設定]
で、[変更を保存]をする必要があるようです。

えぇ、あっさり解決しました。
il||li ＿|￣|○ il||li