無料ブログ「rentafree.net」の管理人ブログ

メンテナンスのお知らせ

2015年12月07日02時00分~2015年12月07日05時00分
にメンテナンスがあるので、サービスに繋がらないかもしれません。

<img>のタグ設定からポップアップを設定できるようにしました

前回の記事で実装する方向だとお伝えしていましたが、
ブログエディターの<img>タグの設定に拡張項目としてdata-popup属性を追加しました。

data-popup属性は公式JavaScriptの機能で、属性が存在する場合、画像クリック時に属性値を画像URLとしてポップアップ表示します。
機能を利用するために今まではHTMLコードを直接編集する必要がありましたが、タグ設定メニューから画像URLを指定すれば利用できるようになりました。


公式JavaScriptの独自属性なので知らない方には何の属性なのかわからないですが、
タグ設定メニューでは属性名の箇所にカーソルを合わせると簡単な説明がチップ表示されます。

[後ろに改行]機能を追加しました

久しぶりの機能変更になりますが、
ブログエディターに[後ろに改行]機能を追加しました。

ブログエディターでタグ適用範囲を右クリックした際のタグ編集メニューに[後ろに改行]が追加されています。
この機能を使うと、編集対象のタグの後ろに<br>が挿入されます。
基本的に対象範囲の後ろに空行が挿入されますが、ブロック内末尾のインラインタグで行った場合は2回挿入しないと見た目が変わらない場合もあります。

タグが複数連続して並んでいる場合や、ブロック内末尾にタグが存在する場合など、
タグの後ろ(タグの間)にキャレットを移動させることができませんのでそのまま編集することができませんので、末尾やタグ間に空行を挿入して編集しやすくするための機能です。
<div>が並んでいて間に文章を挿入したい場合などに便利だと思います。

定義済みのタグの殆どで有効にしましたが、<li>の場合は親要素<ul>か<ol>に適用したいですが、
<li>の編集で[後ろに改行]だとわかりにくいと思うので、<li>のみ除外しました。


あと、公式JavaScriptの機能で画像ポップアップ機能がありますが、
現在はHTMLコードの直接編集を行わないと機能が利用できませんが、マウス操作のみで機能が利用できるようにしたいと考えています。
実装する方向で考えています。