[akosan]

キタジマさん

無事に作成できました！

お忙しい所ありがとうございました。

解決したのでトピックを閉じさせていただきます。

♥ 1

いいねをした人:

[akosan]

まーちゅうさん、ありがとうございます。
教えてくださった内容で実現できました。
ありがとうございました。

トピックを閉じさせていただきます。

♥ 1

いいねをした人:

[akosan]

ご教示くださってありがとうございます。

フッター固定ナビゲーション（モバイル）に設定

<i class="mob_love"></i>
<p>ここに文字</p>

CSS

.p-footer-sticky-nav > ul > li.menu-item-4793 > a:before {
content: url(URL);
}

画像は30pxがちょうど良かったです。CSSのクラスを設定していますが、今回は必要ありませんでした。
ありがとうございました。

そしていざPageSpeed Insightsで測定してみると画像の方が表示スピードが若干下がってしまったというオチつきでした。
30pxと小さい画像なのですが。
なのでどちらでもそれほど変わらないのかなという結果になりました。
※他の方のために記載しておきます

解決したのでトピックを閉じさせていただきます。

♥ 2

いいねをした人:

[akosan]

解決しましたのでトピックを閉じさせていただきます。

♥ 1

いいねをした人:

[akosan]

GONSYさん

ありがとうございます。

ご指摘を元に確認したところ、追加CSSに設定したものに.は抜けていなかったのですが、なぜかCSSが適用されず。

span:nth-of-type(1)を追加で設定したところ、なぜかspan:nth-of-type(2)にもCSSが適用されました。

原因はよくわかりません。これでいけました。↓

/*カスタム投稿のみ最新の投稿にスラッグを複数ラベル表示*/

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(1){
top: 0;
}

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(2){
top: 2.8em;
}

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(3){
top: 5.6em;
}

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(4){
top: 8.4em;
}

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(n + 5){
display:none;
}

♥ 0

いいねをした人: 居ません

[akosan]

画像を送るのが漏れていました。現在このようになっています。

♥ 0

いいねをした人: 居ません

[akosan]

キタジマさん

コードの件ありがとうございます。テキストモードで入れるのですね。

タグの表示ですが教えていただいた方法で出力できました！

ただ

nth-of-type(2)

だけがCSSが効いていないようで１番目と重なって表示されているのですが、修正方法がわからずにおります。

 

 

CSS

/*カスタム投稿のみ最新の投稿にスラッグを複数ラベル表示*/

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(2){
top: 2.5em;
}

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(3){
top: 5em;
}

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(4){
top: 7.5em;
}

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(n + 5){
display:none;
}

`

♥ 0

いいねをした人: 居ません

[akosan]

先に投稿したもの、コードが皆さんが投稿しているような表示にならない（通常はコードの部分だけバックがベージュになっている）のが気になっています。やり方を調べても見つけられずで…。

もしやり方が間違っているようでしたら、質問の時にコードをはりつけるときはこの機能を使う等、ご指摘いただければと思います。

♥ 1

いいねをした人:

[akosan]

>キタジマさん

ありがとうございます。category →　post_tag へ変更してCSSも変更しました。

表示が出てこなかったので調べて以下のようにやってみたのですが変更できず行き詰まっています。

↓

// 投稿以外の場合は無視

if ( 'post' !== $args['name'] ) { return $args; }

このpostの部分をカスタム投稿に変更しなければならないのでは？と考え

// カスタム投稿以外の場合は無視
if ( 'custom_post_type' !== $args['name'] ) {
	return $args;
}

にしてみました。おそらく思い切り間違えてると思いますが…
勉強不足で申し訳ないです。

以下変更してUPしたものです。

お手数ではありますがご指摘よろしくお願いいたします。

php

/**
 * Snow Monkey 投稿の一覧で、カスタム投稿のみタグを複数表示にする
 */
add_filter(
	'snow_monkey_get_template_part_args',
	function( $args ) {
		// 記事一覧カテゴリー以外のテンプレートの場合は無視
		if ( 'template-parts/loop/entry-summary/term/term' !== $args['slug'] ) {
			return $args;
		}

		// カスタム投稿以外の場合は無視
		if ( 'custom_post_type' !== $args['name'] ) {
			return $args;
		}

		// 全ての設定されたタグを返す
		$args['vars']['_terms'] = get_the_terms( get_the_ID(), 'post_tag' );

		return $args;
	}
);

CSS

/*カスタム投稿のみ最新の投稿にスラッグを複数ラベル表示*/

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(2){
  top: 2.5em;
}

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(3){
  top: 5em;
}

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(4){
  top: 7.5em;
}

.c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(n + 5){
  display:none;
}

♥ 0

いいねをした人: 居ません

[akosan]

キタジマさん

無事に見ることができ、設定もできました。

ありがとうございます！

♥ 1

いいねをした人:

[akosan]

キタジマさん

ありがとうございます！

記載のURLをクリックしてみたのですが404になりこういったメッセージが出ました。

The ‘inc2734/snow-monkey’ repository doesn’t contain the ‘src/js/fontawesome.j’ path in ‘master’.

わたしの方で何等かのアクションが必要なのでしょうか。

（githubのアカウントは持っています）

♥ 0

いいねをした人: 居ません

[akosan]

＞キタジマさま

お返事をありがとうございます。

＞Snow Monkey / Blocks / Editor の内部で使用されているアイコン

これが今ひとつわからないでおります。もしこの「内部で使用されているアイコン」のみ使うとすれば、どうしたらよいでしょうか。
例えばBlocksのブロックのデザインとしてFontAwesomeを使っているものがあり、そういった場合はそのアイコンを使えるといった感じでしょうか？

♥ 0

いいねをした人: 居ません

[akosan]

＞キタジマさま

ありがとうございます。

確かに追加CSSで設定していました。記事をサイト全体で４列表示するために設定しています。

そこで、この「お知らせ」部分のみCSSをあててwidth：100％;にしようと思い

タクソノミーブロックに　item_news というCSSを設定し

.item_news{

width：100％;

}

これでやってみたのですが、当然のごとく動かずで…。

検証ツールでみると　.c-entries__item　で設定しないと動かないように見えます。

ですが、全ページの記事の表示を４列にしたいので、.c-entries__itemの25％表示は維持しておいた方がいいのかなと考えます。それとも、４列表示の追加CSSを何か他の方法に変更した方がスムーズでしょうか。

記事の４列表示はこのような追加CSSを入れています。

/*記事アイテム４列表示に */
@media (min-width: 1024px){
.c-entries__item{
flex:0 1 25%;
max-width:25%;
}
}

♥ 0

いいねをした人: 居ません

[akosan]

教えていただいたクラスとCSSで無事に希望のデザインができました。

クラス指定で出来るとは思っておらずphpばかり調べていました。

いつも丁寧に教えてくださってありがとうございます。

 

問題が解決しましたのでトピックを閉じさせていただきます。

♥ 1

いいねをした人:

[akosan]

キタジマさま

お返事をありがとうございます。

私もいろいろ考えたのですがメンテナンスやお客様の更新のしやすさを考え

オーソドックスな表示に変更することにしました。

 

解決しましたので、このトピックは閉じさせていただきます。

♥ 1

いいねをした人:

[投稿者]

投稿