CSS 投稿記事を装飾して読み易い投稿ページにする

CSS 投稿記事を装飾して読み易い投稿ページにする

CSSの装飾で平均セッション時間がどれ程上がるか?分かりませんが赤字と青字の文字の装飾では限界があり、もっとクリックしてくれたユーザーに分かり易い投稿ページにしたいと思います。平均セッション時間が延びるとSEO効果・広告収入に繋がるので是非皆さんもCSSで装飾を行って下さい。スタイルは自分好みで私の採用内容が少しでも皆さんの役に立てればいいと思います。前回の投稿ページで説明した記述が殆どなのでこのページ特有の説明だけしたいと思います。より詳しく知りたい方はこちらを参照して下さい。

CSS 見出しhの装飾をする オリジナル作成方法の説明

 

強調したい文字の装飾

デフォルト(初期設定)で用意されている強調したい文字の装飾は太字と色(特に赤色)がメインに使用されるスタイルになると思います。見て頂いたら分かる様に少し物足りないですよね・・・・分かり難いってのが本音です。そこでCSSコードを記述してclassで呼び出し文字の強調をより分かり易くしたいと思います。私が採用した強調したい文字のCSSでの装飾は以下の様になります。

CSS background: linear-gradientで強調する

CSSコードの記載方法は以下の様になります。background: linear-gradient:(開始位置と角度 , 開始の色 , 途中の色 , 終了の色)となります。しかし今回使用するのはbackground: linear-gradient:(開始の色 , 終了の色)でCSSコード記載します。

<head>
<style type="text/css">

.k1 {
font-weight:bold;
background: linear-gradient(white 50%, #FFC0CB 50%);

}
.k2{
font-weight:bold;
background: linear-gradient(white 50%, #87CEFA 50%);
}

.k3{
font-weight:bold;
background: linear-gradient(white 50%, #98FB98 50%);
}

</style>
</head>
<body>

<span class="k1">あいうえお</span>
<span class="k2">あいうえお</span>
<span class="k3">あいうえお</span>

</body>

font-weight:bold;で太字にしています。

background: linear-gradient(上の色指定 全体に対しての原色の割合% , 下の色 全体に対しての原色割合%);と言うCSSコード記載にしました。全体に対しての原色の割合%の記述が無いと色がグラディエーションで表示されます。CSS出力結果は以下の様になります。

 

CSS 投稿記事を装飾して読み易し平均セッション時間を上げる1

CSS 投稿記事を装飾する background:linear-gradientで強調する方法

 

3色用意してみました。しかしここで問題が発生しました。ブラウザのSafariでは全く反映されていませんと言う訳でsafariでも反映される様にCSSコード記載を加工致します。凄く簡単なので!!さくっとやっちゃいましょう。CSSコード記載方法は下記の様になります。

.k1 {
font-weight:bold;
background: linear-gradient(white 50%, #FFC0CB 50%);
//ブラウザSafari対応
background: -webkit-linear-gradient(white 50%, #FFC0CB 50%);
}

linear-gradientの記述の前に-webkit-を追加するだけです。これでブラウザSafariでもキチンと表示する様になりました。

 

投稿記事の説明で使用する名称とボタンとコードの装飾

投稿記事の説明する際に分かり易い様に名称とボタンをCSSで分かり易くしたいと思います。では私の考える名称とボタンとコードを一つずつCSSコード記載と出力結果を説明したいと思います。

名称の装飾

私のがイメージする名称の出力結果は以下の様になります。相変わらずセンス無いですが・・・・参考にならない?かな?

 

CSS 投稿記事を装飾する プログラムの説明で使用するリストの装飾

CSS 投稿記事を装飾する 投稿記事の説明で使用する名称の装飾

 

一応CSSコードの記述も載せておきますね。特に目新しい事もせずただ平凡な装飾を作りました。

.r1 {
color:white;
font-weight:bold;
padding: 1px 3px;
background-color:#696969;
border: solid 3px #696969;
border-radius: 5px;
}

ボタンの装飾

続いてボタンの装飾の紹介をしたいと思います。私がイメージするボタンはCSS出力結果これです。ボタンぽく見えますよね?見えないかな?

 

CSS 投稿記事を装飾する プログラムの説明で使用するボタンの装飾

CSS 投稿記事を装飾する 投稿記事の説明で使用するボタンの装飾

 

CSSコード記述は以下になります。こちらも平凡な装飾ですね。

.b1{
color:black;
font-weight:bold;
padding: 1px 3px;
background-color:#F5F5F5;
border: double 3px black;
border-radius: 5px;
}

コードの装飾

コードを説明する際に使用しようと考えている装飾です。コード説明するのに=で仕切りを作っていたのですが・・ハッキリ言って見難い・分かり難いと2拍子揃っていました。見てくれた方御免なさい。もっと分かり易く装飾致します。

 

CSS 投稿記事を装飾する 投稿記事の説明で使用するコードの装飾

CSS 投稿記事を装飾する 投稿記事の説明で使用するコードの装飾

 

CSSのコードは以下になります。またまた平凡な装飾です。

.kode {
color:white;
font-weight:bold;
padding: 1px 3px;
background-color:#BA55D3;
border: solid 1px #9400D3;
border-radius: 5px;
}

これで大分見易くなるかも?です。

 

目次を装飾する

最初の説明の後に記事の文字数が多い投稿ページには目次を付けています。※クリックするとジャンプするやつです。それも装飾を行いここまでが目次だよと分かり易くしたいと思います。まずはclassを呼び出す位置を何処にするか迷ったのですがdivで呼び出す事にしました。CSSコードとHTMLのコードは以下の様になります。display: inline-block;初めて紹介するCSSになります。下記CSSの記載では文字の長さに合わせてbackground-colorが適用される様になります。

<head>
<style type="text/css">

.moku1{;
color:black;
font-weight:bold;
padding: 10px 30px 10px 0px;
background-color:#FFF0F5;
//文字の長さに合わせてくれる
display: inline-block;
}

</style>
</head>
<body>

<div class="moku1">
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
</div>

</body>

CSS出力結果は以下の様になります。

 

CSS 投稿記事を装飾する リストの装飾

CSS 投稿記事を装飾する リストの装飾

 

お好みで枠画像を入れればもっと分かり易い目次になると思います。

その他色々と装飾してより見やすい方法を取る必要がありますが、特に目新しいCSSコードの紹介も出来そうにないのでこのページは現段階では以上になります。また紹介出来そうなCSSのコードを見つけ次第紹介させて頂きます。以上の装飾を投稿したページに反映させてユーザーの利便性を図りたいと思います。私はセンス無いので皆さんはもっと素敵な装飾を行って下さい。

 

ここまで読んで頂いてありがとうございます。これからも分かり易いCSSのコード説明をしていきたいと思いますのでどうぞ宜しくお願いします。

 

Posted in CSS

関連記事一覧

レンダリングをブロック JavaScript・CSS を排除する方法
CSS・JavaScript・HTML縮小(圧縮)するツールと方法
CSS 見出しhの装飾をする オリジナル作成方法の説明
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です