[パーツ]ブログカード 画像左のシンプルなブログカード

CSS HTML JS
 
 

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

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

browser:  65 11 20 
ニャン易度 

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

copypet.jp

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

More Info

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