常連

注目の的

質問力

 » サイト移転に必須!!301リダイレクトの為の.htaccess書き方5選 | FASTCODING BLOG 
https://fastcoding.jp/blog/all/frontend/htaccessredirect/ 

このサイトを見ながら転送設定をしています。

すべて階層が同じ場合は

Redirect permanent / http://kendogu.jp/

このように記述するとあったのでそれはうまくいったのですが

個別ページ
 https://shop.bouguya.co.jp/esp/shop?pid=ze-0003

を

http://kendogu.jp/?pid=170851317


このページに転送かけようと

RewriteEngine On
RewriteRule  https://shop.bouguya.co.jp/esp/shop?pid=ze-0003 $ http://kendogu.jp/?pid=170851317 [R=301,L]

このように記述したのですがうまくいきません。

どのように記述すればうまくいくのでしょうか？

★やりたいこと
https://shop.bouguya.co.jp/esp/shop?pid=ze-0003　

このような移転元URLが400件ちかくあるので
複数記述して　http://kendogu.jp/


のドメイン　の同じ内容のページに飛ばしたいです。


https://shop.bouguya.co.jp/esp/shop?pid=ze-0003

http://kendogu.jp/?pid=170851317

このように階層構造が異なります。

### 試したこと

相対パスも試しましたが駄目でした。

再度

#Redirect permanent / http://kendogu.jp/


RewriteEngine On
RewriteRule  https://shop.bouguya.co.jp/ $ http://kendogu.jp/ [R=301,L]


RewriteEngine On
RewriteRule  https://shop.bouguya.co.jp/esp/shop?pid=ze-0003 $ http://kendogu.jp/?pid=170851317 [R=301,L]


全階層にかける
#Redirect permanent / http://kendogu.jp/
を無効化して再設定しましたがうまくいきませんでした。

パラメーターからディレクトリに移行する場合は、リダイレクトの書き方がちがうとありましたが
今回は、パラメーターからパラメーターなのでこれであっているかわかりません。






301リダイレクトがうまくいきません

### 前提
少しミスをしてしまい、お名前サーバーで作っているWordPressの管理画面内にあるURLを変えてしまいました。
そして管理画面にログインしようとすると以下のようなエラーが出ました。

### 実現したいこと

　再度ログインできるようにしたいです。

### 発生している問題・エラーメッセージ

```
An error occurred.
Sorry, the page you are looking for is currently unavailable.
Please try again later.

If you are the system administrator of this resource then you should check the error log for details.

Faithfully yours, nginx.
```




Wordpressの管理画面にログインするとエラーが


htmlの模写をしています。見本のように行をそろえたいです。

# 自分が書いたもの
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-10/27669c98-2cde-47a2-a8e5-54232b13f649.png)
# 見本
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-10/f9c8f549-95e6-43ce-a246-e5b4e2baa2e9.png)

# html
```html


<section id="contact" class="wrapper">
            <h2 class="sec-title">Contact</h2>
            <form action="method" method="post">
                <dl>
                    <dt><label for="name">NAME</label></dt>
                    <dd><input type="text" id="name" name="your-name"></dd>
                    <dt><label for="email">E-mail</label></dt>
                    <dd><input type="email" id="email" name="your-email"></dd>
                    <dt><label for="message">MESSAGE</label></dt>
                    <dd><textarea id="message" name="your-message"></textarea></dd>
                </dl>
                <div class="button"><input type="submit" value="送信"></div>
            </form>
        </section> 
```

#  css
```css
#contact dl {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

#contact dt {
    width: 15%;
}

#contact dd {
    width: 85%;
    margin-bottom:10px;
}

#contact dd input,#contact dd textarea{
    width:100%;
    border:solid 1px #c8c8c8;
    padding:10px;
}

#contact dd textarea{
    height:10rem;
}
```

# 


displayをflexに、１５％、８５％で分けてみたのですかうまくいきません。

それぞれの行がそろわない。

現在[このサイトの](http://taka-portfoli0.com/danLP/index.html)模写、スマホのレスポンシブ対応をしています。

一番上の「街を作る」との表記のある画像をサイトのようにしたいのですが、うまくいきません。
どのように変更したら良いでしょうか？

ちなみにwidth設定がわからず色々なclassにwidthを表示しています。

html

```ここに言語を入力
<header>
		<div class="header-wrap">
			<div class="header-image"></div>
			<div class="res-header-image"><img src="img.main.png"></div>
			<div class="header-top">
				<a href="#"><div class="header-top-left"><img src="/img/header_logo.png"></div></a>
				<div class="header-top-right">
					<ul>
						<li class="list-first"><a href="#">企業理念</a></li>
						<li><a href="#">施工事例</a></li>
						<li><a href="#">採用情報</a></li>
						<li><a href="#">お問い合わせ</a></li>
					</ul>
				</div>
				<p class="title">街を作る。未来を作る。</p>
			</div>
		</div>
	</header>

```

css 
```ここに言語を入力
@media screen and (max-width:480px) { 

.header-top {
    width:1200px;
}

.header-image {
    display:none;
}

.header-wrap {
    width: 500px;
}

.res-header-image img{
    width: 500px;
}

.header-wrap {
    width:1200px;
}

}

```

メディアクエリ　変更方法　スマホ表示

```ここに言語を入力<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="web.css">
    <script   src="https://code.jquery.com/jquery-3.6.0.js"   integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="   crossorigin="anonymous"></script>

</head>
<body id='dosukoi'>
    <header class="webheader pageheader">
<h1><a href="web.html"></a>金色の文房具の魅力</h1>



<nav class="hambarger">
    
    <ul class="pagenav">
<li class="tamtam menu "><a href="pencil.html">ペンシル</a></li>
<li class="tamtam menu "><a href="ballpen.html">ボールペン</a></li>
<li class="tamtam menu "><a href="fountain.html">万年筆</a></li>
<li class="tamtam menu "><a href="pencase.html">ペンケース</a></li>

    </ul>
</nav>
    </header>
 
    <div class="hambarger tamtam">
<span class="icon"></span>
<span class="icon"></span>
<span class="icon"></span>
    </div>

    <div class="stationary pageheader">
    <h2 class="gold">Gold is beautiful</h2>
    <p class="sub">〜文房具で日常を優雅に〜</p>

    </div>
  

 
    <script src="web.js"></script>
</body>
</html>
コード



```ここに言語を入力html {
    font-size: 100%;
}
h2{font-size: 18px;}
h1{
    font-weight: bold;
}
body{

    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;

   
}
.pagenav{
    
    font-size: 0.85rem;
    text-transform: uppercase;
    list-style: none;

}

.pagenav a {  
    color: #32605a;
  
    
}
a{
    text-decoration: none;
}


.pagenav li{
    left: 20px;
}


 header h1{margin-top: 5px;
    font-size: 35px;
}
 .pageheader{
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 4%;
 }
 .stationary{
     text-align: center;
     margin-top: 10%;
 }
 .gold{
     font-size: 3.5rem;
     text-transform: none;
     font-weight: normal;
     font-family: serif;
    
 }
 .sub{
     font-family: fantasy;
 }
body{
    color: white;
}
.menu{

   display: block;
   transition: all 0.5s;
   
   opacity: 0;
   border-bottom: 1px solid black;

}

.hambarger{
    display: block;
    font-size: 18px;
    position: fixed;
top: 30px;
left: 30px;
width: 30px;
height: 32px;
cursor: pointer;
}
.hambarger span{
    position: absolute;
    display: block;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: black;
    transition: all 0.5s;
    border-radius: 4px;
}

.hambarger span:nth-child(1){
    top: 4px;
    
}
.hambarger span:nth-child(2){
    top: 15px;
    
}
.hambarger span:nth-child(3){
    bottom: 4px;
}

.pagenav a:nth-child(1){
    top: 10px;
    }
    .pagenav a:nth-child(2){
        top: 20px;
    }
nav{
    position: fixed;
    top: 0;
    left: -300px;
    bottom: 0;
    
}

.open{
    opacity: 1;
    left: -10px;
  }
コード
``````ここに言語を入力
$(function(){
$('.hambarger').click(function(){
var $menu=$('.menu')
if($menu.hasClass('open')){
$menu.removeClass('open');

}
else{
$menu.addClass('open');

}
});
});
コード
```
こんな感じなんですけど、nav ul li aの中に入ってるとこがメニュー的な感じで
div spanがハンバーガーアイコンですね。これを縦に並べたいんですけどnavタグに
flexは反応するんですけど、positionがなぜか反応しないので
作れません。flexだけだとflexboxの右端を基準に並べられるので
ハンバーガーアイコンの右に並んでしまい、上手く出来ません。
初心者で申し訳ないのですがどなたかよろしくお願いします

ハンバーガーアイコンと文字を左端で縦に並べたいがpositionが反応せず文字が希望の位置に移動できなくて原因が不明



### 前提・実現したいこと

現在サイト模写をおこなっていて、画像のようなimgのずれが生じます。
検証ツールで確認したところ
```ここに言語を入力
* { 
    margin: 0px; 
    padding: 0px;
    list-style: none; 
}
```
のmargin箇所が原因のようで、それをはずすと、他の画像と同じ位置になります。
ですが、上記のコードがないとサイトの上下左右に余白ができてしまうので、消せない状況です。

imgを他のimgと同じ位置に戻すにはどのように修正したらよいか教えていただけないでしょうか？




### 該当のソースコード
html
```ここに言語名を入力
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="furniture.css">
    <title>Document</title>
</head>
<body>
    <header>
        <h1 class="title">
            <a href="#"><img src="img/logo.svg"></a>
        </h1>
        <div class="toggle_btn">
            <span></span>
            <span></span>
        </div>
    </header>
    <main>
        <div>
            <ul>
                <li class="product-img">
                    <a href="#">
                        <img src="img/item1.jpg">
                        <p>プロダクトタイトル</p>
                        <p>¥99,999 +tax</p>
                    </a>
                </li>
                <li class="product-img">
                    <a href="#">
                        <img src="img/item1.jpg">
                        <p>プロダクトタイトル</p>
                        <p>¥99,999 +tax</p>
                    </a>
                </li>
                <li class="product-img">
                    <a href="#">
                        <img src="img/item1.jpg">
                        <p>プロダクトタイトル</p>
                        <p>¥99,999 +tax</p>
                    </a>
                </li>
                <li class="product-img">
                    <a href="#">
                        <img src="img/item1.jpg">
                        <p>プロダクトタイトル</p>
                        <p>¥99,999 +tax</p>
                    </a>
                </li>
                <li class="product-img">
                    <a href="#">
                        <img src="img/item1.jpg">
                        <p>プロダクトタイトル</p>
                        <p>¥99,999 +tax</p>
                    </a>
                </li>
                <li class="product-img">
                    <a href="#">
                        <img src="img/item1.jpg">
                        <p>プロダクトタイトル</p>
                        <p>¥99,999 +tax</p>
                    </a>
                </li>
                <li class="product-img">
                    <a href="#">
                        <img src="img/item1.jpg">
                        <p>プロダクトタイトル</p>
                        <p>¥99,999 +tax</p>
                    </a>
                </li>
                <li class="product-img">
                    <a href="#">
                        <img src="img/item1.jpg">
                        <p>プロダクトタイトル</p>
                        <p>¥99,999 +tax</p>
                    </a>
                </li>
            </ul>
        </div>
    </main>
    <footer>
フッター
    </footer>
</body>
</html>
```

css 
```
* { 
    margin: 0px; 
    padding: 0px;
    list-style: none; 
}

/* ヘッダー */
header {
    background-color: cadetblue;
    margin:0 40px;
    padding: 0 40px;
    width:1280px;
    height: 80px;
}

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    float: left;
}

.toggle_btn {
    width: 30px;
    height: 30px;
    position: relative;
    transition: all 0.5s;
    cursor: pointer;
    z-index: 20;
    float: right;
    margin-top:40px;
}


.toggle_btn span:nth-child(1) {
    top: 10px;
}

.toggle_btn span {
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: #333;
    border-radius: 4px;
    transition: all 0.5s;
}

.title img {
    width:180px;
    height:20px;
}

/* メイン */
main {
    background-color: aliceblue;
    margin:0 40px;
    height: auto;
}

.product-img img {
    width: 294px;
    height: 294px;
    margin: initial;
}

/* フッター */
footer {
    background-color:aquamarine;
    margin:0 40px;
}
```



html css imgのずれ



### 前提・実現したいこと

コーディングが終わり、ブラウザ・端末で最終チェックをおこなっています。
Google crome、safariで確認するも問題なし。
fireboxで確認すると縦書きの部分が、中央寄せから左寄せになります。
この表示崩れを解決したいです。

### 発生している問題・エラーメッセージ

```html
<div class="footer">
    <div class="footer__top">
      <div class="footer__top__wrapprer">
        <div class="footer__top__wrapprer__link">
          <a href="room.html" class="footer__top__wrapprer__link__room">
            お部屋
          </a>
          <br>
          <a href="" class="footer__top__wrapprer__link__food">
            お料理
          </a>
          <br>
          <a href="spa.html" class="footer__top__wrapprer__link__spa">
            温泉
          </a>
        </div>
      </div>
    </div>
  </div>
```

### 該当のソースコード

```scss
.footer{
  width: 100%;
  background: url("img/bg3.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  .footer__top{
    .footer__top__wrapprer{
      padding-top: 64px;
     .footer__top__wrapprer__link{
      margin: 0 auto;
      text-orientation: upright;
      writing-mode: vertical-rl;
      font-size: 18px;
      line-height: 1.77;
      text-align: left; 
      letter-spacing: 0.5em;
      .footer__top__wrapprer__link--item{
        height: 81px;
      }
      .footer__top__wrapprer__link__food{
        display: inline-block;
        margin: 0 20px;
      }
     }
    }
  }
}
```

### 試したこと

[縦書きレイアウトのコーディング方法！](https://ai-create.net/blog/2019/11/20/%E7%B8%A6%E6%9B%B8%E3%81%8D%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95%EF%BC%81/)
この記事を参考に試してみましたが、できませんでした。

### 補足情報（FW/ツールのバージョンなど）

aリンク（お部屋、お料理、温泉）がfireboxで確認すると、下記の写真のように画面左側にずれてしまいます。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-29/35cd3219-afe4-4d6f-a680-2ab7a4ffbefc.png)


【firebox表示崩れ】縦書き部分　左寄りから中央寄せにしたい


画像のようなものをコーディングする際、
どのように組んだらよいでしょうか。
大きく上と下で分けて、その中で左右を％で分け、
flexで組む形でしょうか…？
どの幅の画面で見てもある程度崩れないようにしたく、
お教えいただきたいです。

初心者のため困り果てており、お知恵をお貸しいただければ幸いです。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-29/a1332fdc-ba34-4a52-9872-024128afe6ab.jpeg)

グレーの箇所は画像です。
ボタンと書いている場所は画像ではなくボタンの記述で表す予定です。
黄緑の箇所は背景色で、一番上の画像のように背景色から飛び出す画像がある想定です。

画像のようなものをhtmlとcssで作成するにはどうしたらよいでしょうか…？

下記のスクリーンショットのものをHTMLのtableで作成しているのですが、1マス1マスの余白が全て同じではなく、そこが再現できなくて困っています。
こういったものはtableタグでは再現が難しいのでしょうか？

どうやってコーディングしたらよいのか教えて頂きたいです。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-28/8d1805d9-76c9-4bf1-9e28-03ef9acc1c70.png)

htmlのtableにて下記の画像のようなものは作成できますでしょうか？

下記のスクリーンショットを見ていただきたいのですが、メインビジュアルの中に角丸の帯の中に文字を配置したのですが、上下中央にならず若干文字が下がっていると思われます。
スクリーンショット内でカーソルが乗っている部分のcssが右下の緑の枠線の中になります。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-28/c5993448-e36e-4ff6-b306-84c8c7cbfb43.jpeg)

大まかにやっていることとしましては
```html
<span>ITコンサル手イング</span>
```
```css
span {
height: 74px;
line-height: 74px;
width: 300px;
text-align: center;
border-radius: 50px;
}
```

こんな感じで、heightとline-heightの値を同じにして、上下中央にしようとしました。
しかし、上下中央より若干下がっていると思われます。
こういったものはどうしたらいいのかご教授頂きたいです。
よろしくお願いいたします。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-29/876cd7d1-45a0-4527-8a81-459528092a09.png)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-29/ae53e4a9-2f39-450f-8083-dd498006c7dc.png)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-29/56982402-21e2-440b-801e-58136f6e71b5.png)


![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-29/7ed93b1b-ddb3-44b5-b86d-6983d476b41b.png)

html,cssで角丸の中の上下中央になりません。

.htaccessで正規表現を使用して、数百ある記事リダイレクトをしたいです。
.htaccessに以下のように記述しましたが、リダイレクトしません。
どのように記述したら実現できるのでしょうか。

# リダイレクトしたいURLのパターン
.htmlと記載のあるURLやめて、スラッシュで終わるURLにしたいです。

https://example.com/dir/111.html
https://example.com/dir/112.html
...
↓
https://example.com/dir/111/
https://example.com/dir/112/
...

# .htaccessに記述した内容
```htaccess
<IfModule mod_rewrite.c>
RewriteEngine on 
RewriteRule ^dir/^(.*)\.html$ /dir/$1/ [R=301,L]
</IfModule>

# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Redirect permanent /dir/21387.html https://example.com/dir/21387/


SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_StaticMode

```

WordPressのサイトです。
```
Redirect permanent /dir/21387.html https://example.com/dir/21387/
```
はリダイレクトしますが、
https://example.com/dir/21840.html
などにアクセスするとNotFoundが表示されます。

よろしくお願いします。




.htaccessで数百あるURLをリダイレクトしたい

下記のようなCSSがあります
box-sizing:border-boxで内側にpaddingを入れています
paddingを入れた場合に、
入ってる部分はbackground:yellowを適用しないようにするにはどうしたらいいのでしょうか？

つまり黄色の部分が20px(padding分)縮まるような感じにしたいです

```ここに言語を入力
<div style="width:200px;height:200px;background:yellow;padding:20px;box-sizing:border-box">
</div>
```

CSS paddingの部分の内側だけ色を変えるには？

### 1.前提・実現したいこと
wordpress のお問い合わせフォームをcontact form 7 というプラグインを使用してでカスタマイズしたいのですが、
textareaのカスタマイズが反映されません。上記の「お名前」入力欄のようにボックスをカスタマイズしたいです。


### 2.該当のソースコード

```html
<section class="contact full-width">
    
    <div class="contactForm" id="contactForm">
        <div class="contact_item">
            <label class="label" for ="name">お名前<span class="label_tag label_must">必須</span></label>
            [text* your-name placeholder"お名前をご入力ください。"]
        </div>
        
        <div class="contact_item">
            <label class="label" for="mail">メールアドレス<span class="label_tag label_must">必須</span>
            </label>
            [email* your-email placeholder"メールアドレスをご入力ください。"]
        </div>
        
        <div class="contact_item">
            <label class="label" for="comment">制作したいホームページの商材情報<span class="label_tag label_must">必須</span>
            </label>
            [textarea* your-message placeholder"メールアドレスをご入力ください。"]
        </div>

　　　　　<div class="contact_item">
            <label class="label" for="comment">参考URL<span class="label_tag label_must">必須</span>
            </label>
            [textarea* your-message]
        </div>


        <div class="contact_item">
            <label class="label" for="comment">お問い合わせ内容
            </label>
            [textarea* your-message]
        </div>

        
        <div class="btnArea">[submit id:formbtn "送信"]</div>
    </div>
</section>
```

```css
/* Contact Form7 */
/* 全幅指定 */
.full-width {
    margin: 0 calc(50% - 50vw);
    padding: 5em calc(50vw - 50%);
}
/* pタグの余白を削除 */
.wpcf7-form p {
    margin-bottom: 0;
}
/* 背景色（お好きな色に） */
section.contact {
    background-color: #white;
}
/*  フォームの幅（自由に変えてOK） */
.contactForm {
    max-width: 100%;
    margin: 0 auto;
}
/* 各項目の下部余白 */
.contact_item {
    margin-bottom: 20px;
}
/* 項目名 */
.label {
    display: block;
    font-size: 18px;
    line-height: 0.5px;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    font-weight: bold;
	  
}

/* 必須タグと任意タグ共通のスタイル */
.label_tag {
    font-size: 10px;
    color: #ffffff;
    border-radius: 3px;
    padding: 5px 10px;
	  margin-left:10px;
}

/* 必須タグ */
.label_must {
    background-color: #E9444D;
    
}

/* 名前やメールアドレスなどユーザーが入力する箇所 */
.inputs {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input[type="text"],input[type="email"],input[type="textarea"] {
    border: solid 1px #CDCDCD;
	  border-radius: 3px;
    padding:  10px;
    font-size: 14px;
	  margin-bottom:20px;
	  height: 40px;
}

/* お問い合わせ内容を入力する箇所 */
textarea.form-control {
    border: solid 1px #707070;
    padding: .5rem;
    height: 207px;
    font-size: 1.8rem;
}

/* ボタン */
.btnArea {
    text-align: center;
}

input[type="submit"]{
    background-color: #ff7a40;
    width: 280px;
    color: #ffffff;
    text-align: center;
    font-size: 2.5rem;
    line-height: 1.3;
    letter-spacing: .5em;
    text-indent: .5em;
    font-weight: bold;
    padding: 1.4rem 0;
    margin-top: 2rem;
    cursor: pointer;
    border-radius: .3rem;
    transition: all .3s;
}


/* ボタンにホバーした時 */
input[type="submit"]:hover {
    color: #ff7a40;
    background-color: #ffffff;
    border-color: #ff7a40;
}

/* ローダー */
.wpcf7 .ajax-loader {
    display: block;
    margin: 0 auto;
}


/* モバイル版 */
@media screen and (max-width: 600px) {
    .contact_item {
        margin-bottom: 1.6rem;
    }
    .label {
        font-size: 14px;
        margin-bottom: .4rem;
    }
    .label_tag {
        font-size: 10px;
    }
    input[type="text"],input[type="email"] {
        padding: .4rem;
        font-size: 14px;
    }
    textarea {
        padding: .4rem;
        font-size: 14px;
    }
    input[type="submit"]{
        font-size: 14px;
    }
}
```

### 3.試したこと
他の仕様のコードをコピペしたり、色々変更してみたのですが、どのコードをいじってもこのtextareaの部分だけ反映されませんでした。初めて知り合いからではなくCW経由でいただいた案件でして、お客様がお望みのデザインを忠実に再現したいため妥協したくありません。初歩的な質問で大変申し訳ないのですが、お手隙でご回答いただけますと幸いです。よろしくお願いいたします。

WP お問い合わせフォームカスタマイズについて(contact form 7 )

# 前提・実現したいこと
投稿記事一覧のタイトルをfunctions.phpで変更したい。

## 発生している問題
下記の記事を参考に投稿のアーカイブページを作成しました。
https://rmtmhome.com/blogs-archive-1820#:~:text=%C2%A0-,function.php%E3%81%B8%E3%81%AE%E8%BF%BD%E8%A8%98,-/*%20%E6%8A%95%E7%A8%BF%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96%E3%83%9A%E3%83%BC%E3%82%B8

しかしページのタイトルが Archives と表示されており、このタイトルを 記事一覧 に変更したいと考えています。

## 該当のソースコード
```php
    /* 投稿アーカイブページの作成 */
    function post_has_archive($args, $post_type)
    {
        if ('post' == $post_type) {
            $args['rewrite'] = true;
            $args['has_archive'] = 'blog'; //任意のスラッグ名
        }
        return $args;
    }
    add_filter('register_post_type_args', 'post_has_archive', 10, 2);
```
## 試したこと
下記コードでタイトルを変更できないか試してみましたが上手くいきませんでした。
```php
    function my_archive_title($title)
    {
        if (is_post_type_archive()) {
            $title = post_type_archive_title('', false);
        }
        $title = '記事一覧';
        return $title;
    };
    add_filter('get_the_archive_title', 'my_archive_title');
```


## 補足情報
一応、現在JavaScriptを使ってタイトルを変更することは出来ているのですが、出来ればfunctions.phpの方で変更したいと考えています。
ご教示の程よろしくお願い致します




アーカイブページのタイトルを変更したい

一つ一つの日記のようなものを写真写真のようにレイアウトしたいです。
一つ一つをどのように四角で囲うのか、写真のようなレイアウトにどのようにするのかが分かりません。レイアウトは等間隔で、一列に四つがいいです。
プログラミングプログラミング初心者のため分かりやすく説明していただきたいです。
よろしくお願いします。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-19/46bb12ec-fc27-4aba-b98a-015da502433d.jpeg)

CSSのレイアウトについて

WordPress の階層について質問です。

・WordPress アドレス (URL) 	https://○○〇.com/wp/
・サイトアドレス (URL) 		https://○○〇.com/wp/

でサイト構築し、後からドメイン直下に変更したい場合
/wp　のデータをごっそり　/（直下）移動させて、一般設定から

・WordPress アドレス (URL) 	https://○○〇.com/
・サイトアドレス (URL) 		https://○○〇.com/

と保存すると仕組み的には問題なく表示し
1階層上に上げる事ができるのでしょうか。

画像やリンク等 /WP 有りの状態でパスを指定していれば取れば良いのでしょうが、
その他に懸念などはありますでしょうか。

WordPress の階層について

自分は現在、模写コーディングのに取り組んでいるのですが、レスポンシブ化の部分で詰まってしまいました。

https://hemmi-ge.com/

上記のサイトの模写コーディングを行っているのですが、パソコンでこのサイトの画面の幅を小さくすると横のスクロールバーが出てきます。

しかし、Googlechromeの検証ツールでDementions:Responsiveにして画面の幅を小さくしてみると、横スクロールバーが出てきません。

この時に、![イメージ説明](b0bbd39dbba6fb465558ea4c99781572.png)

上記のスクリーンショットの右の要素（胃内視鏡検査・大腸内視鏡検査のテキスト部分）にwidthが485pxと指定がされているのですが、検証ツールで横幅が800pxほどで見てみるとcssで485pxが適用されているのですが明らかに485pxに見えません。全体の幅が800pxならばこの要素は全体の半分以上の幅を占めていないとおかしいと思うのですがなぜこのようなことが起きているのでしょうか。

分かる方に教えていただきたいです。

サイトの幅を小さくした時の表示が明らかにおかしい

### 前提・実現したいこと
 
クライアント側が、間違ってサイトアドレスを変更してしまい、URLを元に戻せなくなってしまい、URLを元に戻したい。
さまざまな対処を試みたんですが、うまくできませんでした。
対処法があればよろしくお願いいたします。

本来のURL
[https://toyoudesign.angry.jp/sample2/](https://toyoudesign.angry.jp/sample2/)

間違った先のURL
[https://bokurano.inc/](https://bokurano.inc/)

github
[https://github.com/takoyan33/wordpress_sample](https://github.com/takoyan33/wordpress_sample)




### 発生している問題・エラーメッセージ

//元サイト

このサイトで重大なエラーが発生しました。

WordPress のトラブルシューティングについてはこちらをご覧ください。

```
//functions.php
<?php
update_option(‘siteurl’,’http://toyoudesign.angry.jp/sample2’);
update_option(‘home’,’http://toyoudesign.angry.jp/sample2’);

// title tags
function setup_theme() {
   add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'setup_theme' );


```
phpmyadminの状態
![phpmyadminの変更](90c681e0f73ef7697d20a97605c3b389.png)

```php
//wp-config.php
define('WP_SITEURL','https://toyoudesign.angry.jp/sample2');

```

### 試したこと
https://smakoma.com/not-login-wordpress.html
https://wordpress.siyouyo.com/establishment/tukaikata/2669/
https://sugiyamayoshiaki.jp/wordpress_url_donot_change/

上記サイトの対処策を行なったが、上手くいかなかった。
また、URLをhttpに変えたり、後ろにスラッシュにしてもだめでした。


### 補足情報（FW/ツールのバージョンなど）
WordPress バーション5.8.2
現在のテーマ: swallow22 (バージョン 1.1.5)
現在のプラグイン:  (バージョン )
PHP バージョン7.4.27

WordpressのURLが直らない

![イメージ説明](0633fba37682b9ea827bb1b0d56b9dbf.png)![イメージ説明](cc08c633fb2b35708cb3972098497007.jpeg)


こんにちは。独学でWEB開発の勉強をしております。
学習を兼ねて作成しているWEBサイトのレスポンシブ対応についてお伺いできればと思います。

レスポンシブのテストとして私のスマホのビューポートサイズに合わせてメディアクエリを書き、
Chrome, Firefox　Dev Toolではレイアウトが崩れることなく表示されますが、実機では写真のようにレイアウトが崩れて表示されてしまいます。
iPhone8,11でも確認しましたが、レイアウトは崩れてしまっているので、全てのモバイルサイズのデバイスに影響が出ているようです。

Xiaomi Redmi Note9　(viewport size 393px/759px)をテストに使用しています。

自身でもHead内のMetaタグの確認、メディアクエリの確認、CSSプロパティの確認を行いましたが解決に至らず、ご質問させていただ来ます。
経験も浅く、お見苦しいコードかもしれませんが、皆様のアドバイスを頂けましたら幸いです。

GitHubのURLを捕捉欄に貼っておきます。



### 発生している問題・エラーメッセージ

```
モバイル端末に対してのレスポンシブが効かない。
Chrome, Firefox　Dev Toolではレイアウトが崩れることなく表示されるが、実際のモバイルデバイスではレイアウトが崩れて表示されてしまう。
```

### 該当のソースコード



### 試したこと

HTML Head内Metaタグの確認、メディアクエリの確認、CSSプロパティがブラウザに対応しているかの確認。

### 補足情報（FW/ツールのバージョンなど）

GitHub
https://github.com/flutnative/komugi-test

サイトページ
https://flutnative.github.io/komugi-test/

Media Queryの優先順位の問題かと思い、Media Queryの順位書き換え、!importnatなどCSSプロパティに入れてみましたが未だ解決にならず。
エミュレーターの場合Dev Toolで確認してみると、全くMedia Queryは効いておらず、別に書いたwidth 375pxのみのMQが読み込まれている。

Media Queryが実際のモバイルデバイス、エミュレーターでは崩れてしまう。

### 前提・実現したいこと
Xdで作成したHTMLファイル等を使い、WordPressに独自のテーマを導入したい。

### 発生している問題・エラーメッセージ
WordPressで自作テーマを導入しようとしているが、画像が読み込まれない。

エラーメッセージ
```

### 該当のソースコード
<img id="Logo" src="<?php echo get_template_directory_uri(); ?> Logo.png" srcset="Logo.png 1x, Logo@2x.png 2x">

PHP
ソースコード
```

### 試したこと
<?php echo get_template_directory_uri(); ?>をコードに挿入した。
※PHPファイルと画像（Logo.png）は同じ階層に存在しています。


### 補足情報（FW/ツールのバージョンなど）
実行環境はLocalを使用しています。
独自テーマを作成するのが初めてなので、基本的な質問で失礼します。