mikotohodo-三言ほど-

くだらない雑談と小さな情報を日常に

Senteceのレイアウトに色を加えて更に良さを引き出したい


Sentence、シンプルなデザインで作られたレイアウトは白をベースに目立ちすぎない黒と細い線で装飾されている為、初心者でも気軽に扱う事が出来る。

そして、製作者さんが利用者の方更に扱いやすくする為ナビゲーションメニューシェアボタンフォローボタンも用意してくれている。

Sentenceの外観はアンティークの様な、または一冊のニュースペーパーの様なものだと考えてもおかしくはない。そして、シンプルに使いこなせばスマートデバイスからの閲覧では絶大なレスポンスを引き出すことができる。

シンプルに使えばの話ではある。

だがしかし、そこにほんの少しだけ色を加えてはどうだろうか。完成されたレイアウトが更に良くなるのではないだろうか。と、勝手に思いこんでしまっている。

h2 / 前置きが長い

見出しの<h2>に関してはここのブログでは罫線に青を使用している。シンプルな画面に青を加える事でよりスマートになるのではないだろうか。

.entry-content h2 {
 margin: 10px 10px;
 padding: 5px 5px;
 border-bottom: 1px solid #0eabe0;
 }
.entry-content h2 p {
 margin: 0; 
 padding: 0;
 }




h3 / 大胆に

見出しの<h3>に関しては少し濃いめの赤を採用し、<h2>の青系から離れることによって見出しの本文が強調できる様にした。before側のbackgroundの色を変えると文字下の罫線色が変わり、border-bottomの色を変えると赤いラインの色が変わる

.entry-content h3 {
 position: relative;
 color: #3D3F44;
 border-bottom: 4px solid #862323;
 padding: 5px 5px;
 margin: 10px 0;
 }
 .entry-content h3::before {
 position: absolute;
 top: 100%;
 left: 0;
 width: 20%;
 height: 4px;
 background:#3f3f3f;
 z-index: 2;
 content: '';
 }




h4 / 落ち着いた感じで

見出しの<h4>に関してはここのブログでは何処にでもある様なデザインを使用している。ここで一旦は落ち着いた色を使い、シンプルなレイアウトに寄りそうようにしている。

.entry-content h4 {
 padding: 15px 15px;
 margin: 10px 0;
 color: #232323;
 background: #f3f3f3;
 border-left: solid 3px #3d4984;
 }
 .entry-content h4 p {
 margin: 0; 
 padding: 0;
 }



リセットが必要

Sentenceの見出しを変えるには、製作者さんがせっかく作ってくれた見出しのデザインをリセットしなければならない。申し訳ないのだけど、設定されている見出しデザインは表示させないようにしよう。

ぶっちゃけ拾い物なので、これが正しいのかは分からない。

/* 見出しのリセット */
.entry-content h2,
.entry-content h2::before,
.entry-content h2::after {
 background: none;
 border: none;
 border-radius: 0;
 }
/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
 background: none;
 border: none;
 border-radius: 0;
 }
/* 見出しのリセット */
.entry-content h4,
.entry-content h4::before,
.entry-content h4::after {
 background: none;
 border: none;
 border-radius: 0;
 content: none;
 }




サイドバーのタイトル

好みが分かれる所ではあると思いますが、ここでは左側に一本縦に線を入れてます。

.hatena-module-title {
 border-left: 5px solid #286da8;
 padding: 2px 10px;
 }

あらかじめここの部分には下記の設定がさせているので、余白などの調整をしたい場合は下記のコードを使用して調整すると良いと思います。

.hatena-module-title {
 margin-bottom: 15px;
 font-size: 130%;
 font-weight: 700;
 line-height: 2.5em;
 }




トップ記事タイトル下のカテゴリー

ここくらいは強調しても良いのではと思って大きく見えるようにしてます。

.page-archive .categories a {
 display: inline-block;
 margin-right: 2px;
 padding: 3px 5px;
 border-radius: 3px;
 background: #c17672;
 color: #fff;
 font-size: 20px;
 text-decoration: none;
 }

このまま入れるとカテゴリーが強調されるのですが、実際必要な部分は二か所のみです。

.page-archive .categories a {
 background: #c17672;
 font-size: 20px;
 }

枠に丸みを付けたい場合はborder-radiusを加えて数値を大きくすると丸くなります。

.page-archive .categories a {
 border-radius: 10px;  /* 丸みの部分 */
 background: #c17672;
 font-size: 20px;
 }




リンク色

このままでも良いのですが、もしかしたら背景の白がきつすぎてリンク色の青が目に優しくない場合があります。その場合、リンク色を暗めにすると目に優しいかもしれません。ここの場合は黒に近い青の様なリンク色を使ってます。

a:link { 
 color: #16475f;
 }
a:visited {
 color: #16475f;
 } 




記事一覧の区切り線

記事一覧形式にした場合、記事の間に区切りがありません。そのままつかっても問題はないのですが、区切り線が欲しい場合の対処になります。

.page-archive .archive-entries .archive-entry {
 margin-bottom: 1em;
 border-bottom: solid 1px #c5c1c1;
 padding-bottom: 20px;
 }

現状では元のレイアウトに少し色を加えた部分はこれくらいになります。元のデザインの良さを崩さずに記事外・記事内にアクセントを加えると更によくなるのではと思います。PCやタブレットからだとぱっと見で下記のリンクからまとまった感じが見れると思うのでお時間があれば確認してみてください。

www.mikotohodo.com

素人ではありますが、Sentenceが好きな【Senteceのレイアウトに色を加えて更に良さを引き出したい】という記事でした。

使用されている状況によっては適応させない場合があります。デザイン変更の際は、プレビュー、デベロッパーツールで確認してから変更を決定してください。