すみません、ちょっとどういう構成になっているかがよくわかりませんでした。
「カスタムタクソノミーで作った投稿」とありますが、カスタムタクソノミーはオリジナルのカテゴリーのようなものなので、カスタムタクソノミーで投稿をつくることはできないと思います。できるのは、作った投稿にカスタムタクソノミーの任意のタームを割り当てる、ということだと思います。
想像するに、カスタムタクソノミーではなく、カスタム投稿タイプの投稿に、タグの pickup を割り当てた、ということかなと思ったのですがどうでしょうか？
すいません！
以前この時に設定したスマホ版でのタイトルの
文字サイズの調整が効いていないみたいです。
.c-entry__title {
font-size: 23px;
line-height: 1.5;
}
この部分のフォントサイズを変えても
変化しなくなってしまいました。
原因わかりますでしょうか？？
匿名無効
お過渡違いな回答でしたらすみません。
「デフォルトページヘッダー画像」は非表示
言っている内容は他の方と同じです。
表示したいページの編集画面の、左上【+ボタン】→検索窓の下にある、ブロック パターンから、パターンを選択して、プリダウンメニューの「ヘッダー」「Headings」のいずれかを選択いただいて、文字や色の編集が可能です。
アクツさん
ありがとうございます！
そして、非常にお恥ずかしいです…
ご指摘どおりのケアレスミスでした。
書き直したコードは以下のとおりです。
本当にありがとうございました。
add_filter(
'snow_monkey_template_part_render_template-parts/archive/eyecatch',
function ( $html, $name, $vars ) {
$html = str_replace(
'<div class="c-eyecatch">',
'<div class="c-eyecatch w1280px">',
$html
);
return $html;
},10,3
);
おおおお！
表示が消えました！天才です！ありがとうございます！
ご指摘の以下のコードはリンカーの表示をスマホだけ変えるもので
以下のサイトから持ってきました。
@media screen and (max-width:500px) {
/*スマホ表示用*/
/*-----全体-----*/
div.yyi-rinker-contents div.yyi-rinker-box {
display: block;
/*縦表示になるように*/
}
/*-----商品名やボタンなど-----*/
div.yyi-rinker-info {
/*全体*/
padding: 0;
/*余白削除*/
margin: auto;
/*中央揃え*/
width: 87%;
/*横幅*/
text-align: center;
/*商品名やボタンを中央表示*/
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
/*価格*/
display: block;
/*価格を縦並びにする*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
/*ボタン*/
width: 100%;
/*横幅いっぱい*/
margin: .5em 0;
/*上下の余白 左右の余白削除*/
line-height: 44px;
height: 44px;
font-size: 0.95em;
padding: 0 14px 0 10px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
/*ボタンの文字*/
padding: 0;
/*文字の余計な余白を削除*/
height: 44px;
line-height: 44px;
font-size: 0.95em;
}
/* rinker 商品詳細幅を広げる */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
width: calc(100% - 20px);
display: block;
}
/* rinker サムネイル幅を230pxに */
div.yyi-rinker-contents div.yyi-rinker-image {
width: 230px;
min-width: 140px;
padding: 0;
margin-left: auto;
margin-right: auto
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
width: auto;
}
}
/*Rinker自由ボタンのマウスオーバー時*/
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a:hover {
box-shadow: 0 12px 15px -5px rgba(0, 0, 0, .25);
}
となると
@media (max-width: 639px) {
.l-center-header__row.u-hidden {
display: none;
}
.c-entries--simple .c-entry-summary__term {
となっているところを
@media (max-width: 639px) {
.l-center-header__row.u-hidden {
display: none;
}
}
.c-entries--simple .c-entry-summary__term {
ですかね。
@media screen and (max-width:500px) { 以下も同様に怪しいので調整が必要だと思います。
色々詳しくありがとうございます。
勉強しないで場当たり的に修正していた結果ですね。。。
@media….というコードは以下の時にキタジマさまにいただいたものでした！
キタジマ タカシの投稿:
PC 用のグローバルナビゲーションが多かったり長かったりする場合、Safari だと横スクロールが発生してしまうみたいです。
現在作業をすすめている v11 では改善されるだろうと予想しているのですが、リリースまでまだ時間がかかるので、ひとまず CSS のパッチをあててみてもらえればと思います。
@media (max-width: 639px) {
.l-center-header__row.u-hidden {
display: none;
}
}
キタジマさま
ご連絡ありがとうございます。
自由入力でa要素を難しいですか、、
ご検討ありがとうございます。
また、できれば嬉しいのですが現在実現したいデザインが下記のようなデザインとなっております。
基本的には画像の上にタイトルが来るようにcssで対応できればいいのですが、なかなかうまく実現できません。
flexを指定してorderなどでの実現も考えたのですが、「項目」「パネル」ともにテキスト部分は設計上タグで括られているので難しいのかなと、、
もし何か良い方法があればご教示頂ければ幸いです。
お手数ではありますがよろしくお願い致します。
ということはうまくコピペできていなかった（閉じが欠けていた）ところがあるのかもしれませんね。CSS の基礎は他のサイトで軽く見られたほうが良いかもしれませんが、基本的には セレクタ名 { ではじまって } で閉じるまでが1セットです。
例外は @media〜 で、これは中に セレクタ名 { ではじまって } までのセットを入れ子にすることができます。例えば以下のような感じです。max-width: 639px だとブラウザのサイズが 〜639px までの間に、その中身の CSS が適用されるということになります。下記の例だと 〜639px までの間に .l-header と .l-footer に対する CSS が適用されるということです。
@media (max-width: 639px) {
.l-header {
....
}
.l-footer {
....
}
}
今の JKDECOR さんのサイトだと、@media (max-width: 639px) { 以降の CSS は全部 @media (max-width: 639px) { の中に入っている状態なので、多くの CSS がスマホにしか適用されない状態になっています。よくわからないのであれば一旦全部消して、上から順に貼り付けていって必要ないのは消すなど整理するとわかりやすくなるかもしれませんね。
@media (max-width: 639px) { と @media screen and (max-width:500px) { が入れ子になっていて、かつ最後に閉じ } が無いのがわかると思います。まず入れ子になっているのを直し、次に適切なところで閉じれば反映されると思います。
訳分からないまま、問題や修正したい部分があるたびに
教えていただいた内容やサイトの内容をコピペしているだけなので
閉じやら入れ子や＠mediaがどういう意味なのかも分かっておらず。。。
どこまでがスマホ用か私も分かっていないんです。。。
リンカーの部分はスマホだけに適用する内容だったのは覚えているのですが。。
ああ！ここまでご対応いただいて本当にありがとうございます！
反映してみたのですが、
なんかやっぱりダメみたいです。。。すいません涙。。。
とりあえず僕の方で整形だけしてみました。スマホ用の CSS が書かれていますが、どこまでがスマホ用でどこからが違うのかが僕の方では判断がつかないので、最終的にはご自身で整形されるのが良いと思います。
.c-hamburger-btn__label {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.p-entry-content>h3,
.wp-block-group__inner-container>h3 {
border-left: solid 4px #333;
padding-left: 10px;
}
.p-entry-content>h2,
.wp-block-group__inner-container>h2 {
background-color: #000;
color: #fff;
}
.wpco {
font-size: 80%;
}
.wpco .contents-outline a::before {
margin-top: 0;
font-size: 10px;
}
.c-entry-summary__title {
line-height: 1.6;
}
.smb-section__title,
.snow-monkey-posts__title {
font-family: 'Poppins';
}
@media (max-width: 639px) {
.l-center-header__row.u-hidden {
display: none;
}
.c-entries--simple .c-entry-summary__term {
display: none;
}
.wpaw-slider .slick-dots>li:only-child {
display: none;
}
.wp-oembed-blog-card__title {
font-size: 14px;
line-height: 1.5;
}
/*Rinker変更*/
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before,
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before,
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
content: "";
/*ボタンのアイコンを消す*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
background: #51a7e8;
/*Yahoo!ボタンをブルーに*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding-left: 0px;
/*PC表示のボタンテキストを真ん中寄せ*/
}
@media screen and (max-width:500px) {
/*スマホ表示用*/
/*-----全体-----*/
div.yyi-rinker-contents div.yyi-rinker-box {
display: block;
/*縦表示になるように*/
}
/*-----商品名やボタンなど-----*/
div.yyi-rinker-info {
/*全体*/
padding: 0;
/*余白削除*/
margin: auto;
/*中央揃え*/
width: 87%;
/*横幅*/
text-align: center;
/*商品名やボタンを中央表示*/
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
/*価格*/
display: block;
/*価格を縦並びにする*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
/*ボタン*/
width: 100%;
/*横幅いっぱい*/
margin: .5em 0;
/*上下の余白 左右の余白削除*/
line-height: 44px;
height: 44px;
font-size: 0.95em;
padding: 0 14px 0 10px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
/*ボタンの文字*/
padding: 0;
/*文字の余計な余白を削除*/
height: 44px;
line-height: 44px;
font-size: 0.95em;
}
/* rinker 商品詳細幅を広げる */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
width: calc(100% - 20px);
display: block;
}
/* rinker サムネイル幅を230pxに */
div.yyi-rinker-contents div.yyi-rinker-image {
width: 230px;
min-width: 140px;
padding: 0;
margin-left: auto;
margin-right: auto
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
width: auto;
}
}
/*Rinker自由ボタンのマウスオーバー時*/
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a:hover {
box-shadow: 0 12px 15px -5px rgba(0, 0, 0, .25);
}
.c-entry__title {
font-size: 23px;
line-height: 1.5;
}
.p-related-posts .c-entry-summary__title {
font-size: 13px;
line-height: 1.5;
}
/*WEにアドセンスが収まらない問題解決*/
.l-heading-widget-area {
overflow: visible;
}
/*アドセンス上限650pxに指定*/
ins.adsbygoogle {
max-width: 650px;
}
/*レーティングの数字を非表示*/
.smb-rating-box__item__evaluation__numeric {
display: none;
}
@media (max-width: 639px) { と @media screen and (max-width:500px) { が入れ子になっていて、かつ最後に閉じ } が無いのがわかると思います。まず入れ子になっているのを直し、次に適切なところで閉じれば反映されると思います。
追加 CSS 内の CSS の中で閉じミスがある気がします。
メディアクエリあたりが怪しい気がしますがちょっとよくわからなかったので、上からきれいにインデントしていって、どこにミスがあるのか確認されたほうが良いかなと思います。
入れてみたのですが表示が消えません！
何か入れ方間違えていますでしょうか？
