読者です 読者をやめる 読者になる 読者になる
「 s e a r c h 」 ら へ ん へ い く ボ タ ン

ブログ整備

テーマを選びタグクラウドと数式を設定.見た目が綺麗だとなんかうれしい.ただしなるべくありのままに.



求めるブログサービスメモ

優先度高い順.

  • Markdown対応
  • メンテナンスに手間がかからないこと
  • サイト内検索機能
  • 画像埋め込み
  • レスポンシブデザイン
  • 数式
  • シンタックスハイライト
  • タグ・タグクラウド表示
  • gist埋め込み?
  • 共有ボタンとかあんまいらない気がする
  • 広告はない方がいい

Tumblrはかなり自由だけど整備が面倒だった.はてなダイアリーも検討したがはてなブログが主軸ブランドみたい*1 だからよしておく.しかもはてなダイアリーはてな記法しか使えない.

テーマ選択

ornamentにした.選定基準は

  • さっぱりしてること
  • レスポンシブデザイン
  • なんとなく見ための好み

くらい.テーマに不足しているサービス

  • タグクラウド: なんかおもしろそう
  • 数式: 予定はないけど数式使って話がしたい

を設定する.メンテナンス方針として深入りしないことを大事にする.初めからやり直すとしても数分で再現できるような設定を心がける.

タグクラウド風カテゴリモジュールを作る

カテゴリモジュールをcssjavascriptで調整することで実現する*2.まず,[デザイン設定]→[カスタマイズ]タブ →[デザインCSS]の末尾に

div.hatena-module-category div.hatena-module-body ul li {
    display: inline;
    margin: 0 0.3em; }

を貼り付ける.次に[デザイン設定]→[カスタマイズ]タブ →[サイドバー]の[+モジュールを追加]→[カテゴリ]でカテゴリモジュールを追加する.最後に[ヘッダ]→[タイトル下]に次のコードを貼り付ける.

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
// タグクラウドもどき
$(function() {
  var categories = $(".hatena-module-category ul li a");
  $.each(
    categories,
    function(index, domEle) {
      var ele = $(domEle);
      var texts = $.trim(ele.text());
      // リンクテキストから記事件数を取得
      var count1 = texts.match(/\([^\(\s +]+\)/);
      var count2 = count1[0].match(/\d+/);
      // 大きさ指定 Start
      if(count2 >= 10) ele.css("font-size", "250%");
      else if(count2 >= 5) ele.css("font-size", "200%");
      else if(count2 >= 3) ele.css("font-size", "150%");
      else if(count2 >= 2) ele.css("font-size", "120%");
      else ele.css("font-size", "90%");
      // 大きさ指定 End
      // リンクテキストから記事件数を除去
      ele.text($.trim(texts.replace(/\([^\(\s +]+\)/, '')));
      // ツールチップに記事件数含めて表示する(title要素)
      ele.attr("title", texts);
      // 追加: リンクテキストの下線を非表示に.
      ele.css("text-decoration", "none");
    }
  );
});
</script>

以上で完了.

数式を使えるようにする

数式を使えるようにしておきたい.MathJax*3 を使う.ヘッダにscriptタグを書いておけば良さそう.[ヘッダ]→[タイトル下]に

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: { equationNumbers: { autoNumber: "AMS" } }
});
</script>
<script
  type="text/javascript"
  src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
></script>

を貼り付ける.上の部分は式番号を振るオプション*4.下の部分がMathJax本体.ためしてみよう.たとえば

\begin{equation} \mathcal{Z}[x_{n}]=\sum_{n=-\infty}^{\infty} x_{n}z^{-n} \label{eq} \end{equation}

\begin{equation}
\mathcal{Z}[x\_{n}]=\sum\_{n=-\infty}^{\infty} x\_{n}z^{-n}
\end{equation}

と書く._,*[]()はエスケープしないといけないらしい*5 .式番号はequation環境内で\nonumberと書くことで非表示にできる.\label{eq}と書いてある.これによって式\eqref{eq}と書くと「式\eqref{eq}」となる*6.記事を修正したときはブラウザで更新する.そうしないとMathJaxが読み込まれず数式が正しく表示されない.

はてなキーワードの下線を非表示にする

a.keywordのプロパティをいじればできる*7.[デザイン設定]→[カスタマイズ]タブ →[デザインCSS]の末尾に

/* 邪魔なキーワード下線を消す */
a.keyword {
    border: 0 !important;
    text-decoration: none !important;
    pointer-events: none !important;
    cursor: default;
    color: #5A5A5A;
}

を貼り付けて完了.