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

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

vanillaice000.blog.fc2.com


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

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





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

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

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

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

はてなブログカードで下記のリンクを貼っても(#以降はページ内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コードは、以前こちらでご紹介したやり方で共有・テンプレート化しておけば、カードを適用する記事ページとしないページの棲み分けも楽チン♪です。



Today's BGM

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

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

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

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

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