Skip to content

Instantly share code, notes, and snippets.

@takapiece
takapiece / はてな用吹き出しのCSS
Last active May 25, 2018
はてな用吹き出しのCSS
View はてな用吹き出しのCSS
/*はてな用吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
@takapiece
takapiece / はてな画像の影CSS:Googleフォト
Last active May 29, 2018
はてな画像の影CSS:Googleフォト
View はてな画像の影CSS:Googleフォト
.magnifiable{
margin-top: 5px; /* 画像の上の余白*/
display: inline-block;
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向 下方向 ぼかし 広がり 色 */
}
@takapiece
takapiece / はてな画像に影を付ける
Created May 30, 2018
はてな画像に影を付ける
View はてな画像に影を付ける
.hatena-fotolife {
margin-top: 5px; /* 画像の上の余白*/
display: inline-block;
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向 下方向 ぼかし 広がり 色 */ }
@takapiece
takapiece / はてなヘッダ画像レスポンシブ
Created May 30, 2018
はてなヘッダ画像レスポンシブ
View はてなヘッダ画像レスポンシブ
@media (max-width: 480px){
#blog-title-inner,#title a{
height:100px!important;
}
#blog-title-inner {
background-size: contain!important; }
}
@takapiece
takapiece / はてなブログ記事文字サイズ_
Last active May 30, 2018
ヘッダ_タイトル下に記入
View はてなブログ記事文字サイズ_
<style type="text/css">
.entry-content { font-size:◯◯px; }
</style>
@takapiece
takapiece / はてなヘッダー画像の上下余白を0にする
Last active Aug 28, 2019
はてなヘッダー画像の上下余白を0にする
View はてなヘッダー画像の上下余白を0にする
/* はてなヘッダー画像の上下余白を0にする */
#blog-title {
margin: 0 auto;
padding: 0;
}
@takapiece
takapiece / はてなグローバルナビ「Minimalism」
Created Aug 28, 2019
はてなグローバルナビ「Minimalism」
View はてなグローバルナビ「Minimalism」
<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
<div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> TIPS</a></div>
<div class="menu"><a href="URL"><i class="fa fa-graduation-cap" aria-hidden="true"></i> STUDY</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench" aria-hidden="true"></i> DESIGN</a></div>
<div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
</div>
</nav>
@takapiece
takapiece / Font Awesome BootstrapCDN 4.7
Last active Aug 29, 2019
Font Awesome BootstrapCDN 4.7
View Font Awesome BootstrapCDN 4.7
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
@takapiece
takapiece / Font Awesome stylesheet 5.1
Created Aug 29, 2019
Font Awesome stylesheet 5.1
View Font Awesome stylesheet 5.1
<link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet">
@takapiece
takapiece / メディア工房 ナビゲーションメニュー
Last active Aug 30, 2019
メディア工房 ナビゲーションメニュー
View メディア工房 ナビゲーションメニュー
<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
<div class="menu"><a href="URL"><i class="far fa-id-card" aria-hidden="true"></i> ABOUT</a></div>
<div class="menu"><a href="URL"><i class="far fa-edit" aria-hidden="true"></i> 専門ブログ</a></div>
<div class="menu"><a href="URL"><i class="fab fa-wordpress" aria-hidden="true"></i> ワードプレス</a></div>
<div class="menu"><a href="URL"><i class="fas fa-tools" aria-hidden="true"></i> ツール</a></div>
<div class="menu"><a href="URL"><i class="fab fa-twitter-square" aria-hidden="true"></i> CONTACT</a></div>
</div>
</nav>