今までいじってきたコードを書き残しておきます。いろんなサイトを参考にさせてもらいました。いろいろ過ぎてどれがどれだか分りません。参考にさせて頂いたサイトの皆様、こちらでご紹介できずにすみません。
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; /*画像の枠線*/ }