ogu-tec

２回にわたって書いてきた表組みについて、今回は最終兵器？を

結局CSSです

tableを作る

これは前に書いたように拡張されたエディタで作るか、Excelで作ってそれをtable化する。エディタで作るのはいいですよね。ここではExcelで作った表をtable化する方法にまず触れておきます。
Excellで単純な表を作ります。その上で以下の作業をします。

1. 先頭行を挿入して一列目に<table>と入力する。
2. 一列ごとに列を挿入する。
3. 一列目に<tr><td>と入力する。全ての行にコピーする。
4. 挿入された３列目以降奇数列に</td><td>と入力する。全ての行にコピーする。
5. 最終列に</td></tr>と入力する。全ての行にコピーする。
6. 最終行の次の行に</table>と入力する。
7. これをtxt形式かcsv形式で出力する。
8. エディタ（ワードプレスではありません）でこのファイルを読みこんで、スペースないしコンマを置換で消去する。

これで表のhtmlが出来ます。ただ、１行目や１列目をタイトル行ないし列にしたい場合はその部分のみ<td>を<th>に置換します。これをコピーして、ワードプレスのエディタの「テキスト」画面で貼り付ければ先ずはOKです。

商品番号	商品名		税込卸価	詳細	購入
01K201	家庭用カビ取り剤サール	１Ｌ	1,296	詳細	購入
02KS01	業務用除カビ洗浄剤S1	１Ｌ	1,512	詳細	購入
04KS05	業務用除カビ洗浄剤S5	５Ｌ	6,480	詳細	購入
05K116	業務用除カビ洗浄剤S6	１６Ｌ	20,304	詳細	購入
06KJ31	頑固なカビ取り剤Ｊ3本ｾｯﾄ	１００ｇ	1,944	詳細	購入
07KJ50	頑固なカビ取り剤	５００ｇ	2,052	詳細	購入

これだけでもそれなりの表が出来上がります。小生などシンプルでいいと思いますが、これはテーマが持っているcssによっています。

CSSでの装飾

これだけでもいいのですが、ちょっと装飾を着けたいとか、文字を右寄せにしたいだとかの要求が生じると思います。そうなるとcssの出番になります。ただこのcssをどのように適用させるかです。見出しの場合のようにはいきません。なぜなら表は幾つかのタグから構成されているからです。また、部分的に変えようと思っても、テーマが持っているtableのcssがあってなかなか思うようにはいきません。
そこで登場するのがカスタムフィールドです。ここにcssのコードを書いたり、まとまりのあるcssのファイルを置くことによって記事やページに適用させます。要するに自分なりのtableのcssをあらかじめ作っておいて、それを適用させるしかないということです。やってみます。
基本的にtableのhtmlは上記のものと変わりませんが、tableにクラス名をつけ、一つだけ右寄せしたいtdにもクラス名をつけています。cssは以下です。

これをsample_01.cssとして保存しwpのルートにアップします。その上でカスタムフィールドに設定します。もちろんtableはエディタで書いておきますよ。

 

商品番号	商品名		税込卸価	詳細	購入
01K201	家庭用カビ取り剤サール	１Ｌ	1,296	詳細	購入
02KS01	業務用除カビ洗浄剤S1	１Ｌ	1,512	詳細	購入
04KS05	業務用除カビ洗浄剤S5	５Ｌ	6,480	詳細	購入
05K116	業務用除カビ洗浄剤S6	１６Ｌ	20,304	詳細	購入
06KJ31	頑固なカビ取り剤Ｊ3本ｾｯﾄ	１００ｇ	1,944	詳細	購入
07KJ50	頑固なカビ取り剤	５００ｇ	2,052	詳細	購入

どうでしょう。こうすれば、幾つかのcssを用意しておいて、それを指定すれば、様々な表を書くことが出来ます。もちろん、cssの知識は必要ですが。なお、このcssを置くところは指定を間違えなければどこでもいいので、メンテを考えて決めておくといいです。
これが最終兵器でしょう。

前回に続いて表組みについて書きます。ネット上でいろいろと調べてみるとありますね。その中で親近感が湧いたWeb Shufu というサイトに書かれている内容がまとまっています。要するにプラグインの紹介なんですが、いまさら小生が書く必要もないので見ていただければいいんですが、ここではExcelの表をインポートできないかという観点から整理します。

Excelの表をインポートできるか

結論から言いますとできますが、やたら複雑なExcelで作った表は難しいようです。

先ずはcsv形式に変換してから行う方法

そのサイトで紹介されているJetpack Markdown というプラグインを使う。これは簡単にhtmlをコーディングするツールなので別に表をインポートするというより、Excelの表をcsv形式で保存して、別なエディタで区切り文字を | に置換してやって、それをワードプレスに読み込んでやると表を生成するという仕組みです。これはhtmlやcssの知識がちょっとないとできなし、充分にある人にとってはプラグインなくても出来るというものでもう一つです。

要するに表はtableなのでExcelの表をtableに変換してしまえばいい訳です。もちろん罫線等はcssで書いてやればいいということになります。

いきなりインポート出来るプラグイン

 これがオススメでしょうか。TablePressというプラグインです。
ただ、ちょっと設定が面倒です。この辺りは参考にしたWeb Shufu というサイトで詳しく説明されていますので小生の下手な説明は省きますが、便利なのはファイル指定すれば済むということです。ただし、これもcsv形式にしなければなりません。当たり前ですね。googleドライブにExcelの表を保存しておくと、形式を指定してダウンロードというのができますから、ここでcsvでダウンロードすればバッチリですね。やってみます。

GoogleDriveからダウンロード

そこに置いたsample.xlsを以下のようにcsv形式でダウンロードします。そのためには所定のファイルをOpenしておきます。その上で以下のようにcsv形式を選択してダウンします。

 

その上でTablePressでインポートします。
書き出されるTable id をコピーしておき、それを表示させたいページにエディタで貼り付ければできます。

 

 

商品番号	商品名		税込卸価	詳細	購入
01K201	家庭用カビ取り剤サール	１Ｌ	¥1,296	詳細	購入
02KS01	業務用除カビ洗浄剤S1	１Ｌ	¥1,512	詳細	購入
04KS05	業務用除カビ洗浄剤S5	５Ｌ	¥6,480	詳細	購入
05K116	業務用除カビ洗浄剤S6	１６Ｌ	¥20,304	詳細	購入
06KJ31	頑固なカビ取り剤JＪ3本ｾｯﾄ	１００ｇ	¥1,944	詳細	購入
07KJ50	頑固なカビ取り剤J	５００ｇ	¥2,052	詳細	購入

どうですか。なかなかの表ができますね。もちろんリンクの設定などもこのプラグイン上でできます。これは使えるかもしれません。

 

日本人って表が好きですよね。それに表には罫線が全て付いていないと満足しません。また、Excelでもやたら複雑な表を作りたがります。これはもう一種の文化です。しかし、諸外国特に欧米ではそんな文化はありません。従って米国産のワードプレスではこの複雑な表を作るのが至難の技です。しかし、と言ってもクライアントはなかなか満足してくれません。そこで、いろいろ試みましたのでこの表組みについて報告します。

TinyMCE Advannced でも表は簡単に出来る

表記のプラグインがインストールされていて、表のアイコンが表示できているのが前提ですが、テーブルアイコンをクリックして作れます。

 

ああああああ	いいいいいい	うううううう	えええええ
おおおおおお	かかかかかか	きききききき	くくくくく
けけけけけ	こここここ	ささささささ	ししししし

これでも充分な気がしますが、縦の罫線がないと満足しない人がいますね。なんとかできないのかと。一応はできます。表を全て選択して、テーブルアイコンからセルのプロパティでborderを設定してやればなんとかなります。

ああああああ	いいいいいい	うううううう	えええええ
おおおおおお	かかかかかか	きききききき	くくくくく
けけけけけ	こここここ	ささささささ	ししししし

ここでもcssの知識は不可欠ですね。ただ、border指定はぐるっと４辺ですから、実は真ん中の縦線は二重になっています。ま、そんなにわからないのですが、気になる方は細かい設定をしてください。

また、行に背景色をつけたりなんだり、このエディタで結構できます。これがとりあえず簡便です。でも、Excelで表を作ってそれを使いたいなんて要求もありそうです。それついては次回やってみます。

今回は３番目の個別にcssを追加する方法

これをやるにはプラグインが必要。

Custom CSS and JSというプラグインを導入する。プラグインの導入はいいですよね。
導入したら、投稿の編集画面で右上の「表示オプション」で「カスタムフィールド」にチェックをいれます。

するとエディタの下にカスタムフィールドが表示されます。

そのカスタムフィールドの「名前」の欄に下記のキーワードを入力します。
外部ファイルを追加する場合は　custom_css
コードを追加する場合は　custom_css_code
です。
「値」の欄には
外部ファイルを追加する場合は　追加するCSSの外部ファイルのパスを記述
コードを追加する場合は　追加するCSSのコードを記述
します。

便利です。これは見出しの変更ばかりでなく、大きな変更ができます。やってみてください。

しかし、見出しの変更は前回紹介した方法が一番いいと思います。使いたい様々な見出しをclass名をつけて作成し、エディタのスタイルに登録しておく方法です。

実際に見出しを作る場合はネット上にジェネレーターがいろいろありますからそれを使うといいと思います。「見出し　css」で検索すればたくさんでてきますよ。
やってみてください。

前回に続いてワードプレスのcssについての話の２回目
前回のようにテーマのcssを書き換えてしまうと全てに影響します。それでいい場合は構わないけれど、一部分のみ変更したり、ページによって変えたい場合はちがった方法をとります。
cssのclass名を使って登録する方法です。例えばh4の設定で以下のように書きます。

この設定をテーマのcssに追記して、保存し、記事中に「テキスト」で以下のように書けばいいわけです。

しかし、これでは面倒ですね。そこでこうしたcssのclassをエディタにスタイルとして登録します。
そのためにはまずエディタの拡張プラグインであるTinyMCEをインストールしておきます。このプラグインはまず入れるべきものですから使っている人が多いでしょう。
設定→TinyMCE Advansed　で以下のように設定しておきます。

要するにエディタのcssを読み込むようにチェックをいれ、ツールバーに「スタイル」アイコンを入れておきます。
その上でエディタのcssに自分が書いたclassを追記します。

editor-style.cssはwp/wp-content/themes/テーマ名/cssにあります。これを一旦DLして、追記し、UPします。こうすると「スタイル」に登録されます。

文字列を選択し、「スタイル」からこれを選択すればこのスタイルが適応されるというわけです。

これはh4の見出しです。

前回見出しのカスタマイズについて書いたけど、具体性に欠けたので、今回はその手順を示します。先ずはテーマのcssを変えてしまう方法。

Google Chromeの要素の検証を使って見出しを変更

いきなり見出しを変更するのは困難ですよね。そこでchromeの便利な機能を使います。サイトをchromeで表示して、右クリックで要素の検証を選びます。変更したいところを選ぶと

その部分のcssが右に出てきます。そこで、ここで変更ができるんです。やってみます。

色を作るのも便利です。左側には変更がみて取れます。cssは以下のようになりました。

このままでは変更はされません。この部分をコピーしておきます。これをテーマのcssの示されている行に貼り付けます。ただここで注意すべきは大抵のワードプレスのテーマはレシポンシブですので、ここも画面の解像度による設定部分になっている点です。全てに適応させたい場合はここに示されているラインcssの533行目を変えてもダメです。

テーマのcssを変更する

ワードプレスにログインし、ダッシュボード　外観　テーマの編集を開きます。

変更する部分を見つけます。

ここでは全体に適用させたいので、ここを書き換えました。ファイルを保存します。ワードプレスを再起動します。全てのページに適用できたはずです。

 

 

WordPressはブログだから選んだテーマをそのまま使っていればいいのだけれど、ちょっと見栄を変えたくなることがある。そこで見出しだけを変える方法を幾つか紹介。

いきなりcssを変える方法

当然テーマにはcssがある。そのcssを書き換えればいい。見出しだからh1からh6を記述しているところを好みのものに変えればいい。勿論cssの知識は不可欠だ。テーマのカスタマイズから行える。もし自分でcssを書く自信がなければ、ネット上にある見出しを作るジェネレーターを使うといい。

classを使って、見出しを作り登録しておく方法

いきなり変えるのはなんなんで、クラス名をつけた見出しを作っておく。これもジェネレーターで作ってもいい。これをcssファイルとして保存して登録する。勿論登録する知識は必要だ。
その上でエディターを拡張しておいて、そこから呼べるようにする。

cssを部分的に登録できるプラグインを使う方法もある

いずれにしても、チョットでもカスタムしたけりゃ、やはりcssの知識は不可欠です。
具体的には後で。