ねこ的アルゴリズム

技術的な話メインの雑記ブログ

【エンジニアブログ向け】すぐできる!はてなブログのカスタマイズ方法

よーし、ブログはじめてみよー!

とはいうものの、最低限必要な設定くらいはやっておくか。

…む。調べてみると案外多いぞ…!めんどくさい!!

そう思ってしまったのが私です笑

本来、ブログを書こう!と思ったのは、何かしら書き溜めておきたいことや、公開したいことがあったからのはず。

それが、その前のカスタマイズで詰まっていては元も子もありません。

色々手を出すと設定するだけで数日終わります

そうならないよう、最低限綺麗に表示されるための設定をまとめました。

本ブログでも実施した設定をご紹介いたします。(細かい部分は割愛。)

SPONSORED LINK

テーマの選択

基本的には、テーマストア から、ご自身のお好みのものを選択していただければよいのですが、 ナビゲーションバーを楽に設置したい場合 は、テーマに Bootstrap が組み込まれているものを選択したほうが無難です。

ランキング上位のテーマのものは、入っているものが多いですね。(ねこ的アルゴリズムは、 Innocent を使わせていただいてます。)

f:id:neko_aquaalta:20170205215838p:plain

f:id:neko_aquaalta:20170205215845p:plain

もちろん、他のテーマで気に入ったものがあれば、そちらを使っても OKです。

ナビゲーションバーについては、Bootstrap が提供している機能なので、好きなテーマに Bootstrap を入れてあげれば設置は楽です。

以下が参考になるかと思います。

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

次に、ナビゲーションバーを実際に設置します。

ダッシュボードから

デザイン > カスタマイズ > ヘッダー > タイトル下 に以下のような html を追加します。

<!-- ナビゲーションバー -->
<nav class="main-navigation">
    <div class="menu-toggle">メニュー</div>
    <div class="main-navigation-inner">
        <ul>
            <li><a href="http://www.cat-algorithm.com/">Top</a></li>
            <li><a href="http://www.cat-algorithm.com/archive/category/プログラミング">プログラミング</a></li>
            <li><a href="http://www.cat-algorithm.com/archive/category/インフラ">インフラ</a></li>
            <li><a href="http://www.cat-algorithm.com/archive/category/Tips">Tips</a></li>
            <li><a href="http://www.cat-algorithm.com/archive/category/雑記">雑記</a></li>
        </ul>
    </div>
</nav>

これで、(デザインはデフォのままですが)ナビゲーションメニューが追加されました。

あとは、 Tips などのカテゴリを記事に設定してあげれば OK です。

カスタマイズする場合は、 以下を参照すると良いです。

CSS カスタマイズ

まず方法ですが、 デザイン > カスタマイズ > デザインCSS からカスタマイズできるようになっています。

本ブログで手を加えている css は(一部除いていますが)以下になります。

!important 使っていたり、全く綺麗ではありませんが、 ご利用はご自由にどうぞ。

body{font-family: Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif}

#blog-title{height:120px; margin-top: 10px !important; padding: 0;}
#blog-title-inner{background-position: 80% 60% !important; padding: 0; height: 120px !important; line-height: 70px;}
.main-navigation{background-color: rgba(0,0,0,0.5)}

.entry-date{color: #fff; background: #6692c0; padding: 0px 6px; margin-left: 10px; width: 65px; font-size: 12px; text-align: center;}
.entry-date a:hover{color: #ddd}
.entry-title{border-left: 8px solid #6692c0; padding: 8px; background-color: #F8F8FF;}
.entry-content h2, .entry-content h3{border-bottom: 1px solid #dddddd; border-left: 8px solid #6692c0; padding-left: 8px}
.entry-content h2{margin: 1.8em 0 1.0em 0; height: 40px; line-height: 40px; font-size: 1.5em;}
.entry-content code{color: rgb(77, 77, 77); background-color: rgba(0,0,0, 0.03); padding: 5px}
.entry-content pre{font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 0.6em 1.2em}
.entry-content strong{background: linear-gradient(transparent 60%, #ffffcc 40%);}

.hatena-module{margin-bottom:20px;}
.hatena-module-title{font-size: 120%; margin: 0.5em; border-bottom: 3px solid;}
.hatena-module-title:before{content: none !important;}

/*follow-buttons*/
.follow-buttons a{display: block; height: 40px; line-height: 40px; width: 100%; font-size: 16px; text-align: center; text-decoration: none;}
.follow-buttons .hatena{color: #3D3F44; border: 2px solid #3D3F44; background: #ffffff;  border-radius: 5px; margin-bottom: 5px;}
.follow-buttons .hatena:hover{color: #ffffff; background: #3D3F44; transition: all .3s;}
.follow-buttons .hatena:hover a{color: #ffffff}

.follow-buttons .twitter{color: #00ACEE; border: 2px solid #00ACEE; background: #ffffff;  border-radius: 5px; margin-bottom: 5px;}
.follow-buttons .twitter:hover{color: #ffffff; background: #00ACEE; transition: all .3s}
.follow-buttons .twitter:hover a{color: #ffffff}

.follow-buttons .feedly{color: #70ca3b; border: 2px solid #70ca3b; background: #ffffff;  border-radius: 5px; margin-bottom: 5px;}
.follow-buttons .feedly:hover{color: #ffffff; background: #70ca3b; transition: all .3s}
.follow-buttons .feedly:hover a{color: #ffffff}

/*Common*/
.text-small{font-size: 10px}

/*Auto title*/
article .entry-content .sectionList {
  background: #f8f8f8;
  margin: 30px 0;
  padding: 15px;
  border: 1px solid #ccc;
}
article .entry-content .sectionList h3 {
  font-size: 110%;
  margin: 0;
}
article .entry-content .sectionList ol {
  margin: 10px 0 0;
  padding: 0 0 0 1.5em;
  list-style: decimal;
}

シンタックスハイライト対応

本記事でも htmlcss に色が付いていると思いますが、このような機能をシンタックスハイライトと言います。

はてなブログでも、デフォルトで色がつくようになっているのですが、ここのテーマを少しいじりました。まぁこの辺は完全に好みですね。以下を参考にしました。

moonnote.hateblo.jp

その他のおすすめ設定

挙げればキリがないですが、以下のものは時間があるときに調べてやっておいたほうが無難です。

最近はエンジニアのアウトプットとしては Qiita が主流ですが、雑記も含めて書くとなるとブログに 1 本化してしまったほうが楽でいいです。

ではまた!ちんじゅうでした。


SPONSORED LINK