【WordPress】おしゃれなテンプレート!Oblique(オブリーク)を使用している理由とおすすめポイント

このサイトはWordPressで構築しているのですが、

テンプレートは数ある無料のテンプレートの一つである「Oblique(オブリーク)」を使用しています。

有料プランもあるみたいですが、私は無料で全然事足りているのでいいかな。

 

こんな感じのおしゃれでスタイリッシュな感じのデザインテンプレートです。

もちろんレスポンシブでスマホやタブレッドなど様々なデバイスに対応しています。

 

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">
 
– – – – – – –
②外観>カスタマイズ>追加CSSに、
下記cssを追加してヘッダーメニューを追加しています。
 
.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">と書き起こしています。
 
 
。。。
 
中途半端にカスタマイズについて羅列してしまいました。。
まぁそんな感じでオブリーク (Oblique) テンプレートはとってもおすすめです!!
 
最後適当にまとめた感がありますが、css知識なども少しずつ身につくので面白かったります。
ぜひ興味がある方は使ってみてください。
 

コメントをする

avatar