Snow Monkey BlocksのSectionの傾斜、逆方向が欲しい

0
いいねをした人: 居ません
  • このトピックには6件の返信、2人の参加者があり、最後にHatsukiにより4年、 11ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #39167
    Hatsuki
    閲覧者
    6

    今の傾斜は左のほうが右より高い斜めになる形ですが、左のほうが右より低くなる形も欲しいなと思う時が無いかなと。

    SVGを反対に計算すれば出来ると思いますし、「向きを逆にする」オプションを追加して切り替えれば良いかなと考えてますが、どうでしょう?

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

    「逆にする」というのはあんまり好みじゃないので、(できるかはわかりませんが)レベルを現状の「0〜100」から「-100〜100」にして、マイナスにスライドさせると逆方向に傾斜がかかるようにしたいなーと思いました。波もしかり。カーブと三角はどうするか迷いますが…。

    0
    いいねをした人: 居ません
    #39305
    Hatsuki
    閲覧者
    6

    なるほど。
    マイナス値になっている時にattributeの値から補正して計算し、逆方向にする…でいけそうっすね。

    波もしかり。カーブと三角はどうするか迷いますが…。

    んー、なら試してみて微妙なのは削る形で一度使用感を試してからリリースする方が良いと思うし、全部やったのを今週中にこちらでプルリクするって感じでも良いっすかね。(やり方わかってるし)

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

    カーブはまだ反転させてもおかしくない(svg は別物をつくらないといけないかな)かもですが、三角はちょっと同しようもない気がしますね…。

    んー、なら試してみて微妙なのは削る形で一度使用感を試してからリリースする方が良いと思うし、全部やったのを今週中にこちらでプルリクするって感じでも良いっすかね。(やり方わかってるし)

    まじですか!それはとても助かります。

    0
    いいねをした人: 居ません
    #40124
    Hatsuki
    閲覧者
    6

    うーん…傾斜以外要らない気がする(笑)

    三角はちょっと同しようもない気がしますね…。

    タイポも、どうしようもない気がしますね…。

    三角はマイナス値の際にpathを大きく変えればやりようがありますが、使い道がどうしようもない気がします。
    波も上下反対にする意味が無いように見えますんでやる意味が無いと言うか。

    それに、カーブで試していたんですが、タイトル部分にめり込むんでその辺の調整も必要かも。
    三角とか全部、-100から100までをRangeできるようになるのもどうしようかと思うのでその辺考えないとですねー…。
    傾斜(逆方向)を新しく追加する方が早いかも?

    一応、カーブと傾斜の計算のだけ置いときます。

    
    	const renderTiltDivider = () => {
    		if ( 0 > level ) {
    			return (
    				<path
    					d={ <code>m100,${ 100 + level } L100,100 L0,100 z</code> }
    					strokeWidth="0"
    					fill={ color }
    				/>
    			);
    		}
    		return (
    			<path
    				d={ <code>m0,${ 100 - level } L100,100 L0,100 z</code> }
    				strokeWidth="0"
    				fill={ color }
    			/>
    		);
    	};
    
    	const renderCurveDivider = () => {
    		if ( 0 > level ) {
    			return (
    				<path
    					d={ <code>m0,100 L100,100 Q50,${ level * 2 + 100 },0,100 z</code> }
    					strokeWidth="0"
    					fill={ color }
    				/>
    			);
    		}
    		return (
    			<path
    				d={ <code>m0,${ 100 - level } q50,${ level * 2 },100,0 V100 L0,100 z</code> }
    				strokeWidth="0"
    				fill={ color }
    			/>
    		);
    	};
    

    なんか、一部codeタグに変換されるorz
    適当に脳内変換して読み取ってくださいな。

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

    コードありがとうございます!

    Snow Monkey Blocks v7.2.0 で対応したのでご確認おねがいします!

    0
    いいねをした人: 居ません
    #41349
    Hatsuki
    閲覧者
    6

    確認しました。ご対応ありがとうございます。
    タイトル文字列とのレイアウト幅もいい感じに調整されているので、使いやすいです。
    波も上下の位置がより変わる事で、ふわふわ感も出るようになりましたね(笑)

    トピック閉じます。

    0
    いいねをした人: 居ません
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「Snow Monkey BlocksのSectionの傾斜、逆方向が欲しい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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