jekyllでshareボタンの付け方
share情報用のhtmlの作成
以下の場所にshare情報用のhtmlを配置します。
_includes/share-bar.html
<div id="share-bar">
<h4>Share this:</h4>
<div class="share-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Facebook" >
<i class="fa fa-facebook-official share-button"> facebook</i>
</a>
<a href="https://twitter.com/intent/tweet?text=jekyllでshareボタンの付け方&url=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Twitter" >
<i class="fa fa-twitter share-button"> twitter</i>
</a>
<a href="https://plus.google.com/share?url=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Google+" >
<i class="fa fa-google-plus share-button"> google</i>
</a>
<a href="http://pinterest.com/pin/create/button/?url=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Pinterest" >
<i class="fa fa-pinterest-p share-button"> pinterest</i>
</a>
<a href="http://www.tumblr.com/share/link?url=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Tumblr" >
<i class="fa fa-tumblr share-button"> tumblr</i>
</a>
<a href="http://www.reddit.com/submit?url=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Reddit" >
<i class="fa fa-reddit-alien share-button"> reddit</i>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html&title=jekyllでshareボタンの付け方&summary=&source=infefl"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on LinkedIn" >
<i class="fa fa-linkedin share-button"> linkedin</i>
</a>
<a href="mailto:?subject=jekyllでshareボタンの付け方&body=Check out this site https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
title="Share via Email" >
<i class="fa fa-envelope share-button"> email</i>
</a>
</div>
</div>
<style>
/* Share Bar */
#share-bar {
font-size: 20px;
}
/* Title */
#share-bar h4 {
margin-bottom: 10px;
font-weight: 500;
}
/* All buttons */
.share-buttons {
}
/* Each button */
.share-button {
margin: 0px;
margin-bottom: 10px;
margin-right: 3px;
border: 1px solid #D3D6D2;
padding: 5px 10px 5px 10px;
}
.share-button:hover {
opacity: 1;
color: #ffffff;
}
/* Facebook button */
.fa-facebook-official {
color: #3b5998;
}
.fa-facebook-official:hover {
background-color: #3b5998;
}
/* Twitter button */
.fa-twitter {
color: #55acee;
}
.fa-twitter:hover {
background-color: #55acee;
}
/* Google-PLus button */
.fa-google-plus {
color: #dd4b39;
}
.fa-google-plus:hover {
background-color: #dd4b39;
}
/* Pinterest button */
.fa-pinterest-p {
color: #cb2027;
}
.fa-pinterest-p:hover {
background-color: #cb2027;
}
/* Tumblr button */
.fa-tumblr {
color: #32506d;
}
.fa-tumblr:hover {
background-color: #32506d;
}
/* Reddit button */
.fa-reddit-alien {
color: #ff4500;
}
.fa-reddit-alien:hover {
background-color: #ff4500;
}
/* LinkedIn button */
.fa-linkedin {
color: #007bb5;
}
.fa-linkedin:hover {
background-color: #007bb5;
}
/* Email button */
.fa-envelope {
color: #444444;
}
.fa-envelope:hover {
background-color: #444444;
}
</style>
share用アイコンの取得
share用のアイコンを読み込めるよう設定します。 cssファイルの読み込みが必要なので、head.htmlに追記します。
もし、対象のファイルがない場合は、(theme名) head.html と検索して、自身のフォルダに配置します。
_includes/head.html
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
定義したshare情報用のhtmlを読み込ませます
し、対象のファイルがない場合は、(theme名) post.html と検索して、自身のフォルダに配置します。
_includes/post.html
<div class="post-content" itemprop="articleBody">
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header">
<h1 class="post-title p-name" itemprop="name headline">pythonの辞書型の結合方法</h1>
<p class="post-meta">
<time class="dt-published" datetime="2018-05-13T00:00:00+09:00" itemprop="datePublished">May 13, 2018
</time></p>
</header>
<div class="post-content e-content" itemprop="articleBody">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-7649894838245079",
enable_page_level_ads: true
});
</script>
<h1 id="pythonの辞書型の結合方法">pythonの辞書型の結合方法</h1>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>docker run <span class="nt">-it</span> <span class="nt">-p</span> 139:139 <span class="nt">-p</span> 445:445 <span class="nt">-d</span> dperson/samba <span class="se">\</span>
<span class="nt">-u</span> <span class="s2">"ユーザ名;パスワード"</span> <span class="se">\</span>
<span class="nt">-s</span> <span class="s2">"共有名;パス;共有フォルダを見せるか;読み取り専用か;ゲストユーザもアクセスできるか;"</span>
</code></pre></div></div>
<p>例：</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>docker run <span class="nt">-it</span> <span class="nt">-p</span> 139:139 <span class="nt">-p</span> 445:445 <span class="nt">-d</span> dperson/samba <span class="se">\</span>
<span class="nt">-u</span> <span class="s2">"yamada;test"</span> <span class="se">\</span>
<span class="nt">-s</span> <span class="s2">"share;/mnt/share;yes;no;no;"</span>
</code></pre></div></div>
<h2 id="参考">参考:</h2>
<p><a href="https://qiita.com/flny/items/ee3d443f84128b0202a7">Docker上 で samba を動かしてファイル共有する</a></p>
<p><a href="https://hub.docker.com/r/dperson/samba/">dperson/samba</a></p>
<div id="share-bar">
<h4>Share this:</h4>
<div class="share-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u=https://infefl.com/linux/docker/cifs/samba/2018/05/13/python%E3%81%AE%E8%BE%9E%E6%9B%B8%E5%9E%8B%E3%81%AE%E7%B5%90%E5%90%88%E6%96%B9%E6%B3%95.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Facebook" >
<i class="fa fa-facebook-official share-button"> facebook</i>
</a>
<a href="https://twitter.com/intent/tweet?text=pythonの辞書型の結合方法&url=https://infefl.com/linux/docker/cifs/samba/2018/05/13/python%E3%81%AE%E8%BE%9E%E6%9B%B8%E5%9E%8B%E3%81%AE%E7%B5%90%E5%90%88%E6%96%B9%E6%B3%95.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Twitter" >
<i class="fa fa-twitter share-button"> twitter</i>
</a>
<a href="https://plus.google.com/share?url=https://infefl.com/linux/docker/cifs/samba/2018/05/13/python%E3%81%AE%E8%BE%9E%E6%9B%B8%E5%9E%8B%E3%81%AE%E7%B5%90%E5%90%88%E6%96%B9%E6%B3%95.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Google+" >
<i class="fa fa-google-plus share-button"> google</i>
</a>
<a href="http://pinterest.com/pin/create/button/?url=https://infefl.com/linux/docker/cifs/samba/2018/05/13/python%E3%81%AE%E8%BE%9E%E6%9B%B8%E5%9E%8B%E3%81%AE%E7%B5%90%E5%90%88%E6%96%B9%E6%B3%95.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Pinterest" >
<i class="fa fa-pinterest-p share-button"> pinterest</i>
</a>
<a href="http://www.tumblr.com/share/link?url=https://infefl.com/linux/docker/cifs/samba/2018/05/13/python%E3%81%AE%E8%BE%9E%E6%9B%B8%E5%9E%8B%E3%81%AE%E7%B5%90%E5%90%88%E6%96%B9%E6%B3%95.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Tumblr" >
<i class="fa fa-tumblr share-button"> tumblr</i>
</a>
<a href="http://www.reddit.com/submit?url=https://infefl.com/linux/docker/cifs/samba/2018/05/13/python%E3%81%AE%E8%BE%9E%E6%9B%B8%E5%9E%8B%E3%81%AE%E7%B5%90%E5%90%88%E6%96%B9%E6%B3%95.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Reddit" >
<i class="fa fa-reddit-alien share-button"> reddit</i>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://infefl.com/linux/docker/cifs/samba/2018/05/13/python%E3%81%AE%E8%BE%9E%E6%9B%B8%E5%9E%8B%E3%81%AE%E7%B5%90%E5%90%88%E6%96%B9%E6%B3%95.ja.html&title=pythonの辞書型の結合方法&summary=&source=infefl"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on LinkedIn" >
<i class="fa fa-linkedin share-button"> linkedin</i>
</a>
<a href="mailto:?subject=pythonの辞書型の結合方法&body=Check out this site https://infefl.com/linux/docker/cifs/samba/2018/05/13/python%E3%81%AE%E8%BE%9E%E6%9B%B8%E5%9E%8B%E3%81%AE%E7%B5%90%E5%90%88%E6%96%B9%E6%B3%95.ja.html"
title="Share via Email" >
<i class="fa fa-envelope share-button"> email</i>
</a>
</div>
</div>
<style>
/* Share Bar */
#share-bar {
font-size: 20px;
}
/* Title */
#share-bar h4 {
margin-bottom: 10px;
font-weight: 500;
}
/* All buttons */
.share-buttons {
}
/* Each button */
.share-button {
margin: 0px;
margin-bottom: 10px;
margin-right: 3px;
border: 1px solid #D3D6D2;
padding: 5px 10px 5px 10px;
}
.share-button:hover {
opacity: 1;
color: #ffffff;
}
/* Facebook button */
.fa-facebook-official {
color: #3b5998;
}
.fa-facebook-official:hover {
background-color: #3b5998;
}
/* Twitter button */
.fa-twitter {
color: #55acee;
}
.fa-twitter:hover {
background-color: #55acee;
}
/* Google-PLus button */
.fa-google-plus {
color: #dd4b39;
}
.fa-google-plus:hover {
background-color: #dd4b39;
}
/* Pinterest button */
.fa-pinterest-p {
color: #cb2027;
}
.fa-pinterest-p:hover {
background-color: #cb2027;
}
/* Tumblr button */
.fa-tumblr {
color: #32506d;
}
.fa-tumblr:hover {
background-color: #32506d;
}
/* Reddit button */
.fa-reddit-alien {
color: #ff4500;
}
.fa-reddit-alien:hover {
background-color: #ff4500;
}
/* LinkedIn button */
.fa-linkedin {
color: #007bb5;
}
.fa-linkedin:hover {
background-color: #007bb5;
}
/* Email button */
.fa-envelope {
color: #444444;
}
.fa-envelope:hover {
background-color: #444444;
}
</style>
</div><a class="u-url" href="/linux/docker/cifs/samba/2018/05/13/python%E3%81%AE%E8%BE%9E%E6%9B%B8%E5%9E%8B%E3%81%AE%E7%B5%90%E5%90%88%E6%96%B9%E6%B3%95.ja.html" hidden></a>
</article>
<div id="share-bar">
<h4>Share this:</h4>
<div class="share-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Facebook" >
<i class="fa fa-facebook-official share-button"> facebook</i>
</a>
<a href="https://twitter.com/intent/tweet?text=jekyllでshareボタンの付け方&url=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Twitter" >
<i class="fa fa-twitter share-button"> twitter</i>
</a>
<a href="https://plus.google.com/share?url=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Google+" >
<i class="fa fa-google-plus share-button"> google</i>
</a>
<a href="http://pinterest.com/pin/create/button/?url=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Pinterest" >
<i class="fa fa-pinterest-p share-button"> pinterest</i>
</a>
<a href="http://www.tumblr.com/share/link?url=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Tumblr" >
<i class="fa fa-tumblr share-button"> tumblr</i>
</a>
<a href="http://www.reddit.com/submit?url=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
title="Share on Reddit" >
<i class="fa fa-reddit-alien share-button"> reddit</i>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html&title=jekyllでshareボタンの付け方&summary=&source=infefl"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
title="Share on LinkedIn" >
<i class="fa fa-linkedin share-button"> linkedin</i>
</a>
<a href="mailto:?subject=jekyllでshareボタンの付け方&body=Check out this site https://infefl.com/jekyll/social/share/2018/05/14/jekyll%E3%81%A7share%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BB%98%E3%81%91%E6%96%B9.ja.html"
title="Share via Email" >
<i class="fa fa-envelope share-button"> email</i>
</a>
</div>
</div>
<style>
/* Share Bar */
#share-bar {
font-size: 20px;
}
/* Title */
#share-bar h4 {
margin-bottom: 10px;
font-weight: 500;
}
/* All buttons */
.share-buttons {
}
/* Each button */
.share-button {
margin: 0px;
margin-bottom: 10px;
margin-right: 3px;
border: 1px solid #D3D6D2;
padding: 5px 10px 5px 10px;
}
.share-button:hover {
opacity: 1;
color: #ffffff;
}
/* Facebook button */
.fa-facebook-official {
color: #3b5998;
}
.fa-facebook-official:hover {
background-color: #3b5998;
}
/* Twitter button */
.fa-twitter {
color: #55acee;
}
.fa-twitter:hover {
background-color: #55acee;
}
/* Google-PLus button */
.fa-google-plus {
color: #dd4b39;
}
.fa-google-plus:hover {
background-color: #dd4b39;
}
/* Pinterest button */
.fa-pinterest-p {
color: #cb2027;
}
.fa-pinterest-p:hover {
background-color: #cb2027;
}
/* Tumblr button */
.fa-tumblr {
color: #32506d;
}
.fa-tumblr:hover {
background-color: #32506d;
}
/* Reddit button */
.fa-reddit-alien {
color: #ff4500;
}
.fa-reddit-alien:hover {
background-color: #ff4500;
}
/* LinkedIn button */
.fa-linkedin {
color: #007bb5;
}
.fa-linkedin:hover {
background-color: #007bb5;
}
/* Email button */
.fa-envelope {
color: #444444;
}
.fa-envelope:hover {
background-color: #444444;
}
</style>
</div>