最近、昔の記事をきれいにするのに夢中で、
ブログの更新が滞ってしまいました。
そこで、見やすくきれいな記事を作る過程を記事にしてみたいと思います。
比較のために変更前の記事を別記事にしておきました。
▲従来の関連記事（クリックすると拡大）
▲見やすくデザインした関連記事（クリックすると拡大）最初に今使ったように、
関連記事のリンクを枠を付けて見やすく、
わかりやすく表示してみました。
以前は、記事のタイトルにリンクを張っていました。
今回、スタイルシートを使って枠をつけ、
記事だとわかるようにアイコンを付けてみました。
以前のリンクではなんとなく文字が書いてあるだけで、
正直記事の中に埋もれてしまっていました。
新しい関連記事の表示では背景色も変えてあり、一目で別の記事へのリンクだとわかってもらえると思います。
以下のスタイルシートを使い、<ul>,<li;>タグを使って実現しています。
尚、アメブロではCSSは１行で書かないと<br />が追加されて、
空行だらけの記事になってしまいます。
これを避けるために、<ul>内の<br />タグを非表示にしています。
改行を使いたいこともありそうなので、影響範囲をclass="related"に限定しています。
後は、連載記事を作った時にその記事自体を表示できるように
currentクラスの指定もできるようにしています。
そういえば、いつもブログやWebサイトをみていて思うのですが、
そのページへのリンクを消している意味がわかりません。
もう一度最初から読みたいときや、何か設定するページなら、
最初から設定をやり直したいとき。
一番にたどるリンクは今そのページに来たリンクです。
よく同じページへのリンクを押そうとして、押せなくてイライラした挙句、
ブラウザーの戻るボタンを押した後、同じリンクをもう一度押すという操作をします。
更に余計なキャッシュコントロールが入っていると、この時点で
ブラウザーの戻るボタンは使用できませんというメッセージが出て
イライラが倍増します。
尚、アイコンはみんなの絵文字というツールがあったので、
こちらから鉛筆のアイコンを使わせていただきました。
ありがとうございます。
▲みんなの絵文字
▲従来の参考画像（クリックすると拡大）
▲動きのついた参考画像（クリックすると拡大）２つ目の工夫として、画像の横に本文を書けるようにしました。
上でも使っている通りです。
以前は、
画像
記事
画像
記事
となって間延びしたレイアウトになっていました。
今回、画像横に本文を書けるようにしたことで、
記事に動きを出すことができるようになりました。
更に動きを出せるように左右どちらでも画像を表示できるようにしました。
以下のスタイルシートで実現しています。
■画像を右に表示する場合
■画像を左に表示する場合
▲従来の実行コマンド（クリックすると拡大）
▲一目でわかるようになった実行コマンド（クリックすると拡大）この記事もある意味技術系ですが、技術系の記事を書くと
本文と実行コマンドやソースコード部分が混ざってしまい、
読みづらくなります。
技術系記事のソースコードはコピー＆ペーストすることも多く、
ぱっとみてすぐにわかる方が良いと思い、一目でわかるようにしました。
エンジニアの人がよく見るコンソールをイメージして、黒背景に白文字にしてみました。
個人的には緑文字が好きです。
以下のCSSで実現しています。
▲従来のサブタイトル（クリックすると拡大）
▲目に付くサブタイトル（クリックすると拡大）
４つ目の工夫として、サブタイトルがすぐに目につくようにしました。
この記事でも使ってきましたが、長い記事をかくと、どうしても論点がぼけてしまいます。
今見ているのがどこだったか、欲しい情報がどこにあるか
すぐにわかるようにちょっと装飾してみました。
以下のCSSで実現しています。
アメブロでは、<h1>,<h2>タグが使われているため、
<h3>タグで実装しています。
改めて見比べてみると、明らかにわかりやすくなったと思います。
以前、知り合いの方に文字が多くて絵が少ないと言われたボクのブログ。
これで少しはわかりやすくなるかと思います。
今後もできるだけわかりやすく、いろいろな情報を発信していこうと思います。
今後ともよろしくお願いいたします。
ブログを見やすく、わかりやすくするとどういう変化が起こるのか。
先ほど、ボクのブログの一番人気のパソコン高速化の記事を見やすくしてみました。
プラスの予想としては、
ことが考えられます。
マイナスの予想としては、
ことが懸念されます。
さすがにGoogleのアルゴリズムは頭良いから大丈夫だろうと信じてます。
結果が出たらまた記事にする予定です。お楽しみに。
2013年1月27日追記
効果検証を行ったので、結果を載せておきます。
ブログの更新が滞ってしまいました。
そこで、見やすくきれいな記事を作る過程を記事にしてみたいと思います。
比較のために変更前の記事を別記事にしておきました。
１．関連記事を見やすくする
▲従来の関連記事（クリックすると拡大）
▲見やすくデザインした関連記事（クリックすると拡大）
関連記事のリンクを枠を付けて見やすく、
わかりやすく表示してみました。
以前は、記事のタイトルにリンクを張っていました。
今回、スタイルシートを使って枠をつけ、
記事だとわかるようにアイコンを付けてみました。
以前のリンクではなんとなく文字が書いてあるだけで、
正直記事の中に埋もれてしまっていました。
新しい関連記事の表示では背景色も変えてあり、一目で別の記事へのリンクだとわかってもらえると思います。
以下のスタイルシートを使い、<ul>,<li;>タグを使って実現しています。
<style type="text/css">
span.related
{
color:#ffffff;
background-color:#003399;
font-weight:bold;
padding:0.2em 0.2em 0.1em 0.3em;
}
ul.related
{
margin:0;
padding:0.2em 0.1em 0.2em 0.2em;
background-color:#eeeeee;
border-color:#003399;
border-width:1px;
border-style:dotted;
}
ul.related br{display:none;}
ul.related li
{
padding:0em 0.1em 0.4em 0em;
list-style-image: url(http://emoji.ameba.jp/img/user/ta/taro0603/198353.gif);
list-style-position:inside;
}
li.current a
{
color:#000000;
font-weight:bold;
}
</style>
span.related
{
color:#ffffff;
background-color:#003399;
font-weight:bold;
padding:0.2em 0.2em 0.1em 0.3em;
}
ul.related
{
margin:0;
padding:0.2em 0.1em 0.2em 0.2em;
background-color:#eeeeee;
border-color:#003399;
border-width:1px;
border-style:dotted;
}
ul.related br{display:none;}
ul.related li
{
padding:0em 0.1em 0.4em 0em;
list-style-image: url(http://emoji.ameba.jp/img/user/ta/taro0603/198353.gif);
list-style-position:inside;
}
li.current a
{
color:#000000;
font-weight:bold;
}
</style>
尚、アメブロではCSSは１行で書かないと<br />が追加されて、
空行だらけの記事になってしまいます。
これを避けるために、<ul>内の<br />タグを非表示にしています。
改行を使いたいこともありそうなので、影響範囲をclass="related"に限定しています。
後は、連載記事を作った時にその記事自体を表示できるように
currentクラスの指定もできるようにしています。
そういえば、いつもブログやWebサイトをみていて思うのですが、
そのページへのリンクを消している意味がわかりません。
もう一度最初から読みたいときや、何か設定するページなら、
最初から設定をやり直したいとき。
一番にたどるリンクは今そのページに来たリンクです。
よく同じページへのリンクを押そうとして、押せなくてイライラした挙句、
ブラウザーの戻るボタンを押した後、同じリンクをもう一度押すという操作をします。
更に余計なキャッシュコントロールが入っていると、この時点で
ブラウザーの戻るボタンは使用できませんというメッセージが出て
イライラが倍増します。
尚、アイコンはみんなの絵文字というツールがあったので、
こちらから鉛筆のアイコンを使わせていただきました。
ありがとうございます。
▲みんなの絵文字
２．関連画像横に本文を表示
▲従来の参考画像（クリックすると拡大）
▲動きのついた参考画像（クリックすると拡大）
上でも使っている通りです。
以前は、
画像
記事
画像
記事
となって間延びしたレイアウトになっていました。
今回、画像横に本文を書けるようにしたことで、
記事に動きを出すことができるようになりました。
更に動きを出せるように左右どちらでも画像を表示できるようにしました。
以下のスタイルシートで実現しています。
■画像を右に表示する場合
<style type="text/css">
div.image_right
{
float:right;
border:1px solid #003399;
background-color:#ffffff;
margin:0.3em 0em 0.3em 0.3em;
}
div.image_right_content{vertical-align:top;}
div.image_right_end{clear:both;}
</style>
div.image_right
{
float:right;
border:1px solid #003399;
background-color:#ffffff;
margin:0.3em 0em 0.3em 0.3em;
}
div.image_right_content{vertical-align:top;}
div.image_right_end{clear:both;}
</style>
■画像を左に表示する場合
<style type="text/css">
div.image_left
{
float:left;
border:1px solid #003399;
background-color:#ffffff;
margin:0.3em 0em 0.3em 0.3em;
}
div.image_left_content{vertical-align:top;}
div.image_left_end{clear:both;}
</style>
div.image_left
{
float:left;
border:1px solid #003399;
background-color:#ffffff;
margin:0.3em 0em 0.3em 0.3em;
}
div.image_left_content{vertical-align:top;}
div.image_left_end{clear:both;}
</style>
３．コマンドラインを区別して表示
▲従来の実行コマンド（クリックすると拡大）
▲一目でわかるようになった実行コマンド（クリックすると拡大）
本文と実行コマンドやソースコード部分が混ざってしまい、
読みづらくなります。
技術系記事のソースコードはコピー＆ペーストすることも多く、
ぱっとみてすぐにわかる方が良いと思い、一目でわかるようにしました。
エンジニアの人がよく見るコンソールをイメージして、黒背景に白文字にしてみました。
個人的には緑文字が好きです。
以下のCSSで実現しています。
<style type="text/css">
div.commandline
{
color:#cccccc;
background-color:#333333;
padding-top:0.5em;padding-bottom:1.5em;
padding-left:1em;
}
span.command
{
font-weight:bold;
padding-bottom:0.5em;
}
</style>
div.commandline
{
color:#cccccc;
background-color:#333333;
padding-top:0.5em;padding-bottom:1.5em;
padding-left:1em;
}
span.command
{
font-weight:bold;
padding-bottom:0.5em;
}
</style>
４．サブタイトルをわかりやすく表示
▲従来のサブタイトル（クリックすると拡大）
▲目に付くサブタイトル（クリックすると拡大）
この記事でも使ってきましたが、長い記事をかくと、どうしても論点がぼけてしまいます。
今見ているのがどこだったか、欲しい情報がどこにあるか
すぐにわかるようにちょっと装飾してみました。
以下のCSSで実現しています。
<style type="text/css">
h3.subtitle
{
border-left:0.4em solid #003366;
border-bottom:1px solid;
font-size:1.2em;
font-weight:bold;
margin:1em 0em 0.5em 0em;
padding:0.3em 0.3em 0.2em 0.8em;
}
</style>
h3.subtitle
{
border-left:0.4em solid #003366;
border-bottom:1px solid;
font-size:1.2em;
font-weight:bold;
margin:1em 0em 0.5em 0em;
padding:0.3em 0.3em 0.2em 0.8em;
}
</style>
アメブロでは、<h1>,<h2>タグが使われているため、
<h3>タグで実装しています。
改めて見比べてみると、明らかにわかりやすくなったと思います。
以前、知り合いの方に文字が多くて絵が少ないと言われたボクのブログ。
これで少しはわかりやすくなるかと思います。
今後もできるだけわかりやすく、いろいろな情報を発信していこうと思います。
今後ともよろしくお願いいたします。
ブログを見やすく、わかりやすくするとどういう変化が起こるのか。
先ほど、ボクのブログの一番人気のパソコン高速化の記事を見やすくしてみました。
プラスの予想としては、
- ページ遷移が増えて、１ユーザーあたりの閲覧ページ数が増える。
- 平均滞在時間が数秒のユーザー割合が減る。
- 平均滞在時間が長いユーザーの平均滞在時間が短くなる。
ことが考えられます。
マイナスの予想としては、
- タグが増えたことで検索エンジンでのランキングが下がる。
ことが懸念されます。
さすがにGoogleのアルゴリズムは頭良いから大丈夫だろうと信じてます。
結果が出たらまた記事にする予定です。お楽しみに。
2013年1月27日追記
効果検証を行ったので、結果を載せておきます。