時時腕時計(ときどき、うでどけい)

趣味で集めた古い腕時計や日々の出来事を綴るブログです

4.記事を書く準備をする

さて、いよいよ記事を書く準備を始めます。

読んでくださる方が読み易い記事とは何か?自問しても明確な回答は出ませんが、記事の構成とデザインを統一することを考えます。

 

記事の構成を決める

記事全体の構成として、

・リード文(前書き)を書く

 リード文なので全体を要約するような内容とする。

・目次を設置する

 目次を置くということは大見出し、中見出し、小見出しを設定した文章にするということになります。

 見出しの使い分けが難しいですが、目次を見るだけでストーリーの流れがわかる工夫が必要と思います。

・入力説明で図示を行う場合は、入力エリアやクリックするボタンやリンクの先頭に①②③などの丸付数字を追記し、図の下にテキストで番号ごとに入力の具体例を説明する。

・最後にまとめを記載する。

 文章は2000文字程度を目標とするので、時間をかけて読んでいただく形になります。最後に、この記事では何が言いたかったのかを整理することで、読者にも納得いただく内容になると考えました。

本記事はこの構成に沿って記載したつもりです。

あぁ、そういうことか!との視点で見ていただけますと幸いです。

ブログのデザインを決める

シンプルですっきりしたデザインを心がけたいと思います。

個人の感覚になりますが、次のデザインを組み込みたいと思います。

・色使いは白、黒、グレーを基調にする

・画像には枠や影を付け左右中央に配置する

・グローバルメニューは記事数が10を超えるあたりで設置する。

 最初からグローバルメニューにカテゴリーを配置しても、記事が少ないと空のメニューになってしまうため。

本記事はこのデザインに沿って記載したつもりです。

あぁ、そういうことか!との視点で見ていただけますと幸いです。

実際にデザインをいじってみる

色使いの指定

文字の色を変えるのではなく、見出しデザインの色を変えようと思います。

既にみていただいている記事のデザインがそれです。

例となりますが、見出しの色遣いは以下になります。

 

f:id:oto-man:20190816232956p:plain

 見出しのデザインは、 以下のコードを「はてなブログ」の、「デザイン」-「カスタマイズ(スパナマーク)」-「{}CSSデザイン」にコピーします。

/*大見出しの設定*/
h3 {
position: relative;
padding: 0.5em;
background: #eeeeee;
color: #494949;
}

h3::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}
/*大見出しの設定 終わり*/

/*中見出しの設定*/
h4 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #c2c2c2;/*左線*/
}
/*中見出しの設定 終わり*/


/*小見出しの設定*/
h5 {
border-bottom: solid 3px #c2c2c2;
position: relative;
}

h5:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #969F9C;
bottom: -3px;
width: 20%;
}
/*小見出しの設定 終わり*/

 

 どうでしょうか?

画像に枠と影を付けて中央に表示する

記事の背景が白で画像の背景も同じ白の場合、そこまでが記事なのか判別しづらくなります。そこで、画像の4辺に枠をつけることで記事と区別しようと思います。

以下のコードを「はてなブログ」の、「設定」-「詳細設定」-「headに要素を追加」のテキストボックスにコピーします。

<style>
.entry-content img {
padding: 20px;
margin: 2em;
max-width: 400px;/*無くてもOK*/
background: #FFF;
border-radius: 3px;
box-shadow: 0 0px 20px rgba(0,0,0,0.2);
display: block;
margin: 0 auto;

}
</style>

 まとめ

 

本記事では、以下を実施しました。

・記事の全体構成を定める

・ブログのデザインを決める

少々面倒ですが、このルールに沿って記事を書いていけば読者にとってリズム感のある文章と感じていただけるのではないでしょうか。

記事数が増えるほど読み易いという効果が出てくることを期待しています。

 

(2040文字)