おっちゃんあんちゃんの覚書

熱帯魚の飼育を中心にブログを書いています。失敗談の方が多いのですが・・・。

ブログのカストマイズ

本記事は最新ではなくなりました。次の 版は、こちらのブログをご覧ください。

今日は、このブログで行っているカストマイズを紹介します。やっと熱帯魚水槽が落ち着いてきましたので、ちょっと一休みです。

そもそも、何でカストマイズが必要なの?

はてなブログは、標準でも十分に使えています。でも、諸先輩方がやっているのを見て、『これカッコいい!!』とマネしたくなったからです。

あと、このブログは通勤電車の中下書きを書くことが多く、使っているiPhone5cでも見やすくしたかったからです。

使っているデザインテンプレートは『 Innocent』です

パソコン用とiPhone用に2カ所でカストマイズを行うのが面倒なこともあり、レシポンシブ対応のテンプレートを探していました。また、利用しているはてなブログは無料版なので、スマホ版のカストマイズがあまりできないです。

いろいろと探していたところ、『Innocent』に出会いました。シンプルでありながら、なかなかセンスも良くて気に入っています。

カストマイズ項目

Innocent』テンプレートに追加したカストマイズ一覧です。

  1. ナビゲーションバーの設置
  2. 目次のデザイン変更(表示/非表示つき)
  3. 見出し行のデザイン変更
  4. 蛍光ペンのように見える強調文字
  5. 投稿日付のデザイン変更
  6. ページTOPへ戻るボタンの設置
  7. ぱんくずリストの設置
  8. 独自ソーシャルボタンの設置
  9. コメントを書くのデザイン変更
  10. サイドバータイトルのデザイン変更
  11. スムーズスクロールの導入
  12. カテゴリのデザイン変更
  13. 記事本文フォント関連の変更
  14. ブログタイトルのデザイン変更
  15. 続きを読むのデザイン変更
  16. jQuery dataTablesの導入(準備中)

コードはこれです

本来であれば、項目ごとに手順を記載していくところですが、諸先輩方の記事の方が詳しく(読みやすく)紹介されていますので、私の場合は設定個所とコードをそのまま紹介します。

ダッシュボート → 設定 → 詳細設定 → headに要素を追加

<script src="https://code.jquery.com/jquery-2.2.1.min.js" async></script>

ダッシュボード → デザイン → カストマイズ → ヘッダ → タイトル下

<!-- 1.グローバルナビゲーションの設置 -->
<nav class="main-navigation">
<div class="menu-toggle">メニュー</div>
<div class="main-navigation-inner">
<ul>
<li>
<a href="/archive/category/熱帯魚飼育" class="has-child"><i class="blogicon-good"></i> 熱帯魚飼育</a>
<ul>
<li><a href="/archive/category/熱帯魚飼育-30センチキューブ編">├ <i class="blogicon-folder"></i> 30センチキューブ編</a></li>
<li><a href="/archive/category/熱帯魚飼育-大崩壊編">├ <i class="blogicon-folder"></i> 大崩壊編</a></li>
<li><a href="/entry/2016/02/13/210700">├ ★ オープニング</a></li>
<li><a href="/entry/2016/02/22/011841">└ ★ 年表(年月表)</a></li>
</ul>
</li>
<li>
<a href="/archive/category/ノウハウ集" class="has-child"><i class="blogicon-good"></i> ノウハウ集</a>
<ul>
<li><a href="/archive/category/ノウハウ集-iPhone">└ <i class="blogicon-folder"></i> iPhone</a></li>
</ul>
</li>
<li><a href="/"><i class="blogicon-home"></i> 全記事一覧</a></li>
<li><a href="http://profile.hatena.ne.jp/tk450/"><i class="blogicon-user"></i> 自己紹介</a></li>
<li><a href="https://drive.google.com/open?id=1iorepa68k0QjDwlka6sbbKeo68TfvOLfIQm-DyTSew8"><i class="blogicon-mail"></i> お問合せ</a></li>
</ul>
</div>
</nav>
<!-- 1.グローバルナビゲーションの設置 -->

青色文字の部分は、私のブログ専用部分です。もし、コピペされる場合には、ご自分のブログにあわせて変更して下さい。そうしないと、メニューから直接私のブログが選べるようになってしまいます。(#^^#)

ダッシュボード → デザイン → カストマイズ → 記事 → 記事下

<!-- 7.パンくずリストの設置 -->
<style>
div #breadcrumb div {
display: inline;
font-size: 13px;
}
</style>
<div id="breadcrumb" class='notHierarchy'></div>
<!-- 7.パンくずリストの設置 -->

<!-- 8.独自ソーシャルボタンの設置 -->
<div class="share-3d">
<span style="font-size: 14px">気に入っていただけましたら、ポチッとお願いします</span>
<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/share.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><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}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--ググタス-->
<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>
//-->
<!--ライン-->
<span class="line-hide">
<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/f/ftmaccho/20150905/20150905143148.png" width="18px" height="18px" alt="LINEで送る" /><br><span class="small-text">Line</span>
</a></span>
</div>
</div>
<!-- 8.独自ソーシャルボタンの設置 -->

ダッシュボード → デザイン → カストマイズ → フッタ

<script>
$(function(){
// 1.グローバルナビゲーションの設置
$(".menu-toggle").on("click", function() {
$(".main-navigation").toggleClass("toggled");
});
// 1.グローバルナビゲーションの設置
});
</script>

<script>
$(function(){
var $Contents = $(".table-of-contents")
$($Contents).before('<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[隠す]</p>');
$(".show-area").click(function(){
var $this = $(this);
if($Contents.css('display') == 'none'){
$Contents.slideDown(400),
$this.text("[隠す]");
}else{
$Contents.slideUp(400),
$this.text("[表示]")
};
});
});
</script>

<script>
$(function(){
// 6.ページTOPへ戻るボタンの設置
/** ページトップ処理 **/
// スクロールした場合
$(window).scroll(function() {
// スクロール位置が200を超えた場合
if ($(this).scrollTop() > 200) {
$('#pagetop').fadeIn();
} else {
// ページトップへをフェードアウト
$('#pagetop').fadeOut();
}
});
// ページトップクリック
$('#pagetop').click(function() {
// ページトップへスクロール
$('html, body').animate({scrollTop: 0}, 300);
return false;
});
// 6.ページTOPへ戻るボタンの設置
});
</script>

<script>
$(function(){
// 11.スムーズスクロールの導入
$('a[href^=#]').click(function() {
var myHref= $(this).attr("href");
var Target = $(myHref).offset().top - 30;
$('body,html').animate({scrollTop: Target}, "slow", 'swing');
return false;
});
// 11.スムーズスクロールの導入
});
</script>
<a id="pagetop" href="#top" class="page_top" style="display: none;">ページTOPへ ▲</a>


<!-- 8.独自ソーシャルボタンの設置 -->
<!--シェア数の数字-->
<script>
//Facebookのシェア数を取得
function get_social_count_facebook(url, selcter) {
jQuery.ajax({url:'https://graph.facebook.com/', dataType:'jsonp', data:{ id:url}, success:function(res){
jQuery( selcter ).text( res.shares || 0 );
},
error:function(){
jQuery( selcter ).text('0');
}
});
}
//はてなブックマークはてブ数を取得
function get_social_count_hatebu(url, selcter) {
jQuery.ajax({
url:'http://api.b.st-hatena.com/entry.count?callback=?',
dataType:'jsonp', data:{url:url},
success:function(res){
jQuery( selcter ).text( res || 0 );
},
error:function(){
jQuery( selcter ).text('0');
}
});
}
$(function(){
get_social_count_facebook('{Permalink}', '.facebook-count');
get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>
<!-- 8.独自ソーシャルボタンの設置 -->

<!-- 7.パンくずリストの設置 -->
<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com -->
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>
<!-- サイドバーのカテゴリモジュールで親カテゴリのみ -->
<script type="text/javascript">
google.setOnLoadCallback(categoryHierarchyModule);
</script>
<!-- サイドバーのカテゴリモジュールで親カテゴリのみ -->
<!-- 7.パンくずリストの設置 -->

ダッシュボード → デザイン → カストマイズ → デザインCSS

 /* <system section="theme" selected="6653586347149180725"> */
@import "http://hatenablog.com/theme/6653586347149180725.css";
/* </system> */

/* <system section="background" selected="bg9"> */
body{ background-color:#e9fbff; background-image:url('/images/theme/backgrounds/theme9.gif'); background-repeat:repeat-x; background-attachment:scroll; background-position:left top; }
/* </system> */

/* 1.グローバルナビゲーションの設置 */
.main-navigation,
.main-navigation ul ul {
background-color: rgb(97, 101, 134);
}
/* 1.グローバルナビゲーションの設置 */

/* 2.目次のデザイン変更(表示/非表示つき) */
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}
.table-of-contents ul ul{
display: none;
}
.table-of-contents{
padding: 20px 10px 20px 40px;
border-radius: 5px;
background: #f0f0f0; /*背景色はここから変更*/
}
.table-of-contents ul{
font-size: 90%;
}
.table-of-contents ul{
margin-left: 0;
}
.show-area{
display: inline-block;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 0;
color: blue;
}
/* 2.目次のデザイン変更(表示/非表示つき) */

/* 3.見出し行のデザイン変更 */
.entry-content h3 {
color: rgb(59, 66, 126);/*文字色*/
background: rgb(243, 242, 252); /*背景色*/
padding: 10px 10px; /*見出しまわりのスペース 上下、左右*/
border-left: 9px solid rgb(97, 101, 134); /*見出し左の線*/
}
.entry-content h4 {
background: rgb(243, 242, 252); /*背景色*/
padding: 2px 2px; /*見出しまわりのスペース 上下、左右*/
border-left: 9px solid rgb(243, 242, 252); /*見出し左の線*/
}
/* 3.見出し行のデザイン変更 */

/* 4.蛍光ペン(緑)のように見える強調文字 */
em, strong {
font-weight: bold;
font-style: normal;
font-size: 105%;
background: -moz-linear-gradient(transparent 60%, #66FFCC 60%); /* Firefox用 */
background: -webkit-linear-gradient(transparent 60%, #66FFCC 60%); /* Safari用 */
background: -ms-linear-gradient(transparent 60%, #66FFCC 60%); /* IE用 */
background: -o-linear-gradient(transparent 60%, #66FFCC 60%); /* Opera用 */
background: linear-gradient(transparent 60%, #66FFCC 60%); /* Default */
}
/* 4.蛍光ペン(緑)のように見える強調文字 */

/* 5.投稿日付のデザイン変更 */
.date > a {
color: #fff; /*日付の文字色*/
}
.date {
color: #fff; /*日付の文字色*/
background: #444B99;/*背景色*/
padding: 2px 10px;/*日付の文字まわりのスペース*/
}
.date:before {
color: #fff; /*日付の文字色*/
content: "03a";
display: inline-block;
font-family: blogicon;
font-style: normal;
font-weight: normal;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 1px 10px;/*日付の文字まわりのスペース*/
}
/* 5.投稿日付のデザイン変更 */

/* 6.ページTOPへ戻るボタンの設置 */
/* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:10px;
right:10px;
padding:5px 8px;
color:#fff;
font-size:12px;
text-decoration:none;
background:#000;
}
/* ページトップへ戻るボタン:ホバー時 */
#pagetop:hover {
background:rgb(97, 101, 134);
}
/* 6.ページTOPへ戻るボタンの設置 */

/* 8.独自ソーシャルボタンの設置 */
/*シェアボタン*/
.share-3d{
margin-bottom: 3px;
text-align: center;
}
.share-3d-inner a {
position: relative;
display: inline-block;
width: 15%;
height: 40px;
line-height: 20px;
border-radius: 5px;
font-size: 16px;
text-align: center;
color: #ffffff;
text-decoration: none;
}
.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 .line-button{
position:relative;
top: 1px;
background: #00C300;
box-shadow: 0 3px 0 green;
}
.share-3d .share-3d a:active{
top: 3px;
box-shadow: none;
}
.share-3d .line-button:active{
top: 4px;
}
@media screen and (min-width: 480px) {
.line-hide{
display: none;
}
.share-3d-inner a{
width: 18%;
}
}
/* 8.独自ソーシャルボタンの設置 */

/* 9.コメントを書くデザインの変更 */
.leave-comment-title {
padding: 0;
width: 150px;
height: 30px;
line-height: 30px;
background-color: #f0f0f0;/*背景色*/
font-size: 14px;
font-weight: 500;
text-align: center;
display: inline-block;
text-decoration: none;
-webkit-border-radius: 20px;/*角丸はここを『30』*/
border-radius:20px; /*角丸はここを『30』*/
-webkit-transition: all .3s;
transition: all .3s;
}
.leave-comment-title:hover {
color: #FFF;/*押した後の文字色*/
background-color: #EA878D;/*押した後の背景色*/
}
/* 9.ココメントを書くデザインの変更 */

/* 10.サイドバータイトルのデザイン変更 */
.hatena-module-title {
color: #FFFFFF; /* 文字色*/
background: #444B99;/*背景色*/
padding: 10px 10px 10px 10px; /*見出しまわりのスペース 上下、左右*/
}
/* 10.サイドバータイトルのデザイン変更 */

/* 11.カテゴリのデザイン変更 */
.categories > a {
background: #f0f0f0;
}
/* 11.カテゴリのデザイン変更 */

/* 13.記事本文フォント関連の変更 */
/* 記事の文字 */
.entry-content {
  font-size:17px;
  color: #111;
  margin-bottom: 1em;/*行間スペース*/
  line-height: 1.6;/*文字の高さ*/
  letter-spacing: 0.8px;/*文字間隔*/
}
/* 記事の文字 */

/* 全体のフォント */
body {
font: 17px/1.8 "游ゴシック","YuGothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
font-weight:500;
}
/*記事のタイトル*/
h1.entry-title a {
  font: 18px/1.8 "游ゴシック","YuGothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
  color: #212121;
  font-weight: bold;
}
/* 全体のフォント */

/* トップページの記事一覧のデザインにメリハリをつける */
.list-entry-article .thumb-image {
  width: 100px; /*サムネイル画像の横幅*/
  height: 100px; /*サムネイルが画像の縦幅*/
  border-radius: 0em; /*サムネイル画像の角の丸みをなくす*/
  border: solid 3px rgb(61, 61, 61); /*画像の枠線をつける*/
}
/* トップページの記事一覧のデザインにメリハリをつける */
/* 13.記事本文フォント関連の変更 */

/* 14.続きを読むのデザイン変更 */
.entry-content .entry-see-more {
padding: 0;
width: 150px;
height: 30px;
line-height: 30px;
color: #FFF;/*文字色*/
background-color:rgb(97, 101, 134);/*背景色*/
font-size: 14px;
font-weight: 500;
text-align: center;
display: inline-block;
text-decoration: none;
-webkit-border-radius: 30px;/*角丸はここを『30』*/
border-radius:30px; /*角丸はここを『30』*/
-webkit-transition: all .3s;
transition: all .3s;
}
.entry-content .entry-see-more:hover {
color: #FFF;/*押した後の文字色*/
background-color: #EA878D;/*押した後の背景色*/
}
/* 14.続きを読むのデザイン変更 */

/* 15.ブログタイトルのデザイン変更 */
h1#title > a {
font-size: 20px;
}
/* 15.ブログタイトルのデザイン変更 */

/* 16.jQuery dataTablesの導入 */
.ar {
text-align: right;
}
.ac {
text-align: center;
}
.acz {
text-align: center;
color: #fff;
}
/* 16.jQuery dataTablesの導入 */
/* <system section="theme" selected="6653586347149180725"> */
@import "http://hatenablog.com/theme/6653586347149180725.css";
/* </system> */

/* <system section="background" selected="bg9"> */
body{ background-color:#e9fbff; background-image:url('/images/theme/backgrounds/theme9.gif'); background-repeat:repeat-x; background-attachment:scroll; background-position:left top; }
/* </system> */

/* 1.グローバルナビゲーションの設置 */
.main-navigation,
.main-navigation ul ul {
background-color: rgb(97, 101, 134);
}
/* 1.グローバルナビゲーションの設置 */

/* 2.目次のデザイン変更(表示/非表示つき) */
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}
.table-of-contents ul ul{
display: none;
}
.table-of-contents{
padding: 20px 10px 20px 40px;
border-radius: 5px;
background: #f0f0f0; /*背景色はここから変更*/
}
.table-of-contents ul{
font-size: 90%;
}
.table-of-contents ul{
margin-left: 0;
}
.show-area{
display: inline-block;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 0;
color: blue;
}
.table-of-contents a {
text-decoration: none;
}
/* 2.目次のデザイン変更(表示/非表示つき) */

/* 3.見出し行のデザイン変更 */
.entry-content h3 {
color: rgb(59, 66, 126);/*文字色*/
background: rgb(243, 242, 252); /*背景色*/
padding: 10px 10px; /*見出しまわりのスペース 上下、左右*/
border-left: 9px solid rgb(97, 101, 134); /*見出し左の線*/
}
.entry-content h4 {
background: rgb(243, 242, 252); /*背景色*/
padding: 2px 2px; /*見出しまわりのスペース 上下、左右*/
border-left: 9px solid rgb(243, 242, 252); /*見出し左の線*/
}
/* 3.見出し行のデザイン変更 */

/* 4.蛍光ペン(緑)のように見える強調文字 */
em, strong {
font-weight: bold;
font-style: normal;
font-size: 105%;
background: -moz-linear-gradient(transparent 60%, #66FFCC 60%); /* Firefox用 */
background: -webkit-linear-gradient(transparent 60%, #66FFCC 60%); /* Safari用 */
background: -ms-linear-gradient(transparent 60%, #66FFCC 60%); /* IE用 */
background: -o-linear-gradient(transparent 60%, #66FFCC 60%); /* Opera用 */
background: linear-gradient(transparent 60%, #66FFCC 60%); /* Default */
}
/* 4.蛍光ペン(緑)のように見える強調文字 */

/* 5.投稿日付のデザイン変更 */
.date > a {
color: #fff; /*日付の文字色*/
}
.date {
color: #fff; /*日付の文字色*/
background: #444B99;/*背景色*/
padding: 2px 10px;/*日付の文字まわりのスペース*/
}
.date:before {
color: #fff; /*日付の文字色*/
content: "03a";
display: inline-block;
font-family: blogicon;
font-style: normal;
font-weight: normal;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 1px 10px;/*日付の文字まわりのスペース*/
}
/* 5.投稿日付のデザイン変更 */

/* 6.ページTOPへ戻るボタンの設置 */
/* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:10px;
right:10px;
padding:5px 8px;
color:#fff;
font-size:12px;
text-decoration:none;
background:#000;
}
/* ページトップへ戻るボタン:ホバー時 */
#pagetop:hover {
background:rgb(97, 101, 134);
}
/* 6.ページTOPへ戻るボタンの設置 */

/* 8.独自ソーシャルボタンの設置 */
/*シェアボタン*/
.share-3d{
margin-bottom: 3px;
text-align: center;
}
.share-3d-inner a {
position: relative;
display: inline-block;
width: 15%;
height: 40px;
line-height: 20px;
border-radius: 5px;
font-size: 16px;
text-align: center;
color: #ffffff;
text-decoration: none;
}
.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 .line-button{
position:relative;
top: 1px;
background: #00C300;
box-shadow: 0 3px 0 green;
}
.share-3d .share-3d a:active{
top: 3px;
box-shadow: none;
}
.share-3d .line-button:active{
top: 4px;
}
@media screen and (min-width: 480px) {
.line-hide{
display: none;
}
.share-3d-inner a{
width: 18%;
}
}
/* 8.独自ソーシャルボタンの設置 */

/* 9.コメントを書くデザインの変更 */
.leave-comment-title {
padding: 0;
width: 150px;
height: 30px;
line-height: 30px;
background-color: #f0f0f0;/*背景色*/
font-size: 14px;
font-weight: 500;
text-align: center;
display: inline-block;
text-decoration: none;
-webkit-border-radius: 20px;/*角丸はここを『30』*/
border-radius:20px; /*角丸はここを『30』*/
-webkit-transition: all .3s;
transition: all .3s;
}
.leave-comment-title:hover {
color: #FFF;/*押した後の文字色*/
background-color: #EA878D;/*押した後の背景色*/
}
/* 9.ココメントを書くデザインの変更 */

/* 10.サイドバータイトルのデザイン変更 */
.hatena-module-title {
color: #FFFFFF; /* 文字色*/
background: #444B99;/*背景色*/
padding: 10px 10px 10px 10px; /*見出しまわりのスペース 上下、左右*/
}
/* 10.サイドバータイトルのデザイン変更 */

/* 11.カテゴリのデザイン変更 */
.categories > a {
background: #f0f0f0;
}
/* 11.カテゴリのデザイン変更 */

/* 13.記事本文フォント関連の変更 */
/* 記事の文字 */
.entry-content {
  font-size:17px;
  color: #111;
  margin-bottom: 1em;/*行間スペース*/
  line-height: 1.6;/*文字の高さ*/
  letter-spacing: 0.8px;/*文字間隔*/
}
/* 記事の文字 */

/* 全体のフォント */
body {
font: 17px/1.8 "游ゴシック","YuGothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
font-weight:500;
}
/*記事のタイトル*/
h1.entry-title a {
  font: 18px/1.8 "游ゴシック","YuGothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
  color: #212121;
  font-weight: bold;
}
/* 全体のフォント */

/* トップページの記事一覧のデザインにメリハリをつける */
.list-entry-article .thumb-image {
  width: 100px; /*サムネイル画像の横幅*/
  height: 100px; /*サムネイルが画像の縦幅*/
  border-radius: 0em; /*サムネイル画像の角の丸みをなくす*/
  border: solid 3px rgb(61, 61, 61); /*画像の枠線をつける*/
}
/* トップページの記事一覧のデザインにメリハリをつける */
/* 13.記事本文フォント関連の変更 */

/* 14.続きを読むのデザイン変更 */
.entry-content .entry-see-more {
padding: 0;
width: 150px;
height: 30px;
line-height: 30px;
color: #FFF;/*文字色*/
background-color:rgb(97, 101, 134);/*背景色*/
font-size: 14px;
font-weight: 500;
text-align: center;
display: inline-block;
text-decoration: none;
-webkit-border-radius: 30px;/*角丸はここを『30』*/
border-radius:30px; /*角丸はここを『30』*/
-webkit-transition: all .3s;
transition: all .3s;
}
.entry-content .entry-see-more:hover {
color: #FFF;/*押した後の文字色*/
background-color: #EA878D;/*押した後の背景色*/
}
/* 14.続きを読むのデザイン変更 */

/* 15.ブログタイトルのデザイン変更 */
h1#title > a {
font-size: 20px;
}
/* 15.ブログタイトルのデザイン変更 */

/* 16.jQuery dataTablesの導入 */
.ar {
text-align: right;
}
.ac {
text-align: center;
}
.acz {
text-align: center;
color: #fff
}
/* 16.jQuery dataTablesの導入 */

まとめ

本日紹介したのは、執筆時点(2016/3/5)の内容です。この手の作業が好きなので、おそらく明日以降、突然変わる可能性があります。そときは、都度、紹介していく予定ですので、よろしくお願いします。


本日の記事は、下記を参考にさせていただきました。ありがとうございます。

本当は他にも参考にさせていただいた記事がたくさんあるのですが、書ききれませんでした。適時追記していきます。ごめんなさい。

■ブログテーマ「Innocent」とナビゲーションバーの設置方法
moonnote.hateblo.jp

目次のデザイン変更(表示/非表示つき)
www.yukihy.com

ぱんくずリストの設置

bulldra.hatenablog.com

■独自ソーシャルボタンの設置
www.yukihy.com