皆さんは技術系のブログを書くときや、ブログを立ち上げよう！っていう時にどうし(て)ますか？
私もいざ立ち上げようとなったときに、色々調べたんですが、以下を満たすブログ投稿ツールの中では下記の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