過日に弊ブログで


Embedlyで登録なしでCSSでカラフルなブログカードを作ってみました

■ この記事は 2017/06/12 に修正致しました。■ この記事は 2017/06/04 に修正致しました。 




こんな記事を書いたところ、既にEmbedlyブログカードを利用しておられる某FC2ブロガーさんから

『 Embedlyブログカードをこんなにカラフルに装飾出来るなんて知らなくて感激してしまいました♪ 』

と、メールフォームから喜びのお礼メールを戴いて、私も感激してしまいました(笑)
『コメントだと緊張してしまって、この思いを伝えられなくて』と言うことでメールフォームからご連絡下さったご様子です ^^

そういえば遠い昔(笑)に、私もブログ始めたばかりの頃にコメントさせて戴こうとして、何度も何度もコメントの言葉を見直してそして書き直して、、、と極度に緊張したことがあったことが蘇って来ました(爆)
ブログコメントを書くって、慣れないとやっぱり緊張してしまうんでしょうね (^_^; アハハ…
私なんて、今ではブログでのコメント交流大好きブロガー(笑)ですから、けっこうフレンドリーにコメントしちゃうんですけどね(爆)

そそ、そしてその彼女(笑)さんから

このカラフルに装飾したEmbedlyブログカードを、記事欄にセロテープで貼り付けたような表示にすることは可能でしょうか?



2017-06-28-1.jpg


と、ご質問もあって

『 あっ! その楽しいアイデア頂きですよ~(笑) 』

なんてo(^o^)oウキウキ気分で、早速自己流CSS知識を捻りまくってそれを可能にする方法を考えてみました(笑)
実はずっと昔に(笑)写真をセロテープで貼ったような感じに表現したことがあったことを思い出したんでした(爆)
でも、ブログカードでそれをやるなんてまったく発想がなかったから、楽しく考えてみました(笑)

そして出来上がったものが


Embedlyで登録なしでCSSでカラフルなブログカードを作ってみました

■ この記事は 2017/06/12 に修正致しました。■ この記事は 2017/06/04 に修正致しました。 




これなんです~(笑)
ちゃんと、セロテープでペチョっと貼り付けた感じになってるでしょ? ヽ(^^ ) ヨシヨシ
下の方はちょっと浮き上がって影が出来ててって感じに(笑)
もう既に、先日来より数記事にこれを貼り付けてあるんですが(笑)
セロテープと言うと色は透明って感じなんですけど、ブログ記事欄って大抵は白背景ですから、それだとセロテープ感の表現がしにくいものですからちょっとだけ色を付けてみました。
この色だと、なにやらセロテープと言うよりはサージカルテープみたいですねぇ(爆) まぁ、おおめに見て下さい (^_^; アハハ…

上記の過去記事で作った Embedlyブログカードコード に、このセロテープ部分のCSSを読み込む為のクラス(class)をチョイと挿入するだけでこのような表現を出来るようにしてありますので、どのデザインのスキンにも使って戴けます。



Embedlyブログカードをセロテープで貼り付けるCSS


先ずは、FC2ブロガーさんでしたら、あなたがご利用中のテンプレートの「複製」をクリックして保存をして下さい。
そしたら、その複製した方の「スタイルシート編集」欄の最後尾に、下記のスタイルシートの注釈文も含めて全部をコピペして「更新」ボタンを押して保存して下さい。

/* Embedlyブログカードのセロテープ留めCSS */
.c-tape {
position:relative; /* セロテープの表示位置の基準 */
display:inline-block; /* 内容に合わせてセロテープ幅も伸縮させる */
}
.c-tape::before {
content: "";
display: block;
position: absolute;
background: rgba(237,229,128,0.3); /* セロテープの色と透明度 */
box-shadow: 1px 1px 1px rgba(0,0,0,0.1); /* セロテープの縁の影具合 */
}
.c-tape::before {
left: 40%; /* セロテープの横位置 */
top: -10%; /* セロテープの縦位置 */
width: 25%; /* セロテープの横幅 */
height: 50px; /* セロテープの縦幅 */
transform: rotate(-3deg); /* セロテープの傾き具合 */
}


そしてそのテンプレートを選択して「適用」をクリックすれば、上記CSSが利用出来るようになります。
コメント(注釈)も入れて於きましたのでお好みに変更することも出来るでしょう。


ブログカードをセロテープで貼り付けるCSSの呼び出し方法



さて、記事に貼るEmbedlyブログカードコードの途中に、下記で青文字表示してあるように

<div style="max-width:630px;text-align: center;background:linear-gradient(rgba(28, 216, 210,0.5),rgba(147, 237, 199,0.3));margin:0 auto;padding:5px 5px 5px 5px;box-shadow: 0 7px 5px rgba(0,0,0,0.3);margin:0 auto;"><div class="c-tape"><blockquote class="embedly-card" data-card-type="article"><h4><a href="http://oops0011.blog.fc2.com/blog-entry-147.html">Embedlyで登録なしでCSSでカラフルなブログカードを作ってみました</a></h4><p>■ この記事は 2017/06/12 に修正致しました。■ この記事は 2017/06/04 に修正致しました。  </p></blockquote></div><script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script></div>


<div class="c-tape"> と </div>

を指定位置に挿入します。
その位置は

<blockquote 直前と </blockquote> の直後ということがお分かりでしょう。

そして、上記のEmbedlyブログカードのコードを丸々コピーして、ブログ記事欄の必要箇所に貼り付ければ



Embedlyで登録なしでCSSでカラフルなブログカードを作ってみました

■ この記事は 2017/06/12 に修正致しました。■ この記事は 2017/06/04 に修正致しました。 




Embedlyで登録なしでCSSでカラフルなブログカードを作ってみました

■ この記事は 2017/06/12 に修正致しました。■ この記事は 2017/06/04 に修正致しました。 




このように完成です(笑)


■ 追記: 2017/10/13
Embedlyブログカードよりも、遙かに使いやすく自由なカスタマイズが出来るブログカードが新登場しましたからね~♪



Akira風ブログカードのカスタマイズCSSを公開します - Akira風ブログカード

さてさて、弊ブログのちょっと前の記事でAkira風ブログカードをCSSでカラフルにカスタマイズしてみました - Akira風ブログカード今回の記事タイトルにあります 『 Akira風ブログカード 』...





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

関連記事

Comments 0

There are no comments yet.

Leave a reply