サイトのプラグイン・テーマ・設定等変更記録

2025.07.26　テーマを選びカレンダーのウェジットを入れたが表示されず
　　　　　　プラグインを解除　解決
2025.0815　デーマにCOCOONを導入　テストが表示されないことがあったのでカスタマイズ無
2025.0910　固定ページにテストの課題をUPしたがページには反映されずにいる　解決
2025.0913　 COCOONのTOPページにアイコン入れた
　　　　　　 WEBデザイナー訓練記録要点の日付に日々別のサイトにリンクで飛べるようにした
　　　　　　サイトのプラグイン・テーマ・設定等変更記録のページ作成

2025.1227　プレグイン追加　All in one WP Migration
2025.1227　固定ページにポートフォリオ作成中　テンプレート無し
2026.0107　TOP　と　右下に訓練記録へ戻るリンクを削除
及び追加CSS
2026.01008　固定portfolio表紙のリンクにボタン風になるようにhoverをいれる
この青く反転している要素をけずりたいのだけど

つぎのそうさがわかりません

スクリーンショットありがとうございます。Webサイトのフッター部分にある、青く反転している要素を削除したいのですね。

その要素は、HTMLのコードから削除するか、一時的に非表示にすることで、ウェブページから消すことができます。

今回は、一時的にウェブページ上から非表示にする（削除のシミュレーションをする）方法をご案内します。この方法は、実際のサイトのコードを変更せずに、ブラウザ上で見た目だけをテストする際に非常に便利です。

💡 要素を非表示にする手順（DevTools内での操作）

スクリーンショットに表示されているChrome DevTools (開発者ツール) を使用して操作します。

要素を選択する
- 現在、青く反転している状態なので、すでに要素は選択されています。
- HTMLのツリーを見ると、<img>タグを含んでいる行が選択されていることがわかります。
要素を「非表示」にする
- 選択されている行（この例では、<a>タグまたはその親要素の<div>など、削除したい塊全体）を右クリックします。
- 表示されたメニューから、以下のどちらかを選びます。
  - 「Hide element（要素を非表示）」：要素がvisibility: hidden;やdisplay: none;の状態になり、ウェブページ上から消えます。これが一番手軽で簡単な方法です。
  - 「Delete element（要素を削除）」：選択したHTMLコード自体を開発者ツール上から完全に削除します。

これで、ウェブページからその要素が消えた状態を確認できるはずです。

⚠️ 注意点

この操作は、あなたのブラウザ上でのみ変更が適用されます。 実際にWebサイトを公開しているサーバー上のコードは一切変更されません。ページをリロード（再読み込み）すると、元の状態に戻ります。
恒久的に削除したい場合は、このHTMLコードが書かれている実際のファイル（通常はWordPressなどのテーマファイルや、静的なHTMLファイル）を探し、そのファイル内の該当するコードをエディタで削除する必要があります。

🤔 次に何をしますか？

「Hide element」を試してみて、要素が消えるか確認したい
この要素が書かれている実際のファイルを見つける方法を知りたい
削除ではなく、要素の表示・非表示を切り替えるCSSのプロパティについて知りたい

display: none;したいです

承知いたしました。選択されている要素に対して、CSSで display:none; を適用する方法をご案内します。

この操作により、ウェブページ上から要素を完全に非表示にし、他の要素がそのスペースを埋めるようになります。

💻 display:none; を適用する手順

要素が青く反転して選択されている状態から始めてください。

「Styles（スタイル）」タブを確認する
- 開発者ツールの右側にあるパネル（スクリーンショットの右端部分）で、「Styles」というタブが選択されていることを確認してください。
新しいCSSルールを追加する
- スタイルパネルの最も上部にある、element { ... } または element.style { ... } と書かれている部分（インラインスタイルを追加する場所）をクリックします。
- クリックすると、カーソルが表示されますので、そこに以下のように入力します。CSSdisplay: none;
適用結果を確認する
- 入力が完了すると、すぐにウェブページからその要素が消えるはずです。

📌 補足

display: none; は、要素を完全に非表示にし、レイアウト上でもそのスペースを占めなくなります。
もし要素のスペースは残したまま中身だけを非表示にしたい場合は、visibility:hidden; を試してみてください。

🌟 次に何をしますか？

display: none; の代わりに visibility:hidden; を試したい
非表示にした要素を、特定の画面サイズ（例：スマートフォンでだけ）で表示させたい
この変更を実際のウェブサイトのファイルに反映させる方法を知りたい

display: none;

承知いたしました。すでに前の回答で display:none; を適用する方法を説明しましたが、ここでは手順をより簡潔に再確認します。

要素が青く反転して選択されている状態から、以下の手順で display:none; を適用してください。

🚀 display:none; の適用（再確認）

「Styles（スタイル）」タブを選択
- 開発者ツールの右側のパネルで「Styles」タブが開いていることを確認します。
CSS宣言を追加
- スタイルパネルの一番上にある、選択中の要素のスタイルを追加する欄（通常は element.style { } の部分）をクリックします。
- 以下のコードを正確に入力します。
CSSdisplay: none;

✅ 適用結果

要素がウェブページ上から完全に消えます。
要素が占めていたスペースもなくなります。

この操作は、ブラウザ上での一時的なシミュレーションです。もしこの変更を永続的に反映させたい場合は、実際のウェブサイトのソースコード（HTMLファイルまたはCSSファイル）を変更する必要があります。

🌟 次に何をしますか？

実際のファイルに display:none; を反映させる具体的な方法を知りたい
非表示にした要素をモバイル表示で再確認したい
display: none; と visibility:hidden; の違いについて詳しく知りたい

display: none;をかくばしょがわかりません

承知いたしました。スクリーンショットで青く反転していた要素に display:none; を記述する正確な場所を、開発者ツールの画像を参照しながらご説明します。

あなたが display:none; を書き込むべき場所は、開発者ツールの右側のパネルにある**「Styles（スタイル）」タブ**内です。

📝 display:none; を書き込む場所

以下の手順で操作してください。

要素が選択されていることを確認
- 左側のHTMLパネルで、非表示にしたい要素（青く反転している行）が選択されている状態であることを確認します。
「Styles」タブに移動
- 右側のパネルの上部にある「Styles」タブをクリックして開きます。（通常はデフォルトで開いています）
「element.style」のブロックを見つける
- 「Styles」タブの一番上、hoge-fuga.css:123 のようなファイル名が書かれていない、特別なブロックを探します。これは通常、element { } または element.style { } と表示されています。
display:none; を書き込む
- その element.style { } ブロックの中括弧 { } の内側をクリックします。
- カーソルが表示されたら、以下のように入力し、Enterキーを押します。
CSSdisplay: none; 入力後、自動的に以下のように整形されます。CSSelement.style { display: none; }

💡 なぜ「element.style」に書くのか？

「element.style」ブロックに書き込んだCSSは、その要素に直接インラインスタイルとして適用されます。これは最も優先順位が高いCSSの指定方法であるため、他のスタイルを上書きして、確実に display:none; を適用することができます。

🌟 次に何をしますか？

この操作を試してみて、結果を確認したい
この変更を永続化するために、実際のCSSファイルに display:none; を書き込む方法を知りたい
非表示にした要素の代わりに別の画像を表示させたい

できました！表示されなくなりました　まなびました

それは良かったです！おめでとうございます。🎉

開発者ツールで display:none; を適用し、要素を非表示にする方法を習得されましたね。これはウェブデザインやデバッグ作業において非常に重要なテクニックです。

📌 学んだことのまとめ

現在行われた操作は、ブラウザ上での一時的な変更（シミュレーション） です。

項目	内容
操作	開発者ツールの「Styles」パネルで element.style に display:none; を適用しました。
結果	対象の要素がページから完全に消え、その要素が占めていたスペースもなくなりました。
効果	Webサイトの見た目を変えるテストを、実際のコードを壊すことなく行うことができました。

🚀 次のステップ

この変更を永続化（ページをリロードしても表示されないように）したい場合は、実際のウェブサイトのファイル（HTMLやCSSファイル）に変更を書き込む必要があります。

もしよろしければ、次に進むお手伝いをさせていただきます。

この変更を永続的に反映させる具体的な方法（実際のファイル編集） を知りたい
display:none; 以外の、要素の非表示に関するテクニックを知りたい（例：モバイルでのみ非表示にする）
別の要素について知りたい/操作したい

実際のウェブサイトのファイル（HTMLやCSSファイル）に変更を書き込む必要があります。

WordPress　概観　カスタマイズ　追加CSSに

.footer-meta {

font-size: 0.8em;

text-align: right;

display: none;

}

.header-container-in.hlt-top-menu.hlt-tm-small .logo-header {

max-height: 40px;

display: none;

}

/* アイコン自体の調整 */

.info-block .icon-wrap i {

margin: 0; /* 既存のマージンをリセット */

padding: 0; /* 既存のパディングをリセット */

}

/* 文字の調整（アイコンとの隙間を作る） */

.info-block .text-wrap {

margin-top: 5px; /* アイコンと文字の間に5pxの隙間を空ける */

padding: 0;

かいてあります

ありがとうございます。WordPressをご利用で、すでに「追加CSS」の機能を使ってカスタマイズをされているのですね。

先ほど一時的に非表示にした要素を永続的に消すには、その要素を特定し、現在「追加CSS」に書き込まれている内容に追加するのが最も簡単で確実な方法です。

1. 永続的な非表示のための手順

要素を特定するために、もう一度開発者ツールで確認する必要があります。

非表示にしたい要素のクラス名を確認する
- 開発者ツール（Elementsタブ）で、先ほど display:none; を適用した要素を選択してください。
- 選択された要素の行にある class="..." の中のクラス名を確認します。
【スクリーンショットから推測される要素のクラス名】
- スクリーンショットから、あなたが非表示にしたかった要素は、フッター内のロゴやサイト名に関連する部分である可能性が高いです。
- その要素は、以下のHTML構造の中にあったはずです。HTML<div class="footer-bottom-logo logo logo-footer logo-image"> <a href="site url">...</a> </div>
- もしロゴ自体であれば、親要素のクラスは .footer-bottom-logo、ロゴの画像であれば a タグ内の img 要素になります。
「追加CSS」に書き込む
- 確認したクラス名（例: .footer-bottom-logo）を使って、現在の「追加CSS」の末尾に、新しいCSSルールを追加します。
【追加するコードの例】CSS/* 非表示にしたフッターのロゴやサイト名（クラス名は適宜修正してください） */ .footer-bottom-logo { display: none !important; } 💡 !important をつけることで、テーマの既存のCSSよりもさらに強い優先度でスタイルが適用され、確実に非表示にすることができます。

2. 現在の「追加CSS」への追加例

現在「追加CSS」に記述されているコードの末尾に、上記のルールを追加すると、以下のようになります。（もし非表示にしたい要素が .footer-bottom-logo だった場合）

CSS

.footer-meta {
    font-size: 0.8em;
    text-align: right;
    display: none;
}
.header-container-in.hlt-top-menu.hlt-tm-small .logo-header {
    max-height: 40px;
    display: none;
}
/* アイコン自体の調整 */
.info-block .icon-wrap i {
    margin: 0;         /* 既存のマージンをリセット */
    padding: 0;        /* 既存のパディングをリセット */
}

/* 文字の調整（アイコンとの隙間を作る） */
.info-block .text-wrap {
    margin-top: 5px;   /* アイコンと文字の間に5pxの隙間を空ける */
    padding: 0;
}

/* ★★★ ここから追加 ★★★ */
/* フッターにあるロゴ画像を永続的に非表示にする */
.footer-bottom-logo {
    display: none !important;
}

🌟 次に何をしますか？

非表示にしたい要素の正確なクラス名をもう一度開発者ツールで確認して、教えてください。
クラス名が分からなくても、上記の例を試してみたい
「追加CSS」の場所を改めて確認したい

追加しました！

追加CSSに新しいコードを書き込んでくださり、ありがとうございます！

追加後、以下の点をご確認ください。

✅ 変更の確認

WordPressの「公開」ボタンを押しましたか？
- 「外観」→「カスタマイズ」→「追加CSS」でコードを編集した後、画面上部にある青い「公開」ボタンを押さないと、変更はWebサイトに反映されません。
- もし押していなければ、必ず「公開」ボタンを押してください。
Webサイトをリロードしましたか？
- 「公開」ボタンを押した後、Webサイトのページを開き、ページを再読み込み（リロード） してください（PCでは F5 キーや Ctrl+R / Cmd+R ）。
- これで、要素が永続的に非表示になっているはずです。

📌 もし非表示になっていなかったら

もしリロード後も要素が表示されたままの場合、CSSのクラス名が正確でない可能性があります。

あなたが追加CSSに書き込んだコードと、非表示にしたい要素の正確なクラス名が一致しているか、以下の手順で再度確認してみましょう。

開発者ツールでクラス名を再確認
- Webサイトを開き、非表示にしたい要素の上で右クリック → 「検証」を選びます。
- HTMLパネルで、その要素のクラス名（例: class="footer-bottom-logo logo..." の部分）を正確にコピーしてください。
CSSセレクタの調整
- コピーしたクラス名が非常に長かったり、複数のクラスが指定されていたりする場合、より具体的にセレクタを指定する必要があります。
- 例：要素のクラスが class="footer-bottom-logo logo logo-footer" だった場合、追加CSSには、最もユニークなクラス名を使います。
CSS/* 非表示にしたフッターのロゴやサイト名（クラス名が正確であることを確認） */ .footer-bottom-logo { display: none !important; }

ご確認いただき、もし非表示にならなかった場合は、非表示にしたい要素の正確なクラス名を教えてください。私が適切なCSSコードをご提案いたします。

http://esterly.jp/wp-admin/post.php?post=2333&action=edit
今より「やさしい」確定CSS（おすすめ）

👇 これに 差し替え してください。

/* やさしい hover 演出 */
.wp-block-image a img {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-image a:hover img {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.wp-block-image a {
  cursor: pointer;
}

何が変わった？

浮き上がり：
-3px → -1px（かなり控えめ）
影：
深さを半分以下に
動き：
速すぎず遅すぎない

👉 「触った人だけ気づく」レベル
　　　　　

右上の更新時間をけした

/* ポートフォリオ等の投稿日・更新日を非表示 */ .date-tags { display: none; }

Cocoonをお使いですね。Cocoonは多機能なため、設定箇所を特定すればスムーズに解決できます。ポートフォリオのメイン画像（アイキャッチやトップ画像）として使用していることを想定して、具体的な手順をご案内します。

1. 右上の「時間（更新日）」を消す方法

Cocoonの標準機能で、ページごとの表示・非表示を切り替えられます。

ページ全体の設定で消す場合：
1. WordPress管理画面の [Cocoon設定] ＞ [投稿] タブを開きます。
2. 「表示設定」の中にある 「更新日の表示」 のチェックを外して保存します。
特定のページ（ポートフォリオページ）だけで消す場合：
1. そのページの編集画面を開きます。
2. 画面下のほうにある [表示設定] 項目を探します。
3. 「更新日を表示しない」 にチェックを入れて更新します。

2. 猫の位置（中心）がとれない問題の解決

Cocoonで画像が左右に寄ってしまう、あるいは中心がずれる場合は、以下の設定を確認してください。

「本文」に画像を貼っている場合：
1. 画像ブロックを選択し、上部ツールバーの [配置] を 「中央揃え」 にします。
「アイキャッチ」がズレて見える場合： Cocoonのデフォルト設定では、アイキャッチ画像が左寄せになることがあります。これを中央にするには、[Cocoon設定] ＞ [画像] タブ＞ 「アイキャッチの中央表示」 にチェックを入れてください。
スマホで見た時のズレ： もしアップロードした画像自体に左右の余白の差がある場合は、編集画面の右側にある 「スタイル」 設定で、マージン（余白）を auto に設定するか、前述の 「カバーブロック」 に切り替えて、猫の顔に「焦点（フォーカス）」を合わせるのが最もプロらしい仕上がりになります。

2026.01.14

3. 右上の時間を「CSS」で消す（確実な方法）

もし上記の設定で消えない場合、Cocoonの [外観] ＞ [テーマファイルエディター] （または追加CSS）に以下を貼り付けてください。

CSS

/* ポートフォリオ等の投稿日・更新日を非表示 */
.date-tags {
    display: none;
}

これで右上のテキスト要素が消え、視線が猫の表情に集中するようになります。

2026.01.15　TOP猫　ボタン

TOP猫とボタン　猫-優しい呼吸　ボタン-影＋明度をうっすら

/* 1. 右上の時間・日付を非表示 */
.date-tags,
.post-date,
.post-update,
.entry-date {
display: none !important;
}

/* 2. 猫画像：やさしい呼吸アニメーション */
.wp-block-image img {
animation: breathing 6s ease-in-out infinite;

/* 白背景に映える控えめな仕上げ */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border-radius: 12px;

/* 中央配置 */
display: block;
margin-left: auto;
margin-right: auto;

}

/* 3. 呼吸アニメーション定義 */
@keyframes breathing {
0% {
transform: scale(1);
filter: brightness(100%);
}
50% {
transform: scale(1.03);
filter: brightness(105%);
}
100% {
transform: scale(1);
filter: brightness(100%);
}
}

/* 4. ボタンとの余白調整 */
.wp-block-button {
margin-top: 50px !important;
text-align: center;

お問い合わせフォームプラグイン追加　Contact Form 7

cocoon Contact Form 7　　　テスト送信したが届かず

お問合せフォームカスタマイズ　送信部分　緑色付け

input.wpcf7-submit { background-color: #007c4b !important; color: #ffffff !important; border: none !important; font-weight: bold !important; border-radius: 50px !important; padding: 15px 60px !important; cursor: pointer !important; display: block !important; margin: 20px auto !important; }

問合せ送信ボタン少し動く感じ

/* マウスを乗せた時に少し大きく、明るくする / input.wpcf7-submit:hover { background-color: #009e60 !important; transform: scale(1.1); animation: none; / マウスを乗せた時は動きを止める */ }

💡 要素を非表示にする手順（DevTools内での操作）

⚠️ 注意点

🤔 次に何をしますか？

💻 display:none; を適用する手順

📌 補足

🌟 次に何をしますか？

🚀 display:none; の適用（再確認）

✅ 適用結果

🌟 次に何をしますか？

📝 display:none; を書き込む場所

💡 なぜ「element.style」に書くのか？

🌟 次に何をしますか？

📌 学んだことのまとめ

🚀 次のステップ

1. 永続的な非表示のための手順

2. 現在の「追加CSS」への追加例

🌟 次に何をしますか？

✅ 変更の確認

📌 もし非表示になっていなかったら

何が変わった？

右上の更新時間をけした

1. 右上の「時間（更新日）」を消す方法

2. 猫の位置（中心）がとれない問題の解決

3. 右上の時間を「CSS」で消す（確実な方法）

TOP猫とボタン 猫-優しい呼吸 ボタン-影＋明度をうっすら

お問い合わせフォームプラグイン追加 Contact Form 7

コメント

TOP猫とボタン　猫-優しい呼吸　ボタン-影＋明度をうっすら

お問い合わせフォームプラグイン追加　Contact Form 7