ブロガーさん必見!!簡単にできるブックマークレット&ブログカードデザイン

CSS HTML JS
 
 

ブロガーさん必見。記事のシェアなどで使えるブックマークレットを作りました。
ブログなどで他のサイトを紹介するときに面倒くさいからって単純にタイトルとリンクだけで済ませちゃいがちです。
でもこのブックマークレットなら、紹介したいサイトを開いてポチっとすればあら不思議。
貼り付けるソースコードがピロっとでてきます。
出てきたコードをコピーしてペッと貼って記事完成。忙しいブロガーさんでもパッと見やすいブログカードがすぐにできちゃいますよ。

吐き出されるコードは2種類です。

紹介したいサイトにogpの設定がある場合

<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>

紹介したいサイトにogpの設定がない場合

<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>

下記のステップでブラウザのツールバーやお気に入りに追加してご利用ください。

1:なんのサイトでもいいのでブックマークをする(Mac:⌘+D)
2:javascriptをコピーする
3:ブックマークの編集でURLが入っているところにコピーしたjavascriptを貼り付ける
browser:  65 11 20 

ブログカード[2種]

javascriptは同一のものです。ブラウザのツールバーやお気に入りに追加してご利用ください。

画像左のシンプルなブログカード

ニャン易度

ogpの設定がある場合

copypet.jp

コピペでできる!cssとhtmlのみでフォームのセレクトボックスをいい感じにするデザイン8選 | copypet.jp

フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。 わかりやすくていい感じのセレクトボックスを集めました。…

copypet.jp

ホームページを見る

ogpの設定がない場合

コピペでできる!cssとhtmlのみでフォームのセレクトボックスをいい感じにするデザイン8選 | copypet.jp

フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。 わかりやすくていい感じのセレクトボックスを集めました。 …

copypet.jp

ホームページを見る

.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+'

画像右のシンプルなブログカード

ニャン易度

ogpの設定がある場合

copypet.jp

コピペでできる!cssとhtmlのみでフォームのセレクトボックスをいい感じにするデザイン8選 | copypet.jp

フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。 わかりやすくていい感じのセレクトボックスを集めました。…

copypet.jp

ホームページを見る

ogpの設定がない場合

コピペでできる!cssとhtmlのみでフォームのセレクトボックスをいい感じにするデザイン8選 | copypet.jp

フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。 わかりやすくていい感じのセレクトボックスを集めました。 …

copypet.jp

ホームページを見る

.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+'

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?