2018年08月14日(火) - 21:45 | カテゴリ:
PC
DigiLoogの記事を作成する際はWordPress上でTinyMCEを使っているのだが、
少し前のバージョンからTableタグのパラメータが下記の通り自動設定される様になった。
そもそものTinyMCEを愛用している理由は、表(Tableタグ)の柔軟性に惹かれて使い出した。
そんな中付与されるパラメータだが、レスポンシブデザインなら「width:100%」は有りがたいだが、
テーマに固定レイアウトを採用している場合や、自力でリサイズをしたい場合は自動付与が邪魔になる。
という事で、TinyMCEで自動付与される「width:100%」を無効化してみた。
参考サイト
………
ググればやり方は色々出てくるのだが、
レスポンシブ化に特化していたり「width」を削除していないケースが大半だった。
海外コミュニティにも似たような事をやろうとしているケースがあるのだが、
Bootstrapを前提としていたり仕様違いなのか動かなかったりした。
なので『もう自力で書けばいいや♪』と思い、TinyMCEのドキュメント・WordPressのフック関数を読んで、
TinyMCEで表を作成した時のデフォルトオプションが下記になるようにコードを書いてみた。
- 隣接セルのボーダーを重ねて表示
- Tableタグのボーダーは1ドット
- Tableタグのボーダーをドラッグ＆ドロップでリサイズ
- 表自体のドラッグ＆ドロップリサイズを無効化
- ただし、画像のドラッグ＆ドロップリサイズは有効化
下記ソースをWordPressのテーマ直下にある「functions.php」に追記すると仕様通りになった。
当初、array指定が上手く反映されなかったのだが、json_encodeを噛ませたら反映された。
その他、指定出来るオプションはTinyMCEの設定に依存する為、詳細はドキュメント参照の程。
function customize_tinymce_settings($mceInit){
// Tableタグの幅指定(width:100%)削除
$style_table = array(
'border-collapse' => 'collapse'
);
$mceInit['table_default_styles'] = json_encode($style_table);
// Tableタグのボーダー幅
$style_border = array(
'border' => '1'
);
$mceInit['table_default_attributes'] = json_encode($style_border);
// ボーダーのD&Dリサイズ有効化
$mceInit['table_resize_bars'] = true;
// 画像のみD&Dリサイズ有効化
$mceInit['object_resizing'] = "img";
return $mceInit;
}
add_filter('tiny_mce_before_init', 'customize_tinymce_settings', 0);
|
想定通りTableタグのデフォルト値からwidth指定を消す事が出来た ヽ(´ー｀)ノ
スタイルはfunction内でarray指定しているだけなので、色々と書き換える事が出来る筈。
実際のTableタグ使用感は下記の通り。
表のwidth指定がなくなった事で、セル内にフィットする形でセルサイズが最小になりつつ、
ボーダーのリサイズもマウスで出来るようになった。
オーソドックスとなる設定は上記例の通りwidth指定削除だと思うが細かい所は利用環境によると思う。
自分の場合は上記を少し書き換え、Tableタグのボーダーリサイズを無効化(false)した上で利用している。
表の高・幅は都度プロパティから数値入力して設定する人種なので、マウス指定は無くても問題無いと判断。
実際に利用しているが特に問題は発生していない。
ただし、画像リサイズは高頻度で利用するので画像リサイズは有効化してある。
Tableレイアウトを利用しつつ画像リサイズもGUIで出来ると、
臨機応変に画像を配置しつつ並びを整列する事が出来るので凄く便利なのでオススメ。稀にレイアウト崩れるが…
WordPressを細かく弄っている人は結構多いと思うが、
大体の人がテンプレートなど外面での弄りが大半だと思う。
エディタを弄る人は少ないと思うが記事の書きやすさはモチベーションは言うまでも無く、
記事執筆の効率化にも直結するので今まで弄った事の無い人は是非弄ってみて欲しい。
« 続きを隠す
2018年08月14日(火) - 10:25 | カテゴリ:
雑談
コミケ戦いの日となる3日目。恒例となってきているが、地元電車の始発で参戦。
連日猛暑が続いていた事もあり、いつもより念入りに熱中症対策をしましたが、
当日は小雨が降っていたり、曇っていたりして、開場までの間はイージーモードとなりました。
欠かさず行っている「祭社」「無人少女」には行きつつ、
気になった所やら、いつもは委託で買っているサークルを覗いてきました。
自PC横のタペを、夏コミでゲットした物に変更
今回、巡ったサークルは下記の通り。ぶっちゃけ、最後の方は諦める予定だったが、
何故かすんなりと購入でき昼前には全部回れてしまった ( ﾟдﾟ)
- 祭社 – ななろば華
- お花見日和 – 白もち桜
- NANACAN – ななかまい
- INS-mode – 天凪青磁
- 無人少女 – 梱枝りこ
- ZiP – 萌木原ふみたけ
- DragonKitchen – さそりがため
※絵師さん敬称略、当日回った順
当初は『無人少女辺りまで行ければ御の字だな～』と思っていたのだが、
全部完遂出来てしまった事もあり予算ギリギリまでお金を使う事態に。
コミケで帰宅直後に所持金110円になるレベルで初めてギリギリまで使ってしまった。
…流石に、クレカ・Suica辺りは所持していましたが。
[祭社] 新刊セット、タペストリー、抱き枕カバー
[お花見日和] 新刊セット
[NANACAN] 新刊グッズセット
[INS-mode] 新刊(INS-BOX)
[DragonKitchen] 抱き枕カバー
[無人少女] グッズセット、抱き枕カバー
[ZiP] 新刊3点セット
………
- コミックマーケット94 – 三日目
[祭社] 新刊セット、タペストリー、抱き枕カバー – 15,000円
[お花見日和] 新刊セット – 2,000円
[NANACAN] 新刊グッズセット – 2,000円
[INS-mode] 新刊(INS-BOX) – 500円
[無人少女] グッズセット、抱き枕カバー – 14,000円
[ZiP] 新刊3点セット – 2,000円
[DragonKitchen] 抱き枕カバー – 12,000円
合計：47500円
C94合計：74,000円
( ﾟдﾟ)
( つ д⊂) ゴシゴシ
(；ﾟ Дﾟ) …！？
言い訳ですが、無人少女とドラキチで布物買えるとは思わなかった。
あと、本来は委託で済まそうと思っていた所が、
するっと買えた事もあり金額が跳ね上がりました (゜∀。)
ま～、今年は諸事情でお金使わなかった事もあって余裕があったので良しとしよう。
………
連日の猛暑でどうなるのか不安だったのだが、
準備会の方が熱中症対策を色々と広報していた事もあり、
倒れた人はいたけれど新聞沙汰レベルの大事は起きなくて良かった。
やはり、熱中症は気をつけねば…
今年は企業が西・東と別れていて「何か意図あるのかな。単に場所が無いだけか？」と思っていた所に、
コミケ準備会のtwitterでこんな爆弾発言が。
( ﾟдﾟ) ＜ まじですか…
今年の冬コミは例年通りの3日開催ですが、4日開催でどうなるやら。
今までに無い開催になるので好意的に捉えて来年のコミケも楽しもうと思う。
ただ、頒布する側としては当選率が70%になるらしいので、当選するのかが気がかり。
今回書けなかったことは是非冬コミで出さねば！
« 続きを隠す
