ブロガーさん必見。記事のシェアなどで使えるブックマークレットを作りました。
ブログなどで他のサイトを紹介するときに面倒くさいからって単純にタイトルとリンクだけで済ませちゃいがちです。
でもこのブックマークレットなら、紹介したいサイトを開いてポチっとすればあら不思議。
貼り付けるソースコードがピロっとでてきます。
出てきたコードをコピーしてペッと貼って記事完成。忙しいブロガーさんでもパッと見やすいブログカードがすぐにできちゃいますよ。
吐き出されるコードは２種類です。
<div class="ogp_card clearfix"><img src="ogp設定の画像URL" alt="サイト名" width="100" height="100"><p class="title"><a href="サイトURL" >サイトタイトル</a></p>サイトのディスクリプション…<p class="copy"><a href="サイトURL" >サイト名</a></p><p class="card_bt"><a class="card_link" href="サイトURL" >ホームページを見る</a></p></div><div class="html_card"><p class="title"><a class="card_link" href="サイトURL" >サイトタイトル</a></p>サイトのディスクリプション …<p class="copy"><a class="card_link" href="サイトURL" >サイトURL</a></p><p class="card_bt"><a class="card_link" href="サイトURL" >ホームページを見る</a></p></div>下記のステップでブラウザのツールバーやお気に入りに追加してご利用ください。
フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。 わかりやすくていい感じのセレクトボックスを集めました。….html_card,
.ogp_card {
border: 1px dotted #cccccc;
border-radius: 6px;
padding: .5em;
}
.html_card p,
.ogp_card p {
margin: .5em 0 .5em 0;
line-height: 1.2;
}
.html_card a,
.ogp_card a {
text-decoration: none;
margin: 0;
padding: 0;
}
.ogp_card img {
float: left;
margin: .5em 1em .5em .5em;
border-radius: 6px;
width: 100px;
height: auto;
}
.ogp_card p.title {
margin-left: 120px;
}
.ogp_card p.copy {
margin-left: 0px;
}
.ogp_card p.card_bt {
margin-left: calc(120px + .3em);
}
.html_card p.card_bt,
.ogp_card p.card_bt {
text-align: right;
margin-top: -10px;
}
.html_card p.title a,
.ogp_card p.title a {
font-size: 1.1rem;
font-weight: bold;
color: #da3c41;
}
.html_card p.copy a,
.ogp_card p.copy a {
font-size: .8rem;
margin-bottom: 0em;
text-decoration: underline;
color: #666666;
display: block;
}
.html_card p.copy a::before,
.ogp_card p.copy a::before {
font-size: .9rem;
font-family: 'FontAwesome';
content: '\f0c1';
color: #da3c41;
display: inline-block;
width: 1.2rem;
}
.html_card p.card_bt a,
.ogp_card p.card_bt a {
font-size: .9rem;
background: #da3c41;
color: #ffffff;
padding: .5em;
border-radius: 4px;
box-shadow:0px 0px 3px 0px #cccccc;
}
.html_card p.card_bt a::before,
.ogp_card p.card_bt a::before {
font-size: 1rem;
font-family: 'FontAwesome';
content: '\f14c';
display: inline-block;
width: 1rem;
padding-right: .5rem;
}
.html_card p.card_bt a:hover,
.ogp_card p.card_bt a:hover {
box-shadow:0px 0px 6px 0px #801b1e inset;
}javascript:(function(f,s){s=document.createElement('script');s.src='//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';s.onload=function(){f(jQuery.noConflict(true))};document.body.appendChild(s)})(function($){var c=[];var r;c.u=document.URL;c.t=$('title').text();if($('meta[name=description]').attr('content')){c.d=$('meta[name=description]').attr('content')}else if($('meta[name=Description]').attr('content')){c.d=$('meta[name=Description]').attr('content')}else{c.d=' '};c.i=$('meta[property="og:image"]').attr('content');if(c.i!=null&&c.i!=""){if(c.i.substr(0,5)=="https"||c.i.substr(0,2)=="//"){}else{c.i=""}}c.n=$('meta[property="og:site_name"]').attr('content');c.td=document.domain;if(c.n!=null){c.np='<p>'+c.n+'</p>'}else{c.np=''};if(c.i!=null&&c.i!=""){r='<div class="ogp_card clearfix"><img src="'+c.i+'" alt="'+c.n+'" width="100" height="100" /><p class="title"><a href="'+c.u+'">'+c.t+'</a></p>'+c.d+'…<p class="copy"><a href="'+c.u+'">'+c.td+'</a></p><p class="card_bt"><a class="card_link" href="'+c.u+'" >ホームページを見る</a></p></div>'}else{r='<div class="html_card"><p class="title"><a class="card_link" href="'+c.u+'" >'+c.t+'</a></p>'+c.d+'…<p class="copy"><a class="card_link" href="'+c.u+'" >'+c.td+'</a></p><p class="card_bt"><a class="card_link" href="'+c.u+'" >ホームページを見る</a></p></div>'};$('body').prepend('<textarea style="width:90%;height:200px;z-index:2147483647;position:fixed;top:0;color:#000000;">'+r+'.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.html_card,
.ogp_card {
border: 1px solid rgba(27, 37, 56, 1);
border-radius: 6px;
padding: .2em .5em .5em .5em;
position: relative;
}
.html_card::before,
.ogp_card::before {
position: absolute;
top: -20px;
left: 1em;
content: 'Reference';
font-size: .7rem;
color: #ffffff;
background: rgba(27, 37, 56, 1);
border-radius: 6px 6px 0px 0px;
padding: .1em .5em;
}
.html_card p,
.ogp_card p {
margin: .5em 0 .5em 0;
line-height: 1.6em;
}
.html_card a,
.ogp_card a {
text-decoration: none;
margin: 0;
padding: 0;
}
.ogp_card img {
float: right;
margin: .5em .5em .5em 1em;
border-radius: 6px;
width: 100px;
height: auto;
}
.html_card p.title,
.ogp_card p.title {
position: relative;
padding: .3em .3em .3em .75em;
border-left: 6px solid rgba(0, 188, 212, 1);
}
.html_card p.title::before,
.ogp_card p.title::before {
position: absolute;
content: '';
left: -6px;
bottom: 0;
width: 6px;
height: 50%;
background-color: rgba(27, 37, 56, 1);
}
.html_card p.title a,
.ogp_card p.title a {
font-size: 1.1rem;
font-weight: bold;
color: rgba(27, 37, 56, 1);
padding-bottom: .1em;
border-bottom: 1px dotted rgba(0, 188, 212, 1);
transition: all .3s;
}
.html_card p.copy a,
.ogp_card p.copy a {
font-size: .8rem;
margin-bottom: 0em;
text-decoration: underline;
color: #666666;
display: block;
}
.html_card p.copy a::before,
.ogp_card p.copy a::before {
font-size: .9rem;
font-family: 'FontAwesome';
content: '\f0c1';
color: rgba(0, 188, 212, 1);
display: inline-block;
width: 1.2rem;
}
.ogp_card p.card_bt {
margin: 0px auto;
margin-top: -20px;
float: right;
}
.html_card p {
position: relative;
}
.html_card p.card_bt {
position: absolute;
bottom: 0;
right: .5em;
}
.html_card p.card_bt a,
.ogp_card p.card_bt a {
display: block;
position: relative;
width: 160px;
padding: 0.2em 0.8em;
text-align: center;
text-decoration: none;
color: #fff;
border:1px solid rgba(0, 188, 212, 1);
background: rgba(0, 188, 212, 1);
overflow: hidden;
z-index: 1;
}
.html_card p.card_bt a:after,
.ogp_card p.card_bt a:after {
content:"";
position: absolute;
top: 50%;
left: 50%;
height: 0;
width: 100%;
background : #fff;
opacity: 0;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transition: 0.3s;
z-index: -1;
}
.html_card p.card_bt a:hover,
.ogp_card p.card_bt a:hover {
color: rgba(0, 188, 212, 1);
}
.html_card p.card_bt a:hover:after,
.ogp_card p.card_bt a:hover:after {
height: 350%;
opacity: 1;
}
.html_card p.card_bt a:active:after,
.ogp_card p.card_bt a:active:after {
height: 450%;
opacity: 1;
}javascript:(function(f,s){s=document.createElement('script');s.src='//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';s.onload=function(){f(jQuery.noConflict(true))};document.body.appendChild(s)})(function($){var c=[];var r;c.u=document.URL;c.t=$('title').text();if($('meta[name=description]').attr('content')){c.d=$('meta[name=description]').attr('content')}else if($('meta[name=Description]').attr('content')){c.d=$('meta[name=Description]').attr('content')}else{c.d=' '};c.i=$('meta[property="og:image"]').attr('content');if(c.i!=null&&c.i!=""){if(c.i.substr(0,5)=="https"||c.i.substr(0,2)=="//"){}else{c.i=""}}c.n=$('meta[property="og:site_name"]').attr('content');c.td=document.domain;if(c.n!=null){c.np='<p>'+c.n+'</p>'}else{c.np=''};if(c.i!=null&&c.i!=""){r='<div class="ogp_card clearfix"><img src="'+c.i+'" alt="'+c.n+'" width="100" height="100" /><p class="title"><a href="'+c.u+'">'+c.t+'</a></p>'+c.d+'…<p class="copy"><a href="'+c.u+'">'+c.td+'</a></p><p class="card_bt"><a class="card_link" href="'+c.u+'" >ホームページを見る</a></p></div>'}else{r='<div class="html_card"><p class="title"><a class="card_link" href="'+c.u+'" >'+c.t+'</a></p>'+c.d+'…<p class="copy"><a class="card_link" href="'+c.u+'" >'+c.td+'</a></p><p class="card_bt"><a class="card_link" href="'+c.u+'" >ホームページを見る</a></p></div>'};$('body').prepend('<textarea style="width:90%;height:200px;z-index:2147483647;position:fixed;top:0;color:#000000;">'+r+'
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info