Cork theme

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

ヘッダー下のメニューバーの導入方法

1.ブログのデザイン設定へ移動します

2.「カスタマイズ」を選んで、「ヘッダ」を開きます

3.ヘッダに以下のHTMLをコピペします

4.「変更を保存する」をクリックして終わり

メニューバーのCSSは予めテーマストアにあるCSSに記述してあります。

はてなブログのトップページを記事一覧にする方法(コピペでできます)

f:id:popobloom:20160918161617p:plain

 

意外と知っている人が少なかったので書いておきます。

初期設定だとトップページの記事一覧は、全文表示されていてとても一覧とは呼べない状態なので見やすくするためにもやっておくのをおすすめします。

 

トップページを記事一覧にする方法

まず、管理画面>設定>詳細設定>検索エンジン最適化>headに要素を追加 のところに、以下のコードをコピペしてください。

<script type="text/javascript">
if( location.href == 'http://corksamle.hatenablog.com/'){
location.href='http://corksample.hatenablog.com/archive';
}
</script>
<noscript>
<p><a href="http://corksample.hatenablog.com/archive">Cork</a></p>
</noscript>

貼り付けたら、青字のところを自分のブログのトップぺージのURLに変えて、赤字のところを自分のブログ名に変えてください。

以上で終わりですです。

 

最後に

このスクリプトは、トップページに訪れた人を強制的に元々はてなブログで用意されている記事一覧ページへ転送するというものなので、実は本物のトップページとは言えないです。

お気に入り登録されるのも恐らくトップページではなく記事一覧ページになるので、それが気になる方はやめておいたほうがいいと思います。

 

 

 

 

 

 

ポラーノの広場 宮沢賢治

段落

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

フォトライフ

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。


あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。


ブロック

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大きい画像

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

罫線


h1見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h2見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h3見出し(*)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h4見出し(**)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h5見出し(***)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h6見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

asin

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

「へんな会社」のつくり方 (NT2X)

「へんな会社」のつくり方 (NT2X)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

リスト(ul,ol,dl)

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

  1. 大賞1名:Amazonギフト券5万円分
  2. 入選9名:Amazonギフト券1万円分
    1. 大賞1名:Amazonギフト券5万円分
    2. 入選9名:Amazonギフト券1万円分

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大賞1名
Amazonギフト券5万円分
入選9名
Amazonギフト券1万円分

テーブル

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

名前 個数
りんご 1
みかん だいだい 2

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

PRE

.XXX {
  width:999px;
  height:999px;
}

.propA, .propB, .propC {
  width:999px;
  height:999px;
}

#YYY {
  width:9px;
  height:999px;
}

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

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

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

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