はてなブログのカスタマイズ備忘録

今までいじってきたコードを書き残しておきます。いろんなサイトを参考にさせてもらいました。いろいろ過ぎてどれがどれだか分りません。参考にさせて頂いたサイトの皆様、こちらでご紹介できずにすみません。

PCサイト用カスタマイズコード

タイトル下に記述

ナビゲーションバー

<!-- ナビゲーションバー -->
<div id="menubar">
 <ul>
 <li><a href="https://www.kuma082.com/prof" title="管理人紹介" >管理人紹介</a></li>
 <li><a href="https://www.kuma082.com/cate" title="カテゴリﾘ一覧">カテゴリ一覧</a></li>
 <li><a href="https://www.kuma082.com/con" title="問い合わせ" >問い合わせ</a></li>
 <li><a href="https://www.kuma082.com/entry/210118" title="Excelショートカットキー一覧" >Excelｼｮｰﾄｶｯﾄｷｰ一覧</a></li>
</ul>
</div>

{ }デザインCSSに記述

写真を中央に表示する

/*写真を中央に表示*/
.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}

ナビゲーションバー

/*ナビゲーションバー*/
#menubar{
width:100%;
}

#menubar ul{
display:table;
width:100%;
margin: 20;
padding: 0;
background-color: #FFFFFF;
}

#menubar li{
display: table-cell;
width:20%;
padding:0;
background-color: #203556;
}

#menubar li a{
display: block;
margin:0 auto;
padding:5px;
border: 1px solid #FFFFFF;
text-decoration: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
}

#menubar li a:hover{
background-color: #406BAC;
}

全体幅を指定

/*全体幅を指定*/
#container {
width: 888px; }

記事欄の幅を指定

/*記事欄の幅を指定*/
#wrapper {
width: 600px; }

ナビゲーションバー下を調整

/*ナビゲーションバー下を調整*/
.page-archive #main {
margin-top: 20px; }

ヘッダー画像下を調整

/*ヘッダー画像下の調整*/
.header-image-enable #blog-title, .header-image-only #blog-title {
padding: 0px; }

右サイドバーの調整

/*右サイドバーの調整*/
#box2 {
margin-top: 20px;
float: right;
width: 250px;
font-size: 12px; }

スマホサイト用カスタマイズコード

タイトル下に記述

写真を中央に表示

/*写真を中央に表示*/
.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}

ヘッダー表示有無

/* ヘッダー表示有無 */
#globalheader-container {
    display:none;
}

フッター表示の有無

/* フッター表示有無 */
#footer-menu {
    display:none;
}

余白調整

/* 余白調整 */
#container {
    padding-top:0px;
}

プロフィールやはてな関連リンクを消す

/* プロフィールやはてな関連リンクを消す*/
.footer-service-link,
.footer-action-wrapper,
.footer-touch-item-list,
.profile,
.hatena-module-profile,
.footer-action-wrapper{
    display:none !important;
}

.table-of-contents {
     position: relative;
     background-color: #ECEEF1;
     padding: 40px 10px 10px 35px !important;
     border-radius: 6px;
     font-size: 14px;
     line-height: 28px;
}

.table-of-contents::before {
   content: '目次';
     position: absolute;
     display: block;
     text-align: center;
     top: 8px;
     left: 50%;
     margin-left: -1em;
     font-size: 18px;
     font-weight: 700;
     z-index: 2;
}

目次周りの余白調整

/*目次周りの余白調節*/
.entry-content ol,.entry-content ul {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 18px;
}

大見出しの設定

/*大見出しの設定*/
.entry-content h3 {
  padding: 4px 10px;
  color: #3D3F44;
  background: #f3f3f3;
  border-left: 8px solid #3f3f3f;
  margin:60px 0 15px 0;
}

中見出しの設定

/*中見出しの設定*/
.entry-content h4 {
  position: relative;
  color: #3D3F44;
  border-bottom: 4px solid #f3f3f3;
  padding: 3px 10px;
  margin:30px 0 10px 0;
}
  
.entry-content h4::before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 20%;
  height: 4px;
  background:#3f3f3f;
  z-index: 2;
  content: '';
}

小見出しの設定

/*小見出しの設定*/
.entry-content h5 {
  color:#3D3F44;
  position: relative;
  padding-left: 1.2em;
  line-height: 1.4;
  margin:20px 0 8px 0;
}

.entry-content h5:before{
  font-family: FontAwesome;
  /*アイコンユニコード*/
  content: "\f00c";
  /*アイコン色*/
  color: #3f3f3f; 
  position: absolute;
  font-size: 1em;
  left: 0;
  top: 0;
}

ナビゲーションバーの設定

/*ナビゲーションバーの設定*/
<nav id="gnav">
    <div class="gnav-inner" id="menu-scroll">
        <div class="menu"><a href="https://www.kuma082.com/cate">カテゴリ</a></div>
        <div class="menu"><a href="https://www.kuma082.com/xl_sc">Excelショートカットキー一覧</a></div>
        <div class="menu"><a href="https://www.kuma082.com/prof">管理人紹介</a></div>
        <div class="menu"><a href="https://www.kuma082.com/privacy">プライバシーポリシー</a></div>
        <div class="menu"><a href="https://www.kuma082.com/con">問い合わせ</a></div>

</div>
</nav>

/*スライドメニュー*/
#gnav {
    background: #3f3f3f;
    font-size: 0;
    margin-top: 0;
    padding: 0 0 0;
}

#gnav .menu a {
    display: block;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 11px 11px 0px;
    height: 40px;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}

#gnav .gnav-inner {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

#gnav .menu {
    display: inline-block;
}

/*スライドメニューを横いっぱいに広げる*/
#top-editarea .section {
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0em;
}
</style>

<script type="text/javascript">
/*ページ更新時に少しスライドさせる*/
window.onload = function () {
  autoScroll();
}
var $scrollX = 0;
var $speed=0;
function autoScroll() {
  var $sampleBox = document.getElementById( "menu-scroll" );
  $sampleBox.scrollLeft = ++$scrollX;
  $speed+=3;
  if( $scrollX < 25 ){
    setTimeout( "autoScroll()", $speed );
  }

記事上に記述

SNSシェアボタン

<!--SNSシェアボタン-->
<div class="share-buttons">
<span style="font-size: 8px">シェアする</span>
<div class="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> <div class="share-count-box"><span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span></div><br> <span class="share-text">Bookmark!</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;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <div class="share-count-box"><span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span></div><br><span class="share-text">Facebook</span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TWwindow', '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>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="share-text">Pocket</span></a>
</div>
</div>

記事下に記述

SNSシェアボタン

<!--JQueryを使用-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<!--シェア数の取得-->
<script>
//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
  entryUrl = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp',
  }).then(
    function(result){ $(selcter).text(result || 0); },
    function(){ $(selcter).text('0'); }
  );
}
//Facebookのシェア数
function getFacebookCount(entryUrl, selcter) {
  entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp'
  }).then(
    function(result){
        if(result.share && result.share.share_count) {
            $(selcter).text(result.share.share_count);
        } else {
            $(selcter).text('0');
        }
    },
    function(){ $(selcter).text('0'); }
  );
}
$(function(){
  getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count');
  getFacebookCount('{Permalink}', '.facebook-count');
});
</script>

<!--SNSシェアボタン-->
<div class="share-buttons">
<span style="font-size: 8px">シェアする</span>
<div class="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> <div class="share-count-box"><span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span></div><br> <span class="share-text">Bookmark!</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;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <div class="share-count-box"><span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span></div><br><span class="share-text">Facebook</span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TWwindow', '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>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="share-text">Pocket</span></a>
</div>
</div>

<style type=text/css>
/*share-botton*/
.share-buttons{
    margin-bottom: 10px;
    text-align: center;
}
.share-buttons .inner a {
    position: relative;
    display: inline-block;
    width: 17%;
    height: 45px;
    line-height: 25px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    padding:2px;
}
.share-buttons .inner .share-text{
    font-size: 8px;
}
.share-count-box {
    height:1.33333em;
    display:inline-block;
    text-align:center;
}
.share-buttons .inner .hatena-bookmark-button{
    background: #008fde;
}
.share-buttons .inner .facebook-button{
    background: #305097;
}
.share-buttons .inner .twitter-button{
    background: #55acee;
}
.share-buttons .inner .googleplus-button{
    background: #db4a39;
}
.share-buttons .inner .pocket-button{
    background: #ee4256;
}
</style>

ページャ下に記述

上へボタンの非表示

<style type="text/css">
/* 上へボタンの非表示 */

フッターメニューの非表示

.pagetop {display: none;}
/* フッターメニューの非表示 */

はてなの各種リンクの非表示

#footer-menu {display:none;}
/* はてなの各種リンクの非表示 */
.touch-item-list{display:none;}

プロフィールの非表示

/* プロフィールの非表示 */
.hatena-module.profile {display: none;}

フッターの管理ボタン等の非表示

/* フッターの管理ボタン等の非表示 */
.footer-action-wrapper{display:none;}

人気記事タイトル文字の大きさ

 /* 人気記事 タイトル 文字の大きさ */
.urllist-title-link {
 font-size: 13px;
}

人気記事の日付

/* 人気記事 日付 */
.urllist-date-link{
 font-weight:700;
 margin:5px 5px;
}
 
.urllist-date-link a{
 color: #ffffff !important; /*日付の文字色*/
 background: #cc4f5e;/*日付の背景色*/
 padding: 0px 10px;/*日付の文字まわりのスペース*/
}

人気記事リストボーダー

/* 人気記事リスト ボーダー */
.hatena-urllist>li {
  border-bottom: 3px dashed #ECF0F1;
}
.recommend-content {
  margin: 15px 10px 15px 1px;
  font-size:14px;
}
.recommend {
  position: relative;
  border: 1px solid #333;
  margin: 30px 5px;
}
.recommend-title {
  position: absolute;
  top: -15px;
  left: 20px;
  font-size: 18px;
  font-weight: bold;
  background: #fff;
  padding: 0px 5px;
}

.hatena-module-entries-access-ranking .urllist-with-thumbnails .urllist-item .urllist-image {
  width: 75px; /*画像の縦幅*/
  height: 75px; /*画像の横幅*/
  border-radius: 0em; 
  border: solid 3px #3f3f3f; /*画像の枠線*/
}