2019.01.14スポンサーリンクどうもブログ大好きトコログです。私のブログはWordPressで運営をしており、テーマはわいひらさんのcocoonを利用しています。このテーマがめっちゃ便利でしかも無料なのでホント大好き。それでも気になる点ってのはいくつかありますよね。ちなみにトコログは元々、本の組版とかデザインをしていたので、行間や段間が少し気になりました。そんな訳で今回はCocoonの行間や段間を調整する方法を紹介出来たらと思います。段落と改行を使い分けよう。実際にcocoonでの設定方法まとめスポンサーリンク段落と改行を使い分けよう。行間や段間を設定する前に段落と改行について説明したいと思います。知ってるよ!って人は読み飛ばしてちゃってください。ワードプレスでは行を変更する場合、改段(pタグ)と改行(brタグ)があります。簡単に言えば改段は新しい段落へ。改行は段落内で新しい行へ。作文とかで話題や段落が変わる時は、先頭一文字を空白にしませんでしたか?ワードプレスではその代わりに改段を使う様な感じです。ちなみにワードプレスのエディタでは、Shift+Enterが改行Enterのみは改段となっています。例としてはどうも改行です。同じ段落扱いだから行間もそのままだよ!どうも改段です。段落が変わったから段落と段落の間にアキがあるよ!この様に改行と改段には違いがあり、文章の区切りを意識して改行と改段を使い分けると色々と便利です。この辺りは個人の書き方や見せ方によるので、自分の感覚でうまく使い分けてください。本文の行間や段間はスタイルシートで変更しよう行間は良いとして段間(段落と段落のアキ)をもっと空けたい!って人は多いと思います。Enterを2連打してしまうのはNGです。主な理由は3つあります。検索エンジンはpタグで段落の切り替わりや、brタグで文章の繋がりを判断しています、これらを無視するのは検索エンジンが文章を理解する上で大きなデメリットとなります。デザインや見た目に関してはCSS(スタイルシート)で設定するのが基本的な考えです。文章のルールを守り、表現の部分はCSSで行うのが良いと思います。現状のトコログの改段は1.3行くらいアキがあります。スタイルシートを設定することで2行くらいのアキをを作ることも可能です。?どちらも改段を1回しかしていないのに幅が全然違います。これなら検索エンジンはしっかりと文章を読み取れるし、自分の好みでアキを調整することができます。後で変更したいと思った時にCSSを変更することで、全ての記事に反映されるのでとっても便利!そして改行連打はテーマ変更時にも悪影響を及ぼします。テーマによって行間や段間の設定が違います、なのでcocoonから最近流行りのJINやSTORKなど段間の広いテーマに変更したら改行を消す作業が必要となります。一応CSSでマージンを狭めても良いですが、これほど本末転倒な事はありませんよね。本文はカッチリと作ってCSSで見た目の調整ってのがスマートだと思います。cocoonの行間や段間をCCSで設定する方法ここではcocoonで行間や段間の設定方法を紹介したいと思います。行間や段間について説明した後に、実際の設定方法紹介します。面倒くさい事には興味ない!って人は更にスルーしてもらってOKです。実際の設定方法を参考にしてみてください。行間の設定方法まず行間についてですが、CSSではline-heightで設定します。line-heightは行間では無く、文字の中心から上下の幅なので文字幅を含める必要があります。font-size:17ptにline-height:17pxと入れると行間は0の状態となります。文字幅+行間を入力すると覚えておくと良いでしょう。一般的にはフォントサイズに対して1.5倍~2倍(行間自体は文字に対して50%~100%となる)が良いとされています。ちなみに一般的な書籍でも、それくらいの行間が読みやすくて良いとされています。line-heightのプロパティ値は複数の単位で指定できます。個人的には単位なし場合、子要素に影響される(行途中のフォントサイズの変更時など)ので便利だと思います。トコログの場合はline-height:2.2(cocoonのデフォルトと同じ)で設定しています。この設定だと行間は文字の1.2倍の幅になります。最近のブログは少し広く行間を取るのがトレンドみたいですね。こんな感じで自分の好みの行間を設定しましょう。段落のアキについては方法がいくつかありますが、Cocoonの設定方法を習う形で設定しました。CocoonのCSSではmarginを利用して設定がしてあります。marginはそのブロック要素の上下左右にアキを設定することができます。段落(pタグ)に対して上下もしくは下にmarginを設定することで段落間のアキを設定することができます。Cocoonでは上下に1.2emのmarginが設定されています。設定がされていて、1.2em部分は上下のマージン、0は左右のマージンを指定しています。margin同士がぶつかり合う場合は、数値の大きいほうが優先され、低い方は消滅します。上下に設定しても消滅するので2倍にはならないです。この辺りはすこし複雑ですよね。ちなみにmarginの単位もem、%、pxなどで指定することが可能です。個人的にはemや%での指定がおすすめです。こっちは小要素に影響されないので良いかなと思ってます。本文の「行の高さ」と「行間の余白」を変更する方法まずはCSSなどを変更する場合は子テーマを用意した方が良いでしょう。詳しくはCocoonのインストールページに書いてあるので参考にしてみてください。Cocoonそれでは実際に設定してみましょう。言ってもやることはとっても簡単。ワードプレスのサイドバーにある「外観」→「テーマの編集」をクリックし、編集するファイルが「style.css」か確認します。したら以下のコードをコピーしてペーストしてください。1.8の1.8を変更することで行間のアキ量を変更できます。1.2em0の1.2emを変更することで段間のアキ量を変更できます。ちなみにこの数値はCocoonのデフォルトの数値となっています。Cocoonの場合「.entry-content」が記事と固定ページの本文のみに反映されるクラス名となっています。好きな数値を設定したら、あとは「ファイルを更新」で設定完了です。実はやること自体はとっても簡単なので、是非ともチャレンジしてみてください。0;という数値に設定してあります。まとめという訳で今回はCocoonで、行間や段落間の調整方法を紹介してみました。ブログ初心者の時にやりがちなのが連続改行についても書いてみました。有名なインフルエンサーの方が「見やすさ優先で改行を沢山入れよう!」みたいな事を書いてたりするので、結構この罠にハマる人は多いと思います。ちなみにトコログはその罠に引っ掛かって、泣きながら修正した記憶があります。正解は無いと思いますが、CSSで空白を調整したほうがスマートでリカバリーも効きやすいのでおすすめです。サイトの表示速度が遅すぎてロリポップからWPXクラウドに引っ越しました。第2版SBクリエイティブAmazon楽天Yahoo!ショッピングスポンサーリンクスポンサーリンクブログメモCocoonCSSブログワードプレスTwitterFacebook0はてブ1Pocket1LINEスポンサーリンクAmazonギフト券を現金チャージで2.5%還元Amazonの買い物はAmazonギフト券チャージタイプがオススメ!チャージする都度、最大2.5%のポイントが貯まるのでお得です。Amazonギフト券をチャージトコロ無職だけど一生懸命生きています!岐阜県在住の無職のブロガー。製品やウェブサービスのレビューをしてます。商品レビュー依頼承ってます。ご相談はお問い合わせかTwitterのDMからお願いします。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。スポンサーリンクホーム日常ブログメモスポンサーリンクトコロ無職だけど一生懸命生きています!岐阜県在住の無職のブロガー。製品やウェブサービスのレビューをしてます。商品レビュー依頼承ってます。ご相談はお問い合わせかTwitterのDMからお願いします。WIFIスマートプラグの設定や操作方法を紹介。2018.12.152020.05.08セリア・ダイソー100円の豆苗プランターで簡易水耕栽培をしてみた!ベビーリーフを作るのに最適!2022.05.252023.04.28ポケモンカードがネットで対戦できる!とりあえずインストールしてみた!2016.09.242020.03.03PS4proとPS4(スリム)の違いを実機で比較してみた。defined.")}))}();。