テーブルでレイアウトする

 

テーブルでのレイアウトに、ずいぶん手こずった。要因は、複合的だ。

 

WordPressのエディター用のプラグイン、TinyMCEAdvancedにクセがある件

 

同プラグインは、ていねいにも、セルの幅と高さが自動的に入る。いっけん、便利そうだけれど、実際には表示のレイアウトが崩れたりして、けっこう、やっかいだ。

いまテスト中のウェブページでは、

それならば、セルに挿入するイラストのサイズを統一してしまえば、それに応じてセルのサイズも統一するにちがいないと、まぁ、そうおもったわけね。

結果は、なんども試したけれど、NGだったぜ、まったく。

で、対応策として、自動的に入った数値を、ひとつひとつ削除する方法もあったりする。がしかし、英文字と数値だらけのコードから該当する箇所を見つけるのは大変だし、間違って、ちがう箇所の数値を削ると、それはそれで、また大変である。

なので、さいしょから数値が入らないように、WordPressの基幹ファイルにコードを記述することにした。

記述したファイルは、function.php

(パスは、wp content/hemes/twentyseventeen/function.php)

コードは以下のとおり。

function customize_tinymce_settings($mceInit) {
$mceInit[‘table_resize_bars’] = false;
$mceInit[‘object_resizing’] = “img”;
return $mceInit;
}
add_filter( ‘tiny_mce_before_init’, ‘customize_tinymce_settings’ ,0);

 

セルを囲む罫線が表示されない件

 

セルのプロパティ > 高度な設定 > 枠線の色 にて、枠線の色を設定するだけでは、罫線が表示されない。うーん。

解決策とし「スタイル」の欄に表示されている線の色のスタイルシートのあとに、つづけて、以下のスタイルシートを記述をした。

border: 1px solid;

 

スマホにあったレイアウトにならない件

 

外観 > カスタムタイプ > 追加CSSに以下のスタイルシートを記述した。

@media (max-width: 650px) {
table td{
display: block;
padding: 0.6em;
text-align: center;
 }
}

項目を仕切る「行」「列」の罫線が
スマホでは崩れしてしまう件

 

行の仕切りの太い線の描写は、行の選択> 所定の選択+ border: 3px solid;の記述にて。
列の方は、border-right-width 3pxにて描写クリア。




ただし、スマホでは、レイアウトが大幅に崩れてしまう。太い線の採用をキャンセルするか、それとも、崩れないようにスタイルシートを記述するか。=>げんざい、方法、わからず。

 

ブログのエディター

かんたんなウェッブサイトなら、手書きのHTMLとCSSでつくれてしまう。

しかし、動的なウェッブサイトにしようとすると、じぶんデータベースのプログラムを書いたり、そうとう、たいへん、

なので、既存のフレームワークをつかったりするわけネ。

げんざいはWordPressを利用している。初歩的なCSSの知識があれば、手順を覚えれば、けっこう、カッコいいウェッブサイトをつくれてしまう。

もともとWordPressはブログを書き、データベースに保存するフレームワークなわけで。それをウェッブサイトにもつくれるような仕様にもなっているので、多くの人や企業は、これをつかい、じぶんの、あるいは自社のウェッブサイトをつくっていたりする。

WordPressは、さいきん、5系にバージョンアップされた。エディタも大幅に変更されている。まだまだ、なれない。そのかわり、いぜんから利用していた、エディタを多機能にするプラグインTiny MCE Advancedを引き続きつかい、慣れた書きやすさを担保している。

ブログを書くばあい、エディタはつかいやすいほうがよい。

自前のブログでなくても、はてなや、さいきんならNoteのブログもつかいやすいんじゃないかねぇ。

あ、そういうえば、ついさいきんNoteを、ためしはじめたりしましたー。

レスポンシブ・デザイン

WordPressのテーマを、長いあいだお世話になった「BizVector」から、WordPressのデフォルトのひとつ「Twenty-eightteen」に変更した。

こちらもレスポンシブ・デザインに対応しているけれど、一部、じぶんでスタイルシートを書く必要に迫られている。

オッケー、レスポンシブ・デザインについて整理してみよう。

定義は、こうだ。

ひとつのHTMLで配信し、CSSはデバイスごとに用意し、表示を変化させる。

まずHTMLに、ビューポイントのタグを記述する必要があるが、そもそも、「Twenty-eightteen」は、レスポンス・デザインになっているので、こちらは不要だろう。

ブレイクポイント(表示されるデバイスの画像幅)に応じ、スタイルシートが変わるように記述する。

メディアクエリをつかう。

(記述例)

@media screen and (max-width: 480px){
      p{color:#FFFFF;}
}

画面幅480px以下のとき、p{color:#FFFFF;}のスタイルシートが活きる。

ま、なんとか、ここまで、うまく理解できた。けれど、実際には、該当するところに、どのようなスタイルシートを記述したら良いのか、そこが、つかめていなかかったりする。

ピクセル

まずピクセルの、おさらいから。

定義については、ウィキペディアより「ascii.jp デジタル用語辞典」の説明の方がわかりやすい。

デジタル画像を構成する最小の要素で、画素とも呼ぶ。ドットと同じ意味で使われることも多いが、ドットは色情報がない丸い点でプリンターやスキャナーの解像度に用いる。ピクセルや画素は、色と階調を持つ四角い点でディスプレイやデジタルなどの画素数に用いられる。

ピクセルとドットのちがいは、さておき、要は、表示画面のヨコに並べた四角い点の数、あるいはタテに並べた四角い点の数を示し、

ちなみに、愛用のMacBookAirのピクセル数(画素数)は、1366✕768となっている。

デジカメなのでよく使われる何万画素というのは、タテとヨコの画素数をかけたもので、このばあい、1366✕768 =1049088 、約100万画素となる。

アタマの整理はこのくらいにして。本題に入ろうか。

ウェブサイトをデザインするさい、閲覧するパソコンに表示される際のピクセルを、どのくらいに設定したら、よいのだろう。

このへんの理解については、
「webサイトのデザインの横幅サイズ! もう何pxか迷わない」が役に立った。

「大は小をかねる」ではなく、「小は大をかける」、というか、「ピクセル数の小さいディスプレイにあわせて、とりあえず設定しておけ」ということで、

キリのよいところで、1000ピクセルに決めてしまおう。

これをもとに、貼り付ける画像や写真、テーブルの見当をつけていけば、よろしい。

WordPress系を一新

このウェッブサイトはWordPressをつかっている。

で、年末から年始を利用して、WordPressを利用して以来、4年ほどずっと採用していたテーマを変えることにした。

いまだにテーマというコトバになれない。

WordPress自体は、クルマで例えれば、なくてはならないエンジンのようなものだ。あとは使うひとは、好みにあったモジュールに該当するテーマを選ぶことになる。

要は、テーマの中から、じぶんにあったデザインや使い勝手にあったテーマを選ぶわけだけれど、

問題は、テーマの数のその多さだ。

有料版も検討したけれど、テーマの販売先の利用している決済のプラットフォームがイマイチ、信用できない。

このへん、Paypalをつかうなど、テーマを製作する人たちも考えたほうが、いいだろう。

ま、けっきょく、WordPressにデフォルトで入っているテーマを採用してしまうのが、よかろうという、ま、そういう結論となった次第。

WordPressのバージョンも、いっきに5xまでアップデートしたぞー。つかいこなせるのか?

メルカリと仮想通貨

メルカリをたとえにして、仮想通貨を説明してみようか。うまく、いくかどうか、わからない。

メルカリは不要なものを売り、必要なものを買うプラットフォームだ。

それだけなら、友だちやご近所どおしで、「不要・必要」リストを作成し、つきあわせれば、できてしまう。

メルカリのすごさは、知らない人どおしで「物々交換」を可能にしたことにある。

その点、仮想通貨も同様のことが言える。

ネット上の知らない者どおしで、仮想通貨と、モノやサービスが交換できてしまう。

こここで言っておくけれど、メルカリはたとえネ。

メルカリと仮想通貨では、アルゴリズムがまったく、ちがう。

もっとも、メルカリも将来的に仮想通貨を導入するというウワサもある。

そのさいは、ビットコインやイーサリアムのようなパブリック型ではなく、

メルカリ関係者がマイナー(その通貨の発掘者)となるプライベート型になるだろうねぇ。

パラダイムがちがうって

 

法人化には、いくつかのメルクマールがある。

ひとつの旗印として、売上げ規模というのがあるでしょう。

たとえば法人なら法人ならではの必要経費が認められるから。

有限会社 鶴巻事務所の場合は、事情がちがった。

当初、大手電機メーカーとは、フリーランスのコピーライターとして取引していた。

けれど先方から、「個人では困る」とかなんとか言われまして。で、法人にしたんですねぇ。

ま、そういう経緯もあり、いつのまにか、ウチの取引口座で広告制作をまとめて受注し、

(個人では取引口座ができない)フリーのデザイナー、イラストレーター、カメラマンに仕事を割り振ったり、報酬を支払っていたわけネ。

手形を処理する際には、引き受けを依頼していた信用金庫の部長さんが、わざわざいらして、「設備機器を入れる予定があるなら、なんとか、ひとつ」とか、おしゃってサ。

電子部品を製造する会社と勘違いされたりして、あのときは、ちょっと、おもしろかったわぁ…って、あっ、不謹慎でしたか、すみません。

えーと。ハナシが脱線してしまいましたか。法人についてのハナシでしたね。

有限会社 鶴巻事務所における仕事の図式は、こんな感じなのであった。

 



図に書いたように、仕事やお金の流れは一方的だ。

で、この「一方的」には常々、思っていることがあったりして。

急に大上段な話題になるわけネ。

工業化社会というのがある。それは文字どおり、主に工業製品を作る社会である。

工業製品の製造は、上流から下流へとラインを流れてゆく。

商品の流れも似ていて、メーカから卸し、小売りへと流れてゆく。

情報については、テレビ番組ならテレビ局から視聴者へ、記事なら新聞社から読者へと一方的に流れていく。

仕事も流れも、会社なら社内で、下請け、孫請けならクライアントから一方へと流れていく。

というわけで、工業化社会というのは「一方的」というのが、キーワードなわけネ。

で、工業社会に対して、50年以上まえ、アルビン・トフラーの「第三の波」よりはやく、情報化社会を唱えた方がいらっしゃる。梅棹忠夫先生だ。

ただし工業化社会まっただ中の予見なので、情報化社会を担うツールまでは、触れられていない。

情報化社会を担うツールって、なんだろう。いまなら言えるネ。ずばり、インターネットである。

インターネットの隠喩は、「一方的」を特徴とする工業社会のそれとは異なる。

分散的であり、シェアである。

なので先で示した手書きの図式は、必ずしも有用ではない、というかズレている。

情報化社会が主役になるなか、つぎのように書きかえてみたりも、したくなる。

 



クライアントは、プラットフォームに仕事をリクエストする。

そして、そのリクエストをみたコピーライターやデザイナーたちは条件をみて応募する。あとは折り合いがつけば、仕事をすすめてゆく。

こういうやり方は、やはりプログラミングが先行していて。たとえばGitHubを利用したオープンソースでの開発なんか、そうだわネ。

ま、広告制作や、そのほかも、こういうイメージになっていくと思う、というか、一部、もうなっているけれどサ。

ネット上の通貨

CroudWorksやLancersでは、うまく入札が成立すれば、(ちょっとした)お金が入ってきたりする。

メルカリもそうだけけれど、この(ちょっとした)というのがミソで、たとえば、ローソンでそのままLinePayがつかえたら、ずいぶん便利だとおもう。

(現在、大暴落中の)仮想通貨は、とくに1単位ごとしか購入できない、というわけでもないので、その種の投資に活用できても、よろしいでしょう。

ま、もっともネット上で得た利益を、LinePayや、たとえばCoinCheckに利用できない、というわけではなくって。

それには、ひとつ銀行をカマせるという、手間や手数料が必要。合理的ではナイわけネ。

そう考えると、将来的に、ネット上を利用したサービスは、(円やドルといった)法定通貨より、仮想通貨が利用された方が、ぜーぜん便利なんだよねぇ。

LinePay

先週は、ひとに会うたびに、「PayPayやった?」と聞かれたりした。

どうやら、ビックカメラなどで商品を買うと、20%ポイントが付くみたいで。

それに負けじとLinePayも「20% ポイント還元キャンペーン」をはじめている。

LinePayなら、ときどきローソンでつかう。

ただしビックカメラで購入するような商品ではなく、食品を購入しているので、ポイントは、さほど付いていないと(おもう)。

なにせ、いままでポイントは気にもしていなかったからねぇ。こんどローソンで、なにかを買ったときはチェックしてみよっと〜

コピーライター・ブーム

かつて、コピーライター・ブームというのがあった。

それは、いつか。

まいとし発刊されている「コピー年鑑」を、順序を追って、めくってみよう。

1970年代後半、糸井さんがコピーライティングの新人賞を受賞し、以降、注目される存在になっていく。

そして、それと軌を一にするように、コピーライターという職業に火が灯りはじめる。「コピー年鑑」をめくると1980年代後半まで、その勢いをハッキリと感じとることができる。

そういえば、糸井重里、仲畑貴志、魚住勉、眞木準(敬称略)は「コピーライター四天王」って言われていたし。ま、そんなことを言うのは、おおかた「広告批評」だろうねぇ。

ちなみに、いま手もとに「眞木準コピー新発売」という大型版の書籍がある。

さいしょのページは、伊勢丹の新聞広告からはじまる。以降、全体の4分の1ページが伊勢丹の広告の掲載となっている。

(すべて、そうだと思うけれど)眞木さんにとって、とくに伊勢丹の広告には思い入れがあったのではないかしらん。

その一連の、ゴージャスな広告表現を見ていただきたいが、できないので、せめて、コピーだけでも読んでちょうだい。

 

黙ったまま話せる言葉。

その輝く瞳が、語りかけてくる。

そのこぼれる微笑みが、話しかけてくる。

その新しいダナ・キャランの服が、問いかけてくる。

そんな時、男性は、何を一言

告白すればいいのか。

秋の伊勢丹で、考えてみてください。