数日前にブログカードが使いたくなって調べた結果をブログに書きました。
そのときはEmbedlyを使うことにしたのですが、記事の投稿後すぐに表示の遅さが気になりだす。他のブログカードに変えようか…そう思っていたときに何度もお世話になっているふじやん。さんから有益な情報が!
なんとふじやん。さんのサイトにも僕が探していたブログカードの情報が掲載されていた…。しかも僕が探していたブログカードの条件にほぼ当てはまるもの。なんという灯台下暗し感。そのページは以下のサイトです。
記事内にはブログカードジェネレーターを作成した本家のサイトへのリンクもありました。こっそり聞けばふじやん。さんが改造したバージョンも教えていただけるようです。
色々見ていると凄く悩みます。まるっきり手の出しようがないなら諦めもつくのですが、なんとなく自分の乏しい知識でも手を出せそうな感じがしてコードと睨めっこが始まりました。
最初はジェネレーターのコードを少し書き換えて自分の好みのブログカードを作成しようとしました。しかし書き換え終わったところで気づく。どうもブックマークレットが編集可能らしいので、そこに手を加えればもう少し簡単にコードがコピペできるのでは?と。
さっそく前回の記事で紹介していた下記サイトのAkiraさんの引用ブログカードのブックマークレットに手を加えてみました。
SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...
前回は引用タグを使ったときに空間を上手く詰めることができなかったのですが、なんとかなりました。上記のブログカードは下記のブックマークレットの結果です。
javascript:(function(){(function(d,f,s){s=d.createElement("script");s.src="//j.mp/1bPoAXq";s.onload=function(){f(jQuery.noConflict(!0))};d.body.appendChild(s)})(document,function($){var obj = [];obj.title = $('meta[property="og:title"]').attr('content');obj.img = $('meta[property="og:image"]').attr('content');obj.desp = $('meta[property="og:description"]').attr('content');obj.url = document.URL;obj.domain = location.host;var cardText = '<div class="blogcard-text"><p class="blogcard-title"><a href="'+obj.url+'" target="_blank">'+obj.title+'</a></p><p class="blogcard-description">'+obj.desp+'</p></div>';var cardFooter = '<div class="blogcard-footer"><a href="'+obj.url+'" target="_blank"><img src="https://www.google.com/s2/favicons?domain='+obj.url+'" alt="">'+obj.domain+'</a></div>';if(obj.img == undefined){var card = '<div class="blogcard blogcard-hasnoimage"><div class="blogcard-content">'+cardText+'</div>'+cardFooter+'</div>';}else{var cardImg = '<div class="blogcard-image"><div class="blogcard-image-wrapper"><a href="'+obj.url+'" target="_blank"><img src="https://images.weserv.nl/?&url='+obj.img+'" alt=""></a></div></div>';var card = '<div class="blogcard-blockquote"><blockquote cite="'+obj.url+'" style="margin: 1em 0px;"><div class="blogcard"><div class="blogcard-content">'+cardImg+cardText+'</div>'+cardFooter+'</div></blockquote></div>';}prompt('作成されたHTMLをコピーしてください', card);})})();
引用タグに対してdisplay:noneで大きなダブルクォーテーションを消したあとにmargin: 1em 0pxで詰められました。あとはblogcardにCSSで横幅を指定しておくとスマホ表示でも横幅いっぱいに表示が可能に。Images.weserv.nlを使わせていただくことにより直リンクを避けられ心の平穏も保たれます。
続いて僕が考えたのはAkiraさんのブログカードとふじやん。さんのブログカードを合わせることです。CSSがすでに用意されているのだから二つの良いとこどりをすればいいじゃないか!と考え再びブックマークレットの変更作業を始めました。
これが難航しました。ブックマークレットの変更作業自体はすぐにできるようになりましたが、コードの調整に苦労しました。同じコードを貼り付けているはずなのに表示される結果が違う…。なんでやねん!と心の中で叫びながら間違い探しをしていました。
違いますよ?間違い探しをして遊んでいたわけではありません。コピペしながら少しずつ違う箇所を探しました。
コードの変更は知識がないので少し変更しては結果を確認するトライ&エラーです。時間がかかりました。途中でやる必要あったかな?と自問自答も。
これだ!というデザインが頭の中にないのも時間がかかる理由です。まぁブログカードの存在も知ったばかりですしね。優柔不断なので選択肢があるとなかなか決められない…。
二日ほどコードと睨めっこしていたのでブログ記事のストックが切れてしまいました。一日一回投稿のマイルールを守るためにも一旦作業はストップです。
ちなみに変更した引用ブログカードのブックマークレットはこちら。
javascript:(function(){(function(d,f,s){s=d.createElement("script");s.src="//j.mp/1bPoAXq";s.onload=function(){f(jQuery.noConflict(!0))};d.body.appendChild(s)})(document,function($){var obj = [];obj.title = $('meta[property="og:title"]').attr('content');obj.img = $('meta[property="og:image"]').attr('content');obj.sitename = $('meta[property="og:site_name"]').attr('content');obj.desp = $('meta[property="og:description"]').attr('content');obj.url = document.URL;obj.domain = location.host;var cardText = '<div class="blogcard-text"><p class="blogcard-title">'+obj.title+'</p><p class="blogcard-description">'+obj.desp+'</p></div>';var cardsitename = '<div class="blogcard-site"><img src="https://www.google.com/s2/favicons?domain='+obj.url+'"alt="">'+obj.sitename+'</div>';var cardFooter = '<div class="blogcard-url">'+obj.domain+'</div>';if(obj.img == undefined){var card = '<div class="blogcard">'+cardText+cardFooter+'</div>';}else{var cardImg = '<div class="blogcard-image"><div class="blogcard-image-wrapper"><img src="https://images.weserv.nl/?&url='+obj.img+'" alt=""></div></div>';var card = '<div class="blogcard-blockquote"><blockquote cite="'+obj.url+'" style="margin: 1em 0px;"><div class="blogcard"><a href="'+obj.url+'" rel="noopener" target="_blank" title="'+obj.title+'"><div class="blogcard-content">'+cardsitename+cardImg+cardText+'</div>'+cardFooter+'</a></div></blockquote></div>';}prompt('作成されたHTMLをコピーしてください', card);})})();
上記はAkiraさんのCSS使用を前提に変更を加えたものです。なのでCSSも追加したり削ったりと少し変更があるくらいです。一応CSSも下記に書いておきます。
.blogcard {
display: block;
width: 600px;
max-width: 100%;
margin:0 auto;
padding:5px 5px 5px 5px;
border-style:ridge;
border-radius:5px;
border: 1px solid rgba(173, 171, 171,0.5);
box-shadow:3px 3px 4px rgb(153, 153, 153);
background:rgb(255, 255, 255);
}
.blogcard a{
text-decoration: none;
}
/*マウスホバー時*/
.blogcard:hover {
background: #f0f0ff;
transition: .2s
}
/* float親要素 */
.blogcard-content {
margin-bottom: 5px;
overflow: hidden;
}
/* 画像 */
.blogcard-image {
display: inline-block;
float: right;
width: 120px;
height: 120px;
margin: 0 0 5px 5px; /* 画像を左に配置したい場合は 0 10px 5px 0 に変更 2/2 */
}
.blogcard-image-wrapper {
display: inline-block;
width: 120px; /* 画像の表示サイズ変更は数値をpxで変更 3/6 */
height: 120px; /* 画像の表示サイズ変更は数値をpxで変更 4/6 */
}
.blogcard-image-wrapper img {
width: 120px; /* 画像の表示サイズ変更は数値をpxで変更 5/6 */
height: 120px; /* 画像の表示サイズ変更は数値をpxで変更 6/6 */
object-fit: cover; /*好みでcontain、cover、fillを使い分け*/
object-position: center center;
}
/* タイトル */
.blogcard-title {
margin: 0 !important;
font-weight: bold;
font-size: 19px;
line-height: 1.4;
color: #333;
}
/*引用符非表示*/
.blogcard-blockquote blockquote::before,
.blogcard-blockquote blockquote::after{
display:none;
}
/* 記事概要 */
.blogcard-description {
font-weight: normal;
margin: 1em 0 !important;
font-size: 15px;
line-height: 1.5 !important;
color: #666;
}
/* フッター(サイトのドメイン) */
.blogcard-url {
display: block;
font-size: 13px;
font-weight: normal;
color: cornflowerblue;
line-height: 1.3em;
}
/*サイト名*/
.blogcard-site {
display: block;
font-weight: bold;
color: #333;
margin-bottom: .5em;
font-size: 15px;
text-transform: uppercase;/*サイト名を大文字変換*/
}
/*ファビコン*/
.blogcard-site img {
font-size: 16px;
padding-right: 5px;
vertical-align: middle;
}
こうして出来上がったブログカードで作成したのがページ上部に貼ってあるふじやん。さんのサイトへのブログカードです。
ちなみにふじやん。さんのコードを中心にブックマークレットやCSSをいじってみた結果が下記のブログカードです。
あまり変わらないですけれど微妙に違います。こちらはコードを削りすぎて表示がおかしくなったりと苦労しました。まだコードをいじりたかったですけれど記事が書けなくなるので今回はここまでですね。まぁ一旦作業をストップしたらまた再開するかは微妙ですけれど。
また使っているうちに問題がでてきたら考えよう。ちなみにこの記事を書き始めてから気づいたことが。
こちらもふじやん。さんから情報をいただいていたサイトなのですが、こちらのブログカードに手を加えた方が早かったのでは?と。まぁ二日前の僕では知識がなさすぎて気づけなかったのですけれど。二日前はブックマークレットを自分の知識で変更できるかも半信半疑で始めていましたから。
しかしサムネイルの画像の表示の仕方とか色々と変更できるところが多くて優柔不断な僕には荷が重い作業でした。ですが区切りのいいところまでは作業が終わって良かったです。そして色々いじってみて思う。元のままの方が良かった気もする…。
ちなみに今回の記事にはコードを貼り付けていますが、コードを貼る方法についてもなかなか上手くいかずに苦労しました。コードを貼り付ける機会なんてもうないだろうに…。
しばらくはのんびり記事を書こう…。
こんにちは。
返信削除試行錯誤しながら納得行くまでことんカスタマイズされてるようで、ほんと感心します(´▽`)
私も以前、ブックマークレット化やってみようかと思ったこともありましたけど、やっぱり自分的にはジェネレータの方が使い勝手が良いのでやめました(^^;
色々参考になることもあったので、ウチのカードの仕様もちょっと変更しました。
別に必要ないかなと思って外していた blockquote タグを復活させました(SEO的にもあった方がいいらしいので)。見た目は CSS の追記でなんとかなるもんなんですね。
ジェネレータや過去記事のカードも全て blockquote 付きに変更しました。
highlight.js の記事書くつもりだったけど、今日はこの作業で力尽きました(笑)
こんにちは^^
削除僕的にはブックマークレットの簡単コピペが魅力でした^^;つい楽な方を選んでしまいます。
一度設定したら個別に変更加えなくて済むようにしたいと思っています。
highlight.jsは行き違いですね。僕も昨日導入しました。デザイン変更したときに.minを消してしまったりと苦労しました…。ふじやん。さんは過去記事まで全部修正しているのが凄いです。前日もhighlight.jsの導入で書き換えていらしたみたいですし。睡眠は十分とってくださいね^^
本当に有益な情報をいただけて助かりましたm(__)m