【サイトの作成】投稿記事のデザインとkuratotoの中で決めているルール

くらととにお越し頂きましてありがとうございます。

多くの方々に支えられて当サイトは出来上がっています。

サイトの土地と建物&設計

土地はXサーバーをお借りしています。

ありがとうございます。

レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】
高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99%以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。月額693円(税込)から利用可能。まずは無料お試し10日間。

建物はwordpressで作っています。

ありがとうございます。

ブログから大規模サイトまで作れる CMS - WordPress.org 日本語
簡単に美しいサイト、ブログ、アプリを作成するのに使えるオープンソースソフトウェア。

建物のデザインはcocoonを利用しています。

素晴らしいテーマをありがとうございます。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

内装デザイン

サイトカラーは配色の見本帳を参考にさせて頂きました。

ありがとうございます。

配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色
色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色検索や旅する配色見本、カラー成分測定「色とりどり」といった色彩を調べるツールも充実しています。デザインからファッションや占いまで、色を扱うときに役立つのが配色見本です。さまざまな色の組み合わせを見て理...

イラスト素材はソコストを利用させて頂きました。

ありがとうございます。

商用可・フリーイラスト素材|ソコスト
商用可のシンプルでかわいいフリーイラスト素材集。画像・ベクター形式でDL!色変更可能!

画像・イラスト加工はCanvaを使いました。

ありがとうございます。

Just a moment...

お手本サイトとカスタマイズ

Tuicco様のサイトはデザインセンス抜群と感じます。

いろいろと真似をさせて頂きました。

本当にありがとうございます。

Turicco
暮らし、ブログデザイン、海釣りについて綴ります。

koikenote様のサイトはすごく見やすくて色使いも素晴らしいです。

いろいろと勉強させて頂きました。

本当にありがとうございます。

koikenote
おしゃれでも丁寧でもない、地味でズボラな一人暮らし40代の雑記ブログ。見守り介護や暮らしのヒント、おすすめアイテムやCocoonのカスタマイズ方法などを綴っています。

ムササビやねん様のサイトはセンスと愛のあるサイトです。

文章を読んでいても楽しくて微笑んでしまいます。

本当にありがとうございます。

ムササビやねん
ちょっとおしゃれな暮らしに

KURATOTOを立ち上げるにあたり、多くのサイトをお手本に勉強させて頂きました。

この場をお借りして心よりお礼申し上げます。

記事のデザインと心がけているルール

見出しのデザインやボックスデザインは、文字だけの単調な文章を読む気にさせてくれる重要なアクセント。

デザインも配色もkuratotoにセンスはまったくないから悩む。

植物が好きなのでGREENをベースに、デザインや配色はお手本サイトを見習って作成しています。

見出しの覚え書き
H2見出し

kuratotoはセンスがない

CSS
/* 見出しh2デザインリセット */
.article h2{
background:none;
padding: 0;
}
/* 見出しh2デザイン */
.article h2{
color: #ffffff; /* 文字色 */
font-size: 1.3em; /* 文字サイズ */
padding: 0.8rem 0.8rem;
background: #87AC9E;
}
H3見出し

kuratotoはセンスがない

CSS
/* 見出し3デザインリセット */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
/* H3デザイン */
.article h3{
color: #323934; /* 文字色 */
font-size: 1.2em; /* 文字サイズ */
 background: rgba(122,145,130,.06);/*背景色*/
  border-bottom: 3px solid #87AC9E;/*下線*/
  padding: .5em .7em;
  margin-bottom: 15px;
  border-top: none;
}
H4見出し

kuratotoはセンスがない

CSS
/* 見出し4デザインリセット */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}
/* H4デザイン */
.article h4{
color: #323934;  /* 文字色 */
font-size: 1.1em; /* 文字サイズ */
padding: 10px;
border-bottom: dotted 3px #87AC9E;/* 下側に点線と色*/
}
ボックスの覚え書き

アイコン付ラインボックス

kuratotoはデザインセンスがない
  • 配色センスもない
  • 確かにない
  • 間違いない
<div class="iconline-box">
<div class="iconline-box-title">kuratotoはデザインセンスがない</div>
<ul class="list-line">
<li>配色センスもない</li>
<li>確かにない</li>
<li>間違いない</li>
</ul>
</div>
/*アイコン付ラインボックス*/
.iconline-box{
   background: #f4fbf9; /* 背景色 */
   border-radius: 3px;
   max-width: 800px; /* 横幅 */
   padding: 2em 2em 2em ;
}
@media screen and (max-width: 768px){
.article ul, .article ol {
    padding-left: 0px; /* スマホ閲覧時の余白リセット */
}
}
.iconline-box-title {
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
    border-bottom-color: #40210f;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 8px;
    line-height: 1.5;
}

.list-line{
   list-style: none;
   padding:0;
   margin:0;
}
.list-line li { 
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom-color: #bcb2a4;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  position: relative;
 }
.list-line li:before {
 font-family: "Font Awesome 5 Free";
 content: "\f058";
 color: #d0c67c; /* 色 */
 font-size: 18px;
 margin: 0 3px 0 0;
 font-weight: bold;
}

タイトル無バージョン

  • kuratotoはセンスがない
  • 確かにない
  • 間違いない
HTML
<div class="iconline-box">
<ul class="list-line">
<li>kuratotoはセンスがない</li>
<li>確かにない</li>
<li>間違いない</li>
</ul>
</div>

一番下の余白が気になるので、グループの中にカスタムHTMLを入れてみます。

  • kuratotoはセンスがない
  • 確かにない
  • 間違いない

なんか良い感じです。

あまり深くは追求しない

番号付ラインボックス

kuratotoはデザインセンスがない
  1. 配色センスもない
  2. 確かにない
  3. 間違いない
<div class="numberline-box">
<div class="numberline-box-title">kuratotoはデザインセンスがない</div>
<ol class="number-line">
 	<li>配色センスもない</li>
 	<li>確かにない</li>
 	<li>間違いない</li>
</ol>
</div>
/*数字付ラインボックス*/
.numberline-box{
   background: #f4fbf9; /* 背景色 */
   border-radius: 3px;
   max-width: 800px; /* 横幅 */
   padding: 2em 2em 2em ;
}
@media screen and (max-width: 768px){
.article ul, .article ol {
    padding-left: 0px; /* スマホ閲覧時の余白リセット */
}
}
.numberline-box-title {
    font-weight: 700;
    text-align: center;
	margin-bottom: 8px;
    border-bottom-color: #40210f;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 10px;
    line-height: 1.5;
}

.number-line{
  counter-reset:number;
   list-style-type: none;
   padding:0;
   margin:0;
}
.number-line li { 
   border-bottom:1px dashed;
   border-color:#cdcdcd; /* 線の色 */
   position: relative;
   margin:0.5em 0 !important;
   padding: 0.8em 0.9em 0.9em 1.8em;
 }
.number-line li:before {
 counter-increment: number;
   content: counter(number);
   background-color: #AA8E86; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 12px;
   border-radius: 50%;
   left: 0;
   top:1.3em;
   width: 20px;
   height: 20px;
   line-height: 20px;
   text-align: center;
}

タイトル無バージョン

  1. 配色センスもない
  2. 確かにない
  3. 間違いない
HTML
<div class="numberline-box">
<ol class="number-line">
 	<li>配色センスもない</li>
 	<li>確かにない</li>
 	<li>間違いない</li>
</ol>
</div>

一番下の余白が気になるので、グループの中にカスタムHTMLを入れてみます。

kuratotoはデザインセンスがない
  1. 配色センスもない
  2. 確かにない
  3. 間違いない

良い感じです。

やっぱり深くは追求しない

タイトルボックス

– くらとと –
施設・クリニック・ご自宅の清掃、メンテナンス、修理修繕を行っているお店です
<div class="daimeibox">
<div class="daimei">- くらとと -</div>
施設・クリニック・ご自宅の清掃、メンテナンス、修理修繕を行っているお店です
</div>
/*タイトルボックス*/
.daimeibox{
margin: 2em auto; /* ボックス余白 */
background-color: #fff; /* ボックス背景色 */
padding: 5em 2em 2em; /* ボックス内側余白 */
position:relative; /*配置*/
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/
}
.daimeibox .daimei {
background-color: #8B9B9D; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
color: #fff; /* タイトル文字色 */
padding:10px;/*タイトル余白*/
text-align: center;	/* タイトル中央寄せ */
position:absolute;	/* 配置 */
top:0;	/*上から(0px)に配置 */
left:0; /*左から(0px)に配置 */
width:100%;/*横幅最大幅 */
}

めくれ枠

施設・クリニック・ご自宅の清掃、メンテナンス、修理修繕を行っているお店です
<div class="mekure">
施設・クリニック・ご自宅の清掃、メンテナンス、修理修繕を行っているお店です
</div>
/*めくれ枠*/
.mekure {
margin: 2em auto;
padding:2em;/*内側余白*/
background-color:#f9fbf9;/*背景色*/
position:relative;
}
.mekure:after{
position: absolute;
content: '';
right: 0px;
top: 0px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ccc #fff  #ccc;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

かど丸枠

施設・クリニック・ご自宅の清掃、メンテナンス、修理修繕を行っているお店です
<div class="kadomaru">
施設・クリニック・ご自宅の清掃、メンテナンス、修理修繕を行っているお店です
</div>
.kadomaru {
margin: 2em auto;
padding:2em;/*内側余白*/
border-radius:10px;/*丸みを調整*/
background-color:#EDF0E7;
}

ボーダーボックス

施設・クリニック・ご自宅の清掃、メンテナンス、修理修繕を行っているお店です
<div class="borderbox">
施設・クリニック・ご自宅の清掃、メンテナンス、修理修繕を行っているお店です
</div>
.borderbox{
margin: 2em auto;
padding:2em;
background:linear-gradient(-45deg,transparent 25%,#EFEDED 25%,#EFEDED 50%,transparent 50%,transparent 75%,#EFEDED 75%,#EFEDED);
background-size: 4px 4px;
border-bottom: 4px double #C0C6C9;
border-top: 4px double #C0C6C9;
border-left: 4px double #C0C6C9;
border-right: 4px double #C0C6C9;	
background-clip: padding-box;
}

アイコンmemo

メモ
頼まれごとは引き受ける。出来る出来ないはやって見てから考える。
<div class="memo">
<div class="box-title">メモ</div>
頼まれごとは引き受ける。出来る出来ないはやって見てから考える。
</div>
.memo {
margin: 2em auto;
padding:1em 2em 2em;
background-color: #FBFBF4; /* 背景色 */
border-radius:1px;/*角の丸み*/
}

.memo .box-title {
color: #9CA396 ; /* タイトル文字色 */
font-size: 18px;
font-weight: bold;
}

.memo .box-title:before {
font-family: "Font Awesome 5 Free";
content: "\f303";
font-size: 18px;
margin: 0 3px 0 0;
font-weight: bold;
}

アイコンquestion

クエスチョン
頼まれごとは引き受ける。出来る出来ないはやって見てから考える。
<div class="ques">
<div class="box-title">クエスチョン</div>
頼まれごとは引き受ける。出来る出来ないはやって見てから考える。
</div>
.ques {
margin: 2em auto;
padding:1em 2em 2em;
background-color: #F4FBF6; /* 背景色 */
border-radius:1px;/*角の丸み*/
}

.ques .box-title {
color: #ACB09C ; /* タイトル文字色 */
font-size: 18px;
font-weight: bold;
}

.ques .box-title:before {
font-family: "Font Awesome 5 Free";
content: "\f128";
font-size: 18px;
margin: 0 3px 0 0;
font-weight: bold;
}

アイコンwarning

ワーニング
頼まれごとは引き受ける。出来る出来ないはやって見てから考える。
<div class="war">
<div class="box-title">ワーニング</div>
頼まれごとは引き受ける。出来る出来ないはやって見てから考える。
</div>
/*ワーニング*/
.war {
margin: 2em auto;
padding:1em 2em 2em;
background-color: #FBF4FA; /* 背景色 */
border-radius:1px;/*角の丸み*/
}

.war .box-title {
color: #A39696; /* タイトル文字色 */
font-size: 18px;
font-weight: bold;
}

.war .box-title:before {
font-family: "Font Awesome 5 Free";
content: "\f12a";
font-size: 18px;
margin: 0 3px 0 0;
font-weight: bold;
}

アイコンcheck

チェック
頼まれごとは引き受ける。出来る出来ないはやって見てから考える。
<div class="check">
<div class="box-title">チェック</div>
頼まれごとは引き受ける。出来る出来ないはやって見てから考える。
</div>
/*チェック*/
.check {
margin: 2em auto;
padding:1em 2em 2em;
background-color: #F4F5FB; /* 背景色 */
border-radius:1px;/*角の丸み*/
}

.check .box-title {
color: #A3A296; /* タイトル文字色 */
font-size: 18px;/*タイトル文字の大きさ*/
font-weight: bold;
}

.check .box-title:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-size: 18px;/*アイコンの大きさ*/
margin: 0 3px 0 0;
font-weight: bold;
}

Webfont

アイコン(Font Awesome5)の表示
<i class="far fa-edit" style="color: #AE301E"></i>アイコン(Font Awesome5)の表示
.icon::before {
 font-family: "Font Awesome 5 Free";
 content: "\f058";/* ユニコード */
 color: #d0c67c; /* 色 */
 font-weight: bold;/* 太さ */
}

もっと強調したい文章はcocoonブロックに搭載されている案内ボックス白抜きボックスなどを活用してメリハリを心掛けています。

kuratotoの中で決めているルール

読んでいただくために記事を書いています。

そうであれば自己満足だけではいけない。

だからと言って相手のことばかり気にして自分らしさを抑えるのも良くない。

どちらも取り入れて記事を書くためにkuratotoの中では簡単なルール作りをしています。

記事を書くルール
  1. 良いデザインは徹底的に真似をする
  2. 子供も理解できるような文章にする
  3. パッと見て暗い雰囲気の色調にしない
  4. 一文は長くても40文字程度にまとめる
  5. 読み終わって「なんじゃコレッ!」を避ける

良いと感じたことは徹底的に真似る

「凄い!素晴らしい!」と自分で感じたら徹底的に真似をします。

解らないことは何でも聞きます。

サイト作成に限らずkuratotoは仕事でも私生活でも同じ。

これに理屈はありません。

何歳になっても知らないことは山ほどありますから・・・。

だからと言って興味の無いこと、無理にあれこれ知ろうとする行為は無意味となります。

そもそも人間の脳みそは情報を処理するために関心のないことは頭に入らないように出来ています。

周囲が騒がしく、沢山の人が雑談をしている中でも、自分に強く関係する情報や、自分が興味ある情報は他の情報と比べて聞き取りやすい現象を「カクテルパーティ効果」という。

引用:日本経営心理士協会

逆に自分に必要と思ったことはいやおうでも感じ取ってしまいます。

大切と感じたことは体得しなければ成長がありません。

自信を失ってストレスだけが溜まります。

自分らしさオリジナルを生み出す近道
あれこれ頭で考える前に真似てみる。無理と考える前に先ずはやってみる。
お手本を徹底して真似ることでやがてオリジナリティが生まれます。

読みやすい文章に・・・

日本語は素晴らしいですが難しい。

漢字の読みも音訓あって、同じ言葉でも発音で違う意味になります。

なまりは好きですが、方言に至っては外国語のような・・・。

kuratotoは日本人ですが、読めない言葉知らない言葉がたくさんあります。

子供でも読めるように漢字にはルビを使う

一文は長くならないように注意する

余白、段落、スペーサーブロックを活用する

方言などは使用しないで共通語を使う
これらを無視して記事を書くと・・・

やっと手に入れた新しいケッタマシン名古屋/自転車で会社から帰宅した。 ドアを開けるとがすまげ宮城/食いしん坊の彼女が「はんごろしー徳島/おはぎ!」と叫んでる。 ほっこり滋賀/疲れるだったがスーツのままゴムじょんじょん静岡/サンダルでコンビニに。 新商品なのかめずらっぽー茨城/珍しいが並んでるのでカゴに入れた。 レジで店員さんが「一緒にドーナツもどーなっちょ信州/いかがですか??」とダジャレで勧めてくる。後ろに並んでいた客がその定員にむかって「はよせーや、ちちまわすぞ大分/怒る!」 帰り道にお世話になっているおばさん宅に半殺し群馬/おはぎを持参した。 「わざわざもっけ山形/ありがとうだの。お茶っこ飲んでって。」と和室に通された。 マダム関西/おばさんはひきたてのコーヒー片手に「ちんちんかいてよー富山/あぐら。」と。 わん沖縄/じぶんの頭はごじゃまんかいだ!

*ごじゃまんかいは千葉の方言で「滅茶苦茶」の意味です

やはり日本語は難しいです・・・(完)