【はてなブログ】インスタグラムのキャプションを非表示にする方法(他 画像貼り付けヒントメモ)

自分用に書いてます。

私はMarkdownで書いてますが、外部サイトの埋め込みや画像は「はてな記法」になってるので、少し何かしたい時に知ってると便利なのをメモしてます。

メモ用なので『覚えとこ!』というのは随時追記していきます。

それにしても「なんちゃら記法」が沢山あって訳が分からんです。

外部サイト埋め込みでの便利な機能

インスタでのキャプションのON/OFF

インスタを埋め込む時、リンクをコピーして埋め込むのが一番楽なんですが、キャプション*1が長~くついてる時はインスタの埋め込み用コードから「キャプションを追加」のチェックを外して、さらに長~~~いコードをコピーしてたんです。

どっちもコピペするだけ、と言えばそうですが何行にも渡るほど長いコードなので
―――「はてな記法」でないんかいな?
と思ってたんです。

インスタ共有画面
右上3点メニューを押した画面
黄色下線はリンク
水色下線は埋め込みコード

 

キャプション追加画面
埋め込みコードからキャプション追加のチェックをはずすと、キャプションは非表示になる

これが今までのやり方。

で、今回見つけたのが

:hidecaption

というコード。

見つけたのはいいんですが、【はてなブログ】ではなく【はてなブログMedia】(企業向け?)のヘルプにのってたので(はてなブログ側にはのってない)、もしかすると記法が変ることもあるかもしれません…。

 

使い方ははてな記法で書かれたコードに[:hidecaption]を追加。

[リンク先アドレス:embed:hidecaption]

 

通常の埋め込み  

www.instagram.com

はてな記法(Markdown)の表示では  

[https://www.instagram.com/p/BPMkcOahikZ/?utm_source=ig_web_copy_link:embed:cite]

 

キャプションを消した時  

はてな記法(Markdown)の表示では  

[https://www.instagram.com/p/BPMkcOahikZ/?utm_source=ig_web_copy_link:embed:hidecaption]

 

heyyy
通常[リンク先アドレス:embed:cite]なんですが、
[リンク先アドレス:embed:cite:hidecaption]と繋げていくと埋め込めないです。

なので[リンク先アドレス:embed:hidecaption]で[:cite]は除外するか、
[リンク先アドレス:embed:hidecaption:cite]と順番を入れ替えてください。

※[:cite]について
左下にサイト名のリンク(リンク先は埋め込んだページ)がつく。私はすぐ消えるニュースサイト以外はいつも邪魔なので消してる。

引用元に使うと便利[:title]

YouTubeはじめ外部サイトを埋め込んだり、どっかの記事から文章を引用したりもしますが、その時は引用元をのせてます。

今のいままで、いちいち

<a href="リンク先アドレス">アドレス先のページタイトル、ホームページ名など</a>

こんな風に書いてたんですが、[:title]でページのタイトルが自動でつくみたいですね。

知らんかったわ。

【太田上田#51】古坂大魔王にお悩み相談しました - YouTube

キャプション箇所のコード  

<figcaption>
  [https://www.youtube.com/watch?v=nz2fZVh0v3Q:title]
</figcaption>

画像

画像はMarkdownの場合、fotolife記法となるようです。

参考  

[f:id:*******:YYYYMMDDHHMMSS*:オプション]

これが基本の構文

自分のはてなID(*******)に画像番号となるアップロードした日時(YYYYMMDDHHMMSS)+アルファベット1文字が入る。

[:plain]画像をクリックすると挙動が変わる

:plain

記事内に写真を投稿した際の通常オプション

[:plain]を消した場合、画像をクリックするとフォトライフへ移動する。

[:plain]あり
[f:id:はてなID:画像番号:plain]

[:plain]なし
[f:id:はてなID:画像番号]

[:w300][:h300]幅や高さを変更

:w300
:h300

画像の幅、高さを指定。

幅だけ、高さだけを指定すれば等倍で変更可能。

[:w200]の場合
[f:id:はてなID:画像番号:w200]

[:h200]の場合
[f:id:はてなID:画像番号:h200]

[:alt][:title]alt属性、title属性付加

:alt

alt属性をつけれる。(画像が表示されない時の代替テキスト)

サイドバーから「写真を投稿」→一番下に小さく「貼り付け時に詳細を設定する」にチェックが入ってると、詳細設定で設定可能。

:title

title属性をつけれる。(画像にカーソルを合わせた時に補足説明文を出せれる)


なんだか、色々出来るんだけど分かりずらいんだよなぁ。

ただただ、もの覚えが悪いだけというのもあるけど。

また何かあったら、メモしていきます。

*1:投稿者のコメントやハッシュタグ