DRILL LANCER
フォーラムへの返信
-
投稿者投稿
-
DRILL LANCERモデレーター画像を100%幅にしたいと思います。
特定カテゴリのアーカイブの画像を100%にする方法は
外観 > カスタマイズ > 追加CSS 等に
下記コードをCSSに追加することで実現できます。
{id}の部分には特定カテゴリのIDを入力してください。.category-{id} .media .postList_thumbnail{ width:100%; }
投降日を消したいとか、四角の枠のカテゴリーを消したいとか
投稿日、最終更新日、カテゴリ、筆者(?)を一気に消すには下記CSSコードでいけます。
あとは上記と以下同文なので割愛します。.category-{id} .entry-meta{ display:none; }
- この返信は5年、 4ヶ月前にDRILL LANCERが編集しました。
DRILL LANCERモデレーターアーカイブはすべて index.php とそれが読み込んでいる
module_loop_post.php, module_loop_post_meta.php で処理されています。これらのファイルとWordPress のテンプレート階層のページを参考にしながら希望するレイアウトを実現すると良いでしょう。
もっというと下記操作をすれば実現できるでしょう。
- index.php を子テーマにコピーしてそれを category-{slug}.php にリネーム
- category-{slug}.php を編集して保存
DRILL LANCERモデレーター- 「トップページコンテンツエリア左」
- 「トップページコンテンツエリア右」
上記の2つのウィジェットエリアは少し干渉し辛い部分で定義されているため、
(親テーマを直接書き換えるのは将来的に考えても非推奨&解除されにくい書き方をしているため)
新たにウィジェットエリアを開設することで対応してみました。下記コードを子テーマの functions.php に記述すると、
新たに下記2つのウィジェットエリアが追加されるのでそちらを使用してみてください。- 「トップページコンテンツエリア左2」
- 「トップページコンテンツエリア右2」
/** * Define Widget Areas for asahi */ function asahi_widgets_init() { register_sidebar( array( 'name' => __( 'Home content top after left', 'lightning-pro' ) . '2', 'id' => 'home-content-top-after-left-widget-area-kai', 'before_widget' => '<div class="widget %2$s" id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h2 class="mainSection-title">', 'after_title' => '</h2>', ) ); register_sidebar( array( 'name' => __( 'Home content top after right', 'lightning-pro' ) . '2', 'id' => 'home-content-top-after-right-widget-area-kai', 'before_widget' => '<div class="widget %2$s" id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h2 class="mainSection-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'asahi_widgets_init', 100 ); /** * Place Widget Areas for asahi */ function asahi_add_widget_area() { if ( is_active_sidebar( 'home-content-top-after-left-widget-area-kai' ) || is_active_sidebar( 'home-content-top-after-right-widget-area-kai' ) ) : echo '<div class="row">'; if ( is_active_sidebar( 'home-content-top-after-left-widget-area-kai' ) ) : echo '<div class="col-sm-8">'; dynamic_sidebar( 'home-content-top-after-left-widget-area-kai' ); echo '</div>'; endif; if ( is_active_sidebar( 'home-content-top-after-right-widget-area-kai' ) ) : echo '<div class="col-sm-4">'; dynamic_sidebar( 'home-content-top-after-right-widget-area-kai' ); echo '</div>'; endif; echo '</div>'; endif; } add_action( 'lightning_home_content_top_widget_area_after', 'asahi_add_widget_area' );
幅の割合は
asahi_add_widget_area
内のcol-sm-8
・col-sm-4
で指定しています。
この部分の8
と4
を合計が12になるように調整してみてください。
DRILL LANCERモデレーター今日購入して作業しはじめたのならそれで正常なような気がします。
とりあえず、表示されている記事の投稿日時を確認&変更を試してみてください。
DRILL LANCERモデレーター- 「最終更新日」に変更後「VK最新記事」ウィジェットにある「保存」ボタンを押しましたか?
(↑多分押しているとは思いますが一応) - 他のブラウザで表示確認をしてみましたか?(Firefox とか Opera とか スマホとか)
DRILL LANCERモデレーター「Google Chrome」をお使いの場合、ブラウザキャッシュの削除は
F12
を押して更新ボタンを右クリック後「キャッシュの削除とハード再読み込み」が早いです。
もしくは別のブラウザで表示確認をするともっと簡単に確認できます。
DRILL LANCERモデレーターその設定をひらいて、「表示順」を「公開日」から「最新記事」に変更すると良いでしょう。
「最新記事」ではなくて「最終更新日」でしたね。失礼しました。
そのように設定した後保存をクリックし、
キャッシュプラグインを使用している場合はそのキャッシュを削除し、
ブラウザのキャッシュも削除すれば反映されると思うのですがいかがでしょうか?
DRILL LANCERモデレーター外観 > ウィジェット の「トップページコンテンツ上部」のエリアに
「VK 最新記事」ウィジェットがあると思います。
その設定をひらいて、「表示順」を「公開日」から「最新記事」に変更すると良いでしょう。
DRILL LANCERモデレーター文言の下のアルファベットについては下記記事が詳しいです。
文言左部分のアイコンは下記コードのような Font Awesome のアイコンのコードを文言の前後につけることで変更可能です。
<i class="fab fa-accessible-icon"></i>
- この返信は5年、 4ヶ月前にDRILL LANCERが編集しました。
- この返信は5年、 4ヶ月前にDRILL LANCERが編集しました。
DRILL LANCERモデレーターVektor,Inc. あるいは 匿名 のトピックを見かけたら、概ねユーザーから問い合わせフォームやメールで送信されたものを直接私が貼り付けたものだと思っていただければと思います。
Vektor,Inc. 名義の投稿は一体何事か、キーマスターなるものが質問していたので何事かと思っていましたがそういうことだったのですね。
そのあたりをフォーラム利用方法に追記していただけたら幸いです。
DRILL LANCERモデレーター
DRILL LANCERモデレーター上記に同じようなトピックがあり、すでに回答がついていますので参考にしてください。
あと、もし、あなたが上記トピックを立てた人ならば、
同じようなトピックを複数立てることは嫌われる行為なので今後は注意してください。ついでにいうと、ソースコードを掲載する際はソースコードの部分を選択した状態で
code
ボタンを押すと良いです。
DRILL LANCERモデレーター.colmun_flex{ display: flex; justify-content:; flex-wrap: wrap; width: 100%; } .column_box{ width: 30%; } .column_box img{ width: 100%; border: 3px solid #fff; }
上記のようにCSSで定義しているので
<div class="column_flex"> <div class="column_box"><img src="/wp-content/uploads/2019/07/hall01.jpg"></div> <div class="column_box"><img src="/wp-content/uploads/2019/07/hall02.jpg"></div> <div class="column_box"><img src="/wp-content/uploads/2019/07/hall03.jpg"></div> </div>
でないと正常に反映されないと思います。
ちなみに、cssでのidに該当するものは#
です。あと、Lightning は Bootstrap をベースとしているため、グリッドシステムを使用できます。
DRILL LANCERモデレーターブログカードといえば私は「Celtispack」を使っています。
https://celtislab.net/wp_plugin_celtispack/画像をOGP経由で取得しているので、WordPress以外のブログでもOGPが有効ならば記事画像を取得できるので重宝しています。
下記記事も参考になるかもしれません。
https://celtislab.net/archives/20170511/oembed_viewcode/
DRILL LANCERモデレーターどうやら元通りになっているようですね。
ご対応ありがとうございました。 -
投稿者投稿