スキンを作る方法(流れ)

0
いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #54652
    アバター画像星乃 みなみ
    閲覧者
    36

    ちょっと時間が空きましたので、オレオレスキンを作って、案件がきたときに備えようと思っています。といっても、基本はデフォルトスキンを踏襲し、小見出しのデザインをGosky風にしたいと思ってます。あと、トップページは画像または動画を全面表示したいです。それ以外はまだ構想中です。

    プラグインでつくるのですよね。CSSはどの様に指定すればよいのでしょうか?
    上書き用CSSをフックで読み込ませるのでしょうか

    サイトに描かれていたスキンの作り方ではちょっとピントこなかったので、詳しく教えて下さい

    0
    いいねをした人: 居ません
    #54657
    Kmical Lights
    閲覧者
    234

    プラグインでつくるのですよね。

    そうですね。デザインスキンもプラグインですが、デザインスキンの場合はデザインスキンとして準備されている型やファイル構成などに合わせて作成する必要があります。(解説記事に構成が記載されているとおりです)

    CSSはどの様に指定すればよいのでしょうか?
    上書き用CSSをフックで読み込ませるのでしょうか

    デザインスキンは基本的に、
    customize-control.jsでカスタマイザーの値を変更されては困る部分などを固定化し、
    design-skin.cssにデフォルトのスタイルを上書きして、デザインをカスタマイズする形となると思います。

    解説記事にあるビジュアルエディタ用の CSS は、ブロックエディターとなった今は必要ないことが多いので、最初は無視しても良いと思います。

    トップページは画像または動画を全面表示したいです。

    このケースは、場合によって、my snow monkeyでやる方が良い場合もあるなど、スタイルなどの構想パターンによっても良い方法は異なるかもしれません。

    デザインスキンは、構造上からも phpでフックを使ってカスタマイズしまくる…と言う事はあまりしない方が良いので、構造を大きく変える場合、デザインスキンではないプラグインを作って、デザインスキンと併用する方が管理もしやすくなると思います。(デザインスキン + my snow monkeyプラグインの2つで大きくカスタマイズする形を推奨とされているようです)

    構想中とありますが、大きくデザインを変更するようなものをお考えであれば、
    デザインスキンでカスタマイズする部分と、my snow monkeyで大きく変更する部分などと言うように
    別に考えれば、理解しやすいと思います。
    また、大きなカスタマイズは最初からしようとせずに、まずは見出し程度のCSSの上書きという形で、最小のスキン化を行ってみてください。上手くいけば、スキン化する部分を広げていくと良いデザインスキンが作れていくと思います。

    0
    いいねをした人: 居ません
    #54658
    アバター画像星乃 みなみ
    閲覧者
    36

    詳しい解説ありがとうございました!

    イメージ的には考えてたものと同じようです。今、既存スキンを落としてきて、ファイル構成とかみています。CSSはデフォルトでよいところは記述せず、変更するところだけ記述すればよいのですかね

    まずは見出しのスタイルを変えるスキンを作ってみます。

    0
    いいねをした人: 居ません
    #54764
    アバター画像キタジマ タカシ
    参加者
    2421

    @Kmical Lights さんありがとうございます!

    @小山智久さん

    まず、デザインスキンの存在理由について書きます。Snow Monkey 以外の一般的なテーマでは、デザイン違いのバージョンは大抵「子テーマ」として配布されています。ただ、WordPress は仕様上「子テーマの子テーマ」はつくれないので、デザイン違いのバージョンが子テーマとして提供されてしまうと、その子テーマを使ったユーザーがさらにデザインを変えたいと思った場合は変える方法がなくなってしまいます。

    そこで Snow Monkey はデザイン違いのバージョンを提供する方法として「デザインスキン」機能をつくりました。これならデザインスキンをつかったユーザーがさらにデザインを変えたい場合は子テーマで変更することができます(今となっては My Snow Monkey でもできますが…)。これがデザインスキンの存在理由です。

    ということで、もし小山さんが Snow Monkey のデザイン違いのバージョンを配布したいということであればデザインスキンをつくるのが最適ということになりますが、案件に応じてデザインを都度都度調整する場合はデザインスキンは使わずに My Snow Monkey や子テーマで完結させたほうがシンプルかもしれません。My Snow Monkey や子テーマで CSS や JS を読み込む場合は Snow Monkey 独自のお作法はありませんので、ファイルを作って WordPress 標準である wp_enqueue_script()wp_enqueue_style() を使って読み込むことになります。

    1
    いいねをした人: 居ません
    #54810
    アバター画像星乃 みなみ
    閲覧者
    36

    @キタジマ タカシ さん ご無沙汰してます。こないだのイベントではありがとうございました。

    デザインスキンを配布するほど、オリジナリティをもとめているわけではないのですが(いつか作りたいとはおもっていますが)当面の目標は、案件が来たときにすぐに展開できる、自分の考えるデザインのプロトタイプがつくれれば達成できます。

    基本的にデフォルトのデザインに不満があるわけではないので、見出し周りだけまずは変更したいと考えています。子テーマで完結したほうがよいとのことですが、CSSは、assets/css/style.min.cssを上書きしてやればよいでしょうか。minify化されているので、編集が困難です。minify化まえのソースはありますでしょうか?

    まずは子テーマとMy Snow Monkeyの作り方を調べてみます。

    0
    いいねをした人: 居ません
    #54864
    アバター画像キタジマ タカシ
    参加者
    2421

    CSSは、assets/css/style.min.cssを上書きしてやればよいでしょうか。minify化されているので、編集が困難です。minify化まえのソースはありますでしょうか?

    「上書き」が CSS の上書きを指しているのであればそのとおりですが、CSS ファイル自体の直接編集のことを指しているのであれば NG です。もしかしたら以前も書いたかもしれませんが、親テーマは直接編集してはいけません。子テーマで独自の CSS ファイルを追加して、そこに CSS を記入しSnow Monkey のスタイルを上書きしていくという流れになります。

    この辺も Snow Monkey のお作法ではなく WordPress の一般的なカスタマイズの方法になりますので、Codex や書籍を一読されると理解が早いと思います。

    0
    いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「スキンを作る方法(流れ)」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。