技術ブログを始めるにあたってWordpressを使用し、かつ無料テーマであるCoCoonを採用してみました。テーマの基本的な機能だけでかなり読みやすい記事がかけると思います。みんながみんなCSSやらPHPやらに詳しいわけでは無いと思うので、ノーカスタマイズで行けるというのはかなりおすすめです。今回は記事を書くときになんとなく気にしているポイントも織り交ぜて説明してみます。
コードハイライト
技術ブログといえばコード！コードといえばコードハイライトですね。WordpressではCrayon Syntax Highlighterなどのプラグインを使用することも多いですが、CoCoonはテーマの標準機能で対応しています。
ハイライトスタイルも管理画面から設定でき、コード部分を<pre>タグで囲むだけなので簡単ですね。<pre>タグのclass属性にしているする言語タイプ毎にショートコードに登録しておいても良いでしょう。
コードブロック
本文中にコード断片を書く場合に<code>タグで囲むことってよくありますよね。Springのリファレンスなんかでもよく使われている書き方で馴染みもあると思います。ただ、こんな感じで囲み装飾がかかっていると読みやすくで嬉しいので、CSSをちょっと書き足しています。
CoCoonでは子テーマのCSSをカスタマイズするのが基本なので、こんなスタイルを設定しています。
:not(pre)>code {
/* 囲み装飾 */
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 4px;
padding: 1px 1px 0;
text-shadow: none;
/* 改行指定 */
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
<code>タグはインライン要素なので囲んだ部分での改行はされませんが、長い単語を囲んだ場合にモバイル表示で横スクロールが発生してしまうため、強制的に改行させています。若干本末転倒感がありますが表示を優先しています。<code>タグを使う場合、該当部分にバッククォートを入力するだけでタグを設定してくれます。補足説明
CoCoonではデフォルトで補足説明のスタイルが設定されており、ビジュアルエディタから設定することが出来ます。
asciidocやsphinxなんかでドキュメントを書いている人はNOTEとかWARNINGとか入れたくなりますよね。それに近しいことが簡単にできるわけです。このブログではこんな使い方をしています。
使い所を思いついたらでいいかなぁ。
まとめ
仕事で技術系ドキュメントを書く場合にasciidocやsphinxを使うとこんな感じになる（する）なぁ～というポイントもCoCoonの標準機能+αで簡単にブログ上で出来ますね、というお話でした。もちろんブログなのでちゃんとした文書を書きたいわけでは無いのですがまぁ雰囲気ですよ、雰囲気。
そもそもCoCoonはブログテーマとして非常に高機能で使いやすいので、技術ブログであるかに関わらずおすすめできると思います。是非お試しあれ。
本格的に学ぶなら
本買ってみるのも良いかもしれません。
この記事に対するコメント