このサイトはWordPressで構築しているのですが、
テンプレートは数ある無料のテンプレートの一つである「Oblique(オブリーク)」を使用しています。
有料プランもあるみたいですが、私は無料で全然事足りているのでいいかな。
こんな感じのおしゃれでスタイリッシュな感じのデザインテンプレートです。
もちろんレスポンシブでスマホやタブレッドなど様々なデバイスに対応しています。
オブリーク (Oblique) は創造的なレンガ積みレイアウトのテーマで、ファッションまたは全般的なブロガーにぴったりです。パララックス効果のヘッダー画像、フルカラーの配色設定による無限のカラーバリエーション、Google フォントの簡単な追加、レスポンシブデザインなどを備えています。
上記リンク参照で、テンプレートの詳細ページの紹介にあるように、
・ヘッダー画像のランダム切り替えやパララックス
・ベースカラーやアクセントカラーのカスタマイズ
・タイトルフォントなどのフォントサイズの一括管理
などなどができます。
単調なリスト表示に何かちょっとしたデザインアクセントが欲しい!
上記で述べたカスタマイズはできるのは良しとして、
それよりなんといっても、私的にではありますが!
リスト一覧の魅せ方が可愛い!!
最近はこういったブログベースのサイトを作るとしたら、
スマホなどのサイズが狭めのデザイン考慮しなきゃなので、何よりも単調。
単調だからこそ見やすい。使いやすい!の超メリットがあるのですが、
私のサイトコンセプトでは何かもうちょっと一味欲しいなと思ってまして。
使いやすくて見やすいけど、アクセントが欲しい!
と思っていた自分にとって一目で惚れて速攻ダウンロードしました。
リスト表示の斜めに切り込み写真が覗き込むような、そんなリスト表示に惚れました。
まぁぶっちゃけるとリスト表示の部分にスタイルくっつければどのサイトでも実装できるのでしょうが。。
色を変えるだけでもサイトのイメージががらっと変わるので、
それにプラスしてこの斜めなリストデザインアクセントは様々なコンセプトのサイトで活用できるのではないかと思っています。
一部カスタマイズをご紹介。
①フォントの管理
外観>カスタマイズ>フォントから、
フォントファミリー(フォントの種類)、フォントサイズを変更できます。
②追加CSSでデザインカスタマイズ
外観>カスタマイズ>追加CSSから、
スタイルを追加できます。
因みに当サイトはテンプレートに追加したい要素を追加+追加CSSを使ってデザインカスタマイズをしています。
スタイルシートに関しては追加CSS欄だけを追加+修正して使っています。
例えばヘッダー画像のすぐ下にある、
育児・おでかけ・デザインのカテゴリメニューの追加なんかは。。
①外観>テーマの編集
→index.php(メインインデックスのテンプレート)内の下記部分に赤字の部分を追加。
get_header(); ?>
<div class="topNavArea widget widget_categories">
<ul>
<li class="cat-item cat-item-2"><a href="/index.php/category/parents/">育児</a></li>
<li class="cat-item cat-item-2"><a href="/index.php/category/go/">おでかけ</a></li>
<li class="cat-item cat-item-2"><a href="/index.php/category/design/">デザイン</a></li>
</ul>
</div><!-- topNavArea -->
<div id="primary" class="content-area">
.topNavArea{
margin-bottom:6%;
width:auto;
display:block;
}
.topNavArea ul{
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding:0;
}
.topNavArea ul li {
margin: 0 2%;
}
.topNavArea ul li a{
color:#555;
}
widget_categories
のクラスに紐づいているのでそちらを引用する感じで、<div class="topNavArea widget widget_categories">
と書き起こしています。
コメントをする