読者です 読者をやめる 読者になる 読者になる

Cork theme

半分見本用のブログです。たまに記事も書きます。

カスタマイズ用ブログパーツ(コピペでできます)

f:id:popobloom:20160912192317p:plain

 

この見本用ブログで実際に使っているブログパーツ?を5つ載せておきます。お好みで使ってください。

 

 

下準備

ブログパーツを使う前に、ブログ設定から詳細設定にいき「headに要素を追加」のところに以下のコードをコピペしてください。

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

 

これで準備OKです。

ちなみに、これはjQuely、font-awesome(アイコン画像)、poiret oneフォントを導入するためのコードです。

 

 

メニューバー

以下をヘッダーにコピペすれば終わりです。

 

<ul id="menu">
<li><a href="http://corksample.hatenablog.com/">トップページ</a></li>
<li><a href="http://corksample.hatenablog.com/about">このブログについて</a></li>
<li><a href="http://corksample.hatenablog.com/archive">最新記事一覧</a></li>
</ul>

<style type="text/css">
#menu {
display:inline-block;
margin: 0;
}
#menu li {
list-style:none;
float:left;
margin:0 10px 0 0;
font-size:15px;
font-family: Lato, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 600;
}
#menu li a{
background-color:#FFF;
padding: 8px 12px;
text-decoration:none;
border-radius:3px;
}
</style>

 

2、3、4行目のURLは自身のブログのURLに変えてください。

自力で作ったのですごくシンプルになっちゃいましたが、無いよりはマシだと思います。

 

 

共有ボタン(記事上、記事下用)

HTML

<!--シェアボタン-->
<div class="share-3d">
<div class="share-3d-inner">
<!--はてブ-->
<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 small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" ><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--Googleプラス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google+</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</div>

 

CSS

/*シェアボタン*/
.share-3d{
margin-bottom: 10px;
text-align: center;
}
.share-3d-inner a {
position: relative;
width: 18%;
height: 40px;
line-height: 20px;;
font-size: 16px;
text-align: center;
display:inline-block;
color: #ffffff;
text-decoration: none;
top:10px
}
.share-3d .small-text{
font-size: 10px;
}
.share-3d .hatena-bookmark-button{
background: #00A4DE;
box-shadow: 0 3px #43638b;
}
.share-3d .twitter-button{
background: #55ACEE;
box-shadow: 0 3px #0092ca;
}
.share-3d .googleplus-button{
background: #C53727;
box-shadow: 0 3px #ad3a2d;
}
.share-3d .facebook-button{
background: #405BA7;
box-shadow: 0 3px #2c4373;
}
.share-3d .pocket-button{
background: #EE4256;
box-shadow: 0 3px 0 #c0392b;
}


.share-3d a:active{
top: 3px;
box-shadow: none;
}
.share-3d .hatena-bookmark-button:active{
background: #43638b;
}
.share-3d .twitter-button:active{
background: #0092ca;
}
.share-3d .googleplus-button:active{
background: #ad3a2d;
}
.share-3d .facebook-button:active{
background: #2c4373
}
.share-3d .pocket-button:active{
background: #c0392b;
}


.hatena-module-related-entries {
display: none;
}

#relateArticle .hatena-module-title {
margin-top: 50px;
}

 

 

このJavascriptを使う場合は、公式で用意されている共有ボタンを全て表示させないのをオススメします。

(デザイン>記事>ソーシャルパーツのチェックを全て外す)

公式で用意されているものより動作が軽くデザインもかっこいいのでオススメです。

 

参考にした記事↓

【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life

 

 

関連記事(記事下)

サイドバーにある関連記事(公式で用意されているもの)を、Javascriptで記事下に表示させます。

まず「記事下」に以下のHTML+Javascriptコピペしてください。

 

<div id="relateArticle"></div>

<script>
var timer = setInterval(function() {
if (typeof jQuery != 'undefined') {
$("#relateArticle").html($(".hatena-module-related-entries").html());
clearInterval(timer);
}
}, 1000)

 

これをしただけではサイドバーと記事下の両方に関連記事が表示されてしまうのでデザインCSSにコレ↓をコピペしてください。

 

.hatena-module-related-entries {
display: none;
}

 

サイドバーの関連記事モジュールを非表示にさせるCSSです。

これで完成です。

 

参考にした記事↓

はてなブログでサイドの関連記事を記事下に表示する方法!内部リンク強化にも効果的! - 晴れ時々晴天なり

 

 

「注目記事」を画面に追尾させる

フッターに以下のスクリプトをコピペするだけで終わりです。

 

<!--サイドバー固定-->
<script>
$(window).load(function() {
  var sideLast = $(".hatena-module").filter(":last");
  var sideLastTop = sideLast.offset().top + 450;
  var sideLastWidth = sideLast.width();
  var win = $(window);

 win.scroll(function(){
  if(win.scrollTop() > sideLastTop) {
   sideLast.css("position",'fixed');
   sideLast.css("top",'45px');
   sideLast.css("width",sideLastWidth);
  }else{
   sideLast.css("position",'relative');
  };
 });
});
</script>

 

サイドバーの一番下のモジュールを画面に追尾させるスクリプトになっているので、サイドバーのモジュールの順番を入れ替えれば追尾させるモジュールを変えられます。

 

参考にした記事↓

【はてなブログ】サイドバーの一番下にあるモジュールを固定する方法 - 明日こそ、定時

 

 

「Poiret One」(ブログタイトル用のフォント)

この見本用ブログの上にあるブログタイトルのフォントです。

結構かっこいいフォントなのでオススメです。日本語には対応していないので日本語のブログ名の人は導入しても意味ないです。

 

デザインCSSにこれをコピペすればタイトルのフォントがPoiret Oneに変わります。

#title a {
  1. color: #454545;
  2. font-family: 'Poiret One', cursive;

 

 

 コルクの背景画像

f:id:popobloom:20160912204753p:plain

もし気に入ったら使ってください。

デザイン>背景画像>ファイルを選択 でこれを選べば設定できます。