u1_113のブックマーク / 2020年6月10日

u1_113 id:u1_113

2020年6月10日のブックマーク (2件)

WordPressで横長の表を崩さずに挿入する方法（レスポンシブ対応表）
WordPressで見やすく表を挿入したい時があります。けれども、横幅が大きすぎて、以下のように表示が崩れてしまい、逆に読みにくくなってしまったなんて事がある方も多いかと思います。通常、横幅の長い表をWordpress 本文で表示しようとしたら、メインカラムからはみ出してしまうし、変なところで改行されて、文字は読みにくいしで、「分かりやすくするつもりで表を挿入したのに、逆に分かりづらくなってしまう」なんて事になってしまいます。これがスマホだと、なおさらひどい状況になると思います。けれども、今回のカスタマイズを行うことで、横幅が大きすぎる表は、横スクロールバーが表示されて、表が崩れないようになると思います。こんな感じで。※横幅がはみ出している部分は横スクロールしてください。
u1_113 2020/06/10
wordpress
リンク
[WP]テーブルブロックの table 要素を div でラップする方法
現在開発中の、DigiPress テーマ専用のブロックエディタープラグインによる拡張機能として、WordPress 標準のテーブルブロックで作成される HTML テーブル(table 要素)を、横にオーバーフローした際にCSSのみで水平方向にスクロール可能にして表全体が閲覧できるようにするため、table 要素全体を div 要素でラップする必要がでてきました。ブロックエディターで出力されるコンテンツ全体を div などのタグでラップする方法は、wp.hooks の addFilter を利用して以下のようにフックを実行することで簡単に実装できます。テーブルブロックをdivでラップするコード(JSX) /** * Wrap table block in div. * * @param {object} element * @param {object} blockType * @par
u1_113 2020/06/10
wordpress
リンク
- 2020年6月19日
- 2020年6月10日
- 2020年6月6日