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

投稿 2017年10月13日
36
Akira風ブログカード
ブログカードCSSカスタマイズ背景色グラディエーション

弊ブログをPCから閲覧の場合マイクロソフトのIEでは正しく表示しておりません! 閲覧ブラウザは Chrome や Firefox をお勧め致します。


さてさて、弊ブログのちょっと前の記事で


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

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



こんな記事を書きました。
そうしたところ、この 『 Akira風ブログカード 』 の開発者さん(Akira先生=弊ブログのテンプレートの作者さん)のご本人記事ページ


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

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



より、弊ブログにドドドって勢いで(笑)アクセスして来てくださる人が急増しまして「あららら~♪」なんてびっくりしてしまいました(爆)
そんなことから「Akira風ブログカードのカスタマイズがとっても需要在りそう」って思ったんでした(笑)

筆者って、けっこう歳食ってまして(プロフィール欄に書いてあります(爆))その分若い頃よりも人間味がず~~~っと丸くなって来てるもんですから 『 それだったら、私の下手くそな自己流カスタマイズでも恥ずかしながらも公開しちゃおう♪ 』 って気持ちになりまして、カスタマイズしたCSSをオープンにするべくこの記事を書くことにしました(笑)

CSSの識者さん達には『 なんだぁ、この汚いCSSの書き方 (≧ω≦。)プププ 』なんて笑われてしまうでしょうけど、まぁ、一応は見た目カラフルに表示出来ておりますので『 CSSって何? さっぱりわかんないけど 』と言う初心者の皆さんには、一応はコピペだけで 『 Akira風ブログカード 』 がオリジナルの白色背景デザインからカラフルな背景色に変身出来るような記事にしますので、楽しんで戴けることでしょう ^^
それには、上記ブログカードのAkira先生ご本人の記事を参照しつつの作業になりますことをご承知ください、





そうそう、「ブログカード」って、ブログやホームページスペースを持っていてその記事上で表現出来るものですからね。
ですので、とりあえずは今回は「FC2ブログを運営しているブロガーさん向けの記事」ということになりますのでご了承ください。
まぁ、同様ブログサービスに於いても、そのテンプレートを自在に編集出来る環境でしたら利用出来ます。
ブログカードの仕組みの詳細は弊記事では割愛しますが、上記のAkira先生の記事ではかなり詳しく解説してくださってますからご参照ください。



『 Akira風ブログカード 』 をどうやったらカスタマイズして利用出来るようになるのか?


先ずは、先ほどの「ブログカードのブックマークレットを作成しました - カスタマイズ」のブログカードをクリックして、そのAkira先生の記事ページを熟読して必要な操作設定をして、とりあえずは 『 Akira風ブログカード 』 を、あなた自身で利用出来るようにしておいてください。

弊記事でのカスタマイズは、それから後の作業になりますので。

さてそれでは、この記事では下記のカスタマイズしたデザインCSSの2種類について解説してみます。
Akira風ブログカードのデフォルト(初期設定)デザインでは背景色が「白色」に設定になっておりますので、そこを利用して筆者はグラディエーション背景色にし、なおかつマウスホバー(ブログカードにマウスを乗せる)するとその背景色が変化するように動的カスタマイズしたものです。
そのように、自在にかつ容易にデザイン変更出来るように開発してくださったAkira先生の方法は、利用者には大変ありがたく楽しいものになっております ^^


[ blogcard-gr ]

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

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



[ blogcard-gr2 ]

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

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




上の背景色デザイン [ blogcard-gr ] のCSSは

[ blogcard-gr ]
 最新版 2017/11/05 21:00 ↓ 誤りがありましたので修正致しました。
■(non-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 ↓ 誤りがありましたので修正致しました。
■(non-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に於いて、ブログカードのグラディエーション背景色をショートハンドプロパティで background: の一行で設定しておりますので、見慣れない方には意味不明な設定になっていることと思います。
元々ショートハンドプロパティはそのトリッキーさがより豊かな表現が出来るものですから、それに慣れると「もう離れられなくなる(笑)」手法でもあります。
まぁ、ここではショートハンドプロパティ解説は場違い(笑)ですから、またいずれの必要な機会がありましたら書くことにしましょう。
今回のカスタマイズでは、こんなこと知らなくても利用出来ますから(笑)

さてさて、この2つの種類のお好きなカラーリングの方(両方ともでも可)をコピーして、そのまま、Akira先生の記事ページから取得したブログカードの初期設定CSSの下に貼り付けてください。
CSS内の緑色のコメント文(注釈文)もそのままコピーして大丈夫ですからね。





こんな感じになります。
そして「更新」をクリックして、テンプレートのCSSへのコピペ作業は終了です。


カスタマイズしたブログカードCSSの使い方


これらのカスタマイズしたCSSをどうしたら使えるように出来るのかは超簡単です(笑)
それには、、、





ご覧のように、Akira先生のページで取得したブックマークレットを利用して、Akira風ブログカードにしたいページで得たブログカードのソースを記事欄に貼り付けた後で、上図のように blogcard の後ろに -gr-gr2 を追記してあげるだけでカスタマイズしたデザインを呼び出せるようになっております。
ねっ 簡単でしょ(笑)

このようにしてカスタマイズしたデザインを利用すれば、色々なデザインを気分や記事内容によって使い分けることが出来るようになる訳です(笑)
ですから、一番の元の初期設定CSSには変更を加えてしまわないように注意しましょう。
そうすれば、元々の白色背景もAkira風ブログカードとして使えるのですから ^^

-----------------
■ 追記 2017/10/17

ただし、全くの初期設定CSSのままだと、ブログカードの幅が記事幅いっぱいにビロ~ンと横に長くなります。
利用するテンプレートによって記事幅は様々ですから、横方向に長くなりすぎるようでしたら、CSSの初期設定に

■ [ 下記の枠内をコピーしてください ]

/* カード全体像 */
.blogcard {
margin-bottom: 30px;
max-width: 100%;
width: 600px; /* ブログカードの横幅設定 */  
margin: 0 auto; /* ブログカードのセンタリング設定 */
background-color: white;
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;
}

上記のように注釈部分

width: 600px; /* ブログカードの横幅設定 */  
margin: 0 auto; /* ブログカードのセンタリング設定 */

の二行をコピペ追記してあげれば、それなりに形良く表示されるようになります。
センタリングが不要でしたら /* ブログカードのセンタリング設定 */ の行をコピペしなければ良いです。
その場合には、ブログカードは左寄せ表示になります。

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


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

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



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

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

弊記事を参考に、もっともっと多彩に素敵にカスタマイズをしてみてくださいね~ ^^
『 Akira風ブログカード 』 では、もっともっと自由な発想のカスタマイズが可能で、背景色が変えられる程度(笑)の初級的カスタマイズにはとどまらないフレキシブルさが隠れてますからね~ d(-_^)good!!


Web知識のおまけ


■ おまけ 1

一般的に、ブログやホームページで「色」を表現する時にはカラーコードと言うものを使いますよね。
で、その記述方法は

#0000FF と書くと青色を表しますが、これを16進数表記と言います。





しかし

rgb(0, 0, 255) と書いても同じ青色が表現出来ます、これを10進数表記と言います。
私は特別な場合を除いては、殆どはこの10進数表記で色表現をブログの中で行っております。

実は、この10進数表記を使うと、その色に半透明効果を表現しやすくなるからです。
もちろん16進数表記でも出来るんですが、10進数表記の方が「見たまま」でその半透明度の設定がし易いんです。

rgba(0, 0, 255, .5)

このように書くと50%の透明度になって





このような色合い表現が出来る訳です。
これを応用することで、ブログカード上の文字列の濃さに影響を与えないで、その背景色だけを薄くして文字列が読みにくくなってしまうことを防げるんです ^^
ですから、ブログカード上の文字列もクッキリと見えていると言うことなんです d(-_^)good!!


■ おまけ 2

このカスタマイズCSSで背景色にグラディエーションを付けておりますが、、、

http://jxnblk.com/shade/
のサイトを利用すれば、簡単にグラディエーションのカラーコード取得が出来ますから利用するのもよいでしょう。









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

[ 関連記事 ]
もっと見る
ぼっちん
ぼっちん

36 COMMENTS

There are no comments yet.

ミックス  

有難うございました♪

ぼっちんさん、つたないブログへコメント下さり、有難うございました♪
先ほどの内容もお勉強が~と思っていましたが、ブログカードの難問もプラスされ
どうしましょう!とテンパり気味ですw

Akira先生の記事へ~が遠いですw
でも作成できたら、素敵なカード、見た事があまりないのでチャレンジしたいと
思います。

その前にちょっと、休憩して掃除&お茶してからですが♪
今後とも、宜しくお願いします。


2017/10/14 (Sat) 16:50

ぼっちん  

ミックスさんへ

こんばんは 初コメをありがとうございます ^^

先ほどの内容もお勉強が~と思っていましたが、ブログカードの難問もプラスされ
どうしましょう!とテンパり気味ですw

(〃^▽^〃)oあはははっ♪ いえいえ、この記事にコメントくださったからって、何も「Akira風ブログカード」を直ぐにってことじゃないですからね~(笑)
でも、SSL化もレスポンシブテンプレート化もアッと言う間に実現してしまったミックスさんなら、きっと簡単に「Akira風ブログカード」も使えるようになってしまうことでしょうね (^_^)ニコ

こちらこそ、またブログにお邪魔させて戴きますね~♪

2017/10/14 (Sat) 17:28

ポンデリン子  

わぁおぉ~♬
またまたリン子には頭の痛い難題ですぅ~

これですね、mamaさんと会話してた内容って・・
はいぃ~リン子がこそっと聞いたくらいで理解できるものではございやせぇ~ん・・・
色を付ける・・これはこれでまた違う感じになっていいと思う。

だけど、ここまでやるのは今のリン子には無理~
自分のブログに、あまり添付する事がないので利用する事も少ないかも・・
もっと違う、レベルの低い質問をぼっちんさんに教えて貰いたいでぇ~す・・

その時は、何だそんな事?って思わずに教えてねぇv-408
ぼっちんさんの記事を沢山の人が覗いて勉強になったはずです・・
とっても有難い存在です。
仕事の邪魔になっていませんかぁ?
無理だと解っててもぼっちんさんの記事の更新は必ず読んでおきたいリン子ですぅ~♡ チャンチャン

2017/10/15 (Sun) 12:07

ぼっちん  

リン子さんへ

リン子さん、こんにちは~♪
いま丁度お昼ご飯食べ終わったところです~(笑)

これですね、mamaさんと会話してた内容って・・
そ~そ~ これのことですよ~(笑)

色を付ける・・これはこれでまた違う感じになっていいと思う。
私って人間が捻くれてるのか(笑)与えられるものをそのまま使うってのが性に合わなくて(笑)なんでも改造したくなっちゃうんですよね~(爆)
このテンプレートも、けっこう変えちゃってるし (^_^; アハハ…
だから「Akira風ブログカード」もカラフルにしてみましたよ~(笑)
開発者のAkira先生も褒めてくれてました(笑)
それなら皆さんにも使って貰おうってことで公開してみたんですけど、皆さんにはもっと自分好みにカスタマイズして欲しいから「考え方のヒント」と言う意味でこの記事を書いたんですけどね ^^

自分のブログに、あまり添付する事がないので利用する事も少ないかも・・
うんうん(^-^) そうなんですよ、使うネタがなかったらこういうのって意味ないんです(笑)
もしリン子さんが新しい記事を書いてて、閲覧してくださる皆さんを以前の自分の記事へ誘導したいような時があったら便利に使えるんですけどね。

もっと違う、レベルの低い質問をぼっちんさんに教えて貰いたいでぇ~す・・
その時は、何だそんな事?って思わずに教えてねぇ

(〃^▽^〃)oあはははっ♪ 今までにそれを拒否したことはなかったけど(笑)でも内容によっては「自分で検索しなさいね~ ( ̄ー ̄)ニヤリッ」なんて言うことはありますよぉ(笑)
答えだけ聞きたがるなんて、学校のカンニングと一緒で「その答えは絶対覚えられない」ですからねぇ(爆)

仕事の邪魔になっていませんかぁ?
大丈夫だいじょうぶ、だって昼寝しつつ仕事も合間にやってるんだから (≧ω≦。)プププ

無理だと解っててもぼっちんさんの記事の更新は必ず読んでおきたいリン子ですぅ~♡ チャンチャン
や~♪ 嬉しいお言葉♪ また記事を書く励みになりましたよ~ ありがとです~ うんうん(^-^)

2017/10/15 (Sun) 12:32

ミー  

お世話になります。

教えてください!
ファビコンを設定したいのですが、どうしてもできません。
ファビコン用の画像をアップロードしてHTMLに
<link rel=""shortcut icon"" href="●●●●●favicon.ico">を追加しました。
どこが間違っているのか教えてください(-"-;A ...アセアセ

2017/10/15 (Sun) 18:33

ぼっちん  

ミーさんへ

ミーさん、こんばんは ^^

今ね、ミーさんのブログのソースを覗いたら、ファビコンのURLが間違えてますよ~。
ソースに書いてあるURLだと「File not found」になっちゃってます (^^ゞポリポリ
実存してるURL見てみたらファビコン画像が見えましたから、そのURLをミーさんブログへ鍵コメしますからね~(笑)
ちょっと待っててね~♪

2017/10/15 (Sun) 19:35

ミー  

お世話になります。

早速お返事ありがとうございます!
指摘していただいたとおりに画像のアドレスを変更してみたのですが、
やっぱりファビコンはFC2の馬のマークです(-_-;)
キャッシュのクリアもしてみましたがダメです(-_-;)
他に考えられる原因はありますか~?(-_-;)

2017/10/15 (Sun) 20:00

ぼっちん  

ミーさんへ

あららら そうでしたかぁ (^^ゞポリポリ

ファビコン画像って、ただ小さい画像を作ってファイル名に「favicon.ico」って付けてもダメなんですよね。
キチンとした方法で作らないと。
それでは
http://www.kent-web.com/pubc/favicon/
こちらのサイトのサービスを利用してもう一度ファビコン作って、解説にしたがって操作してみてくださいね~ ^^

2017/10/15 (Sun) 20:16

ミー  

お世話になります。

それでもできません(-_-;)
お手上げです(-_-;)

2017/10/15 (Sun) 21:39

ぼっちん  

ミーさんへ

ミーさん、原因が解りましたよ~(笑)

HTMLソースの <link rel=""shortcut icon"" ← ここのダブルコーテーションが二重になっちゃってますよ~ (^^;; アセアセ

これを直せばOKでしょう(笑)

2017/10/15 (Sun) 22:05

ミー  

お世話になります。

それを直してもダメでした(-_-;)

2017/10/15 (Sun) 22:28

ぼっちん  

ミーさんへ

ダブルコーテーション部分は直ってますけど、、、

 <link rel="shortcut icon"

のように、ソース前方に全角スペースがいっぱい入ってしまってます。
この全角スペースを排除してくださいね~。

2017/10/15 (Sun) 22:41

ミー  

お世話になります。

出来ました!出来ました!
ありがとうございました!
しかしなぜ、全角スペースが入っていてはダメなんでしょう?
以下の<link rel~もスペース空いてるように見えますが(-_-;)

2017/10/15 (Sun) 22:54

ぼっちん  

ミーさんへ

うんうん(^-^) ファビコン、完成しましたね~ 良かったですねぇ♪

しかしなぜ、全角スペースが入っていてはダメなんでしょう?
以下の<link rel~もスペース空いてるように見えますが(-_-;)

あのですね、「全角スペース(日本語文字)」って2バイト文字ですよね。
HTMLソース的には全角スペース・半角スペースやTABスペースって、全て意味が違うんです。
単なる空間だから同じように見えるんですけど、、、

その当たりはご自身で検索してみてくださいね ^^
答えだけ知ってもその場限りで終わりになってしまって、ミーさんの今後のHTMLの扱いによいことにはなりませんから (^^ゞポリポリ

それではお休みなさ~~~い♪

2017/10/15 (Sun) 23:12

ミー  

お世話になります。

また追々勉強してみます!
とにかくぼっちんさんのおかげで今日はゆっくり眠れそうです(^-^)
今度は独自ドメインのSSL化について教えてくださいね♪

おやすみなさいv-222

2017/10/15 (Sun) 23:17

ぼっちん  

ミーさんへ

おはようございます ^^

今度は独自ドメインのSSL化について教えてくださいね♪
あっ そうでしたねぇ、ミーさんは独自ドメインでしたよね~。
なんか思ってたより、FC2運営の独自ドメインのSSL化が遅れてますよねぇ、もっと早くシステム組めるだろうって思ってたんですけど。
まあ、確かに大変な作業なんですけど。

ミーさんのブログの「FC2ブログランキング」のサービスは、まだそれ自体がSSL化されてない変な話になってるんですよ(爆)
ですからミーさんが「SSL設定」のスイッチを操作する時点でもまだサービス自体がSSL化になってなかったら、しばらくはランキングバナーを外してSSLをスタートさせるか、逆にSSL化になるまでブログのSSL化を待つかってことになりますけどね~ (^_^; アハハ…

2017/10/16 (Mon) 07:24

ミー  

お世話になります。

やっぱりそうなんですよね(-"-;A ...アセアセ
FC2さんの独自ドメインのSSL化の案内を待っているんですけど
なかなか対応が遅いですね。
鍵付きアドレスバーになっているぼっちんさんのブログが羨ましいです(^-^)
ところで、FC2のランキングバナーを外せばSSL化を先走ってスタートさせることができるのですか?
ランキングバナーを外すのも今まで積み上げてきたものがなくなるような気がして抵抗があるし...
またいいアドバイスがあったらお願いします♪

2017/10/17 (Tue) 00:09

ぼっちん  

ミーさんへ

ミーさん、おはようございます ^^

鍵付きアドレスバーになっているぼっちんさんのブログが羨ましいです(^-^)
うんうん(^-^) ミーさんのそのお気持ち、ほんとに良く解りますよぉ。
私だって、FC2ブログがSSLスタートする前には、他のブログサービスなんかで既に鍵付きになってるのを見てて「良いなぁ、羨ましいじゃん!」なんて羨望の目で見てましたからねぇ (^_^; アハハ…
まあ、今のところは他人よりも先行していると一種のステータスみたいな感じになりますしね(爆)

ところで、FC2のランキングバナーを外せばSSL化を先走ってスタートさせることができるのですか?
いえいえ、いくら何でも(笑)そういう方法はありません、残念ながら(笑)

ランキングバナーを外すのも今まで積み上げてきたものがなくなるような気がして抵抗があるし...
そうそう、そこが悩ましいところではありますよね。
私は元々ランキングってまったく興味ないもんだから登録してなかったんですけど、とりあえずはつい先日14日に「ブログ村」に登録して「どんな感じになるんだろうねぇ?」って様子見でその推移を観察しているところなんですけどね(笑)
ランキングシステムの様子が分かれば「ブログ村」もずっと登録しているつもりはないんですけどね (^^ゞポリポリ
どこのランキングシステムでも不正な方法が横行しているような話も聞きますし、そういう傾向も観察というか、解析出来たらしてみたい気でもありますし(爆)
-----------------
● コメントに不足がありましたから追記しますね~ (^^ゞポリポリ
FC2ブログランキングなんですけどね、そのバナー画像を一旦パソコン内に保存して「ファイルアップロード」からアップロードしてあげて、そのパナー画像のURLで貼り付ければとりあえずはSSL化の邪魔にはなりませんし、ランキングの実績にも影響はありませんからね。
当然ランキング用の「ID」はキチンといままでのものにする必要はあります。
-----------------

またいいアドバイスがあったらお願いします♪
(笑)もしかしてミーさんも「Akira風ブログカード」の利用もお考え中?(笑)
なんかそんな気もしますけど~ (笑)

2017/10/17 (Tue) 07:37

mama  

おはヾ(^∇^)おはよーございまーす♪

昨夜は、早速のご指導 ありがとうございましたm(_ _)m
昨夜のうちに修正することが出来ました

Akiraさんのブログカードが導入出来た時点で、すぐに報告に来なくちゃならなかったのに
報告が遅れてゴメンナサイ<(_ _)> ぼっちんさんの記事まで修正させてしまいましたね(^-^;

こちらのコメント欄の会話で、ファビコンの件をお話しされてますよね~
イイナァ~☆ 私も興味津々なんだけど、イマイチ理解できてなくて・・・
今度、ファビコンの記事書いて頂けたら嬉しいです(*^ー^*)

2017/10/17 (Tue) 09:43

ぼっちん  

mamaさんへ

mamaさん、おはようございま~す ^^

昨夜のうちに修正することが出来ました
いやいや、あんな簡単な端折ったコメントだけで、すぐにパパパっと完璧に対処なさったmamaさんにびっくりしちゃいましたよ(笑)
やっぱりmamaさんってただ者じゃないですねぇ、そのスキルは素晴らしいです ヽ(^^ ) ヨシヨシ

報告が遅れてゴメンナサイ<(_ _)> ぼっちんさんの記事まで修正させてしまいましたね(^-^;
いえいえ(笑)記事修正は実際にそぐわない部分を訂正したんですから、mamaさんに非はまったくないんです(笑)
ほんとはもっと記事を丁寧に書くべき部分も見つかって、これからもっと修正を加えるところなんですよ~ (^_^; アハハ…
これは、mamaさんの「おかげ」で修正出来る部分でして、私も嬉しいんです(笑)
何処を修正するのかはヒミチュ(爆)

今度、ファビコンの記事書いて頂けたら嬉しいです(*^ー^*)
いやぁ、私がその記事を書くまでもなくて、mamaさんが『ファビコンってなに?』ってググったら、直ぐに出来ちゃうと思いますよ~(笑)
ただ、FC2ブログの「ファイルアップロード」機能は、いちどアップロードした「同名ファイル名」を容易には更新出来ないから、一番最初にアップロードする時の「favicon.ico」用アイコンは確実なものを用意してアップロードさせることが大切です。
画像作りを失敗などして再度アップロードしようとすると、基本的な「favicon.ico」というファイル名が別のファイル名に変わってしまって、キチンとファビコンとしての表示をさせるのに苦労するようになってしまうくらい繊細な機能なんです (^_^; アハハ…
なかなか表示出来なくて、どつぼにはまってしまうことがありますからね~(爆)
それでけっこう苦労する人が多いのも事実です (^_^; アハハ…

2017/10/17 (Tue) 10:03

mama  

ありがとうございます💕

ぼっちんさーん 素早いご指導、ありがとうございますm(_ _)m

ブログカードのセンタリング表示、直せました(;´▽`A``
理解したつもりでいたのに・・・全然でした
いつも助けて頂き、感謝してます💕

2017/10/21 (Sat) 22:38

ぼっちん  

mamaさんへ

mamaさん、こんばんは ^^

ブログカードのセンタリング表示、直せました(;´▽`A``
ハーイ(^O^")/ 見させてもらいましたよ~♪
オリジナルのグラディエーション背景もなさってて、ナイスですね~ d(-_^)good!!

いつも助けて頂き、感謝してます
ハーイ(^O^")/ お安いご用です(笑)
困ったら頼ってね~ (〃^▽^〃)oわはははっ♪

2017/10/21 (Sat) 22:47

ジュレ  

はじめまして

おはようございます。

はじめまして♪
きららとジュレのブログと申します。

わたしのブログはFC2ブログではありませんが、
mamaさんのご紹介でこちらのセロテープの
Webテクニックをお借りいたしました。
事後報告をお許しくださいませ。
今後ともよろしくお願い致します。

2017/10/22 (Sun) 05:27

ぼっちん  

ジュレさんへ

ジュレさん、おはようございます はじめまして~ ^^

ジュレさんのお名前はmamaさんのブログで拝見しておりまして、何度かブログも覗かせて戴いてたんですよ~(笑)
で、カスタマイズなさったブログカードも拝見しておりました ^^
背景画像も挿入してのアイデアもd(-_^)good!!ですね~。

> 事後報告をお許しくださいませ。

いえいえ、こちらこそわざわざのご報告恐縮でございます。
カードリンクまで張ってくださってどうもありがとうございます m(_ _)m
こちらこそよろしくお願い致します♪

2017/10/22 (Sun) 07:38

mochi  

はじめまして勉強させてもらいました。

はじめまして。ぼっちんさん。

自分のブログにもブログカードを取り入れようと思い、
探しているうちに、ぼっちんさんのサイトに辿りつきました。

とても素敵なブログカードにカスタマイズされていたので、
事後報告になってしまいましたが、
僕のブログにも利用させていただきました。
ありがとうございます。

ぼっちんさんのブログカード記事を、僕のブログで紹介させていただきたいと思っているのですが、よろしいでしょうか?

CSSはあまり理解していないのですが、いろいろ弄っているうちに、
引用ブログカードはakiraさんの元スタイルシート同様に、
以下のカスタマイズ用引用CSSコードを書き加えることで、
背景色をつけても引用マークが消えるようになりました。
/* 引用 */
.blogcard-gr blockquote {
margin: 0;
border: 0;
padding: 0;
position: static;
background-color: transparent;
}
.blogcard-gr blockquote:before,
.blogcard-gr blockquote:after {
content: none;
}

2017/10/31 (Tue) 20:28

ぼっちん  

mochiさんへ

mochiさん、初めまして こんばんは~ ^^

あっ mochiさん、最近弊ブログをよく覗いてくださってましたね~ どうもありがとうございます ^^
私もブログの足跡機能からmochiさんブログを拝見させて戴いておりました (^_^)ニコニコ 

『Akira風ブログカード』記事、参考にしてくださったご様子でありがとうございます m(_ _)m

ぼっちんさんのブログカード記事を、僕のブログで紹介させていただきたいと思っているのですが、よろしいでしょうか?
あららら、なんとも過分なお申し出をありがとうございます。
こんなブログでもよろしいんでしょうか? (^^;; アセ
基本的にはまったくのリンクフリーのつもりですから、どうぞご自由にしてくださいね~♪

引用ブログカードはakiraさんの元スタイルシート同様に、
以下のカスタマイズ用引用CSSコードを書き加えることで、
背景色をつけても引用マークが消えるようになりました。

あっ\(◎o◎)/! なるほどですねぇ、その手がありましたか(笑)
いやぁ、とっても素晴らしいアイデアを戴いてしまって恐縮でございます (^_^)ニコニコ 
是非に使わせて戴きます、どうもありがとうございます ^^

2017/10/31 (Tue) 20:43

みっくす  

・・・質問!が~

ぼっちんさん、現在、カラーバージョンできました♪
でも追記にあるように、引用ブログカードだと引用符が囲むように2個(左右)
出てきてしまいます。(縦線は出てきません)

ブログカードと、引用ブログカードでカラーバージョンの時の使用の仕方をググっても分からず。
人様の記事は引用版を使用した方が良いんでしたよね。でもカラーバージョンにしたい時はブログカード版で
するって事でしょうか?

あれっ、でもやってみたけど引用符がついて同じように出てきました。
何か・・・理解できていないって事のようです。

教えて頂けるとありがたいです♪

2017/11/01 (Wed) 17:43

ぼっちん  

みっくすさんへ

みっくすさん、あのですね(笑)

でも追記にあるように、引用ブログカードだと引用符が囲むように2個(左右)
出てきてしまいます。(縦線は出てきません)

えっ?
因みにみっくすさんの『「ブログカード」を手に入れて、リンク先の紹介がグッとオシャレに見やすくなった♪①』の記事では、よつばさん記事もAkiraさん記事も、キチンと引用版で書かれてますよ。
で、引用符も見えてませんけど ヽ(^^ ) ヨシヨシ

記事は「つづく」で終わってるままだから、その問題となってる様子が見られないんですけど (^^ゞポリポリ
「現物」を見ないことには、みっくすさんがどんな設定やコードの書き方をしてるのか、私からは見えませんから原因究明が出来ないんですけど ^^

とりあえずは、他人の記事を引用したい場合には、カラー化はしないでAkiraさんの元々の設定のCSSそのままで「引用版ブログカード」のブックマークレットで取得したそのままで記事欄に貼ってください。

ほんとはカラー背景化しても「引用符」は見えなくする方法は、いろいろとあるんです(笑)
でもそれはググっても、まあ、見つけられない情報でしょう (^_^; アハハ…
それは次の段階の記事にしようと思ってるんですけどね~、皆さんがブログカード表示をなんなく問題なく扱えるようになってからと言うことで (^_^)ニコニコ

2017/11/01 (Wed) 18:25

みっくす  

なるほど!

ぼっちんさん、さっそくのお返事有難うございます♪

ぼっちんさんの記事にある、カラーバージョンが引用符が無いのでやり方が
違うのかと、頭の中が????でいっぱいでしたがw

それは~次の段階だったんですね♪なるほど!ですw
そのカラーバージョンは、③の記事を作成中なので、それで載せようかと
思ってました。引用符付きを解消するには~④につづきそうです♪

本当に有難うございました。ぼっちんさんみたいなロボット君が一家に一台
欲しいです♪

お騒がせしました★

2017/11/01 (Wed) 19:20

ぼっちん  

みっくすさんへ

ハーイ(^O^")/

ミックスさん、ご理解戴けたようで(^。^;)ホッとしました(笑)
考えすぎると頭がこんがらがって来ちゃいますから、シンプルに行きましょう ヽ(^^ ) ヨシヨシ
まだ、みっくすさんよりもっと学習が進んでない方もおります(笑)から、もうちょっとだけお時間くださいね~ m(_ _)m

2017/11/01 (Wed) 19:29

-  

管理人のみ閲覧できます

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

2018/04/08 (Sun) 14:58
ぼっちん

ぼっちん  

To 鍵コメさん

鍵コメさん、はじめまして ^^

①ブログカードの縦のサイズは指定できるのでしょうか?
②記事の表示を3行くらいまでと指定できるのでしょうか?


ご質問のブログカードの件なんですが、いま鍵コメさんのテンプレートの「スタイルシート編集」欄に貼ってある内容をちょこっと修正してあげるだけで見映えがよくなりますよ。
現状の設定だと

/* カード全体像 */ ← この括りの中で
width: 95%;

と設定されている部分がありますよね、この意味はご利用テンプレートの「記事欄の横幅の95%」でブログカードを表示する設定になっているんです。
ですから、記事にブログカードを貼り付けると、横にビロ~ンと長く表示されてしまうんです。
ですからその部分を

width: 600px;

と設定してあげると、ブログカードの横幅が600pxで表示されますから、その中の抜粋記事の文字列も自動的にもっと行数が縦に増える形になるんです。

で、もしブログカード内の文字数が多すぎると感じるようでしたら、記事欄にブログカードのコードを貼った時に書かれている抜粋記事後部をもっと短く修正してあげれば良いんです ^^

それでお望みのようになると思います、お試し下さいね~♪

2018/04/08 (Sun) 16:48

-  

管理人のみ閲覧できます

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

2018/04/08 (Sun) 18:40
ぼっちん

ぼっちん  

To 鍵コメさん

ハーイ(^O^")/ お試し下さいね~ ^^
そして、結果をお知らせ戴けるようお願いします。

2018/04/08 (Sun) 20:30

-  

管理人のみ閲覧できます

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

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

ぼっちん  

To 鍵コメさん

お望みのようになったご様子で良かったですね~ うんうん(^-^)

この「Akira風ブログカード」は、CSSをカスタマイズすることでいろいろに装飾したり出来ますから、楽しみながらチャレンジしてみて下さいね~♪

2018/04/08 (Sun) 22:20

LEAVE A REPLY