Simplicity標準装備のはてブブログカードをお洒落にカスタマイズする方法～
スタイル6種コピペokのテンプレート１
Simplicityで搭載されているブログカード機能。便利ですよねーー💮
巷では、最近ブログカードを表示させるプラグインを使用されている方を多く目にしますし、
他にもEmbedlyのカードを使われている方とか、(Simplicityなら Embedlyカードもチョイス可🎵)
WordPress4.4から埋め込みカード機能が実装されましたから、そちらを使われている方など、
ブログ界?では、ブログカードでリンクをする事が当たり前(大袈裟かな?)の様になってきました。
| 📍因みに国産では、poporonさんが制作された、 Pz-HatenaBlogCardやPz-LinkCardがブログカードのプラグインでは有名なようです。 |
そんな中想う―。“ブログカード”と検索すると、Google先生がトップ表示する、
この記事↑を参考に自身のブログにカード機能を付けられた方の記事も沢山目にします。
こちら2014/10/21に投稿されているわいひらさんの記事。
氏はブログカードブームを広めた縁の下の力持ち、
いゃ、蔭の立役者と言わせて頂いても過言ではないかと。
(大元は「はてな」である事は間違えないものの、個人的な解釈でそう思っています。)
2014年10月には既にSimplicityでは標準装備なんて、本当に凄い。
プラグインを入れずとも、お手軽にポンポン表示させる事が出来ます。
私のお気に入りは、はてブ仕様のカードの方でして、日々有難く使わせて頂いています。
大きなカードがバーン💥と表示されるより、
ちっこいカードがちっこい癖に存在感があって👌可愛くて?たまらないデス(笑😅
唯、Pz-LinkCardプラグインだと装飾スタイルを設定できるそうなので、
オリジナル感が出せる面で、ちょっぴり羨ましくなっておりました。
―だったら「ブログカードを装飾してしまおう。」と思い、
引用部分をカスタマイズした際、ついでにブログカードのデザインも書いてみました。
という事で、ブログカードをお洒落にする方法を書きます。今回は6種の展示?です。
(幾つも作ったりしたけど、、、
掲載が大変なのと沢山載せると重くなる為、別途追加記事書きます😓)
⚠ はじめに
本題に入る前にご周知頂きたい事を二点、先に書き出しておきます。
前書きが長いのに、更に注意点だなんて、何気に申し訳ない感じですが、お付き合い下さい😓
- Simplicityのカスタマイザー⇒ブログカード⇒”外部ブログカードタイプ”の項目にて、
はてブブログカードに設定されている場合のみのカスタマイズです。
Embedlyカードについては、いつか気が向いたら。という事で😞 - 「外部リンクと内部HOMEのリンク」と「内部記事リンク」とではスタイルが若干異なります。
別のサイトを読み込みする外部リンクと内部HOMEのリンクの場合、
インラインフレーム(“iframe”要素)の中のHTMLは、
読み込み側(はてな)のJavascriptコードなので触れる事は出来ません。因って外部リンクと内部HOMEのリンクについては”iframe”の装飾のみという事になります。
文字等のHTMLは変更不可。
“iframe”で表示される広告と同じだとお考え頂ければ宜しいかと思います。
| 📣 内部リンク(個別記事)は表示される文字等もHTML部分の変更が可能です。 もしも外部リンクと内部HOMEのリンクについても同様な表示にされたい場合、 Pz-LinkCardプラグインではないのですが、 ある複合プラグインを使用する事で、カスタマイズする事が可能になります。
この件については、別記事になります。(ここで書くと長くなる為) |
この作業に必要なファイル
📋 この作業に必要なファイルは、
Simplicity2の子テーマのスタイルシート【Simplicity child2 (style.css)】のみです。
ダッシュボード⇒テーマの編集画面で編集するか、
TJ Custom CSSの様なCSS系プラグインを使用している方や、
jetpackのCSSスタイルシートエディターを使用している方はそちらに書いてもOKです。
Simplicityデフォルトの表示
Simplicityをお使いで既に「バンバン使ってるから知ってる」と言う方は飛ばして下さい。
この画像は「カード幅を広げる」にチェックを入れ内部サイトを幅広にしている状態です。
上が外部サイト(リンク)、下が内部記事リンク。
そして、こちらの画像が「カード幅を広げる」にチェックを入れていない状態で
上が外部サイト(リンク)、下が内部リンクの表示になります。【デフォルトの500px幅】
当サイトでは「カード幅を広げる」にチェックして使用中ですが、
このページでご案内するのはチェックを入れていない状態で進めて行きます。
(何れにしてもデザインに影響はしません。)
因みに、内部リンクのサムネイルを右側にしたい場合は、
カスタマイザー⇒ブログカード⇒” サムネイルを右側にする”にチェックを入れます。
Simplicityを使用された事が無い方、検討されている方へ。
こんなに自由な設定の利くSimplicityのダウンロードは以下からどうぞ!!
(これから始める方はSimplicity2のDLを推奨します。
2016/3/16、Simplicity2.1.0で安定版にされています。)
http://wp-simplicity.com/downloads/downloads2/
このカードは↑当サイトの外部リンクのブログカードのデザインデス😁 このデザインも一番下に記載しています。
ブログカード 外部・内部共に疑似デザインにする装飾方法
ブログカード装飾-サンプル*1
色は一色(#19c3cc)で、線のスタイル(border-style)を
アウトセット(outset)指定で、立体的なカードにしています。
二色使いに見えますがoutsetなのでカラーコード1色、
“#19c3cc”を変更するだけでお好みの色に変更できます。
実際の表示は、以下から以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
スタイルシートへの書き方⇓
.blog-card {
background: #ffffff;
}
.blog-card.internal-blog-card {
background-color: #ffffff;
border-color: #19c3cc;
border-width: 10px;
border-style: outset;
}
.blog-card.external-blog-card {
border-style: outset;
border-color: #19c3cc;
border-width: 10px;
padding: 0px;
}
.internal-blog-card {
padding: 12px;
border: 1px solid #ffffff;
word-wrap: break-word;
border-radius: 1px;
}ブログカード装飾-サンプル*2
書き方としては、サンプル1とあまり変わらないのですが、
線のスタイル(border-style)を二重線(double)指定し、左側のみアウトセット(outset)指定に。
影を付けて、ほんわりとした印象にしました。
内部リンク(単一記事へのリンク)は自由に変更可能なので、テキストに色を付けてみました。
実際の表示は、以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
スタイルシートへの書き方⇓
.blog-card {
background: #ffffff;
border-width: 8px;
border-style: double;
border-color: #fae1f3;
border-left-color: #fc51b5;
border-left-width: 10px;
border-left-style: outset;
box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}
.blog-card.internal-blog-card {
background-color: #ffffff;
}
.blog-card-title a {
color: #fa8cbf;
font-size: 18px;
}
.blog-card-excerpt {
color: #fa8cbf;
font-size: 12px;
}
.blog-card-site a {
color: #fa8cbf;
font-size: 13px;
}
.internal-blog-card {
padding: 18px;
border: 1px solid #ffffff;
word-wrap: break-word;
}ブログカード装飾-サンプル*3
枠をスタンプ風にしたかったので、線のスタイル(border-style)を点線(dotted)指定したのですが、
コレFirefoxでは「丸」で表示されるんで大丈夫なんですけど
Chromeでは点線は「四角」なので…ちょっと違う感じになってしまいます。
実際の表示は、以下から以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
スタイルシートへの書き方⇓
.blog-card {
background: #ffffff;
padding-bottom: 0px;
border-radius: 0px;
}
.blog-card.external-blog-card {
border-top-width: 0px;
border-bottom-width: 0px;
border-right-width: 0px;
background-color: #e3fcdb;
border-left-width: 0px;
border-color: #ffffff;
border-style: dotted;
border-width: 7px;
}
.blog-card.internal-blog-card {
background-color: #e3fcdb;
border-color: #ffffff;
border-width: 8px;
border-style: dotted;
}ブログカード装飾-サンプル*4
こちらも、Chromeでは点線は「四角」なのでちょっと違う感じになりますが、
それはそれでなかなか可愛らしい感じだったので、掲載しておきます😅
実際の表示は、以下から以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
スタイルシートへの書き方⇓
.blog-card {
background: #ffffff;
}
.blog-card.external-blog-card {
border-width: 5px;
border-style: dotted;
border-color: #1a3b78;
background-color: #dcfafa;
border-radius: 1em;
}
.blog-card.internal-blog-card {
border-color: #1a3b78;
border-style: dotted;
border-width: 4px;
background-color: #dcfafa;
border-radius: 1em;
}ブログカード装飾-サンプル*5
こちらは、前回引用部分のデザインを書いた際の「サンプル10*付箋風＆影付き、赤」に似せています。
お揃いデス。と言いたい所なのですが、影の出し方を変えています。
実際の表示は、以下から以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
スタイルシートへの書き方⇓
.blog-card {
background: #ffffff;
}
.blog-card.external-blog-card {
border-radius: 5px;
background-color: #ffffff;
box-shadow: 10px 10px rgba(0,0,0,0.1);
border-top-width: 1px;
border-top-style: solid;
border-top-color: #dddddd;
border-left-width: 21px;
border-left-style: double;
border-left-color: #d41515;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #dddddd;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #dddddd;
color: #d41515;
padding: 2px;
}
.blog-card.internal-blog-card {
border-radius: 5px;
background-color: #ffffff;
box-shadow: 10px 10px rgba(0,0,0,0.1);
border-top-width: 1px;
border-top-style: solid;
border-top-color: #dddddd;
border-left-width: 21px;
border-left-style: double;
border-left-color: #d41515;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #dddddd;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #dddddd;
color: #d41515;
padding: 17px;
padding-bottom: 2px;
}
.blog-card-title {
margin-top: 8px;
font-size: 15px;
}
.blog-card-excerpt {
font-size: 11px;
}ブログカード装飾-サンプル*6
こちら、前回引用部分のデザインを書いた際の「サンプル11*付箋風＆太字、影付き、青」と、
お揃いデス。grooveで付箋風に。
実際の表示は、以下から以下からご閲覧頂けます。
DEMOSITEで実際の表示をみてみる
スタイルシートへの書き方⇓
.blog-card {
background: #ffffff;
padding-bottom: 0px;
padding: 3px;
padding-top: 5px;
}
.blog-card.external-blog-card {
border-radius: 5px;
background-color: #ffffff;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
border-top-width: 1px;
border-top-style: solid;
border-top-color: #dddddd;
border-left-width: 25px;
border-left-style: groove;
border-left-color: #1320d4;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #dddddd;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #dddddd;
color: #1320d4;
font-weight: bold;
}
.blog-card.internal-blog-card {
border-radius: 5px;
background-color: #ffffff;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
border-top-width: 1px;
border-top-style: solid;
border-top-color: #dddddd;
border-left-width: 25px;
border-left-style: groove;
border-left-color: #1320d4;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #dddddd;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #dddddd;
font-size: 15px;
color: #1320d4;
font-weight: bold;
padding: 13px;
padding-bottom: 2px;
}
.blog-card-title {
margin-top: 8px;
font-size: 15px;
}
.blog-card-excerpt {
font-size: 11px;
color: #1320d4;
}
.blog-card-title a {
color: #1320d4;
font-size: 17px;
}
.blog-card-site a {
color: #1320d4;
font-size: 12px;
}
テンプレートサンプル6種は以上です。
他のデザインは、また別の記事で😅
これ以上掲載すると、、、ページ重いですものね・・・すいません😪
おさらい
一応、おさらいの意を兼ねて、以下はこのサイト「みてみた」で使用しているデザインです。
みてみた仕様・外部リンク＆内部HOMEへのリンク
外部リンク↓
http://news.yahoo.co.jp/
内部HOMEへのリンク↓
(当サイトでは画像の取得が上手くいってないので分かりにくく…申し訳ないです😰)
このデザインはブログカード装飾-サンプル*2と同じ感じになります。
スタイルシートへの書き方⇓
/*ブログカード装飾-みてみた仕様-外部リンク＆内部HOMEへのリンク*/
.blog-card{
background:#ffffff;
border-width: 8px;
border-style: double;
border-color: #ebf6f7;
border-left-color: #2098a8;
border-left-width: 9px;
border-left-style: outset;
box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
color: #2098a8;
font-size: 12px;
}みてみた仕様・内部、単一記事へのリンク
このサイトでの記事リンクのカード表示は以下の様なものです。↓(このカードリンク先はこの記事です)
こんな感じで外部と内部記事リンクのデザインの使い分けをする事が出来ます。
 |
PCで観るとセンタリングしている上に
文字を囲ったりしているので、
些か視辛い感じがするのですが、
娘のiPhoneで観ると意外としっくりきたので、
このデザインで留まっています。自己満足😓
サムネイルクリックで大きな画像でご確認頂けます。
/*ブログカード装飾-みてみた仕様-内部、単一記事へのリンク*/
.blog-card.internal-blog-card {
border-color: #2098a8;
border-style: double;
border-width: 3px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}
.blog-card-date {
border-color: #2098a8;
border-style: solid;
border-width: 1px;
background-color: #ebf6f7;
}
.blog-card-site a {
background-color: #ebf6f7;
border-color: #2098a8;
border-style: solid;
border-width: 1px;
}
.blog-card-title {
background-color: #2098a8;
text-align: center;
}
.blog-card-title a {
color: #ffffff;
}
.blog-card-excerpt {
background-color: #ebf6f7;
text-align: center;
}
img.blog-card-thumb-image {
border-width: 1px;
border-style: dotted;
border-color: #2098a8;
}如何でしたでしょうか。
デフォルトのスッキリした感じも素敵ですが、ちょっと違う感じにしてみても宜しいかと。
他のデザインは↓また日を改めます。
ご閲覧頂きありがとうございます。お粗末でした😑
コメント
[…] Simplicity標準装備のブログカードをお洒落にカスタマイズ～デザイン6種【テンプレートｰ１】 | みてみたSimplicity標準装備のはてブブログカードをお洒落にカスタマイズする方法～ スタイ […]