【カスタマイズ】オリジナルSNSボタンを記事ページに設置する方法
はてなブログデザインテーマ「Debriefing」の記事詳細ページにオリジナルのSNSボタンを設置する方法を紹介します。
やり方は簡単です。
管理画面から「デザイン」→「カスタマイズ」→「記事下」へと順番に進み、下記のコードをコピペして保存すれば完了です。
<div class="social-button-area">
<ul class="social-button">
<li>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br><span class="hatebu-count share-text">Hatena</span></a>
</li>
<li>
<a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i><br><span class="facebook-count share-text">Facebook</span></a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href,'TwitterWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a>
</li>
<li>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="blogicon-chevron-down lg"></i><br><span class="share-text">Pocket</span></a>
</li>
</ul>
</div>
CSSに関しては本テーマにスタイルが既に適用してありますので、上記のソースを貼り付けるだけで記事詳細ページに簡単にオリジナルのSNSボタンを設置することができます。
対応しているSNSボタンの種類は「はてなブックマーク」「Facebookシェアボタン」「ツイッター」「Pocket」の4種類のみです。
【カスタマイズ】ヘッダーにグローバルナビゲーションを表示させる方法
はてなテーマ「Debriefing」では簡単にヘッダーにグローバルナビゲーションを表示することができます。
やり方は簡単です。
管理画面から「デザイン」→「カスタマイズ」→「ヘッダー」→「タイトル下」へ順番に進み、下記のコードをコピペして保存すれば完了です。
<nav class="global-navi">
<div class="toggle-menu">
<input id="toggle-item" type="checkbox">
<label class="three-line" for="toggle-item">☰</label>
<label class="overlay" for="toggle-item"></label>
<ul class="menu">
<li><a href="">カテゴリ</a></li>
<li><a href="">カテゴリ</a></li>
<li><a href="">カテゴリ</a></li>
<li><a href="">カテゴリ</a></li>
<li><a href="">カテゴリ</a></li>
<li><a href="">カテゴリ</a></li>
</ul>
</div>
</nav>
aタグのリンク先の指定と「カテゴリ」の部分は適宜変更してください。
はてなブログテーマ「Debriefing」をリリースしました。
白と黒のレスポンシブ対応のはてなブログテーマ「Debriefing」を2019年3月14日にリリースしました。
PC、タブレット、スマートフォンの各デバイスサイズにフィットしたシンプルなデザインにしています。