WordPressテーマ「CoCoon」で始める技術ブログ

Warning: count(): Parameter must be an array or an object that implements Countable in /home/crude/xn--fhqq99a3lb.jp/public_html/wp-content/themes/cocoon-master/lib/shortcodes-amazon.php on line 745

技術ブログを始めるにあたってWordpressを使用し、かつ無料テーマであるCoCoonを採用してみました。テーマの基本的な機能だけでかなり読みやすい記事がかけると思います。みんながみんなCSSやらPHPやらに詳しいわけでは無いと思うので、ノーカスタマイズで行けるというのはかなりおすすめです。今回は記事を書くときになんとなく気にしているポイントも織り交ぜて説明してみます。

Index

コードハイライト
コードブロック
補足説明
まとめ
本格的に学ぶなら

コードハイライト

技術ブログといえばコード！コードといえばコードハイライトですね。WordpressではCrayon Syntax Highlighterなどのプラグインを使用することも多いですが、CoCoonはテーマの標準機能で対応しています。

ソースコードをハイライト表示させる方法

テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。

ハイライトスタイルも管理画面から設定でき、コード部分を<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>タグはインライン要素なので囲んだ部分での改行はされませんが、長い単語を囲んだ場合にモバイル表示で横スクロールが発生してしまうため、強制的に改行させています。若干本末転倒感がありますが表示を優先しています。

WordPressのビジュアルエディタで<code>タグを使う場合、該当部分にバッククォートを入力するだけでタグを設定してくれます。

補足説明

CoCoonではデフォルトで補足説明のスタイルが設定されており、ビジュアルエディタから設定することが出来ます。

拡張クラスの補足説明ボックスのスタイルを変更しました

Cocoonの拡張クラスのインフォボックス、クエスチョンボックス、エクスクラメーションボックスもうデザインを変更しました。

asciidocやsphinxなんかでドキュメントを書いている人はNOTEとかWARNINGとか入れたくなりますよね。それに近しいことが簡単にできるわけです。このブログではこんな使い方をしています。

記事の途中に補足的な説明を入れたい場合。いわゆるINFO。

わからなかったポイントや調べきれなかった事を補足したい場合。

ハマりそうなポイントや注意喚起したい場合。いわゆるWARNING。

メモ的な内容や独り言的な内容を書く場合。

コレは・・・あんまり使わないかも(๑´ڡ`๑)
使い所を思いついたらでいいかなぁ。

アイコン付きの補足説明ボックスの他にもデフォルトで用意されているボックス系のスタイルがたくさんあります。

こんなのとか

私はアイコン付きのものが一番しっくり来るのでそれを主に使っていくと思いますが、バリエーションがかなり豊富で自分好みの表現ができると思います。というかすごい。

スタイルの挿入もビジュアルエディタから選択出来ますし、ビジュアルエディタで表示されるスタイルが何もしなくても実際のスタイルで表示される仕様なので初心者でもすごく書きやすいです。

まとめ

仕事で技術系ドキュメントを書く場合にasciidocやsphinxを使うとこんな感じになる（する）なぁ～というポイントもCoCoonの標準機能+αで簡単にブログ上で出来ますね、というお話でした。もちろんブログなのでちゃんとした文書を書きたいわけでは無いのですがまぁ雰囲気ですよ、雰囲気。

そもそもCoCoonはブログテーマとして非常に高機能で使いやすいので、技術ブログであるかに関わらずおすすめできると思います。是非お試しあれ。

本格的に学ぶなら

本買ってみるのも良いかもしれません。

WordPressレッスンブックHTML5&CSS3準拠

ソシム

Amazonの商品レビュー・口コミを見る

Amazon