Linux あれこれ

Linux 関連(一部 Windows11 )の備忘録です。

「はてなブログ」で絵を描く〈H05〉

登録日: 2020-04-01 更新日: 2020-05-15

編集画面のサイドバーにある「+」ボタンで「絵を描く」アイコンを追加。

追加した「絵を描く」アイコンをクリック→「+絵を描く」をクリックすると、絵を描けます。ただし、マウスでフリーハンドで描くことになるので、練習が必要です。

-

「目次」

-


「絵を描く」

ブラウザ上で絵を描き、記事に貼り付けできます。絵は「はてなフォトライフ」に保存されます。

説明

詳細:

  • お絵描き機能では、ツールバーのペンと消しゴムを使ってフリーハンドでお絵描きができます。

→ペンの太さは 2pxから 15px までの 5種類、 色はWeb セーフカラー(216色)から選べます。

  • 描き損じたときの「元に戻す」や「やり直す」ができます。「クリア」で最初からやり直せます。

  • 絵を描くキャンバスの大きさは、右下の 四角形(小、中、大)から選べます。

  • 描き終えたら、左下の「画像をアップロード」ボタンをクリック。描いた絵がアップロードされ、編集画面に貼り付けられます。画像そのものは、自分のはてなフォトライフの「Hatena Blog Illust」フォルダにあります。

  • お絵描き機能は、HTML5Canvas 要素を利用しています。

-


フォトライフ(fotolife) 記法のおさらい:

[f:id:はてなID:画像番号:オプション]

-


フォトライフ(fotolife) 記法のプション:

オプションは複数を続けて指定でき、順序も任意です。

  • image

→画像をクリックすると、「はてなフォトライフ」の画像ページに移動するリンクになります。 (オプション省略時のデフォルト)

  • plain

→PC 環境で画像をクリックすると、ブラウザサイズのビューワで表示されます。

  • w80

→w に続けて、画像の「表示幅」を数字で指定します。

  • h80

→h に続けて、画像の「表示高さ」を数字で指定します。

  • alt

→alt= に続けて、画像の「alt 属性」(代替テキスト)を指定します。 マウスでのコピー時に文字として貼り付けられます。 等号(=)の右側に何も指定しないと、属性値を空にできます。

  • title

→title= に続けて、画像の「title 属性」を指定します。 マウスを持っていったときに文字として表示されます。 等号(=)の右側に何も指定しないと、属性値を空にできます。

alt オプションとtitile オプションを省略すると、「はてな記法の式」がデフォルト値になるので、両方でその式が表示されます。

-


「絵を描く」アイコンで絵を描いてみました。

例 1:

→クリックすると、ブラウザサイズのビューワで「原本」が表示されます。

下記が貼り付けられています:

[f:id:USER:2020....002p:plain]

-


例 2:

→クリックすると、「はてなフォトライフ」の画像ページに移動します。リンクと同じです。 元の画面に戻るには、ブラウザの左上の「←」で戻れます。

下記のように、貼り付けられた記述のオプション部分を削除しています:

[f:id:USER:2020...952p]

→オプション部分を省略しているので「image」の指定になります。

注意:

編集画面のサイドバーから「写真を投稿する」を使うと、 非公開の「Hatena Blog」フォルダにアップロードされるため、リンク先に移動してもユーザー本人にしかページは表示されません。

-


例 3:

→キャンパス大で描いたら、大きすぎました。

印刷 渦巻き

→オプションで表示サイズ、および、alt とtitle を指定してみました。

[f:id:USER:2020...524p:plain:w200:h200:alt=印刷 渦巻き:title=表示 渦巻き]

→マウスを持っていったときの「文字」、および、上にある「→」と下にある「→」の間を範囲指定してマウスでコピーして、テキストエディタに貼り付けしたときの「文字」を確認してみてください。

また、縦横比を考えてサイズ指定しないと、いびつな形になります。見る人のモニタによっても比率は変わるので倍率指定が欲しいと思ったら、どちらか片方だけ指定(w か、h のどちらかを省略)すればいいだけでした。

-


まとめ

マウスで絵を描くのは難しいですね。

-

-


目次

先頭

-


-