attention admin about comments trackbacks you may also like

Akira風ブログカードのCSSでカラー背景処理を間違えておりました

2017年11月02日
Akira風ブログカード
55
Akira風ブログカード CSS
間違い
Akira風ブログカードのCSSでカラー背景処理を間違えておりましたので、お詫びと訂正をさせて戴きます。

過日のこの記事 ↓ に於いて、誤った情報を公開しておりました。

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

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


上記記事の中の ■ 追記 2017/10/17 に於いて、

***************
それともう1つ注意点があります。
「Akira風ブログカード」の「引用ブックマークレット(自分のブログやサイト外の記事を引用する方法)」で取得したブログカードコードにカスタマイズした「カラー背景」を設定すると


DeNA 2年連続CSファイナル進出!初回に能見KO 阪神に“下克上”(スポニチアネックス) - Yahoo!ニュース

4回1死一塁、中越え2ランを放ったDeNA・ロペスは筒香に迎えられる - Yahoo!ニュース(スポニチアネックス)


こんな具合に、引用符のマークと縦線が見えてしまいますから「引用版ブックマークレット」を利用する時には「白色背景に設定する」ことをお勧め致します。
また自分のブログやサイト外の記事を「通常版ブックマークレット」でブログカードにしてしまうと、Googleでは「盗用記事(コピペ盗用)」のような判定を受ける可能性もありますから、そのような使い方はしないよう気をつけましょう。
*************

このような表現をしておりましたが、この 引用版ブックマークレットを利用してカラー背景設定をすると引用符のマークと縦線が見えてしまいます と表現している部分に筆者の間違いがありました。

なお、同記事は現在は正しいCSSに修正してありますのでご承知ください・・・ 2017/11/06

この引用符が見えてしまう原因は、私が公開しておりましたカラー背景用CSSの内容に、本来提供すべきCSSから必要な一部分が欠落したままで公開してしまっていたことです。


[ blogcard-gr ]

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

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


[ blogcard-gr2 ]

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

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



[ 正しいカラー背景用CSS ]

[ blogcard-gr ] の正しいCSSは
 最新版 2017/11/05 21:00
■(none-IE) 枠内をクリックで”全選択”されますからそれをコピーすると簡単です

/* Akira風ブログカード-gr設定 */
.blogcard-gr {
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
width: 600px; /* ブログカードの横幅設定 */
margin: 0 auto; /* ブログカードのセンタリング設定 */
margin-bottom: 30px;
max-width: 100%;
background:linear-gradient(rgba(28, 216, 210,0.5), rgba(147, 237, 199,0.3)); /* ブログカードの背景色設定 */
border: 1px solid rgb(211,211,211);
border-radius: 2px;
box-shadow: 0 10px 6px -6px rgba(0,0,0,.1); /* ブログカード下の影の濃さ設定 */
color: rgb(51,51,51);
padding: 10px;
}
.blogcard-gr:hover {
background:linear-gradient(rgba(239, 50, 217,0.2), rgba(147, 237, 199,0.3)); /* ブログカードの背景色設定 */
box-shadow: 0 10px 6px -6px rgba(0,0,0,.3); /* ブログカード下の影の濃さ設定 */
}
/* 引用 */
.blogcard-gr blockquote {
margin: 0;
border: 0;
padding: 0;
position: static;
background-color: transparent; /* 初期背景色キャンセル */
}
.blogcard-gr blockquote:before,
.blogcard-gr blockquote:after {
content: none; /* 引用符非表示コード */
}



[ blogcard-gr2 ] の正しいCSSは
 最新版 2017/11/05 21:00
■(none-IE) 枠内をクリックで”全選択”されますからそれをコピーすると簡単です

/* Akira風ブログカード-gr2設定 */
.blogcard-gr2 {
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
width: 600px; /* ブログカードの横幅設定 */
margin: 0 auto; /* ブログカードのセンタリング設定 */
margin-bottom: 30px;
max-width: 100%;
background:linear-gradient(to bottom, rgba(46,46,254,.4) 30%, rgba(255,255,255,.7) 70%); /* ブログカードの背景色設定 */
border: 1px solid rgb(211,211,211);
border-radius: 2px;
box-shadow: 0 10px 6px -6px rgba(0,0,0,.1); /* ブログカード下の影の濃さ設定 */
color: rgb(51,51,51);
padding: 10px;
}
.blogcard-gr2:hover {
background:linear-gradient(to bottom, rgba(255,255,255,.7) 30%, rgba(46,46,254,.4) 70%); /* ブログカードの背景色設定 */
box-shadow: 0 10px 6px -6px rgba(0,0,0,.3); /* ブログカード下の影の濃さ設定 */
}
/* 引用 */
.blogcard-gr2 blockquote {
margin: 0;
border: 0;
padding: 0;
position: static;
background-color: transparent; /* 初期背景色キャンセル */
}
.blogcard-gr2 blockquote:before,
.blogcard-gr2 blockquote:after {
content: none; /* 引用符非表示コード */
}


このようになります。
以前の記事ではこの /* 引用 */ 部分以下のCSSコードが欠落しておりました。
この/* 引用 */ 部分以下のCSSコードは、元々Akiraさんのデフォルト(初期)のCSSにも含まれておりまして、筆者流のカラー化の時に置き忘れてカラー化CSSを作ってしまっておりました。

既にFC2ブログのテンプレートに弊ブログ記事からカラー背景用CSSをコピーしてご利用戴いておりますブロガーさんは、上記を丸ごとテンプレートに組み込み済みのものと差し替えてください。
部分だけコピーしますと「間違える可能性」がありますので、丸ごとコピーして差し替えて戴きたく存じます。

この正しいカラー背景用CSSをお使い戴ければ ↓ このように 「引用符は見えなくなります」 (^^ゞポリポリ
下記ブログカードの画像が表示されなくて白く抜けている部分は、引用先の記事(Yahoo!ニュース)から画像が取得出来なくなった為ですのでAkira風ブログカードの不備ではありません。

DeNA 2年連続CSファイナル進出!初回に能見KO 阪神に“下克上”(スポニチアネックス) - Yahoo!ニュース

4回1死一塁、中越え2ランを放ったDeNA・ロペスは筒香に迎えられる - Yahoo!ニュース(スポニチアネックス)



ほんとにほんとに、大変申し訳ございませんでした m(_ _)m
本件によりご迷惑をお掛け致しましたみなさんには、筆者ぼっちんのお尻を (_ _)ノ彡_☆ペンペン! ってしてくださってけっこうですからね (^_^; アハハ…





実際にお会いできたら、潔くお尻を差し出します(爆)
ただし 鞭 (-_-)/~~~~ピシー!ピシー! ではご勘弁くださいまし (^_^; アハハ…

この「CSSの誤り」は mochiさん ↓ よりご指摘戴きました (^_^)ニコニコ


記事中のブログ・サイトリンクにブログカードを導入してみました。 | 富士宮で貯蓄と資産運用

(ヌースは煩悩までは吸い取れなかったみたいね。)ブログカードってナニ?… 今まで僕のブログでは過去記事や他サイト・ブログのリンクに、下のようなテキストリンクを用いていました。> 2020年東京オリンピック記念硬貨の発行計画...


ほんとにほんとにご親切に大変ありがとうございました m(_ _)m 

このAkira風ブログカードの押しピン留め(笑)アイデアもmochiさんブログからお借りしました(爆)
mochiさんブログには、なかなか愉快にカスタマイズなさったAkira風ブログカードが使われておりまして必見ですよ(笑)

いま、弊ブログ記事で盛んに「Akira風ブログカード」を頑張って勉強されておられます、よつばさん&みっくすさん、ほんとにゴメンナサイね~ m(_ _)m
お手数をお掛け致します。
また、コメント投稿を恥ずかしがって(笑)メールでご質問くださってる皆さんも、ほんとに申し訳ございませんでした m(_ _)m


■ 追記 2017/11/04
このAkira風ブログカードの ピン留めとカール のCSSとHTML記述方法をmochiさんブログで改めて公開してくださいました。
興味のある方は、上記ブログカード(白い背景のもの)をクリックしてご参照ください ^^




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

関連する記事
ぼっちん
Author: ぼっちん
坊ちゃんじゃありません、ぼっちんです(笑)
PC弄くりは35年ほどのキャリア(ただ長いだけかも)のFC2ブロガーです。
そんな私が、初心者さんにも楽しめるWebテクを専門用語を極力省いて、体験的見地からその時のスクリーンショットやGIFアニメーションを用いて分かり易く解説致します。
対話好きですから記事に関わらないコメントでも遠慮なくしてくださいね~♪

コメント(55)

There are no comments yet.

mochi  

2017/11/02 (Thu) 21:24

記事紹介ありがとうございます!!

こんばんは。ぼっちんさん。
僕のヘンテコなブログの記事を紹介してくださってありがとうございます。

また「なかなか愉快にカスタマイズ」というやんわりとした表現での
お気遣い誠に感謝いたします。 ^^

ぼっちんさんのブログってよく見ると、GIFアニメとかいろいろ面白そうなカテゴリーも扱っているんですね。
今度時間がある時にじっくり勉強させていただきます。

今後ともよろしくお願いします。

ぼっちん  

2017/11/02 (Thu) 22:06

mochiさんへ

mochiさん、こんばんは ^^

弊ブログ記事にブログカード張ってくださって、どうもありがとうございます ^^
mochiさんのあの ”ふわ~っとブログカードの角がカールする” まるで女子のスカートが風で捲れ上がる雰囲気のアイデアはほんとに楽しいです(笑)
そこに弊ブログ記事のグラディエーション背景CSSを上手に利用して戴けて、とても嬉しかったです ^^

ぼっちんさんのブログってよく見ると、GIFアニメとかいろいろ面白そうなカテゴリーも扱っているんですね。
今度時間がある時にじっくり勉強させていただきます。

既成のGIFアニメーションを使わせて戴いて、二次加工するのが得意なんです(笑)
いろんな手法を使っておりますので、お時間がある時にでもお試しください ^^

今後ともよろしくお願いします。
私こそ、どうぞよろしくお願い致します m(_ _)m

よつば  

2017/11/03 (Fri) 09:12

∠(*^ー^*)oラジャ!!

ぼっちんさ~ん ヾ(^∇^)おはよーございまーす♪

(¬w¬*)ウププmochiさんとのやり取り見させて頂いてましたよ~
で、早速 CSSに入れ込んで納得してたわけですが~
今回、ぼっちんさんの差し替え用 CSSが公開されたので
丸々(色は別)差し替えさせて頂きました(^▽^)/
出来れば、そのピン止めも知りたいけど~
そこまでは教えて頂けないですよね。。。( ̄▽ ̄) ニヤ

ホントwebテクに詳しい人たちって尊敬します♡
これからも、よろしくお願いします♡

ぼっちん  

2017/11/03 (Fri) 09:36

よつばさんへ

おはようございます (^_^; アハハ…

いやいや、この度は私のヘマでとってもご迷惑をお掛けして申し訳ありません (^^ゞポリポリ
やっぱり自分で「脳の老化」を意識し始めちゃいましたよ~ δ(⌒~⌒ι)とほほ...
今までの私だったら(笑)このような単純ミスって起こさなかった(笑)ですけどねぇ (^_^; アハハ…

出来れば、そのピン止めも知りたいけど~
そこまでは教えて頂けないですよね。。。( ̄▽ ̄) ニヤ

(笑) そう言えばmochiさんのところではそのような技の解説はしておられなかったですねぇ。
(~ヘ~;)ウーン mochiさん発案の押しピン留めを私が解説しちゃって良いものかどうか(笑)
困ったこと言うよねぇ、よつばさんったら (〃^▽^〃)oあはははっ♪
どうしましょ? (^^ゞポリポリ
でも、ほんとはそういうテクもググったら情報出てくるから、それの応用ではあるんですけどね(笑)
とりあえずは「ピン留め CSS」なんかで検索するとヒントはいっぱい出てきますよ。
CSSって面白くて、全然別のCSSでも同じ視覚効果を作り出すことが出来ちゃうから「方法はひとつじゃない」と言うことなんです ^^
それもヒントです(笑)

ホントwebテクに詳しい人たちって尊敬します♡
これからも、よろしくお願いします♡

私もまだ初心者の域を脱してないんですけどねぇ、ほんとは (^_^; アハハ…

----------------
追記です。

丸々(色は別)差し替えさせて頂きました(^▽^)/
ハーイ(^O^")/ 上記CSSで色付けしてあるのは、あくまでも皆さんに分かり易くしてあるだけですから、テンプレートにコピペする時にはそのままコピペしても色付けはされません(笑)
ご心配無用ですよ~ うんうん(^-^)

みっくす  

2017/11/03 (Fri) 22:52

実はですねー・・・

ぼっちんさん、貼り換えました♪
しかし・・・実は~同じようにやっても皆さんと同じ表示になりませんw
ブログカードの題名以外に文章があるじゃないですか?その部分が色が変わった
囲みになってしまいますw
で、文章自体も行数が皆さんより多く出て、でぶっちょになってますw
 
Akiraさんのコピペから間違えているのか?何だろうなーと思って、ちょっと
頭が冷えたらやってみようと作業を留めていました。

えっと、みっくすのブログの一番古い日付でアップするので、見てもらっても良いでしょうか?

ぼっちん  

2017/11/04 (Sat) 08:06

みっくすさんへ

みっくすさん、おはようございます ^^

ご質問の件なんですけど、みっくすさんに先ずはお聞きしたいんですけど、、、
もしかして、記事を書くときにいつも「新投稿画面」で記事を書かれてますか?

■ お返事その1

参考に貼って戴いた1番目のカードの内容ですがその前後に
--------------
<p>↓こんな風に、引用符も出ずw縦線も最初からでませんでしたw</p><p><br></p><p>

●引用ブログカード版</p><div class="blogcard-gr"><div class="blogcard-content"><div class="blogcard-image"><div class="blogcard-image-wrapper"><a href="https://oops0011.blog.fc2.com/blog-entry-179.html" target="_blank"><img alt="" src="https://blog-imgs-116-origin.fc2.com/o/o/p/oops0011/2017-10-12-drawing-1000.jpg"></a></div></div><div class="blogcard-text"><p class="blogcard-title"><a href="https://oops0011.blog.fc2.com/blog-entry-179.html" target="_blank">Akira風ブログカードのカスタマイズCSSを公開します - Akira風ブログカード</a></p><blockquote cite="https://oops0011.blog.fc2.com/blog-entry-179.html"><p class="blogcard-description">さてさて、弊ブログのちょっと前の記事でAkira風ブログカードをCSSでカラフルにカスタマイズしてみました - Akira風ブログカード今回の記事タイトルにあります 『 Akira風ブログカード 』 とは、筆者が勝手にネーミングしたものですのでご承知於き下さい...oops0011.blog.fc2.comこんな記事を書きました。そうしたところ、この 『 Akira風ブログカード 』 の開発者さん(Akira先生=弊ブログのテンプレートの作者さん)のご本人記...</p></blockquote></div></div><div class="blogcard-footer"><a href="https://oops0011.blog.fc2.com/blog-entry-179.html" target="_blank"><img alt="" src="https://www.google.com/s2/favicons?domain=https://oops0011.blog.fc2.com/blog-entry-179.html">oops0011.blog.fc2.com</a></div></div><p>

<br></p><p>●ブログカード版
-------------- 
このような記述になっておりまして、ブログカード内には不要な <p> ~~~ </p>タグでブログカード以前の文字列囲みがそのままブログカード全体まで包まれてしまっています。
その為にブログカード内に影響して「文章部分」に薄い色が付いてしまっているんです。

要はブログカードは <p> ~~~ </p>タグで囲んでしまってはダメですよと言うことなんです ^^
これ、実は「新投稿画面」で何気なく記事を書くとこうなってしまうことは起こりえます(タグが見えないから気がつかずにこういうことをやってしまっている人が多いんです)。
ですから、純粋にブログカードを記事に貼るには<p> ~~~ </p>タグに包まれないものにする必要があるんです。

<div class="blogcard-gr"><div class="blogcard-content"><div class="blogcard-image"><div class="blogcard-image-wrapper"><a href="https://oops0011.blog.fc2.com/blog-entry-179.html" target="_blank"><img alt="" src="https://blog-imgs-116-origin.fc2.com/o/o/p/oops0011/2017-10-12-drawing-1000.jpg"></a></div></div><div class="blogcard-text"><p class="blogcard-title"><a href="https://oops0011.blog.fc2.com/blog-entry-179.html" target="_blank">Akira風ブログカードのカスタマイズCSSを公開します - Akira風ブログカード</a></p><blockquote cite="https://oops0011.blog.fc2.com/blog-entry-179.html"><p class="blogcard-description">さてさて、弊ブログのちょっと前の記事でAkira風ブログカードをCSSでカラフルにカスタマイズしてみました - Akira風ブログカード今回の記事タイトルにあります 『 Akira風ブログカード 』 とは、筆者が勝手にネーミングしたものですのでご承知於き下さい...oops0011.blog.fc2.comこんな記事を書きました。そうしたところ、この 『 Akira風ブログカード 』 の開発者さん(Akira先生=弊ブログのテンプレートの作者さん)のご本人記...</p></blockquote></div></div><div class="blogcard-footer"><a href="https://oops0011.blog.fc2.com/blog-entry-179.html" target="_blank"><img alt="" src="https://www.google.com/s2/favicons?domain=https://oops0011.blog.fc2.com/blog-entry-179.html">oops0011.blog.fc2.com</a></div></div>

これが正しいんです。 ↑ このブログカードのコードだけを単純にみっくすさんのその「一番古い記事」欄に貼り付けてみて確認してみてくださいね。
前後には記事で挟まないようにして貼ってくださいね。

■ お返事その2

で、文章自体も行数が皆さんより多く出て、でぶっちょになってますw
この件なんですけど、Akiraさんのブログカードのデフォルト(初期)のCSSでは、ブログカードは記事欄の幅いっぱいにビロ~ンって長くなると言うことは以前にもお話してましたよね。
で、カード内に表示される「文章の文字数」は、その長さに合わせて初期の文字数を設定してありますから、カードの横幅を狭めた設定(600px)で利用すると、どうしても「文章の文字数」が多くて、下にその分だけ文章が折り返されますからカードの「縦幅」となって、ちょっと「ぶっちょ(笑)」になってしまうんです(笑)
ですから、それを体裁良く整えるにはブログカードのコードを記事編集欄に貼ってから「文章の文字数」を少なくしてあげれば良いんです(笑)
文章の後半の半分くらいを削除してあげればスマートな体裁になりますよ ^^
ただし、削除するときに気をつけなければならないことは、文章だけじゃなくてブログカードのコード記号まで1文字でも削除することがないように気をつけなければなりません。
それをやってしまうとブログカードが崩れてしまいますからね (^^;; アセ

削除位置後部の目安として文章のいちばん末尾に「...」と言う並び(文章を割愛する意味)がありますから、それを削除しないで、その前までで留めるのが分かり易いでしょう ^^

注釈①: <p> ~~~ </p>タグは「段落(簡単に言えば、文章を一塊にするものです)」を付けるものですから、段落の中にブログカードを入れ込んではいけないと言うことです。

注釈②: 新投稿画面で「改行」を行うのはキーボードの Enter/ Return ではダメです。
それだと 改段落 になってしまいます。
当然、改段落も必要な場面はありますからそれはそれで良いんですが、改行とは違います。
正しい「改行」は Shift + Enter/ Returnです。
これはいわばHTMLの常識なんですが、新投稿画面で記事を書くのには絶対的に必要な知識です ^^
これを知らずして、 Enter/ Return キーをポンポン叩いて改行したつもりになってしまうと、上記のような思わぬ「改段落」をしていて、その中にブログカードを気がつかないままに含み込んでしまうことになるんです ^^

mochi  

2017/11/04 (Sat) 15:18

ピン留めとカードめくりのCSSを追記しておきました

こんにちは。ぼっちんさん。

例の記事にピン留めとカードめくりのCSSを追記してみました。

ちゃんと理解できないままカット&トライでやってたんで、
強引なやり方っぽくて、ちょっと恥ずかしいのですが… (*/∇\*)

ぼっちん  

2017/11/04 (Sat) 15:45

mochiさんへ

mochiさん、こんにちは ^^

や~ とっても嬉しいお知らせをありがとうございます(笑)
「ピン留め」「カードめくり」の妙技は皆さんもマネしてがってますよ~(笑)
渇望しておられた方に早速コメントして来ます(爆)

そうそう、弊記事でも「追記」しておきますね~ ばんざ~い \(^o^)/
大変ありがとうございます ^^

よつば  

2017/11/04 (Sat) 16:15

(人^▽^)ありがとうございます💕

ぼっちんさ~ん 早速の朗報ありがとうございます💕
mochiさんにも お礼コメントしてきました~♪

早速 チャレンジしてみま~すヾ(〃^∇^)ノわぁい♪

ぼっちん  

2017/11/04 (Sat) 16:25

よつばさんへ

うんうん(^-^) ほんとに良かったね~(笑)
また楽しみが増えたよね (〃^▽^〃)oあはははっ♪

それに関する質問はmochiさんの方にしてくださいね~ (≧ω≦。)プププ

みっくす  

2017/11/04 (Sat) 19:30

常識が・・・・w

ぼっちんさ~ん、早速のお返事有難うございました♪

常識を知らずにやっている事に・・・すみませ~ん!
<p> ~~~ </p>と新投稿画面での改行の知識を始めてしりましたw

それと、新旧投稿画面の利用に関してですが、いつも作成する時は、旧投稿画面でしていました。
新投稿画面で作成した場合、その後に文章を記入すると、ブログカードの中に全ての記事が入ってしまい、
すごーく大きなブログカードになってしまのですw
なので、ブログカードを作成する時は、旧投稿画面でするようにしています。

ぼっちんさんが上記でアップしてくれている、正しいコードで作成してみました。
そうしたら・・・・何かが違うんですよね。きっとw
お手数をお掛けしますが、見てもらえたら有難いです。宜しくお願いします♪

-  

2017/11/04 (Sat) 19:32

管理人のみ閲覧できます

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

ぼっちん  

2017/11/04 (Sat) 20:34

みっくすさんへ

みっくすさん、こんばんは お疲れさまです~♪

あのですね「旧投稿画面」にてプログカードを貼っている由ですが、、、

① ↓これが、貼り換えて作成した分です。 ●引用ブログカード
② 何故かみなさんみたいにならず、引用の文章が色で分かるように囲まれているみたいですw

これらの文字列を含めてプログカード2枚がもう既に <p>~</p> タグの中に包まれてしまっているから、何をやってもずっと変わらないんです。
ですから、一度その記事を「削除」してください。
いまの記事の中を空にするのではなくて、記事自体をとにかく削除してしまってください。

そして、新しい記事を記事タイトルだけは書いて、あとはまったく記事を書かないで、とにかく新規で「引用版ブックマークレット」でブログカードのコードを取得をして、そのコードだけを余分な改行も一切打たないで、記事の先頭行に貼ってみてください。

コードを貼った後にも記事は書かないで「ブログカードが1つだけ存在する」ようにしてみてください。

それで様子を見せてくださいね ^^
旧投稿画面で記事もブログカードも貼っていて、何故 <p>~</p> タグで囲まれてしまうのかを確認させて戴きたいと思います。

みっくす  

2017/11/04 (Sat) 21:48

了解です♪

ぼっちんさ~ん、度々の事に早速のお返事、ご対応、有難うございます♡
ここで、お礼している画像など出したいんですけど、すみませんお許し下さいw

それで、今、一番古い過去記事に「新テスト」の題名でアップしましたので
どうぞ宜しくお願いします。

ぼっちん  

2017/11/04 (Sat) 21:58

みっくすさんへ

うんうん(^-^) 今度のはOKですね~。
<p>~</p> タグには囲まれてないですよ~ ヽ(^^ ) ヨシヨシ

これは「白背景」のままになってますから、この後は
<div class="blogcard"> ← いまこれですから -gr を挿入してカラー背景用の
<div class="blogcard-gr"> にしてみてください。

けっして、他の部分は一切触らないでください。
それで様子を見せてくださいね ^^

みっくす  

2017/11/04 (Sat) 22:53

念のため

ぼっちんさ~ん、すみません、度々で本当にありがとうございます♪
上記「-gr 」を念のためコピーして貼りました。
最新テスト2でアップしました。

それ以外何も一切触ってませんので、どうか宜しくお願いします。

よつば  

2017/11/04 (Sat) 23:05

ぼっちん先生( ^▽^)/ 質問です

ぼっちん先生の貼ってるmochiさんの記事のブログカード
Akiraさんのですよね?なぜ保護された通信を保てるの?
元記事がSSL化されてなかったら。。。ダメだったんじゃない?
それが不思議です? なにか良い方法があるのでしょうか?

ぼっちん  

2017/11/05 (Sun) 07:56

みっくすさんへ

みっくすさん、おはようございます ^^
いろいろと大変でしょうけど、もうひと頑張りしてくださいね~ (^_^; アハハ…

最新テスト2でアップしました。
それ以外何も一切触ってませんので、どうか宜しくお願いします。

ハーイ(^O^")/ いろいろと調べてみましたが、みっくすさんがテンプレートに貼ったAkiraさんのデフォルト(初期)のCSSにも、私のカラーバージョンのCSSにも全く問題はないです。
そして、今回は <p>~</p>タグにも囲まれていないと言う、見た目は正常な状態なのに、まだ完成していないと言うことは、まだ何らかの「原因が隠れている」と言う意味なんですね。
今回のものはHTMLもCSSも完璧ですから、あと考えられる要因は「プラグイン」を疑います。

みっくすさんのブログには、多種類の「広告プラグイン」が貼られておりますから、その中のどれかのJavaScriptがブログカードのカラー背景に影響を与えて居ることが考えられます。

先ずはブログ管理ページの左メニューの「プラグインの設定」を開いて、そこにある「表示する」のチェックマークを全部外してください(つまりはサイドバー全部を非表示にするんです)。
それでブログカードが正常表示になったら、やはりプラグインのどれかが邪魔をしていたことになります。

それを確認後に、上から順に「1つずつ」チェックマークを入れてその都度ブログカードの表示状態を確認して行ってください。
面倒な作業ですけど、1つずつ確実に作業を進めてくださいね。
それをやって行ってブログカードの表示が「異常」になったら、そのプラグインが邪魔してたことが発見出来ます。
まぁ、恐らくはどれかの広告かと思いますけど、広告プラグイン以外にも考えられますから、上から順に「1つずつ」の確実な確認作業を行ってみてください。

恐らく、これで解決出来るんじゃないかと思います ^^
あとひと頑張りしてくださいね~ ヽ(^^ ) ヨシヨシ

あっ\(◎o◎)/! いま気がついたんですけど、、、みっくすさんはIEでブログ編集作業してるんですね。
IEはやめて「GoogleChrome」でやってみてください。
いまやIEやEdgeと言ったMicrosoft系のブラウザは、いろいろと問題を起こします! お勧め出来ませんよ。

ぼっちん  

2017/11/05 (Sun) 08:06

よつばさんへ

よつばさん、おはようございます(笑)

なんか急にフレンドリータッチになっちゃいましたね~ (〃^▽^〃)oあはははっ♪
いや、ほんとはこうで良いんだけど (≧ω≦。)プププ
もうお互いに堅苦しい物言いはやめようね(笑)

Akiraさんのですよね?なぜ保護された通信を保てるの?
元記事がSSL化されてなかったら。。。ダメだったんじゃない?

鋭いツッコミだね~(笑)
実は私は裏技なんて使ってなくて、私も何故に「Mixed Content=混在コンテンツ」にならないの?って首を捻ってるんでありますよ (≧ω≦。)プププ

あっそうそう、よつばちゃんも試しにいまmochiさんのところへEmbedlyで貼ってあるブログカードを「Akira風ブログカード」に貼り替えて様子を見てね(笑)
もし混在コンテンツになっちゃったら、やっぱりEmbedlyに戻してくれて良いから(笑)
ちょっと実験してみて欲しいのよ ヽ(^^ ) ヨシヨシ
よろしくです~♪ (^_-)-☆パチッ

よつば  

2017/11/05 (Sun) 09:21

???r(・x・。)アレ???

ぼっちん先生~! ヾ(^∇^)おはよーございまーす♪

早速 張り替えてみました~! ( ・◇・)?(・◇・ )不思議です
保護された通信を保ってます ??? ナゼ?

ぼっちん  

2017/11/05 (Sun) 09:32

よつばさんへ

ねっねっ やっぱり[ 保護された通信 ]のままでしょ~(爆)

実のところ、私のいろいろな記事では「ブログ外URLやFC2以外」へテキストリンク貼ってあるのがけっこういっぱいあるのよ(笑)
そういうものMixed Contentになってないものが多くて、実のところ「なんで?」って、SSL化してから首を捻ってるの (^_^; アハハ…
かと言って、全部が全部でもなくて、概算だと「半分くらい」の率でOKになっちゃってるの(笑)
不思議っちゃ不思議(爆)

調べる価値はある(笑)んだけど、時間がなくて放置してある~ (≧ω≦。)プププ

れん  

2017/11/05 (Sun) 13:54

ご報告

ぼっちん様、こんにちは♪
ご報告が遅くなりました。
とりあえず、ブログの調整…完了しました(ことにしています( *´艸`))。

まだまだ不具合などあると思いますので、もしもお気づきになった点がございましたらご指摘いただけますと嬉しく思いますm(_ _)m

Thicboxに代わる画像表示プラグインは結局「Fancybox3」というのを使うことにしました。
過去記事も少しずつFancyboxで表示されるようにトリガー変更をやっていますが、結構多用していましたので変更が大変です……(^^ゞ

でも、ここ何日か、久しぶりに楽しく、早くパソコン触りたい~~(テンプレート調整したい)って思って過ごせました。
いろいろと楽しみを与えてくださってありがとうございましたm(_ _)m

記事に関係のないコメントでごめんなさいm(_ _)m

みっくす  

2017/11/05 (Sun) 14:00

プラグイン全表示なしで・・・

ぼっちんさ~ん、こんにちは。明け方にちょっとバタバタありまして~
寝不足で仮眠&買い物に行ってましたw

上記の全プラグインの表示チェックを外して見てみましたが、同じ状態で
反映されました。一応、数回やりなおしてみましたが同じでした。

「IEやEdgeと言ったMicrosoft系のブラウザ」←これが原因でしょうか?
時代は「GoogleChrome」なんですねw使用になれておらずでw

お騒がせが続いて申し訳ない限りです・・・お許しを~♪

ぼっちん  

2017/11/05 (Sun) 14:11

れんさんへ

れんさん、こんにちは ^^

コメントくださるちょっと前に、れんさんのブログ覗いてました~(笑)
「Fancybox3」で、画像もスルスル~っとストレスなく滑らかに拡大してましたよ~ d(-_^)good!!
トップページでChromeのデベロッパーツールで見る限りは、もう Red Mixed Content も無くなりましたから、もうOKでしょう (^_^)ニコニコ

でも、ここ何日か、久しぶりに楽しく、早くパソコン触りたい~~(テンプレート調整したい)って思って過ごせました。
いろいろと楽しみを与えてくださってありがとうございましたm(_ _)m

いやいや、私のヘナチョコなアドバイスで余計にれんさんを混乱させちゃってたことでしょう(爆)
でも、根気強くよく頑張りましたね~ 素晴らしいe(^。^)g_ファイト!!でしたよ(笑)

SSL化も完了なさったことだし、これからもブログ運営を楽しんでくださいね~♪

ぼっちん  

2017/11/05 (Sun) 14:37

みっくすさんへ

いまね~ みっくすさんのところにコメントして来ました~(笑)

そちらのように設定して試してみてください ^^

-  

2017/11/05 (Sun) 15:04

管理人のみ閲覧できます

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

みっくす  

2017/11/05 (Sun) 15:16

同じでした!

ぼっちんさん、テストの方にまでコメントで新たなCSS有難うございました♪
有難過ぎます♡

さっそく試してみました!配置がセンターに綺麗に表示されるようになりましたw

で、ここから鍵コメがご迷惑にならないかなーって思ったんですけど、同じ人が居る
かも知れないと思い、このままコメントを♪

よつばさんが、みっくすと同じテンプレにしてくれました。
そうしたら、カラーの出方が同じになっていました。
これは、もともとのテンプレの表示の何か仕方?なのかも・・・!

どうでしょうか?

ぼっちん  

2017/11/05 (Sun) 15:31

鍵コメYさんへ

(〃^▽^〃)oあはははっ♪

なんとまぁ、素敵なことしてくれたね~~~ なるほど~(笑)
脳みそ、なかなか良い活動してるよ~ (≧ω≦。)プププ
でもねぇ、ほんとを言うとこれって笑い事じゃないのよ (^_^; アハハ…
いま仮に設定してくれてあるテンプレに問題がありってことなのよ(爆)

もう面倒(笑)だから、テンプレそのものを入れ替えてもらった方が良いよね~ (^^ゞポリポリ

ご協力をありがとでした~ d(-_^)good!!

ぼっちん  

2017/11/05 (Sun) 15:37

みっくすさんへ

よつばさんが、みっくすと同じテンプレにしてくれました。
そうしたら、カラーの出方が同じになっていました。
これは、もともとのテンプレの表示の何か仕方?なのかも・・・!

いやいやぁ、すんごいこと発見しちゃいましたね~ よつばさんが(笑)
いまのテンプレに、何やら問題がありそうですよね(爆)

みっくすさん、面倒でしょうがテンプレをAkiraさんの他のデザインのものに入れ替えてみてください。
ちゃんと「Akira風ブログカード」のデフォルトのCSSと、先ほど私が貼りました最新のものも忘れないで新たなテンプレに組み込んでくださいね~ (^^ゞポリポリ

焦らないで~ (^_^)ニコニコ 

みっくす  

2017/11/05 (Sun) 16:10

組み込んでみました。

ぼっちんさ~ん、Akiraさんの新たなテンプレ→デフォルトCSS&ぼっちんさんから
貰ったコードの2つだけを貼り付けアップしました♪

このテンプレも前回のと同じ表示になりました!
たまたまこのテンプレもそうだったのか、みっくすの貼り付けに問題が?
おーーー悩まし過ぎるぅ~www

でも、分からないのに何だか面白い!

ぼっちん  

2017/11/05 (Sun) 16:19

みっくすさんへ

え゛~~~? (^_^; アハハ…
もう、何が何だか (^^ゞポリポリ
(~ヘ~;)ウーン ちょっと私も頭を休めます~ δ(⌒~⌒ι)とほほ...

みっくす  

2017/11/05 (Sun) 16:47

テンプレのよう?

ぼっちんさ~ん、頭を悩ませ申し訳ないです。
ホントなら、ここでお茶の一杯をお菓子を付けてお持ちしたい位ですw
お手間を取らせて申し訳ありません(泣)

で、報告なんですが、ぼっちんさんと同じテンプレでやってみました!
そうしたら~でぶっちょのままですがw、ちゃんと同じ表示になりましたyo~♪♪♪

同じって言うのが妙に嬉しい♡
有難うございます。

一先ず、グラデーション表示は薄っすら囲みつきで、もとのテンプレに戻したいと
思います♪
新テストなどの記事はシリーズのどこかで使用したいと思いますw

どうか、ゆっくりお過ごしくださいませ☆☆☆
モミ~モミ~(肩を揉む気持ちです♪)

ぼっちん  

2017/11/05 (Sun) 20:07

みっくすさんへ

いまね~ みっくすさんの処へ「鍵コメ」して来ました~(笑)

最終解決方法です(笑) ナイショのナイショ (〃^▽^〃)oあはははっ♪
もう一息です、頑張って~ ヽ(^^ ) ヨシヨシ

-  

2017/11/05 (Sun) 20:31

管理人のみ閲覧できます

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

みっくす  

2017/11/05 (Sun) 20:34

何でしょうかー!???

ぼっちんさ~ん、最終解決方法なんですね!
しかもナイショw

内容これからしっかりと見てみまーす♪
理解できるのか?
やれるのか?心配ですw

でもでも、本当にお時間を掛けて、ご指導下さり有難うございました(ペコリ)
感謝♪感謝♪感謝♪です。

ぼっちん  

2017/11/05 (Sun) 20:49

みっくすさんへ

いろいろとお手間を取らせてしまってごめんなさいね~ (^^ゞポリポリ

私もみっくすさんと同じテンプレに設定してソースを追いかけてやっと「ああ、これかぁ(笑)」って原因箇所を見つけました(爆)
その方法は、みっくすさん固有のテンプレートでの解決方法ですので、第三者さんに真似されてしまうと、その第三者さんのテンプレートが混乱を招く要因になってしまうので「ナイショ」にさせてもらいましたよ うんうん(^-^)

でも、その修正をどのテンプレートでも使える代替方法をAkira風ブログカードのカラー背景に組み込んだ方が「親切」と思いますから、これからその方法を、みっくすさんにお教えした方法とは別の形になりますけど、組み込む予定です ^^

みっくす  

2017/11/06 (Mon) 01:12

深い配慮なんですねぇー♪

ぼっちんさ~ん、お手間だなんて、こちらが逆にお手間を取らせて恐縮しています(泣)
そして・・・出来ましたぁー!!!!!!
薄っすらとした囲みの出ない、綺麗なカラー表示がされています♪

ぼっちんさんや、よつばさんのブログで見るのとまんま同じですw
嬉し~い♪♪♪

他の方のテンプレートの事も考えて~やり方も変えて、ご自分のAkira風で対処される
配慮がまた、流石ですね♪

胸のつかえが取れてスッキリしましたw
何日にも渡って、お付き合い頂き、ご指導含め本当に有難うございました♡
※「これは心ばかりの」~とお茶菓子を差し出したい気持ちですw

みっくすのブログの新テストは暫くしたら下書きにして、深堀せずな内容で、
詳細が知りたい人は~「ぼっちんさんへ」で、振らせて頂きたいと思います♪

本当に有難うございました♪♪♪♪♪



ぼっちん  

2017/11/06 (Mon) 07:30

みっくすさんへ

みっくすさん、おはようございます~♪
真夜中過ぎのコメントをお疲れさま~(笑)

薄っすらとした囲みの出ない、綺麗なカラー表示がされています♪
ぼっちんさんや、よつばさんのブログで見るのとまんま同じですw
嬉し~い♪♪♪

ハーイ(^O^")/ いましっかり、みっくすさんブログで確認して来ましたよ~ (^。^;)ホッ
しかし、長丁場になったにも関わらず、ほんとによく頑張りましたね~ 素晴らしい♪

他の方のテンプレートの事も考えて~やり方も変えて、ご自分のAkira風で対処される
配慮がまた、流石ですね♪

いえいえ、そうしないことには、みっくすさんのテンプレートの利用の仕方や広告問題や記事のこれまでの書き方等と、他の皆さんの利用の仕方との部分の整合性がとれませんから、どちらも考慮しての対策ってことだったんです(笑)

何日にも渡って、お付き合い頂き、ご指導含め本当に有難うございました♡
※「これは心ばかりの」~とお茶菓子を差し出したい気持ちですw

私からも、みっくすさんが完成までよく頑張ってくれましたから ( ∩_∩)_旦~~ オチャデモドウゾ~♪ って一服差し上げたい気分ですよ(笑)

詳細が知りたい人は~「ぼっちんさんへ」で、振らせて頂きたいと思います♪
(〃^▽^〃)oあはははっ♪ はい、了解しました~ (^^ゞポリポリ
ほんとに今回はお疲れさまでした~ ヽ(^^ ) ヨシヨシ

-  

2017/11/06 (Mon) 08:24

管理人のみ閲覧できます

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

-  

2017/11/06 (Mon) 08:45

管理人のみ閲覧できます

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

ぼっちん  

2017/11/06 (Mon) 11:40

鍵コメYさんへ

左っちょに寄ってしまうのは、現物確認が出来ないからなんとも言えないんです。
再現して見せてもらえたらコメントも出来るんだけど (^^ゞポリポリ
CSSを部分的に差し替えるんじゃなくて最新版のCSSを丸々コピペして設定してみてくださいね。
その後に、ご自身の「設定色」を挿入してみてください。

それと、もう1つの方のご要望(笑)のは、実は「ふわ~」っというタイミングで色の横変化するのはまだ実験と改良中で公開はとりあえず考えてはいないんですよ。
これ、だいぶ特異なことやってるもんですからね (^^ゞポリポリ
ただ「左右に色を入れ替える」のは簡単です。
いま配布中のグラディエーションは「上下」のグラディエーションになってるから、それを「左右」のものを用意して、往復の複の方で、同じグラディエーションを逆に設定すれば「グラディエーションの横向き変化」に出来ると言う次第です ^^

みっくす  

2017/11/06 (Mon) 18:43

最新アップで成果を披露♪

ぼっちんさ~ん、こんばんは♪
確認もして下さり、この度は本当に有難うございました。

後でアップするブログカードは、記事内に成果を披露してみましたw
キレイに、真ん中になってます!と、ここで、自分の写真&文字もブログカード
に合わせたセンターでレイアウトを統一してみました♪
またちょっと違う感じが気に入りました♡

今後とも、どうぞ宜しくお願いしま~す♪♪♪

ぼっちん  

2017/11/06 (Mon) 18:55

みっくすさんへ

みっくすさん、こんばんは~♪
d(-_^)good!!タイミングで、いまパソコンの前に座った瞬間にみっくすさんからのコメントが(笑)
予感がしたのか (〃^▽^〃)oあはははっ♪

おおっ なるほどなるほど、それでは記事更新を楽しみにさせてもらいますね~ うんうん(^-^)

今後とも、どうぞ宜しくお願いしま~す♪♪♪
ハーイ(^O^")/ こちらこそ、これからも楽しくお付き合いくださいね~♪

-  

2017/11/07 (Tue) 15:25

管理人のみ閲覧できます

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

-  

2017/11/07 (Tue) 16:21

管理人のみ閲覧できます

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

ぼっちん  

2017/11/07 (Tue) 16:32

鍵コメさんへ

鍵コメさん、こんにちは ^^

ハーイ(^O^")/ 楽しんでくださいね~ ヽ(^^ ) ヨシヨシ (笑)

-  

2017/11/07 (Tue) 17:01

管理人のみ閲覧できます

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

-  

2017/11/08 (Wed) 08:29

管理人のみ閲覧できます

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

ぼっちん  

2017/11/08 (Wed) 08:44

鍵コメYさんへ

鍵コメYさん、おはよ~です(笑)

なんだか1人でバタバタしちゃってたみたいだね (〃^▽^〃)oあはははっ♪
とにかくね、HTMLとかCSSを修正した後は「目視確認は絶対必要」ってのを肝に銘じてね(笑)
コピペの時なんかに、余分な部分までコピーしちゃってたり、または部分的に欠落してたりが起こりやすいからね。
文字記号って適当にくっついてる訳じゃなくて「必要だから書いてある」んだから ^^

まあ、とにかく無事に表示されたから良いけど(笑)
その方法でカラーバージョンを使い分けたら楽しいですからね (^_-)-☆パチッ

はんのすず  

2017/11/21 (Tue) 10:53

カード設置できました!!

何とか、表示されました。
記事ありがとうございます。グラデーションカラーは、そのまま。
又、やってみますね。
アイフォン、私は6の滑りやすいので約1年。
icloud も、利用せずDropboxへ手作業で写真アップしてます。
コメントいただき、ありがとうございます。

ぼっちん  

2017/11/21 (Tue) 11:19

はんのすずさんへ

はんのすずさん、初コメントをありがとうです~ ^^

おおっ ブログカードの表示に成功したんですねぇ、やりましたねぇ うんうん(^-^)
今度、是非記事内で表示して見せてくださいね~(笑)

記事ありがとうございます。グラデーションカラーは、そのまま。
ハーイ(^O^")/ そっちはまたボチボチと試してみてくださいな (^_^)ニコニコ

アイフォン、私は6の滑りやすいので約1年。
ねっねっ(笑) やっぱりiPhone6ってツルツル滑りますよねぇ、私なんか何度それで落としたことか (^_^; アハハ…
今度のiPhone Xも周囲が丸く滑らかになってるんですけど、何故か不思議なくらいに手指にピタッと張り付くような感じで、どうやら「滑りにくい構造というか加工」をしてあるみたいで「さすがはApple」って思っちゃいましたよ(笑)
しっかり改善してあるみたいです ^^

icloud も、利用せずDropboxへ手作業で写真アップしてます。
おっ なるほどぉ、Dropbox使ってらっしゃるんですかぁ、凄い ^^
私はあまりDropbox活用出来てないんですよね~ (^^ゞポリポリ

コメントいただき、ありがとうございます。
ハーイ(^O^")/ また寄らせて戴きますね~ うんうん(^-^)

二階堂朱哩  

2018/09/09 (Sun) 02:28

できたぁ!

ぼっちん先生こんばんは!
ブログカード、やっと使えるようにになって喜んでたんですが「はっ!次はぼっちん先生のカスタマイズも設定せねば!」と思ってつい一気にやっちゃいました♪
楽しくて眠れない(笑)
グラデーション、色くらいは自分で変えようと思ったけどサンプルの最初の状態が綺麗すぎて好きなので、マウスオーバー時の緑をやめて上下を切り替えるだけにしてしまいました(^^;;
また後日配色を考えてはみますが、センスがないのでこのままだったらごめんなさい(^^;;

ぼっちん  

2018/09/09 (Sun) 08:26
ぼっちん

To 二階堂朱哩さん

朱哩さん、丑三つ時(笑)にコメントをありがとうございます ^^

コメント戴いた直前に、おしっこに目が覚めて(笑)もう一度寝ようとした時に、フッと何気なくブログのアクセス解析をiPhone Xから覗いたら、朱哩さんが「Akira風ブログカード」の関連記事をいっぱい覗いてくれてるのが分かって「おっ こんな時間にお勉強してるなんて凄いねぇ♪」って思ってたんですよ、それからパタッとまた爆睡しちゃったんですけど(笑)

楽しくて眠れない(笑)
(〃^▽^〃)oあはははっ♪ 私はそんな時間じゃ起きていられないってば(笑)

また後日配色を考えてはみますが、センスがないのでこのままだったらごめんなさい(^^;;
あっ グラディエーション背景がお気に入りでしたら
http://jxnblk.com/shade/
https://uigradients.com/#DarkKnight
こんなサイトから簡単にグラディエーション用のカラーコードを取得出来ますから、参考にすると良いですよ~ p(^^)gガンバッテ!
実は私もここを使ってAkira風ブログカードのグラディエーションコードを取得したんです(笑)

二階堂朱哩  

2018/09/09 (Sun) 11:59

To ぼっちん先生

えへへ。夜な夜なめっちゃ見まくりました!
しかもPCとiPadとiphoneから(笑)
画面切り替えが煩わしくて…(^^;;
夜中って変なテンションだったりしますが、さすがにブログカードは「テンション上がっちゃってブルブルしちゃうやつ」にはしなかった〜(笑)
よし。グラデーションもそのうち変更してみます!

ぼっちん  

2018/09/09 (Sun) 15:09
ぼっちん

To 二階堂朱哩さん

あっ なんとiPadまで持ってるんですか? 羨ましい (^_^; アハハ…

夜中って変なテンションだったりしますが、さすがにブログカードは「テンション上がっちゃってブルブルしちゃうやつ」にはしなかった〜
私ってけっこう悪戯好き(笑)だから、ブログカードに触れると震えてびっくりさせる(笑)のなんて大好きなんですよね~ (≧ω≦。)プププ

うんうん(^-^) ヒマがある時にでも、グラディエーション背景にチャレンジしてみてくださいね~ (笑)