NAGOのライフスタイルBLOG

あなたのライフスタイルは?日々楽しく豊かに暮らしたいですね。

はてな初心者がサイトの見栄えをカッコよく記事を読みやすくできるか

NAGOです、一昨日は裸のまま記事をアップしたもんだから恥ずかしい状態だったので、きのうは朝から少し手を入れてみました。

少しは見れる状態になったでしょうか?とは言っても初日の訪問者は3名! これは前途多難な予感がします。

 誰も気が付かない、今のうちに記事を修正しておきましょう。

サイト全体の見栄えはテーマを使って、見出し段落を整えて記事を見やすくしてみた

管理画面(ダッシュボード)の中にデザインという項目がありました。結構な数のスキンが用意されていたので使ってみました。デザインテーマの中から気に入ったテーマを選んで設定すると簡単に見栄えがよくなりました。

自分でカスタマイズしてオリジナル作るのが一番だけど、それやると楽しくなってひと月くらい記事更新しなくなります。なので今回はそのまま使っていきます。

 

 外側は体裁がついたので次は記事本文に力を入れましょう。

 

記事を読みやすく内容が伝わる見出しが重要なわけ

文章を読みやすくするテクニックに見出しがあります。
(上の太字が見出しです)

 

見出しを付けずに記事を書いていくと文章にメリハリがなくなり読みづらくなってしまいます。サイトを訪問したユーザーはページを斜め読みして自分の探している情報を見つけます。

そこで見出し太字段落を整えて本文を読まなくても書いてある内容がパッと見ただけでわかったら便利でしょう?

つまりユーザーを引き付けるキャッチーな見出しが重要ってことです。そこは修行中なんで偉そうなことは絶対言えませんが。見出しを使うことでこの記事の内容が伝わります。

 

「何が書いてあるか」がわかりやすくなるんだね

 

見出しには順番がある

一番上の「サイト全体の見栄え~」は大見出しh2を使っています。「記事を読みやすく内容が~」は中見出しh3です。そしてこの項目の「見出しには順番が~」は小見出しh4を使います。

単純に数字が若いほど重要でh1タグは記事タイトルに設定されていて、一つの記事に1つだけというルールがあります。

ユーザーが使えるのはh2からです。

使い方は数字の若い順にh2-h3-h3で階層になってます。記事内で内容が変化する場合h2-h3-h3-h2-h3-h3という使い方もできます。

ところがですよ~旦那~大変なことが!!

 

はてなブログの大見出しは実はh3だった

「いまさらっ」て突っ込みいりませんよ。初心者にはわからないのです。HTML編集を見てみるとh2のつもりで大見出しを使ったらh3、中見出しはh4。「なんだ~これは!」で検索してみたら有名な話みたい、知らないのは私のような初心者ばかりだとおもいます。

 

そのまま使うのも気持ち悪いのでHTML編集でh2の部分だけ書き換えることにした。記事中1か所か2か所程度なのでストレスは大きくないと自分に言い聞かせます。

それよりも忘れてしまいそうなのが怖い。

 肝心のh2はなんと「ブログの説明文」に使われているじゃない?後日hタグをcssデザインするときここも変わるんだろうな~きっと。

CSSを編集する必要もありませんでした、chromeの拡張機能にChrome Add-on for Hatenaを追加すると簡単にh2に出来ます。

chrome.google.com

 

 吹き出し風会話にも使えるよ

 

段落を整えてスッキリ!

文字がひしめき合う様に並んでいたら、見ただけでゲッソリします。さらに小さい文字だともう逃げ出したくなりませんか?そこでプレビューを表示しながら文字の間隔を調整していきます。

空間センスの問われるところだね

たまにページをスライドしなければいけないくらい間隔をあけている記事を見かけますが結局大したこと書いてないので「ムカつき」しか残らなかったりします。

 

今回のまとめ

デザインテーマを利用して見出しを設定、段落整えてみました。たったこれだけですが、初日に比べると「まったく別のサイト」に生まれ変わった感じがします。

自分で言うなよな~

 

そうは言っても初日にこのサイトを見た3名様と筆者にしかわかりませんけどね。

次はアクセス解析のお話をしたいと思ってます。今日現在11名様しか訪問してないお前にアクセス解析もないだろうという突っ込みはご遠慮ください。

パーマリンクはまだ理解できてません(hatena-design)はたしてこれでいいのだろうか?

2017/12/4リライト