WordPressの記事内でリンクをカード形式にして表示する

記事に何かしらのリンクを張るときに、はてなブログでブログカードと呼ばれているようなものを使いたい。

「Pz-LinkCard」というプラグインを使うことで実現できるようなので試してみる。

使い方はエディタで次のショートコードを書くだけ。

 

普通の記事にリンク

WordPressの記事が検索結果ではHTTPS表示になる
Googleの検索結果から記事を開こうとするとURLがhttps始まりになり、SSL通信で接続しようとする。この原因はGoogleがhttpsページを優先しているからとのこと。検索結果...

アイキャッチのある記事にリンク

賃貸を探すときには月額でなく合計費用を見よう
あらまし急遽引越しを行うことになったのでSUUMOやHOMEsのような総合サイトから不動産屋の検索ページを探していた。条件検索で要望にあった物件を探せるのは便利だけど...

外部リンク

Pz-LinkCard
This plugin is intended to display a link in a blog card format. The goodbye to the text-only link.

 

見た目はCSSで変えられるようなのでとりあえずデフォルトの場合を画像で残しておく。

Pz-LinkCard1

ちょっと見た目に違和感がある。

URL部分とfaviconがうまく表示されていないのも気になるけどとりあえずOK。

 

WordPressでコードをいい感じに表示する

何をすればいいか

プラグインを入れることでエディタに機能が追加されるみたい。

紹介記事でよく出てくるのは以下の2つだった。

 

  • Crayon Syntax Highlighter
    • エディタにボタンが追加されて、コード挿入モードを経てコードを書ける

 

  • SyntaxHighlighter Evolved
    • 独自タグでコードを囲むことでコードを書ける([css]…[/css])
    • 紹介ページを見る限り使いにくそう
      • マウスドラッグで選択すると行数まで選択される
      • マウスドラッグでコピーできない
      • アクションボタンがコードにかぶって見にくい

 

というわけでCrayon Syntax Highlighterをインストール&有効化した。

実際に使ってみる

プログラム言語:default

プログラム言語:XHTML

エディタ上はどう見えるか

エディタだと上2つとも同じに見えるので、プレビューで確認する必要がある。

edit