閉じる
閉じる

あまめも

[WordPress]「外部サイトのリンクをアイキャッチ込で分かりやすく表示したい!」と思ったので検索![embed]

こんにちは! あますた(@amaguristar)です。

ブログを書いていて常々思っていた事が、「外部リンクの表示の仕方」。同一ブログ内だとカード状に表示する関数があったのでそれを使わせて頂いてるのですが、外部サイトだと使用できず。今年の目標で「毎日更新」とうたった以上は「表示もちゃんとしないとだめだろう?」と今回気合いを入れて調べました。

 

知らなかった・・・。

ちょっと調べ始めたら結構出てくる。そして衝撃だったのが、「WordPress4.4から標準装備されている」という事実。・・・全然知らなかった。

使い方も簡単。基本的にはURLを独立した行に書く事のみ。

https://wazn.jp/1541

上記のように書けば、

ちょっと早めですが、今年のGW(ゴールデンウィーク)は営業します!

と表示されます。詳細は下記リンクを参照して頂くとして、「このまま終わったのでは面白くない!」ってんでちょっと表示の仕方を簡単に変更してみました。

外部サイトの表示を「Embed」というらしい

そもそも先ほど紹介した、外部サイトを自分のサイトで表示することを「Embed」というらしい。早速調べてみると専用のページ発見!

上記サイトを読んでいると、ショートコードを発見! これでいちいち独立した行に書かなくても表示されるはず!とショートコード【embed】〜【/embed】(実際にhtmlに書くときは【】を[]に置き換えて下さい)で囲んでだら問題なく表示。

通常、レスポンシブデザインに対応していないので、cssでレスポンシブ対応。

.wp-embedded-content { max-width: 100%; }

と入力。これだけでレスポンシブデザインに早変わり! もちろんテーマによって若干の微調整は必要でしょうが基本的には上記でOKのはず。

まだまだカスタムしたい事は多々ありますが、機能としては十分。もっと早く調べておけば良かった。

関連記事

  1. HTML

    <ol>タグの表示を変更する際のtype一覧リスト

  2. お店の「お知らせ」を開いたら記事ページに飛ぶようにした方が良いん…

  3. edit

    「Git」のコミットメッセージを間違えた、そんな時の修正方法

  4. ブログに「目次必要かな?」と思ったのでサクッとローテクで作ってみ…

  5. 特殊文字

    特殊記号を数字参照(コード直打ち)して文字化けを回避する方法

  6. list

    定義リスト<dl><dt><dd&…

こんなメモもありますよ♪

  1. 電車内ラッピング

Twitter

ページ上部へ戻る