[Simplicity2]ブログカードを表示してカスタマイズする

ひとり言

wordpress

※ この記事は、コンピューターの技術的な備忘録です.

昨今、あちこちのインターネットの記事で頻繁に使われている「ブログカード」。

simplicity2 ブログカード カスタマイズ 1

これがそのブログカードというもの。

このブログカードをこのブログにも使いたくて、

時々 時間を見つけては 試行錯誤、

いや、四苦八苦していました(^^;

でも、全然できなくてね。。。

それが先日 偶然出来てしまって、目が仰天！

ところがだんだん欲が出てきて(^^;

ブログカードの一部を変更したくなって。

挑戦したら、意外とあっさり出来てしまいました。

この記事は、忘れっぽい私の為の、その時の備忘録です。

尚、このテクニックは、Wordpress の simplicity2

というテンプレートに対して行っています。

他のテンプレートへの適用が可能であるかは 不明です。

ブログカードを表示させる

simplicity2 ブログカード カスタマイズ 1

このブログカードを表示させるには、

ビジュアル編集画面で

https://sp-forest.com/chichibu-meisen-marche-2019/

と、こんな風にURLを書いて、それをリンク化するだけ。

たったこれだけで、ブログカードが表示できます。

但し、ここにワナがあって、ただ［保存］しただけだと

ブログカードは表示されないんです。

［保存］した後［サイトを表示］してみると、

ブログカードになっていることが確認出来ます ＼(^o^)／♪

私、このことに気づかなくて、初挑戦した時 出来なくて、

相当悩んで落ち込みました(^^;

 

尚、これは、URLが自分のブログサイトのURLに限ります。

他の人のURLを使って同じことをしても、ブログカードにはなりません。

Simplicity2の仕様なので、あしからず。。。m(__)m

ブログカードをカスタマイズする

人は欲張り。。。(^^;

憧れのブログカードが表示できるようになったのに、

なんとなく満足できないところがあって。

simplicity2 ブログカード カスタマイズ 1

それは、ブログカードの下の方に表示される

「sp-forest.com」 と 「2018-12-25」。

この部分を消したいと思います。

どう変更すれば良いのか、調べる方法

どこを変更すれば、自分の思うようなブログカードに変更できるのか。

それを調べる方法として、Microsoft Edge を用いました。

Microsoft Edge で、対象となるURLを開いて、F12 キーを押すと

そのインターネット画面の構成が表示されるので、

そこでマウスを動かしたりクリックしたり、

値を変更したりして、変更箇所を探し出しました。

尚、Google Chromeでも 同様のことが出来るようです。

ブログカードのドメイン名と公開日付を消す

simplicity2 ブログカード カスタマイズ 2

上の図の赤いを消したいと思います。

Microsoft Edge で調べたら、赤枠部分は「.blog-card-footer」

という名前であることが判明。

その名前の部分を消したい場合は スタイルシート（cssファイル）に

「Display: none;」と書けば良いとのこと。

Simplicity2 でスタイルシートを変更する場合は、

Simplicity2 child の スタイルシート (style.css)を変更するのが お約束。

で、Simplicity2 child の スタイルシート (style.css)に

以下の通り、追記して、保存。

.blog-card-footer {
    Display: none;
}

その結果、

simplicity2 ブログカード カスタマイズ 3

見事に消えました！

うーん、いい感じ(^^♪

でもね。

画像の下の空間が広すぎて、かっこ悪いよね。

simplicity2 ブログカード カスタマイズ 4

できることなら、上の図の赤い部分を取り除いて高さを狭めたい。。。

ブログカードの高さを狭める

調べてみたら、枠の高さの指定があったので、そこを変更。

枠の高さは「.blog-card」という名前のところで指定されていて。

そこには「min-height: 145px;」と書かれており、

これは「高さは最低145ピクセル」という意味なので、

これを思い切って「min-height: 300px;」にしてみると

simplicity2 ブログカード カスタマイズ 5

枠の高さが広がった！カッコ悪いね(^^;

ということは、値を小さくしていけば、空間は狭まっていくはず。。。

で、試行錯誤の結果、125pxに落ち着ました。

で、Simplicity2 child の スタイルシート (style.css)に

以下の通り、追記して、保存。

.blog-card {
    min-height: 125px;
}

完成形はこちら。。。

simplicity2 ブログカード カスタマイズ 6

どう？ いい感じでしょ？ 私は大満足(^^♪

一度変更すると、過去の分まですべてが変更されるんですって。

凄い仕組みですよね(^^♪

おまけ

wordpress

このブログは PHPというプログラミング言語で書かれた WordPressという

ソフトウェアを使って書いています。

WordPress にはテーマと呼ばれる多彩なテンプレートが用意されていて。

テンプレートを使うと、ある程度のデザイン性と機能性を備えたブログが書けます。

テンプレートをカスタマイズすることも可能で、

カスタマイズするとオリジナリティーの高いブログが作れます。

テンプレートは無料版と有料版がありますが、

私は『Simplicity2』という無料のテンプレートを

ほぼそのまま使っています(^^;

いろいろカスタマイズしてみたい気持ちもあったけれど。

なかなか挑戦する勇気がありませんでした。。。(^^;

でも、どうしても今回変更したくて、挑戦してみたら出来ちゃいました。

カスタマイズ対象が、スタイルシートのみだったから、

っていうのもありますが(^^;

ヤッタネー＼(^o^)／

 

テキストのコピーはできません。