今週はテーマ側のSSL対応の強化をはじめ、全テーマの様々なアップデートが行われておりますが、その中でも目立ったフロントエンドの部分での拡張をご紹介します。
追加されたアイコンフォント
以下のアイコンフォントが追加されました。
オリジナルCSS設定のエディタをシンタックスハイライト化
DigiPressはテーマに独自のCSSを追加したり規定のスタイルをカスタマイズする場合にテーマのCSSを編集せずに管理画面から組み込める機能がありますが、一連のバージョンアップにてこのオリジナルCSSの入力フォームをシンタックスハイライト化しました。
これによりDigiPressの高度なオリジナルカスタマイズを行うヘビーユーザーの方にもより視認性に優れたCSSの編集を行っていただくことが可能となりました。
ショートコード集プラグインのバージョンアップ
DigiPressテーマ専用のショートコード集プラグイン「Shortcodes for DigiPress」のHTMLテーブル用ショートコードもさらに強化され、テーブルのマウスホバー時のハイライト効果やソート機能が拡張されました。
セルにマウスホバー効果を有効にしたテーブル
| 1列目タイトル | 2列目タイトル | 3列目タイトル | 4列目タイトル |
|---|---|---|---|
| 1-1番目のセル | 1-2番目のセル | 1-3番目のセル | 1-4番目のセル |
| 2-1番目のセル | 2-2番目のセル | 2-3番目のセル | 2-4番目のセル |
| 3-1番目のセル | 3-2番目のセル | 3-3番目のセル | 3-4番目のセル |
このショートコード
[table width="100%" highlight=true] [tablehead title="1列目タイトル,2列目タイトル,3列目タイトル,4列目タイトル"] [tablerow width="160px"] [tablecell] 1-1番目のセル [/tablecell] [tablecell] 1-2番目のセル [/tablecell] [tablecell] 1-3番目のセル [/tablecell] [tablecell] 1-4番目のセル [/tablecell] [/tablerow] [tablerow] [tablecell] 2-1番目のセル [/tablecell] [tablecell] 2-2番目のセル [/tablecell] [tablecell] 2-3番目のセル [/tablecell] [tablecell] 2-4番目のセル [/tablecell] [/tablerow] [tablerow] [tablecell] 3-1番目のセル [/tablecell] [tablecell] 3-2番目のセル [/tablecell] [tablecell] 3-3番目のセル [/tablecell] [tablecell] 3-4番目のセル [/tablecell] [/tablerow] [/tablehead] [/table]
セルホバー時に任意のフォントカラーと背景カラーを指定したテーブル
| 1列目タイトル | 2列目タイトル | 3列目タイトル | 4列目タイトル |
|---|---|---|---|
| 1-1番目のセル | 1-2番目のセル | 1-3番目のセル | 1-4番目のセル |
| 2-1番目のセル | 2-2番目のセル | 2-3番目のセル | 2-4番目のセル |
| 3-1番目のセル | 3-2番目のセル | 3-3番目のセル | 3-4番目のセル |
このショートコード
[table width="100%" highlight=true hoverrowbgcolor="#aae8e9" hoverrowfontcolor="#465f60" hovercellbgcolor="#23b5df" hovercellfontcolor="#fff"] [tablehead title="1列目タイトル,2列目タイトル,3列目タイトル,4列目タイトル"] [tablerow align="center" width="160px"] [tablecell] 1-1番目のセル [/tablecell] [tablecell] 1-2番目のセル [/tablecell] [tablecell] 1-3番目のセル [/tablecell] [tablecell] 1-4番目のセル [/tablecell] [/tablerow] [tablerow] [tablecell] 2-1番目のセル [/tablecell] [tablecell] 2-2番目のセル [/tablecell] [tablecell] 2-3番目のセル [/tablecell] [tablecell] 2-4番目のセル [/tablecell] [/tablerow] [tablerow] [tablecell] 3-1番目のセル [/tablecell] [tablecell] 3-2番目のセル [/tablecell] [tablecell] 3-3番目のセル [/tablecell] [tablecell] 3-4番目のセル [/tablecell] [/tablerow] [/tablehead] [/table]
ソート(並べ替え)機能を有効にしたテーブル
| 日付 | ひらがな | アルファベット | 金額 | 割合 |
|---|---|---|---|---|
| 2003/7/10 | なにぬねの | Candy | ¥5,429 | 44% |
| 2000/10/25 | かきくけこ | Fruit | ¥1,980 | 78% |
| 2014/7/16 | やゆよわをん | Apple | ¥34,869 | 8% |
| 2014/12/24 | はひふへほ | Graphic | ¥20,082 | 63% |
このショートコード
[table width="100%" sort=true highlight=true] [tablehead title="日付,ひらがな,アルファベット,金額,割合"] [tablerow width="160px"] [tablecell] 2003/7/10 [/tablecell] [tablecell] なにぬねの [/tablecell] [tablecell] Candy [/tablecell] [tablecell] ¥5,429 [/tablecell] [tablecell] 44% [/tablecell] [/tablerow] [tablerow] [tablecell] 2000/10/25 [/tablecell] [tablecell] かきくけこ [/tablecell] [tablecell] Fruit [/tablecell] [tablecell] ¥1,980 [/tablecell] [tablecell] 78% [/tablecell] [/tablerow] [tablerow] [tablecell] 2014/7/16 [/tablecell] [tablecell] やゆよわをん [/tablecell] [tablecell] Apple [/tablecell] [tablecell] ¥34,869 [/tablecell] [tablecell] 8% [/tablecell] [/tablerow] [tablerow] [tablecell] 2014/12/24 [/tablecell] [tablecell] はひふへほ [/tablecell] [tablecell] Graphic [/tablecell] [tablecell] ¥20,082 [/tablecell] [tablecell] 63% [/tablecell] [/tablerow] [/tablehead] [/table]