投稿する写真に飾り枠をつけたい！

投稿する写真に飾り枠をつけたい！

投稿する写真に飾り枠をつけたくなりました。

• 投稿する写真は加工しない
• あれこれ準備をしたくない
• はてぶのプレビューでも確認できる

---

枠の画像は、つくりません。
（というより、デザインのセンスがないので、つくれません）

CSSファイルは、使いたくありません。
（別の画面を開いて、CSSを読み込ませるのは、大変そう）

styleタグは、使えませんでした。
（はてぶのプレビューが、まだ対応していませんでした）

この方法なら、はてぶのプレビュー画面でも見れました。

サンプル

飾り枠をつける前

飾り枠をつけた後

手順

1. 写真を投稿したあと、選択した写真を貼り付けます。

[f:id:xxxxxx:plain] のようなタグが出力されます。

2. タグの前の行に、次のコードを貼り付けます。

<div style="display: flex; margin: -16px"><div style="position: relative; left: 16px; min-width: 16px; margin-top: 16px;  margin-bottom: 22px; z-index: 1; background-color: rgba(255,255,255,0.5)"></div><div><div style="position: relative; height: 16px; top: 16px; background-color: rgba(255,255,255,0.5)"></div>

3 . タグの次の行に、次のコードを貼り付けます。

<div style="position: relative; height: 16px; top: -22px; background-color: rgba(255,255,255,0.5)"></div></div><div style="position: relative; left: -16px; min-width: 16px; margin-top: 16px;  margin-bottom: 22px; z-index: 1; background-color: rgba(255,255,255,0.5)"></div></div>

おしまいです。

---

【追記】手順2、手順3のコードは横に長いので、マウスでトリプルクリックで全選択して、コピーすると簡単です。

---

【追記】サイズを変えたいときは、外側にdivタグをかいて調整します。

<div style="width: 320px;">
「手順3までのコード」
</div>

飾りの枠がいらないときは、「手順1までのコード」を囲います。

<div style="width: 320px;">
  [f:id:xxxxxx:plain]
</div>

---

【追記】編集は Matkdown で書いています。

---

【追記】みたまま でサイズを変えるときは、ドラッグ＆ドロップで好きなサイズにできます。

---

自由に使ってください ٩(ˊᗜˋ*)و.

ありがとうございました。