お気に入りのブログカードデザインを複数、同じページで楽に使い分ける方法

Blog Design

ページ途中のリンクが貼れるメリット
カードを使い分ける実装手順
- コード全体見本
- コードの解説
Today's BGM

今回ご紹介するのは、ブログカードデザインをイメチェンして、貼りたい内容によってカードを使い分ける方法です。
カードのデザインは、「The other way round」さんの作成された素敵な２つを利用させていただいています。

vanillaice000.blog.fc2.com

» 写真斜め仕様左寄せ

Sept 2023 BarkBox Theme Reveal: Maw & Paw’s Farm

斜めのデザインがオシャレだし、可愛くないですか~？

» 写真Large仕様左寄せ

こちらは主張強め。イチオシ記事のご紹介に♪

» 写真斜め仕様真ん中寄せ

» 写真Large仕様真ん中寄せ

» 写真斜め仕様右寄せ

Visit Lake Louise: 2023 Travel Guide for Lake Louise, Alberta | Expedia

» 写真Large仕様右寄せ

ページ途中のリンクが貼れるメリット

デザイン以外のメリットもあります。

はてなのブログカードも使いやすくて好きですが、ページ途中のリンクが貼れない、という点も、別のカード用コードを用意した理由のひとつです。

たとえば、下記のようにページ途中へのリンクを貼りたいとき。

はてなブログカードで下記のリンクを貼っても（#以降はページ内4つ目の見出し）、

https://rubirubi.hateblo.jp/entry/css-button-hover-effects#4-波紋のように色が着くSpread-Color

リンク先は一括して以下のようにページトップとなってしまいます。
https://rubirubi.hateblo.jp/entry/css-button-hover-effects

rubirubi.hateblo.jp

ご紹介したオリジナルのブログカードなら、ページ途中へのリンクをそのまま貼れます。
これは、はてなの方は動的にカードを作成している仕様上、仕方ないのかも知れません。

そのかわり、リンクボタンを押してURLを貼るだけでカードを作成出来るので、そこははてなカードのメリットなのですが。

カードを使い分ける実装手順

コード全体見本

コードの解説

① 下記のように、「The other way round」さんのカードCSSコードを、2つのクラスで囲みます。
　カードのデザインはお好きな物を選択して下さい。もちろん、別で元々お気に入りのカードデザインがあれば、そちらのCSSでも応用出来ます。
　2つのクラス名は、任意で、ご自身で分かりやすい名前を付けて下さい。

/* 斜め仕切りブログカードのコードをクラス「.diagonal-card { }」で囲む*/
.diagonal-card {

  /* 斜め仕切りカードのCSSコード */

}

/* 画像largeブログカードのコードをクラス「.large-card { }」で囲む*/
.large-card {

  /* 画像largeブログカードのCSSコード */

}

② 次にHTMLです。ブックマークレットで作成したHTMLコードを、

　「<div class="diagonal-card "></div>」

　「<div class="large-card"></div>」

　という風に、① CSSで付けたクラス名を指定した、DIV要素で囲みます。

ちなみに。よく見るこのDIVとは、"division"（分割）の略で、通常、コンテンツをグループ化または分割するために使用されます。

※ブックマークレット *1

<div class="diagonal-card">

  <!-- 斜め仕切りカードのHTMLコード -->

</div>

<div class="large-card">

  <!-- 画像largeブログカードのHTMLコード -->

</div>

以上の様にCSSとHTMLコードをそれぞれ任意で付けたクラスで囲むことにより、簡単に2つのカードを1つのページで使い分けることが可能になります。

さらにCSSコードは、以前こちらでご紹介したやり方で共有・テンプレート化しておけば、カードを適用する記事ページとしないページの棲み分けも楽チン♪です。

スタイルシートをテンプレート化し、ページごとにデザインを変える - hatebcustom

Today's BGM

小沢健二「指までも」「大人になれば」「ラブリー」

　1997（平成9）年7月、笑っていいとも出演時（当時29歳）の生歌です。この年は色々な出来事がありました。（小沢健二さんとは直接関係ないですが…）
　ダイアナ妃の事故死、香港返還、サッカー日本代表のワールドカップ初出場、東京湾アクアラインの開通、フジテレビが新社屋お台場で放送を開始、消費税5%へ引き上げ、山一證券が破綻、ポケモンブーム、たまごっち大ヒット、など。

*1:ブックマークレットとは、ウェブブラウザのブックマークから起動して、簡単な処理を行うための簡易的なプログラムです。携帯電話のウェブブラウザで不足している機能を補ったり、ウェブアプリケーションの処理を起動したりするためによく使用されます。

　ブックマークレットは、JavaScriptで記述されたプログラムをブックマークのURLに追加することで利用できます。また、拡張機能よりも簡単に使用でき、自分で作成することもできます。

　他に、ページ内の情報を取得したり、操作したりするためにも使用されます。たとえば、ブックマークレットを使用して、ブックマークボタンのないページをブックマークできます。

　ブックマークレットは"bookmark" と "applet" を組み合わせた造語です。