DRILL LANCER
フォーラムへの返信
-
投稿
-
私は下記の様にしてYouTubeの動画を貼り付けています。
ちなみに、カラム内フルサイズです。HTML
<div class="movie-wrap"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Q2CXPPPjC8k" frameborder="0" allowfullscreen></iframe> </div>CSS
.movie-wrap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }ブロックエディタを使用してみようと思いましたが、
ネスト化させようとすると結構煩わしいですね。LightningではBootstrapが使用されているので、
下記のように記述することができます。<div class="col-md-4"> <img src="画像1のURL" alt="" /> <p class="">テキストテキストテキスト</p> </div> <div class="col-md-4"> <img src="画像2のURL" alt="" /> <p class="">テキストテキストテキスト</p> </div> <div class="col-md-4"> <img src="画像3のURL" alt="" /> <p class="">テキストテキストテキスト</p> </div>上記をカスタムHTMLブロックに記述するなり、
再利用ブロックに登録するなりすると良いでしょう。col-md-4については下記サイトを見るとよいでしょう。
https://getbootstrap.com/docs/3.3/css/#grid-options
https://getbootstrap.com/docs/3.4/css/#grid-options
Lightning Originには3.4.1が、その他のスキンには3.3.4が
標準で搭載されているので２つ載せました。再利用ブロックの使い方は下記が詳しかったと思います。
WordPressのバージョンが5.00以上ならGutenbergがデフォルトのエディタです。
なので、WordPressのバージョンが5.00以上の場合Gutenbergプラグインは不要です。もし、WordPressのバージョンが5.00以上なのにGutenbergがデフォルルトではない場合、
Classic Editorをインストールすると
設定 > 投稿設定
に下記項目が追加されます。- すべてのユーザーのデフォルトエディター（クラシックエディタ or ブロックエディタ）
- ユーザーにエディターの切り替えを許可します。（はい or いいえ）
また、「ユーザーにエディターの切り替えを許可します。」に「はい」を選択すると
ユーザー > あなたのプロフィール
に下記項目が追加されます。- デフォルトエディター（クラシックエディタ or ブロックエディタ）
これらを使用して調整すると良いでしょう。
/** * Key Color CSS */ function my_lightning_keycolor_css() { $options = get_option( 'lightning_theme_options' ); $color_key = ( isset( $options['color_key'] ) ) ? esc_html( $options['color_key'] ) : '#337ab7'; $color_key_dark = ( isset( $options['color_key_dark'] ) ) ? esc_html( $options['color_key_dark'] ) : '#2e6da4'; ?> <style type="text/css"> .bg-main{background-color: <?php echo esc_html( $color_key ); ?>} .bg-dark{background-color: <?php echo esc_html( $color_key_dark ); ?>} .bd-main{border-color: <?php echo esc_html( $color_key ); ?>} .bd-dark{border-color: <?php echo esc_html( $color_key_dark ); ?>} .text-main{color: <?php echo esc_html( $color_key_dark ); ?>} .text-dark{color: <?php echo esc_html( $color_key_dark ); ?>} </style> <?php } add_action( 'wp_enqueue_scripts', 'my_lightning_keycolor_css' );とりあえず、上記のように設定しておいて
<p class="text-main bg-dark bd-main">あああああ</p>
という感じで使ってみてはいかがでしょうか？::beforeや::after等の疑似要素を使用する場合は必要に応じて上記に追加する感じで・・・もしくは、「css variables ie11 polyfill」あたりで検索して、
検索結果の中から納得行くポリフィルを見つけ出し導入して無理やりCSS変数に対応させるのも手かもしれません。
ポリフィルというのは古いIEを新しいCSS要素に無理やり対応させるスクリプトのことを指します。改行云々は「VK Blocks」の仕様というよりは「Gutenberg」の仕様っぽいので、
WordPressフォーラムの方で相談してみてはいかがでしょうか？GD bbPress Attachmentsを導入する予定はありますか？
現状では外部にアップロードした画像をフォーラムで表示する形になり、
どこに画像をアップロードしたら良いのかわからない人もいると思います。
なので、このサーバーに画像をアップロードできる措置があればよいのですが可能でしょうか？>>glass-planさん
上記は助太刀の意味で書きました。ちょっと情報が足りていないように感じたので。
こうすれば反応してくれるのかなといった意味で。
なので対応してくれるのを待っていたら良いと思いますよ。ちなみに私は1顧客であってLightning Works Unitを持っていないので対応はできません。
Lightning Works Unitのデモページでも「株式会社ベクトル」の画像部分からaタグが消えています。
画像直下の会社名の部分をクリックしたら遷移でき、 Before – After mode で作成されていました。
それ以外の画像にはaタグが反映されていましたがどれも Normal mode で作成されていました。ついでですが、Lightning Works Unitの説明ページの Before – After mode の説明画像の説明部分では
Befor – After mode と書かれていました。WordPressフォーラムと比べると、リンクボタンのテキストテキストエリアが
まだ狭いような気がしますが・・・気が向いたときに修正していただけたら幸いです。とりあえず、私だったら下記手順で試みます。
- Gutenberg+VK Blocksでパパラックス搭載の記事を書いてみる
- 上手く動作したならその記事の構造をコードエディターで覗いてみる
- コードエディターでパパラックスをする部分のコードを探し出す
- エディターをClassic Editorに戻し、旧記事にパパラックスする部分のコードを追加
私はClassic Editorでhtmlを直打ちする人なのでこういう対処法を考えました。
（Gutenbergはそのあたり機能が未だに不便なので未だにClassic Editorを使用しています。）
<div>と</div>の数が合わなくなるとサイトのデザインが大幅に破壊されますのでその点はご注意ください。該当の投稿がどうして初期投稿時に違う画像が
アイキャッチ画像として登録されていた状態なのかという点おそらく、記事先頭の画像が自動的にアイキャッチ画像に
登録されるようなカスタマイズを施していたのでしょう。
（画像つきリンクを記事先頭に持ってくる場合はこのあたり面倒なので）
例：ちなみに私は後者を選択しています。
また、ループ部分では通常アイキャッチ画像をサムネイルに使用していることもあり、
そういった意味で真っ先にアイキャッチ画像を疑いました。
Lightning Works Unitの説明ページを見て一度は引いたものの、
実はそれが正解だったということですね。デザインスキンのcssが子テーマのCSSより後に読み込まれるように
設計されているので、仕様を上書きするには少々手間がかかります。CSSの優先順位については下記サイトが詳しいです。
あと、下記記事も参考になると思います。
