イケてるTechブログを作るときの6つの手順 #Blog

皆さんは技術系のブログを書くときや、ブログを立ち上げよう！っていう時にどうし(て)ますか？

私もいざ立ち上げようとなったときに、色々調べたんですが、以下を満たすブログ投稿ツールの中では下記の3つが良さそうという結論に至りました。

markdownに対応している
syntax-highlight表示ができる
設定や投稿などの運用が楽

候補に挙がったのは、

Ghost
・mediumとtumblrの間という感じのTeck系にも使えてオシャレで高機能なブログ投稿ツール。
・syntax-highlightにも対応
・markdownで書ける
・有料でぼちぼち高いなという印象(無料お試しで使ってみたけど、ツールとしてはかなり良い！！)
WordPress
・高機能だけど、設定がめんどくさいのと作り込もうとすると微妙に時間がかかる
Tumblr
・高機能で設定が簡単。
・基本無料
・syntax-highlightにも対応させられる
・markdownで書ける

以上の特徴から、うちはTumblrでTechBlogを書くことに決定！！

となれば、Tumblrでイケてるブログを作ろうってことになるので、以下Tumblrでイケてる(雰囲気の)Techブログを作るときの手順をまとめてみました。

1. tumblrでコードがハイライト表示されるようにする

syntax-highlightができるようにするには、google-code-prettifyを読み込ませるのが一番早そうです。
<head>タグの中に下記のコードを挿入すればgoogle-code-prettifyでsyntax-highlightが設定できます。

<!-- Code syntax highlight -->
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript " src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript">
$(function(){ 
    $('pre').css({
        'overflow-x': 'scroll',
        'background-color': '#f6f6f6',
        'border': '1px dotted #ccc',
        'padding': '0.8em'
    });
    $('pre code').addClass('prettyprint');
    prettyPrint();
});
</script>

2. デザインをカスタマイズする

cssもカスタマイズできるので、theme gallaryから探してみるか自分でcssを書いてカスタマイズしてみましょう！
google-code-prettifyのデザインギャラリーはこちら

3. イケてるエディタと連携して、Tumblrに投稿できるように設定する

一番おすすめなのは、「StackEdit」というオンラインエディタです。
StackEditはこちら

「StackEdit」がイケてる理由は下記7つ。

マークダウンに対応
主要な記法はショートカットが用意されている
リアルタイムにプレビューが見れる
Evernote, Dropbox, Tumblr, Blogger, Gist, Google Drive, WordPress, SSH serverなど主要なサービスやサーバーとの連携・同期が簡単
画像も埋め込める
文字数カウンタや行数、パラグラフ数などもリアルタイムにチェックできる
HTMLコードとしてexportもできる

※細かいことを挙げればもっとある。

4. シェアボタンを導入する

1. 自分で導入

Tumblr自体、HTMLコードを編集できるので、自分で入れたい方はソースコードをいじって導入できます。

2. 簡単におしゃれなシェアボタンを導入する

すごく手軽におしゃれなシェアボタンを導入するならAddThisが提供しているシェアツールを使うといいです。
AddThisのシェアツールはこちら

AddThisで生成したコードをTumblrのHTMLコードの編集画面で挿入すれば導入完了！

5. GoogleAnalyticsを導入する

下記リンクを参照してGoogleAnalyticsを導入してください。
TumblrでGoogleAnalyticsを設定する

終わりに

こんな感じで、とりあえず自分のテストアカウントを作ってみました！
実際に作ったブログはこちら

うちも頑張って技術のアウトプットをしていこうと思います！！
Atrae Tech Blog