テーマの使い方

テーマ「Not so sweet」の手引

ブログとして使う

デフォルトで「表示設定」を「最新の投稿」にすると投稿ページがトップページになります。

ホームページとして使う

wp%e8%a1%a8%e7%a4%ba
ビジネスサイトやポートフォリオサイトとしても使うことができます。固定ページにTOP(フロントページ)Blog(投稿ページ)などを作り、テンプレートをそれぞれHome Page,デフォルトテンプレートに変更し、「表示設定」を「固定ページ」フロントページにTOP、投稿ページにBLOGを指定するとサイト型表示になります。

グリッドシステム

固定ページはデフォルトではサイドバーの無しの1カラムです。固定ページの編集画面でテンプレートを「page-sidebar」に設定することでサイドバーつきの2カラムレイアウトに変更できます。ブランクテーマ「Naked WordPress」をベースに作っています。Bootstrap ver2とおなじグリッドシステムが組み込まれています。

詳しくはsampleページをご覧下さい。

カスタムメニューの設定

カスタムメニューの設定をご覧下さい。

ヘッダーイメージの設定

ヘッダーイメージの設定をご覧下さい。

トッページのウィジェットエリアの設定

トッページウィジェットエリアの設定をご覧下さい。

デザイン枠ボックス

投稿編集画面で利用できるデザイン枠ボックスのCSSを指定しています。デザインのアクセントにお使い下さい。

デザイン枠ボックスをご覧下さい。

サンプルエントリー

ブログページの見出しや表、引用のデザインが確認できます。

サンプルエントリー

テーマの使い方

カスタムメニューの設定

ヘッダーのナビゲーション(カスタムメニュー)は、ダッシュボード>外観>メニューから設定できます。
メニュー項目を選んで(ドロップダウンに対応)「メニューの設定」の「テーマの位置」に「サイトナビゲーションを選んでチェックを入れて保存して下さい。
%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc

テーマの使い方

ヘッダーイメージの設定

テーマカスタマイザーによって管理画面から簡単にTOPページのヘッダーイメージ画像を設定できます。
ダッシュボード>外観>ヘッダーから(もしくはカスタマイズ>ヘッダー)お好きな画像をヘッダーイメージに設定して下さい。
1280*400pxに切り取られます。
wp%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba
同様に外観>カスタマイズから背景色やタイトルロゴ画像を設定できます。

テーマの使い方

トップページのウィジェットエリアの設定

手順1

トップページ(Home-pageテンプレート)には3カラムのトップページ3カラム項目1~)と1カラムのトップメインエリアというウィジェットエリアを設置しています。
固定ページでTOP(HOME、トップページ)というフロントページ用の固定ページを作り、Home-pageテンプレートを適用させます。

手順2

表示設定で固定ページを選び、フロントページをTOPに指定します。

手順3

wp%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%883
「ダッシュボード>外観>ウィジェット」からトップページ3カラム項目1~3と1カラムのトップメインエリアにそれぞれテキストウィジェットやサイトバー項目をドラッグし、表示させたい内容を入力して下さい。

トップページのサムネイル付きの最新記事一覧

トップページのブログのサムネイル付最新記事一覧はトップメインエリアの下に自動的生成されます。
3カラムのサムネイル付きでです。

トップページのウィジェットエリアの位置

%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%82%a8%e3%83%aa%e3%82%a2

HTML

デザイン枠ボックス

記事本文にアクセントを付けたい時に便利な枠付きボックスのCSSです。テーマCSSで指定済みのなのでhtmlタグにclassを付与してお使い下さい。
それぞれclassにtext-box2~4を適応し以下のようにdivでくくってお使い下さい。

<div class="text-box2">この中に記述</div>

記事中だけでなく、サイドバーのバナー、ボタンなどにも使えます。
また見出しのデザインにも応用できますね。

デザイン枠2 二重線ボーダー囲い

デザイン枠2 二重線ボーダー囲い

デザイン枠3 単線ボーダー囲い

デザイン枠3 単線ボーダー囲い

デザイン枠4 吹き出し

デザイン枠4 吹き出し

デザイン枠 タイトル付き囲み枠

おすすめ記事

記事下になどによく見るおすすめ記事囲み枠のように使えます。

HTMLコード

<div class="recommend-entry">
<div class="recommend_title">おすすめ記事</div>
この中に書く
</div>
未分類

サンプルエントリー(見出し、表、引用、リストなど)

見出しh2

見出しh3

見出しh4

ブログ投稿記事と固定ページでは見出しのデザインを変えています。

  • リスト1
  • リスト2
  • リスト3

引用

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

コード

.XXX {
width:999px;
height:999px;
}
.propA, .propB, .propC {
width:999px;
height:999px;
}
#YYY {
width:9px;
height:999px;
}

table

項目名 内容がはいります。
項目名 内容がはいります。
項目名 内容がはいります。
サンプル, 未分類

サンプルエントリー3

sampleentry

見出しh3

それは前同時にこの所有ようというはずのために思い切っあっです。

とにかく結果が懊悩帰りはとうていこの把持たますだけにきめているですをも病気なるなけれでて、あまりとは叫びたらでですた。

国民に伴った事は人知れず一番にすでにうありでしょ。はなはだ槙さんが攻撃傍点さらに発展で送らない人々その金銭私か始末にというご批評なますたましので、その今は私か文学国家のあるて、岡田さんの方を上部のそれをましてお発展と引越しでここ個性がご相違がよしようにしかるにお経験にいうですんから、何でもかでもいくら公言があるないて来るまし事から始めないた。さてたとえばご珍と開いものはもう少し馬鹿とできたて、その下には上るですてという力に取り扱わてくれたで。

そんな以上人真似の時その学校はそれ末に示そなかと岩崎さんにしんませ、価値の十月ないというご乱暴うましないから、ろの時を理へ絶対だけの文芸より九月直っているば、ぴたりの十月へ当てるばこうしたところがもっとしゃべっなますとあるた事たて、小さいなくなが少しお地震関しならものなくたた。だから火事か勝手か教育で上げるですて、場合上個人が行きが切らなためをご命令の今日で構わだます。

中見出しh4

ほかにはようやく生れと申し込んたですたないて、ようやくよくやりと撲殺はこう怪しからませはずた。またはご尊重に断わろてはいただくでものないたって、背後には、勢い私かしてするせるでござい起っれんうと掘りので、腹はきめばならでです。じっと毫もも単に所々という得るですて、それがも今いっぱいでもそこのお創設もない挙げつけるんない。

私もけっして落第のものがお戦争は描くてくれますうないたで、一三の自分にこう用いでしという著作ないけれども、またその自分の人に考えるれるで、何かが君の国より講義があるて行くませものうたと談判申すから約束云っ来たまし。ついでにまた久原君をそうして少々しですのたたた。嘉納さんはまだ学校がしからできなけれ方たましで。(あるいは画に教えるためますだですてですはするなくうて、)少し達しべき文学を、ジクソンの性質じゃするて狭めに対する、先の相当も事実の時だけ生れ結びのがなるましから講義方向けてありなといったご人ますのまし。