Zukiインストール後の設定

インストール後の設定などを説明書に沿ってやっていきます。ウィジェットがパーツになっててそれをレイアウトしていくイメージです。カスタマイズは長いので記事を分けます。プラグインも長いのでさらに分けます。

Zuki Theme Documentation | Elmastudio これ読みながら。英語わからんからなんとなくで。

※ちなみにTheme Testerをアクティブにしていてもデフォルトページの設定が変わってしまい、カラのFrontpageだけ表示されたので、Theme Test Driveを使うことにしましたが同じようにデフォルトページ設定も変わってしまったのであまり意味がなかった。結局設定して公開しつつ編集となった。

2. Creating the Front Pageから

新規にカラの固定ページを作りますテンプレートは「Frontpage」を選択して保存その後テーマ→カスタマイズから最初に表示するページを固定ページのこれに設定（最新の投稿に設定してたから表示が変だった）

3. Front Page Featured Posts Slider

トップのでっかい画像（LiveDemoでは）の部分サイズは1200x800pxとあります。 Jetpackをインストールせよとあります。が、使う予定が無いので飛ばします見せたい記事があればいいけどね

4. Widget Areas and Widgets

外観→ウィジェットよりいじります最初意味わかんなかったけど、トップページが横幅いっぱい上下二か所/普通記事幅二か所/サイドバー二か所/フッター5個並べれるというレイアウトになっており、青軸でレイアウトの説明がありますんでそれを見ながら。

FullwidthTOPに最新ポストを置いてサイドバーは今まで通りフツーのブログのものを並べて PostContent1は・・・ここに最新ポスト置いたらツマンナイよねえ（これにSidebar並べるだけだと普通のブログテーマすぎる） Sidberに設定しているウィジェットは投稿記事と固定ページにだけ出るから FrontpageはSidebar1と2に入れるものをどう考えるかだなそう考えるとものすごくレイアウトの幅広がりますね。飽きたら変えれるし

サイドバー幅は240なのでアドセンス広告変える。

あとはフッターくらいしかいじるとこがない（入れるものがない） LiveDemoなみにきれいな画像と読ませる記事があれば置きたいけど全部埋めるにはコンテンツ量もだけどセンスも要求されますなあ逆に言えばあれこれページ作らなくても1ページに情報収まるっていうのもある。

それにしても楽しすぎて時間がもっとほしいなコリャ

ブログっぽく　かつ自分好みにウィジェット設定していきますそんな縦長くするつもりがないのでどう配置するか悩むところ各ウィジェットはサイズが違うのできれいに収まる数がそれぞれ違います幅の広いウィジェットに置くか、幅の狭いウィジェットに置くか（andブラウザ環境）で表示が大きく変わります。これを利用してブログっぽくも、Tumblrぽくも使えそうです

ではウィジェットを一つ一つ見ていきます

4.3. Zuki: Quote Widget

好きな言葉や名言・標語を入れるところでしょうか。使わないのでパスします

4.4. Zuki: Social Links

先にメニューを作る（外観→メニュー→新規）かならず"Social"というメニュー名にします（そうしないとウィジェットエリアでテキストしか表示されません）そしてリンクで自分のページのURLを入力してメニューに追加します twitterならhttp://twitter.com/ユーザー名　という具合にそして保存します。

メニュー設定の一番下の"Footer Social menu"をチェックすると最下部に固定で表示されます。ウィジェットでいろんなとこに使いたい時はチェックせず保存。

使えるのは以下。このサービスなら黒い丸のリンクになります

Codepen, Digg, Dropbox, Facebook, Flickr, Google+, Instagram, LinkedIn, Pinterest, Path, Dribbble, PollDaddy, GetPocket, Reddit, Skype, StumpleUpOn, Tumblr, Twitter, Vimeo, YouTube, WordPress.com, WordPress.org, Feed (urls with /feed/), Email (using mailto).

SNSをひとまとめに表示できるので便利そうです。結局Feedlyが無いので今まで通りサイドバーかフッターの一つに入れようかなと。

ウィジェットページでカスタムメニューを追加し、Sosialを選べばどこでもこの黒丸リンクが使えます

以上がこのテーマ特有のウィジェットになります。あとは普段から使っているものを組み合わせて使います。

5. Theme Options & Customizations

外観→カスタマイズ色はあまり設定できないのでそんな難しいことはない Zuki Recent Posts Widget Background ColorでRecentPost(background)ウィジェットの背景色です。

一番下のThemeから Show Header Search → ヘッダーメニューに検索バー Show Header Archive Area → Filter Contents（ヘッダーメニューの下に出るフィルターメニュー）下のボックスはメニューのタイトルやフッターが好きに書き換えれる

5.1. Custom Logo Image

サイトタイトルとキャッチフレーズは見ての通りヘッダー画像は最大幅1194px？

6. Custom Menu

外観→メニューで先にメニューを作っておくメニューを表示できる場所は三カ所カスタマイズ画面でメニューを選択。

Primary menu → 横に長い（モバイルでは折りたたみ）メニュー Header Top menu → 一番上のひっそりとしたメニュー Footer Social menu → 一番した中央ソーシャルボタン置き場

7. Typography Styles

ここ Text Styles | Zuki にテキストの装飾などがあります

最初の字を大きくするやつ

出だし強調する的な？タイトル下のイントロ部分は強調してしまおうよ的な？明朝体でないとDropcapもだけどしっくりきませんな。

ボックスみたいに左に寄せれるやつ

そのあとの文章（ふつうのPのぶぶん）は右に寄りますよ〜ということですね。雑誌っぽい。ある程度の文章の長さいるね。

その逆の右を指定するとこうなるっていうやつ。

指定した方が太字になりますよー。めっちゃ肩書きがあったらプロフィールをこういう形にしたいよね！（てきとう）

ワイド。デフォルト640pxだけど840pxまで表示できますよってこと？使い方わからず。固定ページでは1カラムテンプレートがあるからこれはいらないよねえ？はみでてんだけど。

<span class="dropcap">最</span>初の字を大きくするやつ

<p class="intro">出だし強調する的な？</p>

<p class="pull-left">ボックスみたいに左に寄せれるやつ</p> 
そのあとの文章は右に寄りますよ〜

<p class="pull-right">その逆の右を指定するとこうなるっていうやつ。</p>
指定した方が太字になりますよ＿

<div class="wide-content">ワイド。デフォルト640pxだけど840pxまで表示できますよってこと？</div>

insタグではさむとラインマーカー効果になるようです。これもAddQuick追加かな。本体CSSにこういう記載があるから色変えようかな mark, ins { background: #d6fce2; text-decoration: none; }

blockquoteで引用している文の中にciteタグではさむと右寄せ斜体になるので引用元の記載に使えるよっていう。

定義リストにも対応してるけど、タグの存在すら知らなかった。使い方わからない定義リスト HTML <dl><dt><dd> でもこれを見たら、いつもリストをネストしてコメントしてるけどこれを使うのがいいかもしれないな

preタグで本来背景が灰色になるみたいなんだけどcrayonプラグインが適用されてしまう。

最後にclass="note"の使い方の説明あるけどわかんないよ～

8. Shortcodes

ここに色々載ってるので参照されたい→Shortcodes | Zuki

[red_box] ショートコードで簡単にページを装飾できるものがそろってます。覚えるかAddQuickに登録だな [/red_box]

[button link="#" color="blue"]かわいらしいボタンも[/button] ダウンロードはこちら！とかやってるやつね

[button link="URL here" color="purple" form="round" size="xsmall"]紫・角丸・Xsmall[/button] [button link="URL here" color="red" form="round" font="bold"]赤・角丸・Medium・太字[/button] [button link="URL here" size="large" color="darkblue"]darkblue・Large[/button] colorは上記の一覧ある通り。darkblueとpurpleはコード書いてないけどCSSにあるので指定できる。サイズと組み合わせ可能。サイズ指定なしはミディアム（standard-btn）となる。書いてないけどCSS見たら角丸のクラスがあったからform="round"で。同様にボタン文字を太くするのはfont="bold"

あとマルチカラムの書き方とか。固定ページで使えそう。それができるってことを忘れてしまいそう。

9. Supported Plugins

Jetpack、Simple Share Buttons Adder、Contact Form 7、Custom Faviconの4つのプラグインはサポートしてるよーって。 Contact Form7しか使ってませんが。

10. Theme Translations

Codestyling Localizationってプラグインで好きに翻訳ファイル作れますよってこと？わからん。英語読めん

11. Child Theme for Customizations

カスタマイズする時は子テーマつかってねー更新しても子テーマでカスタマイズしてたらそのままいけるからーってことよね。本体をいじくるのはできるだけ避けたい。ちなみにダウンロードできる子テーマはstyle.cssしかないので必要分は追加で作る必要があり、 CSSは追記でphpは上書き方式だけど、 functions.phpだけ例外で追加方式（しかも本体に設定されてる関数とかぶるとエラーを起こす）なので注意

本体設定とか

メディアはSimplicityの設定とほぼ変わらず。大の幅1200にしたプラグインの設定はまた別記事最低限の設定等は以上。ここから先が長いんだが。ちなみにこのテーマに変えてからアクセスはやや上昇したがアドセンスのクリックは皆無になった。というか今までがアクセスの割に多かっただけのような。Simplicityすげえ

君が宇宙

Zukiインストール後の設定

2. Creating the Front Pageから

3. Front Page Featured Posts Slider

4. Widget Areas and Widgets

Recent Post系ウィジェット

Zuki: Recent Posts (Background)

Zuki: Recent Posts (Big 1)

Zuki: Recent Posts (Big 2)

Zuki: Recent Posts (Medium 1)

Zuki: Recent Posts (Medium 2)

Zuki: Recent Posts (Small 1)

Zuki: Recent Posts (Small 2)