ぶろくまん3

タメグチは世界を救う! プログレハードポップ系ソロアーティスト、みろく卍游楼 me-rockman-Jeuro によるタメ口ブログ

このブログの崩れた見た目も直しておく話

  • 2014年頃の話
  • 数年前の話
  • 今日の話

2014年頃の話

先日の投稿にも書いたように10年も前から作ってた俺のブログシリーズ「ぶろくまん」「ぶろぉくまぁん2」は、その元となるシステム a-blog が無情にもサポート終了していて余命幾ばくもない事は分かっていた。

 

どげんかせんといかん(´・ω・`)

 

とはいってもあの頃の俺はもう完全にコンピュータへの興味が失われていて、プログラミングはおろかHTMLでさえイジるのが億劫になっていた。なのでブログを再開するならどこか出来合いのブログサービスの世話になろうと考えた訳だ。

という事でいろいろ見て回っった結果このはてなブログに落ち着いた。おかげでサーバーとかシステムのインストールとかDBの作成とかPHPのバージョンとかな〜んにも気にする必要がなくなってただコンテンツだけに集中できるようになった。*1

唯一しなきゃならん事はスキン(テーマか)を選ぶことくらい。出来合いのテーマがたくさん用意されているので気に入ったのを選んでインストールするだけだ。

 

数年前の話

はてなブログを始めてからいくつかテーマを渡り歩いたが数年前からはこの「レスポンシブルー」に落ち着いている。

blog.hatena.ne.jp

 

ところがだ。

使い始めてしばらくしてから気づいた。このテーマ、もちろん素敵で良いのだがアーカイブページで日付の表示が崩れるのだ。

こんな感じだ。

f:id:rockmanalive:20210408183307j:plain

 

念の為テーマをインストールし直してみたが何ら変化なし。

なんでかな?と思いつつも数年放置(笑)

 

今日の話

WordPressづいている今日この頃。

本日俺はついに重い腰を上げた。

CSSを検証してみたら、下記の要素を追加適用すればひとまず問題ない状態になることがわかったので早速実施。

f:id:rockmanalive:20210408185604j:plain

 

結果はこうだ。

f:id:rockmanalive:20210408183329j:plain

 

うん、良くなった(≧▽≦)

これでいいじゃん。

随分長期間放置していたがひとまず一件落着だ。

 

・・・・・・・・・。

 

う〜ん。

 

しかしだ。

どうも腑に落ちん。

 

2013年に発表され、既に大勢のユーザがいるテーマやねんでこれ。

それなのに今日現在まで修正されてないという事があるのだろうか。

という疑問がどうしても拭えないので、他のユーザも確認してみた。

 

すると、、

*1:それでもそもそもの「ブログを更新するという熱量」が失われてるのであんまり投稿しなくなってたのは誤算だった、、か?

続きを読む

HTMLメールのCSSはインラインか埋め込みか?

f:id:rockmanalive:20210408100318j:plain

  • HTMLの必要性
  •  HTMLメールへのCSSの当て方
    •  CSS埋め込み形式でのGmail
    • そもそもCSSの形式とは
    • CSSインライン形式でのGmail
  • 結論

 

相変わらずContact Form 7の深い沼にハマったままのろくまんだ。 

 

HTMLの必要性

Contact Form 7でもらった問い合わせはメールでウェブサイトの所有者なり管理人に届くわけだが、その問い合わせメールを印刷して保管したいという話もチラホラあったりする。

いわゆるお問い合わせ的な内容なら「名前」「メールアドレス」「問い合わせ内容」くらいで項目数も少ないからテキストメールを普通に印刷すれば事足りるが、「会員登録」的な内容となると、「住所」「電話番号」に始まり以降そのサイト特有の項目がズラッと並んだりして、そもそもテキストメールでは視認性が悪いし印刷なんてしようものなら間延びしたものが数ページに渡って排出されて、見る気がおこらないトホホなものとなっちまうのよ。

 

と言うわけで、Contact Form 7からのメールをHTMLメールにして、視認性が良くかつ印刷しても「会員登録申込書」的に使えるものを目指すことに。

 

20年くらい前はHTMLメールなんて初心者か情弱が喜ぶだけの「百害あって一利なし」な代物だと思ってたのだが(笑)、気がつけばBtoC系の営業メールはほぼ全部HTMLになってるのな。

 

グーグル先生に相談したら、HTMLメールは令和の時代になってもなかなかの曲者で一筋縄では行かない模様。具体的にはメーラーごとに仕様がマチマチというだらしない理由だった。

 

ちなみにここから下はGmailでの話。グーグル先生によると日本で(ビジネス用途での調査だが)のメーラーシェアはGmailが38%でトップだそうな。次点はOutlookで35%。

 

 HTMLメールへのCSSの当て方

 CSS埋め込み形式でのGmail

willcloud.jp

上記サイトはとても参考になった。ほぼこれに基づいてHTMLメールのマークアップを施したところ、うまく行った。項目数が多くても大変見やすいレイアウトの会員登録申込書が出来上がった。 

f:id:rockmanalive:20210408090053j:plain

名前とか項目の内容はテスト用のものなので気にするなw

 

さて、では印刷した時にA4でどれくらいのページになるとか文字の大きさはどうかとか確認しようと印刷プレビューを見ると、、、、

続きを読む

Contact Form 7 の日付項目が動かない?

f:id:rockmanalive:20210407205220j:plain

 

最近WordPressにハマっている(ダブルミーニング^^;)ろくまんだ。

 

WordPressでお問い合わせフォームと言えばContact Form 7が業界標準?となって久しいが他にもフォーム系プラグインはいっぱいあるのになんでかね。かく言う俺もContact Form 7以外試したことはない。。。

 

それにしてもこの Contact Form 7の奥が深いことと言ったら。。

 

Contact Form 7の今日ハマったこと。それが表題だ。

Contact Form 7 の日付項目が動かない

そんな基本的なことなぜ今まで気づかなかったかというと、、、

 

たいてい動くから(笑)*1

 

ブラウザ対応状況 

動かないのは一部の環境だけのようで、俺の環境では、なんとsafariが該当する。試してるのはmacOS Mojaveのsafari 14.0.3。そんなに古い環境ではない。他にはfirefoxも、とか書かれているが俺はインストールしてないので知らない。

 

Google Chrome 

日付項目、Chromeではこのようにパッと見てどう入力すべきか判断できる状態だ。

f:id:rockmanalive:20210407200254p:plain 

 

西暦年月日を8桁で区切り無しで連続入力すればうまい具合に勝手に区切ってくれる。

f:id:rockmanalive:20210407200350p:plain 

 

右側のアイコンクリックすればカレンダーからの選択も可能だ。

 f:id:rockmanalive:20210407200415p:plain

 

まあ今どきはこうでなくっちゃあな。

 

Microsoft Edge, iOS safari

ちなみにEdgeも同じだった。画像は省くが(笑)

実はiOSsafariもこんな感じでカレンダーが出てきて問題なく動く(数値入力は不可ぽいけど)

 f:id:rockmanalive:20210407200843p:plain

f:id:rockmanalive:20210407200859p:plain

 

macOS safari

ところがsafari

*1:「動く」というのはこの場合、日付項目にて入力支援機能が正常に働くという意味な。

続きを読む