View メディア工房 ナビメニュー2019.8
| <nav id="gnav"> | |
| <div class="gnav-inner" id="menu-scroll"> | |
| <div class="menu"><a href="https://www.dreamweaver.work"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div> | |
| <div class="menu"><a href="https://www.dreamweaver.work/entry/first"><i class="far fa-id-card" aria-hidden="true"></i> ABOUT</a></div> | |
| <div class="menu"><a href="https://www.dreamweaver.work/archive/category/%E5%B0%82%E9%96%80%E3%83%96%E3%83%AD%E3%82%B0%E4%BD%9C%E3%82%8A"><i class="far fa-edit" aria-hidden="true"></i> 専門ブログ</a></div> | |
| <div class="menu"><a href="https://www.dreamweaver.work/archive/category/%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AC%E3%82%B9"><i class="fab fa-wordpress" aria-hidden="true"></i> ワードプレス</a></div> | |
| <div class="menu"><a href="https://www.dreamweaver.work/archive/category/%E3%83%84%E3%83%BC%E3%83%AB"><i class="fas fa-tools" aria-hidden="true"></i> ツール</a></div> | |
| <div class="menu"><a href="https://twitter.com/tobincyu"><i class="fab fa-twitter-square" aria-hidden="true"></i> CONT |
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> |
View Font Awesome stylesheet 5.1
| <link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet"> |
View Font Awesome BootstrapCDN 4.7
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> |
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> |
View はてなヘッダー画像の上下余白を0にする
| /* はてなヘッダー画像の上下余白を0にする */ | |
| #blog-title { | |
| margin: 0 auto; | |
| padding: 0; | |
| } |
View はてなブログ記事文字サイズ＿
| <style type="text/css"> | |
| .entry-content { font-size:◯◯px; } | |
| </style> |
View はてなヘッダ画像レスポンシブ
| @media (max-width: 480px){ | |
| #blog-title-inner,#title a{ | |
| height:100px!important; | |
| } | |
| #blog-title-inner { | |
| background-size: contain!important; } | |
| } |
View はてな画像に影を付ける
| .hatena-fotolife { | |
| margin-top: 5px; /* 画像の上の余白*/ | |
| display: inline-block; | |
| box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向 下方向 ぼかし 広がり 色 */ } |
View はてな画像の影CSS：Googleフォト
| .magnifiable{ | |
| margin-top: 5px; /* 画像の上の余白*/ | |
| display: inline-block; | |
| box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向 下方向 ぼかし 広がり 色 */ | |
| } |
NewerOlder