WordPressテーマSANGOの質問

記事、サイドバーの各項目に枠を付けたい。記事投稿日のローマ字曜日を消したい。

アバター
ふーさん

はじめまして。
今月テーマ購入し触り初めましたところなのですが

2点お伺いしたいのですが、
1点目は背景画像追加したのですが記事の外枠、サイドバーの各項目の外枠が無い為か
デザインが見にくいので外枠を付けたいのですがご教授頂けると助かります。

また2点目ですが、
WordPress側の設定では日付のフォーマットを 2019年0月00日にしているのですが
トップページを見ると記事投稿日が2019.07.23 Tueとなっているのですが、2019年0月00日に設定変更可能でしょうか?

使用子テーマはPORIPUになります。

お忙しい所大変申し訳ありませんが宜しくお願い致します。

SANGO
質問板アーカイブ
コメントへの回答
サルワカくん
サルワカくん
2019/07/27

1点目についてはよくある質問に追加しました!こちらをご覧ください。
https://saruwakakun.com/sango/qa#mkj-widget

2点目についてはPORIPU側の出力によるもののようです。PORIPUの次回のアップデートで対応してくれると思います!

よろしくお願いします。

アバター
ふーさん
2019/07/27

ありがとうございます。
1点目の方なのですが、枠線の方をCSS反映させましたら検索バーの方も枠線付いていてデザインが崩れましたので一応報告させて頂きます。影の方を利用させて頂きましたがこちらはデザイン崩れてなく大丈夫でした。

そしてもう一点なのですが、記事全体の囲み枠をしたいのですがこちらご教授頂けると助かります。

2点目の件ありがとうございます。
PORIPUさん側でアップデートされるのを待ってみます。

サルワカくん
サルワカくん
2019/07/27

あ、すみません、

.sidebar .widget_search {
  box-shadow: none;
}

ではなく

.sidebar .widget_search {
  border: none;
}

にすると、検索ボックスの枠線を消すことができます。
(よくある質問のコードも修正しました)

記事領域の枠線は以下のCSSで追加できます。

@media (min-width: 768px) {
  #entry {
    border: solid 1px #888888;
  }
  .one-column #entry {
    border: none; /* 1カラム表示のときは枠線を消す */
  }
}

よろしくお願いします。

アバター
ふーさん
2019/07/28

おはようございます。
先程確認しましたら記事全体枠に囲まれておりました。

ご丁寧に対応頂き有難うございました。

アバター
ふーさん
2019/07/27

何度も申し訳無いです。
記事全体囲み枠のほうなのですがPCですと確認出来るのですが
SPのほうが枠確認出来ません。

影の方で1カラム表示のときは枠線消すの項目を消してやってみたのですがこちらで合ってますか?

@media (min-width: 768px) {
#entry {
box-shadow: 0 2px 4px rgba(0,0,0,.2);
border-radius: 4px; /* 角丸にする場合 */
overflow: hidden; /* 角丸にする場合 */
}

宜しくお願い致します。

サルワカくん
サルワカくん
2019/07/28

影の方のCSS合ってると思います。
自己解決ありがとうございました。

アバター
ふーさん
2019/07/28

申し訳ないです。。
やはりSPのほうが記事囲み影が付いてないですね。

サイドバーの方はSPで確認しましたら付いているのですが勘違いだったようです。

何か対策ありますでしょうか?

サルワカくん
サルワカくん
2019/07/28

SPというのはスマートフォンという意味で合ってますよね?
それは意図的にそのようなコードを紹介しました。
@media (min-width: 768px) { ~ }というCSSの記法は「768px以上のスクリーンの場合」という条件づけになります。
@media (min-width: 768px) { ★ここに書かれた部分★ }が768px以上で適用されるようになるため、この記法を削除すれば、サイズに関係なく適用されるようになります。
参考:https://techacademy.jp/magazine/9369

ちなみにですが@media (min-width: 768px) { ~ }の中に見出しのスタイル指定も入っちゃってるようです。今後@media (min-width: ○○) { ~ }のような記法を見かけたときは、入れ子になった}の位置に注意することをおすすめします。
よろしくお願いします。

アバター
ふーさん
2019/07/29

ありがとうございました。
記事囲み枠の影が確認出来ました。とても助かりました。