2016.05.14
2495文字 / 読了時間:3.1分程度
sozai

新しいWordPressテーマ「Ateh’s theme-N(News)」?

なんとなく新しいWordPressテーマを作りはじめてみたり。

Ateh’s theme-N(News)

DOWNLOAD

「Ateh’s theme-M」と記事部分はほぼおなじだけれど、なんとなくインデックスページのイメージの違うのが欲しくなったからとか。

記事のほうのデザインに合わせた感じかも。

「Ateh’s theme-N(News)」の特徴?

2度書く気力はないので、style.cssに書いた説明文はこんな感じ。

■このテーマのコンセプト?

カテゴリーや記事が多いサイト向けWordPress用テーマ――として作成しました。

カテゴリー別記事一覧がトップページに表示されるので、多様な記事に向けてのアクセシビリティの高いテンプレートになったと思います。

1ページにできるかぎり多くの情報をいれ、ユーザにとっては煩わしいページ遷移を極力減らし、快適なサイトであることをまず第一に目指しています。

■デザインについて

ユーザーが、装飾を意識しなくても丁寧な作りな記事という印象になるよう、デザインを心がけました。

今回、見出し(h2,h3)の下に自動的に画像を表示させる機能を追加したので、ユーザーが画像を使用しなくても画像多めの親しみやすいサイトに見えるかと思います。アイキャッチ画像を探す手間も省けて、手軽にバランスのとれた記事が作成できます。

●主な目立つデザインのタグ

h2,h3,hr,blockquote,ul,li,

■トップページのデザイン

トップページ(インデックスページ、home.php)のデザインについてです。
今回は、スタンダードなデザインを心がけました(当社比)。

ヘッダの下には、最新記事が目立つようにゆったり表示しています。
今回は要約(何も書かない場合は冒頭)も表示するようにしました。

その下に、各カテゴリとその記事一覧が並び、一番下にはプロフィールを表示するようにしました。

トップページから、ほとんどのページに飛べるよう心がけました。

WordPressテーマ「Ateh’s theme-N(News)

WordPressテーマ「Ateh’s theme-N(News)

WordPressテーマ「Ateh’s theme-N(News)

■記事ページ

記事が一番の主役です。
記事のタイトルを目立つように、記事本文もできるかぎり読みやすく、気が散らないよう心がけました。

文字数表示などもあるので、役に立つんじゃないかと思います。

WordPressテーマ「Ateh’s theme-N(News)

WordPressテーマ「Ateh’s theme-N(News)

WordPressテーマ「Ateh’s theme-N(News)

■コメント欄

コメント欄に対応しました。

コメントがないのにコメント表示欄が開いているのは見栄えがあまりよくないと思います。
このテンプレートではコメント欄は基本、折りたたんでいます(jQuery使用)。

コメント欄を気軽に設置しやすくなったのではないかと思っています。

WordPressテーマ「Ateh’s theme-N(News)

WordPressテーマ「Ateh’s theme-N(News)

■プロフィール欄

WordPressの機能に、ユーザープロフィールの表示があります。
どんなユーザが書いている記事なのか。
aboutページに飛ばなくても確認しやすいよう、ページの下に常設するようにしました。

個別記事では折りたたんでいます。

また、プロフィールに表示する内容もカスタマイズできるようにしています。
適宜カスタマイズして使っていただければと思います。

結局どんなテンプレートなのか

とりあえず今はこのテンプレートに変えたのでこんな感じ、としか。

前回作った「Ateh’s theme-M」と今回作った「Ateh’s theme-N」はかなり姉妹テンプレートになっているけれど、変更点としては、INDEXページのタイプを変更したのが一番大きいかな。

「Ateh’s theme-M」は、極力スクロールも減らしたかったからそういうデザインになったけれど。

wpm_screenshot5retrob

ただ、できるかぎりつめたら当たり前だけど窮屈にはなるわけで。

なので、今度の「Ateh’s theme-N」はスクロールのほうを犠牲にして、わりとゆったりしたスペース(白)の生きる仕様にしてみたり。

これから暑くなるし、白っぽいのが欲しくなる気分だったのかも。

というわけで、「Ateh’s theme-N」のヘッダは、ヘッダ画像とサイト名しかほぼ表示されない情報量に。

Ateh's theme-N(News)

画像はunsplashのをランダム表示で、フィルタでセピア(firefoxだけうまくいかないけれどシェア的に今は諦めてもいいかなとか)にしてみたり。

この組み合わせが気に入ったので実質それメインというデザインかも。

なので、unsplashのサーバー次第ではまともに表示されなくなるかもしれないというのはあったり。

Ateh’s theme-Nのデザインサンプル

以下、タグのデザイン見本。

Ateh’s theme-Nのデザインサンプル――h2

Ateh’s theme-Nのデザインサンプル――h3

Ateh’s theme-Nのデザインサンプル――h4

引用のサンプルです。

  • リストのサンプル
  • リストのサンプル
  • リストのサンプル
  • リストのサンプル
  • リストのサンプル

リンクのサンプル。

強調(strong)のサンプル

class「waku」で一応こんな囲みも。

hrは画像に置換↓


まとめ

てことで。

しばらくはこれを使おうかな。

最新記事が目立つので、記事更新したくなるかも?

てか、「Ateh’s theme-N」は最新記事が目立つデザインでもあるので、カテゴリ多めサイト的にはその点はどうかなあとも思えるけど。

クッキーで訪問者の好みのカテゴリ保存して、とかもそこまでやるかってのはあるし。

「Ateh’s theme-M」は、最新記事がどのカテゴリかあまり目立たないから、まあ一長一短かも。

とりあえずおわり。









Comment



CAPTCHA




Memo.Medamayaki

三国志他歴史、小説、ゲーム等に関するメモ用ブログ。

TEMPLATE:Ateh's theme

×

Status


苗字:
名前:
性別:
年齢:
通り名:
出身:
誕生月:
誕生日:
職業:
種族:
武器:
属性:
髪色:
目色:
口癖:

Setting

苗字:
名前:
性別:
年齢:
通り名:
出身地:
誕生月:
誕生日:
職業:
種族:
武器:
属性:
髪色:
目色:
口癖:





× 
×

Recent Posts

×

Custom Menu