はてなブログで見られるな「ブログカード」を、WordPressに簡単に実装できる秀逸なプラグイン、「Pz-LinkCard」。
制作者は、日本の方なので、設定方法もとてもわかりやすいです。
制作者の記事はこちら↓
当ページは「Pz-LinkCard」の説明書のようなもので、プラグインのバージョンアップとともに更新しています。 WordPressでリンクをカード形式で表示する Pz-LinkCard - popozure.info |
↑これがまさに、「Pz-LinkCard」です。
目次
デフォルトデザインを変えたい
プラグインのインストール方法は、省略します。いつも通りです。
で、インストール後のデフォルトのデザインは、私のブログのトーンとちょっと違かったので、シンプルな感じに変えました。
デフォルトデザインかどんな感じかは、制作者のブログを見てみてください。
他にも簡単設定できるデザインをたくさん用意してくれています。が、どうも私のトーンには合わず。。
ということで、超シンプルなデザインに変えました。
上にも表示させている、↓こういう感じに。
当ページは「Pz-LinkCard」の説明書のようなもので、プラグインのバージョンアップとともに更新しています。 WordPressでリンクをカード形式で表示する Pz-LinkCard - popozure.info |
インスパイアされた方に、設定方法をご紹介します。
「Pz-LinkCard」のシンプルデザインの設定はこれだ!
定型書式
カスタマイズするので、「なし」を選択します。
ショートコード
こちらはデザインとは関係ありません。記事を書くときのショートコードを自分で決められるってやつですね。自分のお好きなように設定してみてください。
表示設定
ここから本題です。
引用ダグは不要。カード全体へのaタグ適用はしておいた方が良いと思います。
配置設定
幅500、高さ105、margin(外の余白)は下だけ16px、padding(中の余白)は、上と左が16、右が8でバランス良いと思います。
高さは色々調整して見ても良いかもです。
外観設定
サムネイルは右がおすすめですね。抜粋文あり、影をつえ、角丸に。
区切り線はあってもなくても良いと思います。
枠線
色は薄めで、solid、太さは1px。
文字設定
これは、好みがあると思います。私は添付の通りです。
タイトルの文字の大きさとかは色々試して見てください。あまり大きくしすぎて、タイトル長かったりすると、バランス悪くなるので、14pxぐらいでちょうど良いと思います。
抜粋文
これが結構、悩ましいです。上記のサイズ設定だと、抜粋文の高さは20、桁数160がちょうど収まりが良かったですね。このバランスが崩れると、抜粋文が見づらかったりしますので、注意が必要です。
あとはデザインとはあまり関係がないので、デフォルトのままにしています。
結果、私の場合は、
Chart.jsを使った、レーダーチャートの描画方法をご紹介しました。このcanvas、表示サイズの指定がすこしややこしいので、その方法をご案内します。 canvasのサイズ指定方法 - 画面サイズに合わせて動的に変更させたい- - shiru-web.com |
って感じになります。
シンプルが良い!という人は、この設定がおすすめです。