閉じる
閉じる

あまめも

[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. ブログに「目次必要かな?」と思ったのでサクッとローテクで作ってみ…

  2. ブログにYouTube動画を載せたら領域をはみだすのでレスポンシ…

  3. 線(line)

    【HTML】<hr>タグ(区切り線)を簡単にカスタム…

  4. 「Git」を使い始めたのは良いのですがコマンドを忘れそうなので一…

  5. 【基礎】MySQLを使用した時のDBの「テーブル」「カラム」「レ…

  6. リストテンプレートも作っておいた方がいいかな?と思ったので作成!…

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

  1. take070-thumbnail
  2. ガツン外観

Twitter

ページ上部へ戻る