手作りアクセサリーを売りたい! ブログ運営(WordPress)

読みやすい記事にするための超基本カスタマイズ

投稿日:

あなたはいままでたくさんの記事を読んできたかと思います。

その中でも2、3行読んだあたりから、だんだんと読むのが面倒になってきたとか、苦痛になってきた記事ってありませんでしたか?

これって何が原因なのでしょうね。

あなたが求めている記事内容と違っているとか、そもそも面白そうな内容じゃなさそうとか、読み手の心を掴むような冒頭文ではなかったのが一つの原因でしょう。

しかし、実はほかにも読み手を無意識に読みたくなさせてしまう原因があるんです。

その原因を改善するだけで、読み手にストレスを感じさせずスムーズに内容へと入り込ませやすくすることができます。

スポンサーリンク

いかに違和感を感じさせない文章にするか!

これが重要なんです。

文章の内容に集中してもらうためには、文字の大きさと行の高さと余白が大切なんですよ!

文字の大きさと行の高さをちょっと変えるだけで読みやすさが変わり、段落の余白によってその記事の印象が変わってしまう。

改行もしないで、ズラズラと書かれた記事は見るだけでお腹いっぱいですよね。

そんな記事はだれも読みたくないんです。

内容に集中してもらうためにも、その他に意識が取られれてしまうような原因は極力無くして上げるのが書き手の気配りであります。

さらにはSEO的にも自分のブログにいてくれる滞在時間が増えれば、検索順位にも影響することなんで意外と重要なんですよ。

例えば、
内容としては読み手が欲しいような内容や情報が書かれているのに、読んでいる相手のことも考えずにただひたすら情報が垂れ流しの状態というのはいかがなもんでしょうね、この文章のように。今この文を読み進めている頃から、なんだか違和感を感じているでしょ。この文脈の行を見たときになんだかあなたは無意識に読むぞって言い聞かせてはいませんでしたか?そしてなんだかここいらを読むのはかったるそうだなって思ったことでしょう。これを書いているオイラでさえ読み返したくないくらいなのに、このブログを初めて読むなんて方はこれを見たらまず読まずにフェードアウトですね。さてもうそろそろいいでしょうか。

 
パソコンやタブレットでみると行の高さが狭いのが分かりますか。
しかも改行もないし、文章の区切りなどに余白も入れてないと来たもんだからとても読みづらいですよね。

リズムが取りづらい文章は読みにくいのです。

---------------------------
ここの点線で囲った文章は、AFFINGER4の通常の状態です。
PC・タブレットで見ると、行間と段落の余白がなんとなく狭苦しく感じます。そして改行したところに余白がもうちょっと欲しいとも思います。
---------------------------

そして、いろいろと試してみて、ようやく今の感じの文字の大きさと行の高さと段落の余白のバランスに落ち着いたのです。

もしもう少し締まった印象にしたいのならば、フォントはいじらなくても良いかもしれません。

文字の大きさと行の高さと段落の余白をカスタマイズする

それでは、これから読みやすい文章にするために、文字の大きさと行の高さと段落の余白をカスタマイズする方法を紹介しよう。

簡単なのでAFFINGER4を導入したら、始めにやっておきたいカスタマイズのひとつかな。

作業は3ステップ

  1. 子テーマ(AFFINGER4)を用意
  2. プラグイン「Simple Custom CSS」のインストール&有効化
  3. プラグイン「Simple Custom CSS」の編集画面にコードをコピペする

子テーマ(AFFINGER4)を用意する

なぜ、子テーマを使うのかというと、これからこのようにカスタマイズをしていくことが多くなるでしょう。

その時に親テーマを直接カスタマイズしていくと、テーマをアップデートするとなったときに、
今までしてきたカスタマイズがすべて新しい親テーマにした途端に上書きされて全部消えてしまう恐れがあるからです。

そのような事態にならないように、親テーマは何もいじらず、カスタマイズ用として子テーマをいじっていくのです。

今回利用しているテーマのAFFINGER4には、子テーマのファイルも付いているので、簡単にWordpressにインストールできます。

子テーマはもちろんインストールしておくのですが、
しかし、このカスタマイズでは子テーマは使わず、もうひとつの方法として、プラグインを使ってカスタマイズしていきたいと思います。

プラグイン「Simple Custom CSS」のインストール&有効化

このプラグインも子テーマと同じ役割として利用します。
テーマのアップロードがあったときに、カスタマイズしたCSSの内容が上書きされないために使うプラグインです。

これからCSSのカスタマイズは、基本この「Simple Custom CSS」を利用していきます。

まずは、このプラグインをインストールして有効化していきましょう。

プラグインを2つのどちらかの方法でインストール&有効化しよう

1.WordPress管理画面の左メニューの「プラグイン」 > 新規追加 > プラグインの検索窓から「Simple Custom CSS」と入力して検索⇒インストール&有効化

2.Simple Custom CSS配布サイトからPCへダウンロード⇒WordPressへインストール&有効化

【WordPress初級】プラグインをインストールする2つの方法

WordPressがはじめてっていうあなたは、聞き慣れない言葉がどんどんと出てくるたびに頭がパンクしちゃいそうだよね。 一つの作業をこなすだけでも時間がいくらあっても足りないのに、言葉も意味も分けが分 ...

続きを見る

「Simple Custom CSS」の編集画面にコードをコピペする

下記のCSSコードをコピーします。

@media only screen and (min-width: 600px) {
	/*--------------------------------
	各フォント設定 (タブレット・PC)
	---------------------------------*/
	p {
		font-size: 17px;
		line-height: 28px;
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 959px) {
	/*--------------------------------
	各フォント設定 (スマホ)
	---------------------------------*/
	p {
		font-size: 16px;
		line-height: 26px;
		margin-bottom: 26px;
	}
}

 
post-4027b
ちなみに、font-sizeはフォントの大きさ、line-heightは行の高さ、margih-bottomは段落の余白、のことを指します。

WordPress管理画面

post-4027a

「外観」⇒「カスタムCSS」をクリック

post-4027c

カスタムCSSの編集画面にCSSコードをペーストして、「カスタムCSSの更新」ボタンをクリックする。

これで、文字の大きさと行の高さと段落の余白のカスタマイズが終わりました。

せっかく良い記事が書けたとしても、パッと見の第一印象で読みづらい記事だなって思われて、ページを閉じられてしまうのは大問題ですよ。
小さなことにも気を配り、読みやすいブログを心がけましょうね。

この記事が気に入ったら
いいね ! しよう

スポンサーリンク

手作りアクセサリー作ってみたい

1

アクセサリーは一体どういう風に作られているのでしょか? あなたがもしこれから手作りアクセサリーの作り方を知って、 自分のオリジナルアクセサリーを作ってみたい、 そしてゆくゆくは販売もしていきたいと考え ...

2

本格的な手作りアクセサリーを作るには、彫金、銀粘土、ロストワックスの3つの方法で作ることが出来る。 もし、あなたが彼女や彼氏に手作りアクセサリーをプレゼントしたいと考えているならば、一体、3つのうちど ...

3

スタッドピアスには必ずストレートのピンが付いています。 ピアスピンと言ったり、ピアス棒、ピアスポストとも呼ばれるこのピンはどうやってピアスデザインとくっついているのか知っていますか? 通常、デザイン部 ...

4

手作りアクセサリーを作るといっても、プロはその作ったものを販売するという視点から作り方を考えていきます。 趣味で作る場合との大きな違いが、この考え方だと言っても過言ではありません。 今回はそんな商売と ...

5

アクセサリーを作るには、地金から作り出す彫金技法やワックスから作り出すロストワックス法があります。 あなたがもし、彫金やロストワックスをはじめたいと考えているのであれば、アクセサリーを作るために必要な ...

-手作りアクセサリーを売りたい!, ブログ運営(WordPress)
-,

Copyright© ピアスマップ , 2017 All Rights Reserved.