＜One of 技術屋＞　のブログ

HTMLの表の幅の設定

yuknak — Mon, 01 Sep 2014 10:54:33 +0000

レスポンシブなページ表示を試行錯誤している中で見つけたことのメモ

HTMLで固定幅のテーブルを表示させ、その中の日本語文字列を表の右端で折り返して表示させ、ブラウザのウインドウ幅が表の幅以下に狭められても、表の幅が追従して変化し、折り返し箇所が折りたたまれていくような表示をさせたいと思った。FireFoxや IEは普通にスタイルシートで　width: 500px; max-width: 100% のような指定をすれば、ウインドウ幅が 500px以上では表の幅 500pxになり、ウインドウ幅がそれ以下なら表の幅も追従して減っていく。
しかし、Chromeだけはこの設定だとウインドウ幅が 500px以下になった時でも表の幅は 500pxで固定され、ウインドウに横スクロールバーが表示されてしまう。これだとスマホなどでは実用にならない。

でいろいろ試したところ、上記のスタイルを table タグに直接指定しないで、div タグに指定してその中に tableタグを width:100% で指定してやれば良いことが分かった。もちろん IEや FXでも問題ない。
具体的なコードは以下のようになる。

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよらりるれろわ

2列以上で、一部の列の幅を　px/emなどで固定する場合は残りの列の幅は %など相対的にしておく。

ちなみに、

タグではダメだった。

ゲリラ豪雨

yuknak — Mon, 21 Jul 2014 05:15:22 +0000

この辺りは夕方からものすごい雨。丁度目の前の校庭ではナイター照明でサッカーをやっていたので、風にあおられた雨筋がレースのカーテンのように白くたなびいているのが見えるほど。池のようになった水面に雨粒が落ちたことで上る水しぶきが風で舞っているのがここからも見えるほどで、今まで台風時でも見たことがない風景だった。サッカーの試合も一時中断。１時間近くも降り続いたのでどこかで浸水被害が出るんじゃないかと心配するほどだったが、夜半になったらウソのような星空。そろそろ梅雨明けだろうか？

後からこの辺りの降雨量を調べると、予想通り夜の８時過ぎに時間当たり雨量が 50mmの真っ赤な帯がゆっくり西に向かって移動していた。こんな平地でも 50mm/hの雨量を記録するなんて、やっぱり異常気象だ。

http://yuknak.com/blog0/wp-content/uploads/gerilarain1.flv

（上記動画は当面 Chrome でしか表示されないと思う。目下対策検討中＞＞動画ファイルをFLVにして対応済み）

SPAM対策

yuknak — Tue, 08 Jul 2014 03:08:22 +0000

殆ど更新していないこのブログに SPAM投稿が来る。ロボットによる巡回書き込みと思われる投稿。

で、対策することに。とりあえず基本的な＜文字画像を読み取って指定欄に記入する＞所謂 Captcha と呼ばれるタイプの”SI CAPTCHA Anti-Spam” というプラグインを導入してみた。

無事（当然！）文字画像と入力欄が下図のように表示された。

WP メモ：　その２

yuknak — Sat, 10 May 2014 04:12:54 +0000

WPから問い合わせメールや、投稿時に連絡メールを送る方法。

まず、メールが送信される送信元メールアドレスは WordPressのインストール時に設定したはずだが　「設定」　＞＞　「一般設定」　で設定する５項目目くらいの「メールアドレス」で変更が可能となる。 Yahooのメールアドレスでテストしたが、問題なく送信出来た。

送信項目記入フォームは「Contact Form 7 プラグイン」で作成するのが簡単かも？

プラグインを有効化（インストールしてなければインストールして）してから、「お問い合わせ」から「新規追加」ボタンを押して、そのフォームを適当に編集し、ページの右側の「保存」ボタンを押して保存する。

保存するとコピーするコードが表示されるので、そのコードをコピーして送信フォームを表示させるページ（投稿、固定ページ、ウイジェットなど）に貼り付ければ完了。

そのコードをペーストしたページを表示させると、下図のようなメール送信フォームが表示され、「送信」ボタンを押すと上記の設定メアドあてにメールが送信されてくる。

ちなみに、上記フォームから受信したメールは下記のようなメールとなる。

差出人: nakajima 
題名: 質問

メッセージ本文:
質問本文です。

--
このメールは ＜One of 技術屋＞　のブログ (http://yuknak.com/blog0) のお問い合わせフォームから送信されました

WP 幾つかのメモ

yuknak — Fri, 09 May 2014 03:40:11 +0000

★　WordPress で表示されるフォント(特に日本語)がプアだ。　フォントを変える方法：

ログインして左側サイドバーの「外観」　＞＞　「テーマ編集」　を表示させ、　今度は　右側サイドバーの一番下の方　「スタイル」＞＞「スタイルシート（style.css）」　をクリックすると　style.css が編集状態で表示される。

ブラウザのショートカットで「Ctrl+F」で検索窓を表示させ「font」を検索し、「font:」もしくは「font-family:」という項目の

font-family: Arial, sans-serif;　　　などという行を探し

font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “ＭＳＰゴシック”, “MS PGothic”, sans-serif;

などと修正する。

★　次に、タイトルやキャッチフレーズの変更方法：

WordPress 2014 では初期値でサイトタイトルが「WPブログ」などとなっているので、これを自分のサイト名に変更する。

「外観」＞＞「カスタマイズ」を選択する。

左ペインに編集する項目リストが表示されるので、「サイトタイトルとキャッチフレーズ」をクリック。

「サイト名」や「キャッチフレーズ」の欄を修正する。

逆風

yuknak — Thu, 08 May 2014 14:19:34 +0000

今日は自転車で遠出。ところがかなり強い向かい風。風圧に負けて普段より１～２段ギヤを落としているから漕いでも漕いでも進まない。気温も低かったのと風の勢いで汗はあまりかかなかったが、合計１０Kmくらいだったはずだが倍くらい走った感じ。しかし、これくらいの風は去年までも何回かあったような気がするが、体力・筋力が落ちたんだろうか？　救いは、帰り道が追い風ではないものの風が弱まってくれたこと。
今日の写真はシュロの花。通常の目線だと気付かないが、数日前に棕櫚の木を見上げた時に黄色い塊が伸びていて、３日ほど前にこの写真を撮った時はその塊が膨らんで、丁度花が咲き始めたようだ。

画像入りの確認

yuknak — Wed, 07 May 2014 08:21:03 +0000

写真はオオアマナの花。別名を「ベツレヘムの星」というらしい。星型の花の形から、いかにもという感じの名前。でも、ちょっと待て！　ベツレヘムの星と言うのは、五角形(五芒星) じゃなかったっけ？　キリストが誕生した時？に輝いたとか言われてる星だったような。それが米国国防総省の建物の形になった・・・・と言うのは、小説の中の話だったっけ？　慌てて Wikiを見たら、何のことはない、国防総省の形が五角形(ペンタゴン)になったのは元の敷地の形が五角形だったためらしいと分かった。　ダン・ブラウンの読み過ぎか？

初めて WordPressでブログ！

yuknak — Thu, 10 Apr 2014 22:20:54 +0000

私は自分でプログラムした「e日記」なるものを、2003年 10月からずっと継続してきた。あの頃はまだ＜ブログ＞と言う言葉自体が一般には認識されておらず、一部マニアの間で HTMLを気にせずブラウザから直接記入・更新できる＜Web日記＞などという形のページが広まりつつある時代で、そのページを公開するツールも今から見ればかなり初歩的なものしかなかった。そんな状況の中で、自分なりの工夫を盛り込んだ自作のプログラムにも愛着があり、三日坊主の私が＜本当に奇跡のように＞今まで継続することができた。

しかし、しばらく前からブログが単に日記公開のツールと言うより、一般的な情報の公開ツールとしても利用され始めたので、遅まきながら私も勉強を兼ねてこのページを作ってみた。

しかし、上記の e日記 と並行しての更新はとても無理だろうから、やはりあちらを主体に、こちらは勉強用としてのみコッソリ運用することにしておく。

＜One of 技術屋＞ のブログ