Mac ユーザーでブログを運営している方は、MarsEdit を使っている方も多いと思われますが、私も使わせて頂いております。画像の挿入も MarsEdit に頼りっぱなしです。
しかし、前から画像の拡大ができないことが気になっていたんですよね。説明のために入れた画像がスマートフォンでは小さすぎて、内容がわからない状態になっていたので。
そこで、対応してみました。
MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.カテゴリ: ソーシャルネットワーキング
価格: ￥4,000 (記事公開時)
MarsEdit デフォルトのスタイルでは画像に < a > タグが入らない
< a > タグの「a」は Anchor の略で、リンクを挿入するときに使うタグです。この < a > タグが設定されていなくても画像に URL が存在しているので、画像だけ開くこともできるのですが(ブラウザーにもよります)、クリックして開くことができません。
せっかく MarsEdit で楽をしているのに、毎回手動で < a > タグを設定するのは面倒なので、自動で < a > タグ が入るようにしました。
MarsEdit に画像挿入のスタイルを追加する
幸い、独自にカスタマイズしたスタイルを追加することができるので、スタイルを追加しました。
まず、ツールバーの Media アイコンをクリックして Media Manager を開きます。もしくはメニューバーから Window > Media Manager で開きます。
そして、何か画像を選択してから、Media Manager の右下のスタイルを選択するプルダウンをクリックします。
そして、プルダウンから「Customize」をクリック。
「Media Markup Templates」が開くので、左下の「＋」をクリックして、スタイルを追加します。
デフォルト設定にある「Unaligned」を参考にしました。
1 | <img src="#fileurl#" alt="#alttext#" title="#displayname#" border="0" width="#imgwidth#" height="#imgheight#" /> |
名前を「リンク付」として、「Unaligned」に < a > タグを追加しました。
また、MarsEdit に画像をドラッグしたときに表示される「Upload Utility」では、alt 属性の設定はできるけど、title 属性の設定ができないっぽいので、ついでに title 属性を alt 属性と同じにしてしまいました。
拡大表示したい画像は、大抵説明のために入れた画像なので、alt と title が同じでもむしろ都合が良いので。
「alt=”#alttext#” title=”#alttext#”」の部分です。
「Unaligned」では、「title=”#displayname#”」となっていますが、これはファイル名が title 属性に設定されます。title 属性がファイル名というのも味気ないけど、ファイル名に日本語を使うのも問題があるので、この設定にしました。
カスタマイズして追加したものは、こんな感じです。
1 | <a href="#fileurl#"><img src="#fileurl#" alt="#alttext#" title="#alttext#" border="0" width="#imgwidth#" height="#imgheight#" /></a> |
オリジナルのスタイルが追加出来ました。
テストしてみる
Style にさっき作成した「リンク付」を選択します。Alt にもテキストを入れて、title に同じものが入るか確認します。
画像を切り抜きすぎてわかりづらくなってしまいましたが、WordPress にアップロードした画像です。
alt 属性に設定したテキストが tiltle 属性にも表示されています。成功です。
ついでに「Fancybox for WordPress」プラグインで色気づいてみました。
まとめ
ブログを始めた頃は、html のタグとか属性とかまったく分からなかったので、原因が分からず長らく放置状態でした。しかし多少タグがわかってきたので、対応してみました。過去の投稿も拡大しないと内容がわからない画像は少しずつ直したいと思います。
MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.カテゴリ: ソーシャルネットワーキング
価格: ￥4,000 (記事公開時)
