ブログの文字サイズって小さいことが多いと思いませんか？ 今回は一行の文字数とフォントサイズ、行間、文字間隔など、読者が読みやすいCSS設定について考えていきます。 1行の最適な文字数を元にブログの読みやすさについて深堀りしてみました。 デフォルトの文字サイズサイズが小さい設定で読みにくいように思えたのでCSSカスタマイズで大きさを調整し、最適なブログデザインを目指します。 はてなブログテーマの文字サイズ設定が小さい pタグのフォントサイズを調査 1行の文字数をどのくらいにしたら読みやすいブログデザインになるのか ブログでの横書き表示は1行35文字ぐらいが読みやすい スマホでは1行15文字から20文字程度が読みやすい ブログの行間や文字間隔についても考えてみる ブログのフォントサイズを読みやすいサイズにするCSS設定 はてなブログテーマInnocentのフォントサイズを大きくするCSSカスタ

d3-graphvizを使用してブラウザ上にフローチャート図を表示する方法について説明します。 D3.jsとGraphvizを使用して動的グラフをブラウザで表示してみましょう。 いちいち画像ファイルを出力しなくともDOT言語で記述したグラフをブラウザに表示することができ大変便利です！ d3-graphvizとは ウェブブラウザにフローチャート図を表示する d3-Graphvizの使い方 はてなブログで使う方法 d3-graphvizとは d3-graphvizとはDOT言語で書かれたファイルをGraphvizを用いてブラウザ上に表示させるオープンソース・ソフトウェアです。 Githubにソースがあります。 github.com D3.jsとはブラウザ上で動的にコンテンツを扱うJavaScriptライブラリです。 公式サイトはこちらをご参照ください。 d3js.org d3-graphviz

CSSだけを使ってtableを見やすく表示するカスタマイズ方法を備忘録として書いておきます。 スマホ表示もレスポンシブ対応を含めて考えていきます。 tableを見やすくするためにテーブルセルに枠線をつけます。さらにヘッダ領域に背景色をつけ、何を比較しているのか目立つようにします。 このカスタマイズでtableを更に見やすく表示しようという作戦です。 tableをどう表示するか スマホ表示 レスポンシブ対応 tableに枠線をつけるCSS テーブルヘッダに背景色をつける マークダウン記法でtableを書く tableをどう表示するか ブログを読むときに内容がtableで表にしてあると分かりやすいということが多いですよね。 列ごとの内容が簡単に比較できますから。 文字ばかりに頼った記述だと読者は疲れてしまいます。テーブル表示を織り交ぜることで読者が楽に内容を読み取ることができるようになります。

オリジナルテーマを制作するにあたり、まずCSSの開発環境を整えます。 はてなブログでのテーマ制作とはすなわちイコールCSSの開発だからです。 今回はNode.jsを使ってCSSの開発環境を整備していきますので、その手順を備忘録として記録しておきます。 Node.jsとは Chocolateyを使ってnodistをWindowsにインストールする Node.jsとは Node.jsとは何でしょうか？ Wikipediaの説明を引用します。 Node.js は、イベント化された入出力を扱うUnix系プラットフォーム上のサーバーサイドJavaScript環境である。 何だか難しいですね。分かっている人が納得するための説明みたいで、分からない人が分かるようになる説明とは思えません。 とりあえずはJavascriptの実行環境だと思っておけばいいと、はるなぴは思います。 サーバーサイドJavascr