StrawMan Templateで文字のレイアウトを整える方法
2020/02/01 18:59
0
今回は、StrawMan Templateの文字レイアウトを変更する方法です。
＜１行目＞今回解説するのは、今ご覧になっているこのテキスト群。
＜２行目＞１行目と２行目の余白や、本文記事概要のテキストの表示行数を変更する方法です。
言葉ではピンと来ないと思いますがこの部分です。
そ～～んな些細なことどうでもいい～～～～
こんな意見が大多数だと思いますが、とても重要です。
デザインとは統一することで完成します。
StrawMan Templateは統一することを重視していますが、皆様が書く記事もまたデザインの一部。
ここがちぐはぐではいけません。
素材工場より引用
上記の画像はメニューですが基本は同じです。
フォント、文字サイズ、揃え、余白、色数、内容に見合ったレイアウトで統一することで完成します。
私のような、テキスト量が多い、または情報量が多いなら今のままで大丈夫。
ですが、テキスト量が少な目で日記テイストな記事を書く場合は余白を広くした方が軽く感じられます。
たとえばnoteのレイアウト。
内容は読まなくても大丈夫、余白に注目してください。
軽く感じられるのがお判りいただけると思います。
これが余白の力です。
つまり、記事の内容もまたデザインの一部。
内容に合わせ余白を調整することでデザインのミスマッチから来るストレスを軽減し、より洗練されたサイトに仕上げることが出来るのです。
ストレスなんて感じないという方もいると思いますが違います。
一発で気づく粗は開発中に修正済み。
問題は、じわじわと蓄積される言語化しにくいストレスです。
このストレスが積もりに積もった結果出力されるのが、なんか嫌というどう対処していいかわからないアバウトな感想です。
もし、女性がメインターゲットで記事の内容が軽めだとしたら文字の余白調整は必要だと思ってください。
その他にも、サイトデザインを大幅に軽くする、ペルソナも用意していますので合わせてご利用ください（もちろんコピペです）。
軽いとか重いとかピンと来ない方は、ご自身のサイトを料理に例えてください。
サラダやフレンチだと感じるなら軽いサイトにすべきです。
うちのような、牛丼やカツカレーと感じるなら現状維持で大丈夫です。
記事本文の余白調整から行きます。
テンプレートの設定→スタイルシート編集の一番下に、以下のコードをコピペしてください。
1.4が現在の行間の数値です。
これを増やすと広がり減らすと狭まります。
さきほど紹介したnoteに寄せるなら、半角で2.0と指定します。
この辺はご自身のサイトに最適なものを見つけるしかありません。
各自調整し、しっくりくる数字を探してください。
なお、この調整はプレビューでは確認できません。
変更後更新し、記事本文をチェックしながら調整してください。
トップに表示される記事概要のテキストは、初期状態で３行表示されています。
これを調整することにより、行数を減らし余白を増やす方法です。
テンプレートの設定→ctrl+f『ここの数値を変えると省略表示行数が変わる』で検索
青マスク部分の『4.1em;』。
この数字を減らすと狭まります。
なお、当サイトの数値は2.8です。
増やす場合は
プレビューで調整後、更新して終了です。
StrawMan Templateはカスタマイズを前提とした、汎用的なデザインのテンプレートですが裏を返せば地味という意味です。
反面、FC2にはとても優れたデザインのテンプレートが山ほどあります。
下記リンクの制作者は、FC2界の救世主と呼べるほどハイデザインを連発する神です（勝手にテンプレ神と読んでいます）。
なぜこれを目指さなかったのか？
答えは簡単です。
だってみんな絶対にTOP画像変えるでしょ？
自分の創作物で飾れないTOPとかありえないでしょ？
冒頭でお話しした通り、デザインとは統一することで完成します。
TOP画像を変える時点で統一なんて無理。
汎用にする以外の選択肢なんてハナから無いのです。
ハイデザインを連発するテンプレ神の弱点はそこです。
一切カスタマイズせずに使うことが最高の状態であり、色・余白・TOP画像、どこか一ついじっただけで破綻するのがハイデザインの宿命です。
しかしStrawMan Templateは汎用型。
どこをどういじっても大丈夫な、雑味を許容するデザインで設計しました。
ある程度のカスタマイズが済み、運営方針が固まったあとはサイトのテーマに沿った余白調整をしてください。
余白を制するものがデザインを制するのです。
StrawMan Template総合案内板へ戻る
余白はデザインの第一歩
＜１行目＞今回解説するのは、今ご覧になっているこのテキスト群。
＜２行目＞１行目と２行目の余白や、本文記事概要のテキストの表示行数を変更する方法です。
言葉ではピンと来ないと思いますがこの部分です。
そ～～んな些細なことどうでもいい～～～～
こんな意見が大多数だと思いますが、とても重要です。
デザインとは統一することで完成します。
StrawMan Templateは統一することを重視していますが、皆様が書く記事もまたデザインの一部。
ここがちぐはぐではいけません。
素材工場より引用
上記の画像はメニューですが基本は同じです。
フォント、文字サイズ、揃え、余白、色数、内容に見合ったレイアウトで統一することで完成します。
私のような、テキスト量が多い、または情報量が多いなら今のままで大丈夫。
ですが、テキスト量が少な目で日記テイストな記事を書く場合は余白を広くした方が軽く感じられます。
たとえばnoteのレイアウト。
内容は読まなくても大丈夫、余白に注目してください。
軽く感じられるのがお判りいただけると思います。
これが余白の力です。
つまり、記事の内容もまたデザインの一部。
内容に合わせ余白を調整することでデザインのミスマッチから来るストレスを軽減し、より洗練されたサイトに仕上げることが出来るのです。
ストレスなんて感じないという方もいると思いますが違います。
一発で気づく粗は開発中に修正済み。
問題は、じわじわと蓄積される言語化しにくいストレスです。
このストレスが積もりに積もった結果出力されるのが、なんか嫌というどう対処していいかわからないアバウトな感想です。
もし、女性がメインターゲットで記事の内容が軽めだとしたら文字の余白調整は必要だと思ってください。
その他にも、サイトデザインを大幅に軽くする、ペルソナも用意していますので合わせてご利用ください（もちろんコピペです）。
軽いとか重いとかピンと来ない方は、ご自身のサイトを料理に例えてください。
サラダやフレンチだと感じるなら軽いサイトにすべきです。
うちのような、牛丼やカツカレーと感じるなら現状維持で大丈夫です。
本文行間の調整方法
記事本文の余白調整から行きます。
テンプレートの設定→スタイルシート編集の一番下に、以下のコードをコピペしてください。
/* 記事本文の行間の変更 */
.entry_body {
line-height: 1.4;
}
1.4が現在の行間の数値です。
これを増やすと広がり減らすと狭まります。
さきほど紹介したnoteに寄せるなら、半角で2.0と指定します。
この辺はご自身のサイトに最適なものを見つけるしかありません。
各自調整し、しっくりくる数字を探してください。
なお、この調整はプレビューでは確認できません。
変更後更新し、記事本文をチェックしながら調整してください。
トップの表示行数調整方法
トップに表示される記事概要のテキストは、初期状態で３行表示されています。
これを調整することにより、行数を減らし余白を増やす方法です。
テンプレートの設定→ctrl+f『ここの数値を変えると省略表示行数が変わる』で検索
青マスク部分の『4.1em;』。
この数字を減らすと狭まります。
なお、当サイトの数値は2.8です。
増やす場合は
straw_manトップページの記事概要表示行数を減らす分にはこのページの記述だけで問題ないのですが、増やす場合はこのページの記述を行った上で`-webkit-line-clamp`の数値を増やす必要があるはずです。デフォルトでは最大3行表示のため3が入力されてるので、最大表示したい行数を入力してください。
『エンジニアのTwitter』より引用。
プレビューで調整後、更新して終了です。
まとめ
StrawMan Templateはカスタマイズを前提とした、汎用的なデザインのテンプレートですが裏を返せば地味という意味です。
反面、FC2にはとても優れたデザインのテンプレートが山ほどあります。
下記リンクの制作者は、FC2界の救世主と呼べるほどハイデザインを連発する神です（勝手にテンプレ神と読んでいます）。
Havenテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
なぜこれを目指さなかったのか？
答えは簡単です。
だってみんな絶対にTOP画像変えるでしょ？
自分の創作物で飾れないTOPとかありえないでしょ？
冒頭でお話しした通り、デザインとは統一することで完成します。
TOP画像を変える時点で統一なんて無理。
汎用にする以外の選択肢なんてハナから無いのです。
ハイデザインを連発するテンプレ神の弱点はそこです。
一切カスタマイズせずに使うことが最高の状態であり、色・余白・TOP画像、どこか一ついじっただけで破綻するのがハイデザインの宿命です。
しかしStrawMan Templateは汎用型。
どこをどういじっても大丈夫な、雑味を許容するデザインで設計しました。
ある程度のカスタマイズが済み、運営方針が固まったあとはサイトのテーマに沿った余白調整をしてください。
余白を制するものがデザインを制するのです。
StrawMan Template総合案内板へ戻る
- 関連記事
-
- 正しい著作物の引用とリンク設定でドメインパワーを上げる方法
- あまねさーん！google検索から人を引っ張れー！！
- StrawMan Templateで文字のレイアウトを整える方法
- webマンガビューワーlaymic完全攻略ガイド
- StrawMan Templateの個別記事に記事編集リンクを追加する方法