フォーラムへの返信
-
投稿者投稿
-
フッターウィジェットエリアにシンプルに表示したいウィジェットを配置すると、そのウィジェットが1/4のサイズで表示されます。
♥ 0Who liked: No userもしかしたら使っている Chrome の拡張機能の影響という可能性もあるのかもですね。シークレットモードで試したり、拡張機能をオフにして試してみると良いかもしれません。
♥ 0Who liked: No userありがとうございます! 確認してみました。
Snow Monkey のフッターウィジェットエリアは、カスタマイザーでカラム数を設定するようになっています。
サイトを拝見すると、このカラム数の設定は4になっているのですが、そのうちの1つのカラムに「カラムブロック」を入れて、その中に会社概要と最近の投稿の2つを入れているために PC ではギュッと幅が狭くひょうじされているようです(4つに分けたうちの1つを2つに分けているので、実質1/8で表示されている)。
カラムブロックからウィジェットブロックを出してみると少し広く表示されると思います。
♥ 0Who liked: No user現象を実際に確認できる URL はありますか?
♥ 0Who liked: No user甲と乙、それぞれの投稿タイプはどうなっているのでしょうか? 「「アーカイブ」を選択して表示させると乙に掲載する記事も表示される。」とあるので同じ投稿タイプなのですかね?
別トピックで参考リンクを貼りましたが、そこにアーカイブリンクを表示させるサンプルコードがあったと思うので試してみてください。
既存のウィジェットで対応しようとされているかと思いますが、おそらくそれは機能上できないと思うので、上記の参考リンクを参考にしてウィジェットやブロックをつくったり、あるいはサイドバーにフックやテンプレートの上書きを用いて直接コードを追加する必要があると思います。
♥ 0Who liked: No user一応 Snow Monkey の仕様としてはヘッダー非表示の状態 + スクロール位置がページ最上部、になるように遷移するようになっています。
こちらで試してみました(Mac + Chrome)が、こちらではその仕様通りの挙動になりました。
・スムーススクロールされない
スムーススクロール機能は同一ページ内のアンカーリンクのみ有効です。
♥ 0Who liked: No user運用面での要件を満たしていないかもしれませんが、カスタム投稿タイプを使って「乙」を作るのが簡単な気がします。
あーなるほど。
@福山さん、
– 甲はカスタム投稿タイプ甲(あるいは投稿) + カスタムタクソノミー甲(あるいはカテゴリー)
– 乙はカスタム投稿タイプ乙 + カスタムタクソノミー乙っていう感じですかね。懸念点としては甲乙で投稿タイプが異なるので、甲乙の全記事を表示するアーカイブページが必要だと結局それはつくらないといけなくなりますね。
あと、カスタム投稿タイプはデフォルトでは年別アーカイブ非対応なので、なんらか対応が必要になります。これもどこまでやるかになってくるかと思いますが、とりあえず軽くググった結果を貼っておきます。
下記の CSS を追加してみてください。
・フッターサブナビゲーションのカラー変更
.p-footer-sub-nav .c-navbar { justify-content: center; }
・スマホ表示での要素を中央に寄せたい(PCでは中央によっているが、スマホでは左に寄ってしまっている)
.p-footer-sub-nav .c-navbar__item { color: red; }
♥ 0Who liked: No user先ほど添付した画像のように、「縦2横2」でカテゴリータブを設定することはできないのでしょうか?
一応下記の CSS でそれっぽい感じにはできます。
.smb-tabs[data-orientation=horizontal] > .smb-tabs__tabs { flex-wrap: wrap; } .smb-tabs[data-orientation=horizontal] > .smb-tabs__tabs > * { width: 50%; } .smb-tabs[data-orientation=horizontal] > .smb-tabs__tabs .smb-tabs__tab { white-space: initial; }
添付画像のように、「②(次のページ)」のような設定はできるのでしょうか。
これはできないですね…。
♥ 0Who liked: No userWordPress はカテゴリーアーカイブが自動的に生成されます。例えばカテゴリーAのカテゴリーアーカイブを開くとカテゴリーAに割り当てられた記事の一覧が表示されます。
「甲にカテゴリーA、Bの記事を載せる」とのことですが、詳細によって色々変わってきそうな気がします。
例えばパッと思いついたのだと– 固定ページをつくって、そこにカテゴリーAとBの記事を表示させるようなショートコードをつくる
– カテゴリーA のカテゴリーアーカイブを開いたら、カテゴリーB の記事も表示するようにクエリを書き換えるのような方法が考えられます。前者の場合はカテゴリーA・Bそれぞれのカテゴリーアーカイブも存在したままになるし、この固定ページへの導線を作らないといけないのが大変そう&年別アーカイブをつくるのも大変そう、後者の場合はカテゴリーBのカテゴリーアーカイブは存在したままになるし、カテゴリーA だけのカテゴリーアーカイブも必要だとそもそもダメ、みたいなことが考えられますよね。
やってみないとわかりませんが、多分手間が少なそうなのは後者、前者は年別アーカイブの実装がネックになりそうな気がします。
♥ 0Who liked: No user一覧部分はアスペクト比が4:3なので、4:3になる画像をアイキャッチ画像に設定されると良いかもしれませんが、記事ページ内のページヘッダーや記事の前後ナビ部分については4:3ではないので見切れてしまいます。
Snow Monkey ではアイキャッチ画像を表示する箇所はこのように完全にはアスペクト比が統一されていません。これはその画像をすべて見せることを想定していないためで、例えばイメージ画像のような、文字が含まれていない画像が設定されることを想定しているためです。
アイキャッチ画像が表示される箇所はだいたいが
object-fit: cover
になっているので、object-fit: contain
で上書きすればトリミングされることはなくなります(ただ、表示箇所と表示したい画像のアスペクト比が異なるとその差異の部分が見えてきてはしまいますが…)。♥ 0Who liked: No userありがとうございます。その部分(サイトブランディング)の文字の大きさは
.c-site-branding__title
に対して CSS が書かれています。スクショをみると
@media (min-width: xxxpx)
という記述があるのが確認できると思いますが、これは「xxxpx
以上のときに適用される」という意味になります。サイトブランディングの文字の大きさは、画面の大きさに伴って段階的に大きくなるようになっているので、どの画面サイズのときに大きくしたいのかがわかったほうがコードを提示しやすいです。どの場合でも 4rem にしたい、という例だと以下のような感じになります。
.c-site-branding__title { font-size: 4rem !important; }
♥ 0Who liked: No user -
投稿者投稿