2016.02.21
2862文字 / 読了時間:3.6分程度
sozai
ワードプレステーマ「Ateh’s theme-M(Square)」


ワードプレステーマ(テンプレート)公開中(無料)。
カテゴリ数や記事数の多いサイトに最適。

[DOWNLOAD]

「Ateh’s theme-M(Square)」のコンセプト?

コンセプトは、記事中心、読みやすさ、わかりやすさ、他の記事への導線の配慮、アクセシビリティのup等。

特に、整理されたカテゴリと記事で構成されたインデックスページのデザインは、カテゴリ数や記事数の多いサイトに最適

インデックスのこだわり:カテゴリや記事数が多くても記事を探しやすいアクセシビリティ

・インデックスページにカテゴリごとの新着記事一覧表示
・また、最新記事、ランダムピックアップ記事、最新記事一覧等も表示

wpm_screenshot1vivid

wpm_screenshot5retrob

wpm_screenshot3set1a

記事ページのこだわり:記事中心、読みやすさ、アクセシビリティへの配慮

・記事ページでは記事タイトルを目立つように配置
・さらに、パンくずリスト、アイキャッチ画像も表示

screenshot6

・見出しを目立つように配置
・強調部分はマーカー風にして目立つように表示

screenshot8

・記事下には、同一カテゴリ一覧記事リンク等表示

screenshot9

デザイン的配慮?

アイキャッチ画像がある場合はアイキャッチを表示、ない場合にも別の画像が表示されデザインが崩れないように配慮等。

読みやすい縦書にも対応。

「Ateh’s theme-M(Square)」の使い方?

ファイルをダウンロードしてインストールしてください。

インストールの方法

ZIPファイルをダウンロード→ワードプレスのメニュー「外観」→「テーマ」「新規追加」→「テーマのアップロード」→「ファイルを選択」→「今すぐインストール」→「有効化」

初期設定を行う(必須)

テーマファイルの一部を書換える必要があります。

インデックスページに表示するカテゴリを設定する

「_homecolumns.php」のファイルでカテゴリIDと表示する記事数を指定します。

■カテゴリーIDの調べ方

「管理画面」→「投稿」→「カテゴリー」画面へ
  ↓
カテゴリーにカーソルを当ててステータスバーでリンク先アドレスを確認
  ↓
「http://….wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=1&post_type=..」
  ↓
この「ID=1」の数字の部分がカテゴリーID

メニューをカスタマイズする

サイト名の下に表示されるメニューをカスタマイズしたい場合は、「header_nav.php」を適宜変更してください。

「Ateh’s theme-M(Square)」のデザイン変更?

「Ateh’s theme-M(Square)」の基本的デザイン(配色や角丸等)は「__style_M_themecolor.php」で指定します。

「__style_M_themecolor1.php」等、用意してあるサンプルから「__style_M_themecolor.php」にコピペして使用可能。

「__style_M_themecolor1.php」……初期デザイン。グレー地にビビッドカラー。
「__style_M_themecolor2.php」……白地にパステルカラー。
「__style_M_themecolor3.php」……(おすすめ)地色と枠の色がランダム。配色セット多数。
「__style_M_themecolor4.php」……パステルカラーランダム。
「__style_M_themecolor5.php」……(おすすめ)地色と枠の色がランダム。レトロカラー配色中心。角丸。

デザインサンプル

「__style_M_themecolor1.php」……初期デザイン

wpm_screenshot1vivid

「__style_M_themecolor2.php」……白地にパステルカラー

wpm_screenshot2pastel

「__style_M_themecolor3.php」……地色と枠の色ランダム(おすすめ)

wpm_screenshot3set3

wpm_screenshot3set2

wpm_screenshot3set1b

wpm_screenshot3set1a

wpm_screenshot3mono

wpm_screenshot3set4

wpm_screenshot3wafua

wpm_screenshot3wafub

「__style_M_themecolor4.php」……パステルカラーランダム

wpm_screenshot4pastela

wpm_screenshot4pastelb

「__style_M_themecolor5.php」……レトロ

wpm_screenshot5retroc

wpm_screenshot5retrob

wpm_screenshot5retroa

主な配色サンプル

レトロ1

#92BFB1

#92BFB1

#F4AC45

#F4AC45

#694A38

#694A38

#A61C3C

#A61C3C

レトロ2

#17BEBB

#17BEBB

#2E282A

#2E282A

#EDB88B

#EDB88B

#EE2E31

#EE2E31

レトロ3

#071E22

#071E22

#1D7874

#1D7874

#679289

#679289

#F4C095

#F4C095

#EE2E31

#EE2E31

レトロ4

#DF2935

#DF2935

#86BA90

#86BA90

#DFA06E

#DFA06E

#412722

#412722

レトロ5

#E56399

#E56399

#D3A588

#D3A588

#7FD1B9

#7FD1B9

#7A6563

#7A6563

チェリー

#FFA5AB

#FFA5AB

#DA627D

#DA627D

#A53860

#A53860

#450920

#450920

ワイン

#311847

#311847

#A01A7D

#A01A7D

#EC4067

#EC4067

#EF5D60

#EF5D60

秋1

#423E37

#423E37

#E3B23C

#E3B23C

#A39594

#A39594

#6E675F

#6E675F

秋2

#E3C567

#E3C567

#C8963E

#C8963E

#573D1C

#573D1C

#D9AE61

#D9AE61

#D1462F

#D1462F

セット1

#A0A0A0

#A0A0A0

#202020

#202020

#608080

#608080

#806060

#806060

#406060

#406060

#A0C0C0

#A0C0C0

#80A0A0

#80A0A0

#404040

#404040

ビビッド

#00a1e9

#00a1e9

#e4007f

#e4007f

#00a968

#00a968

#898989

#898989

#d70035

#d70035

#000000

#000000

まとめ

個人的に、複数のカテゴリを扱うサイトをワードプレスで作りたかったので作ってみたり。
まずはカテゴリ分類第一というかんじ?

このサイト、三国志、ゲーム、小説、テンプレート等を扱っていて、なるべく混ざらないようにしたかったんだけれど、個人的にはだいぶ整理された気はしたり。

記事のフッタにも同じカテゴリの記事一覧を置いたから、隣のカテゴリの記事が混ざらない同カテゴリ記事への誘導は結構がんばったと思うけれど……。

配色は今はレトロのが気に入ってるかな。

パステルカラーの2と4はもう少し配色を考えたほうがよさそうな気はするけれどとりあえずサンプル作ったしってことで。

ワードプレステーマ「Ateh’s theme-M(Square)」


ワードプレステーマ(テンプレート)公開中(無料)。
カテゴリ数や記事数の多いサイトに最適。

[DOWNLOAD]

おわり。









Comment


Memo.Medamayaki

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

TEMPLATE:Ateh's theme

×

Status


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

Setting

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





× 
×

Recent Posts

×

Custom Menu