お気に入りのブログカードデザインを複数、同じページで楽に使い分ける方法
今回ご紹介するのは、ブログカードデザインをイメチェンして、貼りたい内容によってカードを使い分ける方法です。
カードのデザインは、「The other way round」さんの作成された素敵な2つを利用させていただいています。
斜めのデザインがオシャレだし、可愛くないですか~?
こちらは主張強め。イチオシ記事のご紹介に♪
ページ途中のリンクが貼れるメリット
デザイン以外のメリットもあります。
はてなのブログカードも使いやすくて好きですが、ページ途中のリンクが貼れない、という点も、別のカード用コードを用意した理由のひとつです。
たとえば、下記のようにページ途中へのリンクを貼りたいとき。
はてなブログカードで下記のリンクを貼っても(#以降はページ内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
ダイアナ妃の事故死、香港返還、サッカー日本代表のワールドカップ初出場、東京湾アクアラインの開通、フジテレビが新社屋お台場で放送を開始、消費税5%へ引き上げ、山一證券が破綻、ポケモンブーム、たまごっち大ヒット、など。
*1:ブックマークレットとは、ウェブブラウザのブックマークから起動して、簡単な処理を行うための簡易的なプログラムです。携帯電話のウェブブラウザで不足している機能を補ったり、ウェブアプリケーションの処理を起動したりするためによく使用されます。
ブックマークレットは、JavaScriptで記述されたプログラムをブックマークのURLに追加することで利用できます。また、拡張機能よりも簡単に使用でき、自分で作成することもできます。
他に、ページ内の情報を取得したり、操作したりするためにも使用されます。たとえば、ブックマークレットを使用して、ブックマークボタンのないページをブックマークできます。
ブックマークレットは"bookmark" と "applet" を組み合わせた造語です。