借金エンジニアのささやき

借金まみれのエンジニアが色々ささやきます。(色々:借金、ダイエット、R言語、Python、ゲーム、ミスチル)

はてなブログの設定とカスタマイズ内容を公開します


スポンサードリンク

おはようございます。こんにちは。こんばんは。

借金エンジニアです。

はてなブログのカスタマイズを色々行ってきましたが、何をどうカスタマイズしたか覚えていないので、設定全てを公開したいと思います。ほとんど全てがどこからかコピペした設定のはずですので、ご自由にお使いください。

変更したら、この記事も更新するつもりですが、もし同じ設定にしたのに、上手くいかない場合はお問い合わせください。

テーマ

テーマはどれを使用しているか、ばっちり覚えています。

codomisuさんが公開されている「Minimalism」を使用しています。 はてなブログのテーマストアで公開されていますが、人気1位になっていますね。

テーマ ストア - はてなブログ

「Minimalism」のデモサイト minimalism-theme.hatenablog.com

シンプルで、すごくキレイなので、カスタマイズしなくても、かっこいいブログになります。 カスタマイズしないほうが良い、かも。。。

設定

はてなブログの管理画面のメニューにある「設定」の内容です。

基本設定

参考にする項目なさそうですが、まずは基本設定です。

基本設定

about編集ページは下のようになっています。

about編集ページ

詳細設定

次は詳細設定です。 (画質悪くて、見えませんね。。。あとで修正します)

詳細設定

独自ドメインにしたり、「headに要素を追加」に色々追加した記憶があります。
最近、HTTPS化も有効にしました。
「headに要素を追加」は次のようにしています。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-XXXXXXXXXXXXXXXX",
    enable_page_level_ads: true
  });
</script>

<style type="text/css">
/* 強調表示を蛍光ペン風に */
article strong{
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background:#fcfc60 !important;
    background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}
/* bタグは太字 */
article b{
    font-weight:bold !important;
}
</style>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- Webフォント Source Code Pro -->
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

「google_ad_client:」はAdsenseのIDみたいなものだったはずなので、ご自身のIDを入れてください。

蛍光ペン風はこんな感じです。

bタグはこんな感じです。 これはデフォルトかな???

公開設定

設定の最後は公開設定です。

公開設定

デザイン(カスタマイズ)

設定の次は管理画面のメニューにある「デザイン」の中の「カスタマイズ」の内容です。
背景画像、背景色は初期設定のままなので、割愛します。

ヘッダ

まずは「ヘッダ」です。

ヘッダ

「タイトル下」は次のようになっています。

<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="https://www.shakkinengineer.com/"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
  <div class="menu"><a href="https://www.shakkinengineer.com/archive/category/%E5%80%9F%E9%87%91"><i class="fa fa-jpy" aria-hidden="true"></i> 借金</a></div>
  <div class="menu"><a href="https://www.shakkinengineer.com/archive/category/%E3%83%80%E3%82%A4%E3%82%A8%E3%83%83%E3%83%88"><i class="fa fa-balance-scale" aria-hidden="true"></i> ダイエット</a></div>
  <div class="menu"><a href="https://www.shakkinengineer.com/archive/category/R%E8%A8%80%E8%AA%9E"><i class="fa fa-graduation-cap" aria-hidden="true"></i> R言語</a></div>
  <div class="menu"><a href="https://www.shakkinengineer.com/entry/2017/06/01/000000"><i class="fa fa-envelope-o" aria-hidden="true"></i> お問い合わせ</a></div>
  <div class="menu"><a href="https://www.shakkinengineer.com/entry/2017/06/01/000000_1"><i class="fa fa-user-secret" aria-hidden="true"></i> プライバシーポリシー</a></div>
</div>
</nav>

<!-- ソースコード -->
<style type="text/css">
  .entry-content pre,.entry-content code{
    font-family: "Source Code Pro", sans-serif;
    font-size: 80%;
    background-color: #333;
    color: #eee;
  }
  /*ソースコード色*/
.synSpecial { color: #dc322f }
.synType { color: #b58900 }
.synComment { color: #657b83}
.synPreProc { color: #cb4b16 }
.synIdentifier { color: #268bd2 }
.synConstant { color: #2aa198 }
.synStatement { color: #859900 }
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></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>

ここではメニュー(HOME、借金、・・・のとこ)の設定、ソースコード貼り付けた時の色の設定、目次の表示/非表示ボタンが設定されているみたいですね。
メニューのURLやアイコンは各自設定ください。

記事

続いて「記事」です。

記事

ソーシャルパーツは

ソーシャルパーツ

これのことですね。

「記事上」は次のようになっています。

<div class="shrbtn">
  <!-- HatenaBookmark -->
  <a href="https://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share_btn">
    <span class="htvcenter" style="line-height: 1.6;">
      <i class="blogicon-bookmark" style="font-size:22px"></i>
    </span>
  </a>
  <!-- twitter -->
  <a href="https://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-twitter"></i>
  </a>
  <!-- facebook -->
  <a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-facebook"></i>
  </a>
  <a href="https://getpocket.com/edit?url={URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-get-pocket"></i>
  </a>
  <!-- feedly -->
  <a href="https://feedly.com/i/subscription/feed/http://ブログURL/feed" target="_blank" class="share_btn">
    <i class="fa fa-rss"></i>
  </a>
</div> 

<div align="center"><br>
スポンサードリンク<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 借金エンジニア336×280 記事上部 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br>
</div>

「記事上」では、SNSのボタン、Adsenseの設定をしているようです。
Adsenseの広告を掲載する場合、「スポンサードリンク」などを広告であることを明示する必要がありますので、お忘れないように。

「記事下」は次のようになっています。

<div class="shrbtn">
  <!-- HatenaBookmark -->
  <a href="https://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share_btn">
    <span class="htvcenter" style="line-height: 1.6;">
      <i class="blogicon-bookmark" style="font-size:22px"></i>
    </span>
  </a>
  <!-- twitter -->
  <a href="https://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-twitter"></i>
  </a>
  <!-- facebook -->
  <a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-facebook"></i>
  </a>
  <a href="https://getpocket.com/edit?url={URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-get-pocket"></i>
  </a>
  <!-- feedly -->
  <a href="https://feedly.com/i/subscription/feed/http://ブログURL/feed" target="_blank" class="share_btn">
    <i class="fa fa-rss"></i>
  </a>
</div> 

<div align="center"><br>
スポンサードリンク<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 借金エンジニア336×280 記事下1 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br>
</div>

<script>//<![CDATA[
window.Shisuh = (window.Shisuh) ? window.Shisuh : {};Shisuh.topUrl='https://www.shakkinengineer.com';Shisuh.type='Hatebu';Shisuh.headerText='もしよろしければ、こちらの記事もお読みいただけると喜びます!';Shisuh.alg='Related';Shisuh.showBottom='1';Shisuh.insertAfterScript='1';Shisuh.showInsert='1';Shisuh.originalTemplateTypeWide='Panel';Shisuh.originalTemplateTypeNarrow='Panel';
//]]></script><script id="ssRelatedPageSdk" type="text/javascript" charset="utf-8" src="https://www.shisuh.com/djs/relatedPageFeed/"></script>

「記事下」は「記事上」と同じSNSのボタンとAdsense、あと「記事上」には無い、合わせて読んで欲しい他の記事へのリンクを掲載しています。
合わせて読んで欲しい他の記事は「Milliard」というサービス(プラグイン?)を使用しています。

corp.shisuh.com

パンくずリストは

パンくずリスト

これですね。

サイドバー

続きまして、「サイドバー」の設定です。

サイドバー

表示がどうなるかは、この記事にもサイドバーが表示されていますので、そちらを確認してください。
それでは、それぞれの設定を見ていきましょう。

About

「About」はプロフィール」モジュールのタイトルを「About」にしたものです。

About設定

スポンサードリンク

「スポンサードリンク」は「HTTP」モジュールを使用しています。「HTTP」モジュールは「記事上」などのようにHTTPのコードを書き込んで、自由にカスタマイズができるモジュールです。

「スポンサードリンク」では次のように設定しています。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 借金エンジニアサイド -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Adsenseの設定ですね。
「記事上」「記事下」と同じように広告を表示しています。

「Search」はそのままですが「検索」モジュールです。
設定はタイトルだけなので割愛します。

History

「History」は「月別アーカイブ」モジュールです。
設定はタイトルと表示形式(リスト形式とカレンダー形式)だけなので、これも割愛します。
本ブログは「リスト形式」にしています。

カテゴリー

これはそのままで「カテゴリー」モジュールです。
設定内容は割愛します。

Latest

これもそのままで、「最新記事」モジュールです。
「高度なカスタマイズ」もできるようですが、していませんので、割愛します。

フッター

続きまして、「フッター」です。
「フッター」はHTMLを直接記入します。
次のようになっています。

<footer id="footer">
    <div id="footer-menu">
        <div id="footer-blog-title-content">
      <a href="https://www.shakkinengineer.com/">借金エンジニアのささやき</a>
    </div>
      <nav>
        <div class="footer-links">
          <ul>
             <li>
                 <a href="https://www.shakkinengineer.com/entry/2017/06/01/000000">お問い合わせ</a>
             </li>
             <li>
                 <a href="https://www.shakkinengineer.com/entry/2017/06/01/000000_1">プライバシーポリシー</a>
             </li>
          </ul>
         </div>
       </nav>
       <p class="copyright">© 2018 借金エンジニアのささやき All rights reserved.</p>
    </div>
</footer>

<div id="page-top">    
 <a id="move-page-top"><i class="blogicon-chevron-up fa-3x"></i></a>
</div>

<script>

  $(window).scroll(function(){
    var now = $(window).scrollTop();
    if(now > 500){
      $("#page-top").fadeIn("slow");
    }else{
      $("#page-top").fadeOut("slow");
    }
  });
  $("#move-page-top").click(function(){
    $("html,body").animate({scrollTop:0},"slow");
  });
</script>

その名の通りフッターの設定ですが、TOPへ戻るボタンもここに設定しています。

{}デザインCSS

最後に「デザインCSS」です。
表示・デザインや動きに関する設定はまとめてここに設定されています。
「デザインCSS」の設定は次のようになっています。

/* <system section="theme" selected="8599973812270629022"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812270629022.css");
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */
@media screen and (max-width: 640px){
  #blog-title #title {
      font-size: 21px !important;
  }
}

h3 {
background: #FF8C00;/*背景色*/
color: #FFFFFF;
padding: 0.5em;/*文字まわり(上下左右)の余白*/
}

/*h4見出し*/
h4 {
position: relative;
padding-left: 25px;
}

h4:before {
position: absolute;
content: '';
bottom: -3px;
left: 0;
width: 0;
height: 0;
border: none;
border-left: solid 15px transparent;
border-bottom: solid 15px #FFA500;
}
h4:after {
position: absolute;
content: '';
bottom: -3px;
left: 10px;
width: 100%;
border-bottom: solid 3px #FFA500;
}


/*h5見出し*/
h5 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}

h5:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #FFA500; /*アイコン色*/
}


/*h6見出し*/
h6{
position: relative;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
background: #f4f4f4;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
}

h6:after {/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ POINT';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}

/*フォント*/
@import url(https://fonts.googleapis.com/css?family=Quicksand);
p,h1,h2,h3,h4,h5,h6,body,.entry-title{
    font-family:'Quicksand', sans-serif;
}

.table-of-contents{
    display:none
}

.show-area{
  cursor: pointer;
  color: #47a1e5
}

/* フッター */
#bottom-editarea {
    width: 100%;
    margin: 0 auto;
    background: #7f8c8d;
    padding: 0;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#footer {
    text-align: center;
    color: #fff;
    background: #fff;
    width: 100%;
    margin: 0;
    padding: 2em 40px 1em 40px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
    text-align: center;
    font-size: 80%;
}
#footer-blog-title-content a {
    font-size: 25px;
    font-weight: 100;
    color: orange;
}
.footer-links ul {
    list-style: none;
    padding: 0;
}
.footer-links ul li {
    display: inline-block;
    padding: 0 6px;
    font-size: 14.5px;
    box-sizing: border-box;
}
.copyright {
    font-size: 10px;
    color: orange;
}

/* ページトップへ戻るボタン */
#page-top {
  display:none;
  position:fixed;
  right:10px;
  bottom:20px;
  margin: 0;
  padding: 0;
  text-align:center;
}

#move-page-top{
  color:rgba(0,0,0,0.6);
  text-decoration:none;
  display:block;
  cursor:pointer;
}

/* ページトップへ戻るボタン:ホバー時 */
#move-page-top:hover{
  color:rgba(0,0,0,0.8);
}

一番上の「@import」は何かテーマを適用すると自動で入ります。
右にあるURLにアクセスすると、使用しているテーマがどんな設定になっているか分かるので、CSSの勉強になりますね。

あとは、見出しのデザインだったり、フッターやTOPへ戻るボタンのデザインなんかが設定されています。

おわりに

いかがでしたでしょうか?

「Minimalism」のデフォルトからほとんど変わっていないように思われるかもしれませんが、なんか色々変えた感じでいます。
CSSを勉強すれば、もっと自由に変えられるんだと思いますが、美的センス無いからダメかな。

また何か変更したら、この記事も更新する予定です。

参考にした記事も、思い出したらここで紹介したいと思っています。

(公開したらマズイものがないかと、少しドキドキです)

以上です。