ogu-tec

ワードプレスで画像を挿入し、文字列をつけた時、それが複数あると思ったようにレイアウトできないということがあります。メディアを挿入する時に配置の設定ができますが、この配置の設定は実はfloatを使っているということが重要です。

• 左：float:left;
• 右：float:right;
• 中央：display:block ,margin:auto;
• なし：指定スタイルなし

実際に以下のようにかつて書いた記事があります。

先ずは柱の部分にトリマーで溝を掘っておく。このトリマー加工はうるさいので晴れ間に庭での作業。

天板と底板には柱になる部分をダボではめるのでダボ穴を掘りますが、柱のダボと合わせるのが大変です。ここはちょっとしたツールを使います。Boschから出ている一種の治具です。

 

画像は二つとも左置きです。しかし、最初の画像の横の文章が少ないので次の画像がその下に入ってしまいます。これを避けるにはfloatをclearします。

これをテーマのcssに登録します。（登録方法は以前の記事をご覧ください）その上で次に来る段落にスタイルを適用します。

先ずは柱の部分にトリマーで溝を掘っておく。このトリマー加工はうるさいので晴れ間に庭での作業。

天板と底板には柱になる部分をダボではめるのでダボ穴を掘りますが、柱のダボと合わせるのが大変です。ここはちょっとしたツールを使います。Boschから出ている一種の治具です。

もし、回り込みを継続する必要がある場合は

を作って適応させてやればいいようです。ただし、この以後はやはりclearしなければなりません。

ただ、エディタにスタイル登録して適用するという方法は上手くいかなかった。

wpを使っているとパーマリンクという言葉が気にかかりますね。これはwpの場合投稿記事がいちいちページに成っていてそこにアドレスが付与されていることを考えればわかります。つまり投稿記事のページのアドレスのことです。何も設定しなくても自動的に付与されています。今書いている表題の下を見れば出ていますね。しかし、このアドレスでは何かと不便です。これを変えてみましょう。

タグをアドレスに

設定→パーマリンクの設定を開きます。オプション構造のところに
/%category%/%postname%　を入力し変更を保存します。変わりましたね。ただ、カテゴリー名が日本語の場合もあるでしょうから、ここも変えましょう。

カテゴリーにスラッグを

投稿欄のカテゴリーから新規の場合は新規、既存の場合はカテゴリー名を選んで編集します。
スラッグ欄に英文字を入力します。

最後は記事名を編集

最後は記事のタイトルになるので、ここを編集ボタンを押して、記事内容がわかる語彙やキーワードにします。

こうすると、この記事のアドレスは以下になります
 https://ogu-tec.net/wp/it/parmalink ‎
これなら、普通のページと同様に使えますね。

 

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

結局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で表を作ってそれを使いたいなんて要求もありそうです。それついては次回やってみます。