WEB制作

WEB制作

実はWordPressは子テーマ化するメリットはあまりない

WordPressの初心者向けの入門サイトでは、何とかの一つ覚えの如く「とにかく子テーマを設定しろ」と言ってくる。それなりにWordPressを使っている人でも、言われるがまま、何となく子テーマ化して使っている人が多いように思う。

しかし、個人レベルで運用するにあたっては、子テーマ化ってそんなに意味あるんか?? と個人的には思う。いや、そう思っている人は一定数いて、実際に子テーマ化するデメリットもある。

いくつか子テーマ化するデメリットを挙げて行こう。

設定する手間がある

WordPressの初期設定は色々あって最初は忙しいはずだが、子テーマを設定するのも意外と苦労する。

最初から子テーマ用も設定が用意されているテーマならともかく、自分で作るともっと手間がかかるし、テーマによっては子テーマ化すると後々、不都合が出る場合もあるという。

人によっては意外に使うことがない

子テーマは主にデザイン変更を親になるテーマに直接手を加えることなく追加するために使う。

しかし、WordPressのカスタマイズ画面には「追加CSS」という、リアルタイムでプレビューできて、便利で手軽にデザイン変更できる機能がある。

初心者を自覚している人なら、これで初心者が手を出せる程度のデザインは全部できると思うので、わざわざ子テーマをいじる必要がない。

処理速度が低下する

おそらくコンマ何秒のレベルではあるが、子テーマという設定を被せることにより、サイトを表示する速度が低下する。

コンマ何秒というと「大したことないじゃん」と初心者は思うかもしれないが、実は結構重要で、ほんの少しサイトの表示が遅くなっただけで、Googleの検索結果の表示が下の方になったり、ページを見る人が離脱する可能性が高まる。

まとめ 大抵の場合、子テーマは必要ないかも

普通の初心者にとって、ほぼ必要ないのではと思う。

企業とかでエンジニアを抱えてWordPressで大規模なサイトを運用しているようなケースを除いて、一般個人の初心者が子テーマを使うメリットはほぼないんじゃないかと思う。

function.phpをいじりまくって、なおかつ頻繁に更新するテーマ(そんなの使いたくない)を使っている初心者には子テーマは便利なのかもしれないが、個人的には必要ないと思っている。

WEB制作

【テーブルレイアウト】HTMLメルマガ作成で実践したこと備忘録

企業にWebデザイナーとして勤務すると、稀に担当になってしまう場合があるHTMLメルマガの制作。

HTML5やCSS3、JSなんかも余裕!!というイケてる貴方もタジタジになること間違いなしなのがHTMLメルマガである。

なぜならHTML5やCSS3、JSなんかできても全く意味ないからである。

つまりテーブルレイアウト、1995年頃のインターネットを思い出す必要があるよ。

え? 1995年に生まれてなかったって? そんな人もいるかもしれませんね・・・。

2019年時点の標準的なHTMLメルマガ

レスポンシブやゲームアプリが動いたりするWebブラウザと違い、同じ「HTML」であってもHTMLメルマガはOutlookやGmailなど主要なメールアプリの仕様がPCもスマホもヤバイので、通常のブラウザ用のHTMLとは違うノウハウが必要。

テーブルレイアウト

これは基本中の基本。世の中は広いのでテーブルレイアウトじゃないHTMLメールも存在するかもしれないが、一般的な企業が配信しているHTMLメルマガの多くは、テーブルレイアウトで作られている。

PCもSPも同一レイアウト

基本的にPCとSPは同じレイアウトのものが表示される。レスポンシブ対応ができたりできなかったりするので、一般的には同じものを表示される。そのため、幅600pxくらいで作り、どっちで表示されてもそこそこ良い感じに見えるようにする。

CSS指定

CSSのスタイル指定は基本的にインラインで書く。メーラーによって使えないCSSもあるので注意。

できるだけシンプルに作る

上記の条件があるため、Webページみたいな複雑なレイアウトは挑戦すると作成や検証で地獄を見るのでやらない方が良い。

画像は絶対パス

画像はメールとは別にFTPで上げておき、絶対パスで読み込む。作成中はローカルで相対パス、上げてから絶対パスに置換すると良いだろう。

サンプルソース

本文や画像はtable→tr→td内に記述する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type"
    content="text/html; charset=iso-2022-jp">
</head>
<body bgcolor="#ffffff" text="#333333" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center" width="600" height="650"><a href="#" target="_blank"><img src="絶対パスでxxx.jpg" width="600" height="650" style="display:block" alt="画像"></a></td>
  </tr>
</table>

</body>
</html>

Outlookでの画像の隙間発生

特に厄介なのがOutlookだ。こいつの描画エンジンはWordなので、HTMLの構造的に正しくても、変な表示崩れや、画像に隙間ができたりする。

個人的にやっかいなのが画像。何も考えないで入れると、スライス画像などで隙間ができるとまずい場合でも容赦なく隙間ができる。長年の研究によると、下記の設定をしておけばutlookやiPhone、Gmailな主要なメーラーで大体、意図通りに表示される。

画像を使いたいからHTMLメールを作るのだろうから、大体のHTMLメルマガは画像中心になると思うけども、根本的に長いHTMLメールはメーラーや端末によって省略されたり、Outlookで意味不明の1px程度の隙間ができたりする。

一つのtableは適当に2000pxくらいで分割して、下にtableを複製していった方が、長年の研究によると、うまくケースが多い。

そもそも、MAX6000pxくらいにしないと誰もみないし、長くなると原因不明の表示崩れが起きやすいので、短めに、内容もシンプルに作るのが良いと思う。

WEB制作

HTMLメールで常識のテーブルレイアウトはDreamweaverCS6がやりやすい

主に企業がメールマーケティングで使うHTMLメール。ECサイトとかの会員になると大量に送られてくる画像付きのメールのことだ。

2018年現在、いや2025年くらいまではテーブルレイアウトという、1990年代~2000年代初期までに使われていた古い手法で制作するのが常識。一般的なWeb制作だと現在はテーブルレイアウトはタブーとされているので、ここ10年くらいでWebデザイナーになった人はそもそもテーブルレイアウト自体を知らないかもしれない。

テーブルレイアウトとは

読んでそのまま、表組みでページ全体のレイアウトをする。昔はCSSでレイアウトするのは一般的ではなかったので、個人でも企業のサイトでもテーブルレイアウトが一般的だった。

HTMLやCSSの記述を覚えることなく、ホームページビルダー的なソフトはもちろん、Dreamweaverのデザインモード(これは現役で存在する)で視覚的に表を作りながらレイアウトする。

しかし、透明なスペーサーGifというものを仕込んだり、これはこれはでノウハウが必要だったりもする。今だと検索しても情報量が少ないから、勉強するのも難しいのではないかな。

ちなみに、これはきちんと表として見せるテーブルとは別物。

なんでHTMLメールはテーブルレイアウトなのか?

端的にいうと、OUTLOOK系など多くのPC向けメールクライアントはもちろん、GmailなどのWebメールがまともにCSSに対応していないから。スマホアプリのメーラーは割りとCSSに対応していて頑張ればレスポンシブ的なものも作れるが、工数などもあるので、一般的にはPCもスマホも同じ1つのレイアウトで作成しないとならない。

「HTMLメールを作ってくれ」と頼まれたあなた、結構大変な仕事かもよ、という話。

HTMLメールのノウハウ

大体、HTMLメールを任命された人は樹海に迷うことになる。まともにHTMLメール作成を解説した書籍はないし、それ専門でやっているWebデザイナーというのもそうはいないから、聞ける人が少ない。

基本的には横幅600pxくらいの固定で、テーブルレイアウトをするのが間違いが少ない。メール配信システムを使うことが多いと思うが、文字コードが特殊だったり、画像はサーバーに上げて絶対パスで読み込ませるのが一般的。

シェアの高いGmailだと画像に隙間が出来るのでBlock要素にしたりとか、色々な工夫が必要になる。シンプルでこざっぱりした作りの方が、作り手も読み手もありがたい。そもそも、件名が酷かったりすると開封すらされないし、割り切りも必要かと。

DreamweaverならCS6とか古めがおすすめ

最新のCC以降だと、テーブルを視覚的にいじる機能は健在なものの、なぜか動作がもっさり・・・。プチフリーズと言ってもよいくらいで、ちょっと変更しただけで10秒くらい画面が固まったりする。

今時テーブルレイアウトする人が少ないからチューニングされていないのだろうが、古めのCS6あたりだと割りと軽快。コードビューし書体を変えたりカスタマイズすると重たくなる場合があるので、基本的に初期設定がいいと思う。

あまり知られていないかも知れないが、Creative Cloudを契約するとCS6など過去のバージョンもインストール、使用可能になる。今はDreamweaver以外にも色々なエディターがあるが、テーブルレイアウトに限ればDreamweaverが多分最高に使いやすいのではないかと思う。テーブルレイアウト時代からバリバリ活躍していたソフトなのでw