フォーラムへの返信
-
投稿者投稿
-
ちょっと試してみました。
結論からお伝えすると、
animation
部分の記述が間違っています。例えば、「左からフェードイン」の部分ですが、
animation: fadein-left 1.5s 0 ease-out forwards;
と記載がありますが、この0
が何を意図しているのかわかりませんが、プロパティの指定がおかしくなっています。ですので、とりあえず
animation: fadein-left 1.5s ease-out forwards;
こうするだけで動作します。追加CSSからの記述でも問題ありません。こちらもご一読いただいて、理解を深めてみてください。また、CSSアニメーションなどをコピペでサクッとやりたい気持ちはよくわかるのですが、本件のように問題が発生した際に自ら解決できるようが手っ取り早いと思いますので、開発者ツールで動作がうまく行かない原因を確認してみるなど、試してみてください。
https://developer.mozilla.org/ja/docs/Web/CSS/animation
♥ 2Who liked: No user現状、添付のページに掲載されているCSSのソースコードを、カスタマイズ→追加CSS に入力されて、アニメーションをさせたい部分に任意のCSSクラスを付与したけど動かないということでしょうか?
実際、どのような状況になっているのか想像しにくいので最適なアドバイスが思いつきませんが、公開URLなどを用意されるか、具体的にどのような方法でCSS(と 必要なhtmlタグ ?)を挿入されたのかを共有いただけますと、アドバイスしやすいかなと思います。
ご確認お願いいたします。
♥ 0Who liked: No userこちらですが、現在はテーマに Snow Monkey を利用しておらず、同じく100%GPL 有料WordPressテーマの SWELL を利用されているようです。
ですので、Snow Monkey で同じようなことをやろうと考えると、若干カスタマイズが必要になる可能性が高いです。その方法については、フォーラム内の「カスタマイズに関する質問」にて、別途トピックを立てられると良いかと思います。
♥ 0Who liked: No userおそらく、固定ページのアイキャッチ画像の高さはカスタマイズ画面の中では変更できなかったはずです。
CSSでの対応になると思いますが、現在の以下の設定状況を共有していただけますか?固定ページを表示した状態で以下を確認してみてください。
- カスタマイズ→デザイン→固定ページ設定→ページレイアウト
- カスタマイズ→デザイン→固定ページ設定→アイキャッチ画像の位置
ご確認お願いします。
♥ 0Who liked: No userこちらで意図されている形のCSSクラスが
<body>
タグに出力されていれば問題ないかと思いますー!♥ 0Who liked: No user@キタジマタカシ 氏
確認しました!僕の方ではtarget="_blank"
はちゃんと動作していました!
ありがとうございます!♥ 1Who liked: No userこちらはプラグインといえばプラグインなのですが、WordPressのプラグインではないですね。
こちらを指されているという前提でお話をしますと、こちらSwiper本体を利用してSnow Monkey内に実装しようとするならば、カスタムHTMLブロック内でゴニョゴニョとコードを書くしかないかなと思います。
ただ、上記カスタムHTMLブロックだけでは推奨する形でCSSやJavaScriptを読み込むことができなくなるので、結果的にあまりお勧めしたい方法ではなくなってしまいます。
また、コードを書かれず実現したいという場合には、プラグインを活用する方法がベターだと思いますので、ウェブ検索などで「wordpress slider draggable plugin」といった形で検索をしてみて、色々なプラグインを片っ端から試してみることもお勧めします。
もうちょっと良いアイデアをお持ちの方がみえるかもしれませんが、いただきました情報から考えるとこのようなお返事になるかと思います。
よろしければ参考になさってください。
♥ 0Who liked: No userswiperというプラグインがあるのはわかったのですが、これをSnowMonkeyに導入
するための方法がわからないです。
ここで言われているプラグインのURLもしくは正式名称をお教えいただいてもよろしいでしょうか?
また、ご自身でコードを書ける場合は、以下のリンクとSwiper公式ドキュメントを参照しながら、ショートコードなどで出力できる形にして、ページに設置する形がスムーズかもしれませんね。
♥ 1Who liked: No user@アクツ さん
ドンピシャでかぶった…ww♥ 0Who liked: No user現在のバージョン以前はちょっとわからないのですが、こちらは項目にフォーカスが当たった状態に出るものです。
現在もinputなどのフォーム入力部分をテキスト入力をしようと選択すると、フォーム部分に青く細い罫線が表示されると思いますが、そちらと同じ用途のものです。
ご存知かと思いますが、こちらは様々な方法(スクリーンリーダーやキーボードのみ)でアクセスされる方々に向けたアクセシビリティ確保のための手段で、ブラウザの機能になります。(なのでバグではないと思われます)
div.wp-block-snow-monkey-forms-item
にtabindex
が付いているのでこうなるのですが、確かにはっきりと罫線が見えるので気にはなりますよね…。CSS的な処理で消すこともできますが、アクセシビリティ的な観点からこのような方法を採用している可能性もあるため、@キタジマさんのご意見も伺った方がよさそうです。♥ 0Who liked: No userプラグインからのアプローチもあるとは思うのですが、
フロントページを固定ページにした際の最近の投稿の日付をタイトルの上に設定したい
だけを実現するとすれば、CSSだけで実現できると思います。
.c-entry-summary__body
はdisplay: flex;
が設定されているのですが、その中には、.c-entry-summary__header
.c-entry-summary__content
.c-entry-summary__meta
と上から単純にレイアウトされています。
固定ページをフロントページとして、そこに最新の投稿ブロックなどで記事の一覧を用意されているとするならば、そのブロックにCSSクラスを任意で設置して(以下、
.top-recent-posts
とする)、.top-recent-posts .c-entry-summary__meta { order: 0; } .top-recent-posts .c-entry-summary__header { order: 1; } .top-recent-posts .c-entry-summary__content { order: 2; }
とすると、上から日付等メタ情報→ヘッダー→コンテンツ という並びに変更できるかと思います。あとは上下マージンなどを調整するだけで大丈夫かと思います。
プラグインアプローチについては…強強なユーザーを待ちましょう…!!
♥ 2Who liked: No user@mayu さん
僕の確認不足で間違った誘導をしてしまいました。申し訳ございませんでした。
@キタジマタカシ 氏
こちらでテストした結果ですが、カスタマイザー内「お知らせ」にて、
- お知らせバーコンテンツ:
<a href="https://youtube.com" target="_blank">Youtube <i class="fab fa-youtube"></i></a>
- お知らせバーリンク URL:空白
という状態でフロント側を確認したら、出力されているソースが、
<div class="p-infobar"> <span class="p-infobar__inner"> <div class="c-container"> <div class="p-infobar__content"> <a href="https://youtube.com">Youtube <i class="fab fa-youtube"></i></a> </div> </div> </span> </div>
という形になっているので、
target
が内部で消えてしまっているのかな…と思われます…。♥ 1Who liked: No user本件はSnow Monkeyとは関連性のないHTMLの記述方法についての質問になるかと思いますので、ご自身で頑張って調べていただくと良いかと思います。
参照リンクを掲載しておきますね。
♥ 0Who liked: No userブラウザの開発者ツールで任意の画像のソース部分を見ていただくとわかりますが、画像が150px x 150pxのサムネイルサイズのものが適応されています。
要するに、小さい画像が大きく拡大されて表示させられているので、一覧部分のアイキャッチ画像が荒く見えるという結果になっていますね。
どのようなカスタマイズや設定変更などをされているのかわからないので、これ以上アドバイスができませんが、記事一覧ページのサムネイル画像のサイズに問題があるということなので、そこから逆算して色々と試してみてください。
♥ 0Who liked: No user -
投稿者投稿