Akira風ブログカードをCSSでカラフルにカスタマイズしてみました

2017年09月27日
5
0
Akira風ブログカード
ブログカード

今回の記事タイトルにあります Akira風ブログカード とは、筆者が勝手にネーミングしたものですのでご承知於き下さい。

いま先見的ブロガーさん(笑)たちは、自分の過去記事や外部の記事にリンクを張るのにテキストリンク(文字列によるリンク)ではなくて、ビジュアル的な「ブログカード」というものを記事に貼ってリンク先記事に閲覧者さんを誘導する方法をとっている人が多くなって来ております。

今までも弊ブログでは「はてなブログカード」や「Embedly」というブログカードを時の経過によって使い進めて来てましたが、どちらも使用感に不満がありまして「もっと、何か具合の良い・使い勝手の良いブログカードってないものか!」とネット情報を検索しまくりましたが、思い通りのものを見つけ出せずにいたんです。

そんな思いを、筆者が日常からWeb知識の師と仰ぎます「Akira先生弊ブログでもいつも利用させて戴いてますレスポンシブテンプレートの優秀なデザイナーさんでもあります」に、チクリチクリとフレンドリータッチに
『 ねぇねぇ、オリジナルのブログカード作ってよぉ(笑) 』
と、暗にお願いしてた格好だったんですね(爆)
あっ 実際はこんなに馴れ馴れしくは言ってないですよ、キチンと礼儀を弁えてですが、心の中はこんな感じのつもりで(爆)
Akira先生ファンの方、どうぞ筆者に石を投げないで下さいね (^^ゞポリポリ

で、とうとうAkira先生がやってくれました ばんざ~い \(^o^)/ 
いままでWeb上の何処にもなかった「とてもカスタマイズしやすいブログカード」を開発・無料公開してくださったんです ^^
FC2ブロガーさんだけでなく他のブログサービス(OGP設定を利用出来る)でも使わせて戴けるという、その寛容なお心もまた素晴らしいです。
詳しい仕様や使い方は下記ブログカードをクリックして、その記事をご参照下さい。


ブログカードのブックマークレットを作成しました - カスタマイズ

SSL化後の悩ましい作業のひとつ。ブログカードこれまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`)画像や記事概要など、必ずしもOGPに従っているわけではないもので。...



もうもう、素晴らしい出来栄えで、筆者も ばんざ~い \(^o^)/ と喜んでしまいました(笑)
ですから、ご飯を食べるのも忘れて夢中に


2017-09-27-oekaki-640.jpg


自己流CSS知識を駆使(笑)して、パパパと、とりあえず数種類カスタマイズしてみました ^^
下記のサンプルブログカードにマウスオンで、背景の様子が変わるものもありますのでマウスを乗せてみて下さい(笑)


① デフォルト

FC2ブログのAOSSLがやっと始まりましたね(笑) - AOSSL

首を長~~~くして待ち焦がれてたFC2ブログのAOSSL(常時暗号化通信)がやっとスタートしましたね~(笑)事前のインフォメーションはあったものの、本番はなんかコソッと始まった感じですが、...




② セロテープ貼り付け
  セロテープ部分のCSSは独立させてありますから、どのタイプにも貼り付けられるようになってます。

FC2ブログのAOSSLがやっと始まりましたね(笑) - AOSSL

首を長~~~くして待ち焦がれてたFC2ブログのAOSSL(常時暗号化通信)がやっとスタートしましたね~(笑)事前のインフォメーションはあったものの、本番はなんかコソッと始まった感じですが、...




③ マウスホバーで背景色変化(やや、フワっと(笑))
  ほんとはこんなフワっと感ではなくて(笑)ほんとにフワ~っと変わるように表現したいんですけど、まだ勉強不足です(爆)

FC2ブログのAOSSLがやっと始まりましたね(笑) - AOSSL

首を長~~~くして待ち焦がれてたFC2ブログのAOSSL(常時暗号化通信)がやっとスタートしましたね~(笑)事前のインフォメーションはあったものの、本番はなんかコソッと始まった感じですが、...




④ セロテープあり・背景色グラディエーション

FC2ブログのAOSSLがやっと始まりましたね(笑) - AOSSL

首を長~~~くして待ち焦がれてたFC2ブログのAOSSL(常時暗号化通信)がやっとスタートしましたね~(笑)事前のインフォメーションはあったものの、本番はなんかコソッと始まった感じですが、...




⑤ 背景色縦ツートングラディエーション

FC2ブログのAOSSLがやっと始まりましたね(笑) - AOSSL

首を長~~~くして待ち焦がれてたFC2ブログのAOSSL(常時暗号化通信)がやっとスタートしましたね~(笑)事前のインフォメーションはあったものの、本番はなんかコソッと始まった感じですが、...




とりあえずはこんなところです~(笑)
貧相なカスタマイズサンプルですみませんね~ (^_^; アハハ…
サンプルコードは非公開とさせて下さい(笑)


-------------------
■ 追記 2017/10/09

⑥ 背景色横グラディエーション・ふわっと変色(Akira先生の「ふわっと変色CSS」アイデアの応用)


FC2ブログでSSL化してもまだ大丈夫じゃないブログもあるんですよ、それは、、、 - AOSSL

じわりじわりとFC2ブロガーさん方のブログのSSL化( ブログのURL部分が 保護された通信 |https:// ← このような表示になる )が進み始めてますね~ 実に良いことだと思います。ただね~ ハッキリ申しまして...


-----------------


要は、こんなにもカスタマイズが楽々出来るブログカードはWeb上には存在してませんでしたから、是非是非ブロガーの皆さんにお勧めです。
また「CSSなんて解らないから苦手」と言う人も、こういうことを機会に「CSSを覚える」チャンスにもして下さいね~ってつもりで書いてみました。
もの凄く奥が深~い(笑)んですけど、浅い部分の知識だけでもとっても表現力が増すのがCSSなんです。

JavaScript等を使えばマウスオンした時にブログカードがプルプルと震えたり(笑)回転したりと、いろんな効果も作り出せますけど、あまりそれらを凝ってしまうと本末転倒にもなりかねませんから程々にですけどね(笑)



検索からの方は
トップページへもどうぞ



関連記事
ぼっちん

Comments 5

There are no comments yet.

あっちゃん  

こちらこそ

こんばんは!
ここのところ、パソコンがほとんど触れていません・・・
なぜなら・・・夫が仕事でしてるからっ!
世間で騒がれている残業問題で、夫の会社も残業を減らすようにお達しが。
で、いつもより帰宅が早くなり、
よってわたしの夜のパソコンタイムが削られるという、なんとも迷惑な話です。
今はジムに行ってるので、ひさしぶりに画面の前にいます。
あー、やっぱり大きい画面のほうがいいー!(笑

ブログカードすごいですね!
めっちゃキレイ!╰(*´︶`*)╯
スマホの色んなアプリに着いてくのも遅れているのに・・・(笑
遊びにきてくださりありがとうございました。

2017/09/30 (Sat) 22:08

ぼっちん  

あっちゃんへ

こんばんは ^^

や~ 暫くあっちゃんの記事が更新してなかったから「あれれ? もしかして体調でも悪いのかな?」なんて心配になってた(笑)んですけど、パソコンがご主人に乗っ取られてたとは (^_^; アハハ…
なるほどね~ 残業分を自宅処理かぁ、私も会社勤めしてた時代にはやってましたけどね~(爆)
当時はやっぱり帰宅時間が22時とか23時なんてことが頻繁で、家内なんかにも呆れられてましたけど、夜の食後の食器洗いくらいは自分でやってましたからねぇ (^^ゞポリポリ

あー、やっぱり大きい画面のほうがいいー!(笑
(〃^▽^〃)oあはははっ♪ そそそ、私もスマホだとブログ記事書いたりなんて全く出来なくて、補助的に観るだけなんですけどね(笑)

ブログカードすごいですね!
めっちゃキレイ!╰(*´︶`*)╯

いいでしょ~ カラフルで(笑)
夢中で楽しくカスタマイズしましたから、記事でも使わなくちゃ勿体ない(笑)から、いろいろとペタペタってあっちこっちに貼ってます(笑)

遊びにきてくださりありがとうございました。
ハーイ(^O^")/ また寄らせて戴きます~ ^^

2017/09/30 (Sat) 22:26

mama  

ブログカードを使うためにはOGP設定必須なんですね(^-^;
何だかチンプンカンプンで・・・もっと勉強します

2017/10/05 (Thu) 12:16

ぼっちん  

mamaさんへ

いらっしゃい ^^

ブログカードを使うためにはOGP設定必須なんですね(^-^;
おやぁ?(笑) FC2ブログでは何もしなくてもデフォルトでOGP設定出来てるんですけどね~(笑)
ブログの「環境設定」→「ブログの設定」→「メタタグの設定」に「OGP設定」のスイッチはありますが、これはデフォルトで「有効する」になってる筈と思うんですけど、(~ヘ~;)ウーン どうだったか忘れました (^_^; アハハ…
で、ここにある「トップページのOGP画像」というのは、ブログのトップページURLの時にブログカード取得をする時に表示出来る画像の設定なんです。
ここでの設定画像は、記事ページのブログカードの画像とは関わりません。

だから、FC2ブログの記事ページの場合には、記事編集ページのず~っと下の方にある「アイキャッチ画像」で設定したものがブログカード内の画像として表示されるんです。
そこで設定してない場合には「記事の一番先頭にある画像」を表示するんです ^^
ただし、記事の先頭とは言っても、記事編集欄って上下2つありますよね、つまり下側の記事編集欄は「続きを読む」部分の編集欄ですけど、上段に画像がまったくなくて、下段に画像の1枚目があっても、それはブログカード画像には取得されません。

こんな感じになってるんですよ~。

2017/10/05 (Thu) 15:43

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/10/07 (Sat) 22:43

Leave a reply