WordPressで段落ブロックなどに挿入したURLを自動でカード化する機能のデザインをカスタマイズする機能についての解説ページです。
本機能は、プラグインのバージョン3.2より利用できます
本機能は、WordPress本体の仕様から、「カード幅を親要素に合わせる」等一部の設定を除き、外部サイトからのリンクをカード表示するコンテンツには適用されませんのでご注意ください
以下の項目を変更することで、内部リンクカードの見た目を簡単に変更できます。
また、カードの中身であるiframe要素にスタイルを追加するフォームも用意しているので、さらに詳細なカスタマイズが可能です。
リンクカードデザイン機能の設定項目一覧
| 項目 | 概要 |
|---|---|
| リンクカードのサイズを統一する | リンク元から引用する画像によって切り替わる2種類のサイズを統一します ・パソコン表示時は「小さい画像」を使ったカードへ強制 ・モバイル表示時は「大きい画像」を使ったカードへ強制 |
| アイキャッチ画像のサイズを統一する | カード内へ表示するアイキャッチ画像の大きさを「中」サイズにし、過大な画像が出力されないようにします |
| カード幅を親要素に合わせる | カードの横幅を親要素内の100%幅に強制します |
| フッターコンテンツを非表示にする | カードフッターの内容（サイトタイトル、コメント、シェアリンク）を非表示にします |
| フォントスタイルを継承する | 文字種をテーマの標準スタイルに合わせます （theme.jsonの標準フォントのスラグ「system-font」が適用されます） |
| フォントサイズを継承する | カード内の文字サイズをテーマの標準スタイルに合わせます （theme.jsonの標準フォントサイズのスラグ「medium」が適用されます） |
| タイトル色 | カードのページタイトル色を変更します |
| 文字の色 | カードの内部の文字を変更します |
| 「続きを読む」文字列の色 | カードの「続きを読む」の文字色を変更します |
| 背景色 | カードの枠線色を変更します |
| 背景画像 | カードの背景に使用する画像を指定します |
| 背景画像の効果 | 背景画像を指定した際に中のコンテンツが見にくくなるのを解消するためのマスク機能です |
| 枠線の影の色 | カードの枠線の影の色を変更します |
| 枠線の影の透明度 | 枠線の影の透明度のパーセンテージを実数で指定します （デフォルトは50%指定されています） |
| カスタムCSS | リンクカードに対するカスタムCSSを入力します （記述したスタイルコードは、リンクカードのiframe内にのみ適用されます） |
WordPress標準のカード内コンテンツに対するスタイルコード
WordPress 6.2段階で標準で適用されているスタイルコードを転記しておきますので、該当部分のスタイルコードを「カスタムCSS」欄へコピーして編集することで確実に適用されます。
最新のWordPressのカードリンクスタイルは「wp-includes」→「css」→「wp-embed-template」にあり、WordPressの更新によって変更となる場合がありますので、適用されない時はチェックして修正するとよいでしょう
html, body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* Text meant only for screen readers */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/* Dashicons */
.dashicons {
display: inline-block;
width: 20px;
height: 20px;
background-color: transparent;
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
transition: background .1s ease-in;
position: relative;
top: 5px;
}
.dashicons-no {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M15.55%2013.7l-2.19%202.06-3.42-3.65-3.64%203.43-2.06-2.18%203.64-3.43-3.42-3.64%202.18-2.06%203.43%203.64%203.64-3.42%202.05%202.18-3.64%203.43z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
}
.dashicons-admin-comments {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E");
}
.wp-embed-comments a:hover .dashicons-admin-comments {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E");
}
.dashicons-share {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E");
display: none;
}
.js .dashicons-share {
display: inline-block;
}
.wp-embed-share-dialog-open:hover .dashicons-share {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E");
}
.wp-embed {
padding: 25px;
font-size: 14px;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #8c8f94;
background: #fff;
border: 1px solid #dcdcde;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/* Clearfix */
overflow: auto;
zoom: 1;
}
.wp-embed a {
color: #8c8f94;
text-decoration: none;
}
.wp-embed a:hover {
text-decoration: underline;
}
.wp-embed-featured-image {
margin-bottom: 20px;
}
.wp-embed-featured-image img {
width: 100%;
height: auto;
border: none;
}
.wp-embed-featured-image.square {
float: left;
max-width: 160px;
margin-right: 20px;
}
.wp-embed p {
margin: 0;
}
p.wp-embed-heading {
margin: 0 0 15px;
font-weight: 600;
font-size: 22px;
line-height: 1.3;
}
.wp-embed-heading a {
color: #2c3338;
}
.wp-embed .wp-embed-more {
color: #c3c4c7;
}
.wp-embed-footer {
display: table;
width: 100%;
margin-top: 30px;
}
.wp-embed-site-icon {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 25px;
width: 25px;
border: 0;
}
.wp-embed-site-title {
font-weight: 600;
line-height: 1.78571428;
}
.wp-embed-site-title a {
position: relative;
display: inline-block;
padding-left: 35px;
}
.wp-embed-site-title,
.wp-embed-meta {
display: table-cell;
}
.wp-embed-meta {
text-align: right;
white-space: nowrap;
vertical-align: middle;
}
.wp-embed-comments,
.wp-embed-share {
display: inline;
}
.wp-embed-meta a:hover {
text-decoration: none;
color: #2271b1;
}
.wp-embed-comments a {
line-height: 1.78571428;
display: inline-block;
}
.wp-embed-comments + .wp-embed-share {
margin-left: 10px;
}
.wp-embed-share-dialog {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #1d2327;
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
opacity: 1;
transition: opacity .25s ease-in-out;
}
.wp-embed-share-dialog.hidden {
opacity: 0;
visibility: hidden;
}
.wp-embed-share-dialog-open,
.wp-embed-share-dialog-close {
margin: -8px 0 0;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
outline: none;
}
.wp-embed-share-dialog-open .dashicons,
.wp-embed-share-dialog-close .dashicons {
padding: 4px;
}
.wp-embed-share-dialog-open .dashicons {
top: 8px;
}
.wp-embed-share-dialog-open:focus .dashicons,
.wp-embed-share-dialog-close:focus .dashicons {
box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8);
border-radius: 100%;
}
.wp-embed-share-dialog-close {
position: absolute;
top: 20px;
right: 20px;
font-size: 22px;
}
.wp-embed-share-dialog-close:hover {
text-decoration: none;
}
.wp-embed-share-dialog-close .dashicons {
height: 24px;
width: 24px;
background-size: 24px;
}
.wp-embed-share-dialog-content {
height: 100%;
transform-style: preserve-3d;
overflow: hidden;
}
.wp-embed-share-dialog-text {
margin-top: 25px;
padding: 20px;
}
.wp-embed-share-tabs {
margin: 0 0 20px;
padding: 0;
list-style: none;
}
.wp-embed-share-tab-button {
display: inline-block;
}
.wp-embed-share-tab-button button {
margin: 0;
padding: 0;
border: none;
background: transparent;
font-size: 16px;
line-height: 1.3;
color: #a7aaad;
cursor: pointer;
transition: color .1s ease-in;
}
.wp-embed-share-tab-button [aria-selected="true"] {
color: #fff;
}
.wp-embed-share-tab-button button:hover {
color: #fff;
}
.wp-embed-share-tab-button + .wp-embed-share-tab-button {
margin: 0 0 0 10px;
padding: 0 0 0 11px;
border-left: 1px solid #a7aaad;
}
.wp-embed-share-tab[aria-hidden="true"] {
display: none;
}
p.wp-embed-share-description {
margin: 0;
font-size: 14px;
line-height: 1;
font-style: italic;
color: #a7aaad;
}
.wp-embed-share-input {
box-sizing: border-box;
width: 100%;
border: none;
height: 28px;
margin: 0 0 10px;
padding: 0 5px;
font-size: 14px;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.5;
resize: none;
cursor: text;
}
textarea.wp-embed-share-input {
height: 72px;
}
html[dir="rtl"] .wp-embed-featured-image.square {
float: right;
margin-right: 0;
margin-left: 20px;
}
html[dir="rtl"] .wp-embed-site-title a {
padding-left: 0;
padding-right: 35px;
}
html[dir="rtl"] .wp-embed-site-icon {
margin-right: 0;
margin-left: 10px;
left: auto;
right: 0;
}
html[dir="rtl"] .wp-embed-meta {
text-align: left;
}
html[dir="rtl"] .wp-embed-footer {
}
html[dir="rtl"] .wp-embed-share {
margin-left: 0;
margin-right: 10px;
}
html[dir="rtl"] .wp-embed-share-dialog-close {
right: auto;
left: 20px;
}
html[dir="rtl"] .wp-embed-share-tab-button + .wp-embed-share-tab-button {
margin: 0 10px 0 0;
padding: 0 11px 0 0;
border-left: none;
border-right: 1px solid #a7aaad;
}
コメントを残す