add sharebutton

README.md

@@ -17,6 +17,7 @@ This is the grid based theme for Hugo.
 * Responsive design
 * Google Analytics
 * Thumbnail
+* Share button
 * Structured data(Article and Breadcrumb)
 * Twitter cards
 * OGP

layouts/_default/summary.html

@@ -19,6 +19,8 @@ <h1 class="title">{{ .Title }}</h1>
   <footer class="article-footer">
     <div class="content-inner">
 
+      {{ partial "share.html" . }}
+
       <nav class="p-crumb">
         <ol>
           <li><a href="{{ .Site.BaseURL }}"><i class="fa fa-home" aria-hidden="true"></i></a></li>

layouts/partials/share.html

@@ -0,0 +1,9 @@
+<aside class="p-share">
+  <div class="share-inner">
+    <a href="http://b.hatena.ne.jp/add?mode=confirm&url={{ .Permalink }}&title={{ .Title }}" title="はてなブックマーク" class="ht" target="_blank" rel="nofollow"></a>
+    <a href="http://www.facebook.com/sharer.php?u={{ .Permalink }}&t={{ .Title }}" title="Facebookでシェア" class="fb" target="_blank" rel="nofollow"></a>
+    <a href="http://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}&tw_p=tweetbutton" title="Twitterでシェア" class="tw" target="_blank" rel="nofollow"></a>
+    <a href="https://plus.google.com/share?url={{ .Permalink }}" title="Google Plusでシェア" class="gp" target="_blank" rel="nofollow"></a>
+    <a href="http://line.me/R/msg/text/?{{ .Title }} {{ .Permalink }}" title="LINEでシェア" class="ln" target="_blank" rel="nofollow"></a>
+  </div>
+</aside>

layouts/partials/styles.css

@@ -153,6 +153,41 @@ section.article-footer>header {
   margin-bottom: 0;
 }
 
+/* Parts:share */
+.p-share {
+  min-width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.p-share .share-inner {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  border-spacing: .25rem;
+}
+
+.p-share a {
+  display: table-cell;
+  text-align: center;
+  font-weight: 700;
+  font-size: .7rem;
+  padding: .5rem 0;
+  color: #fff;
+  border-radius: 5px;
+}
+
+.p-share a.ht { background-color: #00a4de; border-bottom: 2px solid #0083b1; }
+.p-share a.fb { background-color: #3b5998; border-bottom: 2px solid #2f4779; }
+.p-share a.tw { background-color: #1da1f2; border-bottom: 2px solid #1780c1; }
+.p-share a.gp { background-color: #dd4b39; border-bottom: 2px solid #b03c2d; }
+.p-share a.ln { background-color: #00c300; border-bottom: 2px solid #009c00; }
+
+.p-share a.ht::before { content: 'Hatena'; }
+.p-share a.fb::before { content: 'Facebook'; }
+.p-share a.tw::before { content: 'Twitter'; }
+.p-share a.gp::before { content: 'Google+'; }
+.p-share a.ln::before { content: 'LINE'; }
+
 /* Parts:logo */
 .h-logo {
   font-family: 'Montserrat', sans-serif;
@@ -240,6 +275,7 @@ article .summary {
 
 article.single .thumb {
   height: 18rem;
+  margin-bottom: 1rem;
 }
 
 @media (max-width:  768px)  {