WordPressでCSSコードを追加する

59のコメント

1. こんにちは！
   特定のcssだけを特定のページに入れたいときはどうすればいいですか？

   たとえば、テーブルcssのようです。
   ブロックエディタにはインポートする項目があるようですが、クラシックエディタではどのようにインポートするのかわかりません！

   応答

   • この部分は、 基本的なCSSを理解すれば簡単に可能です。

     そのページ/記事のPage/post idを追加して範囲を制限できます。

     例：

     .postid-65809 .entry-content {
// 샬라샬라;
}

     可能な限りブロックエディタの使用を検討してください。キーボードショートカットを使用すると、作業速度も向上し、手首も保護できます。

     応答

     • はい、私はブロックエディタに変えなければなりません！ありがとうございます^^！

2. こんにちは。久しぶりにお会いしましょう。現在、私は、ティーストーリーからCSSコードを作成し、「TIPボックス」として活用しています。 Gutenbergの「HTMLエディタ」を利用してはならず、設定の「追加CSSクラス」を利用しても文字のみ適用されるだけで、残りのボックス状のアイコンや線は適用されません。 。 。本当に面倒ですが、間違っていないかどうか見ていただければ幸いです...ㅠㅠ

   HTML>>

   内容

   CSS >>

   /*TIPボックススタイル*/
   .tipbox {
   位置：相対;
   border: 5px solid #56A8CC;
   背景色: #FFFFFF;
   幅：720px。
   最大幅：90％;
   最小幅: 70%;
   text-align：justify;
   フォント重量：太字;
   border-radius：12px 12px 12px 12px;
   パディング: 27px 15px 20px 20px;
   ボックスシャドウ: 0 6px 12px rgba(0, 0, 0, 0.5);
   マージン: 10px 0;
   フォントサイズ：16px。
   表示：ブロック;
   }

   .tipbox::before {
   content: "👍TIP.";
   位置：絶対;
   上：-18px;
   左：30px;
   幅：83px。
   高さ：30px。
   背景色: #FFFFFF;
   パディング：0 5px;
   font-size：1.4em;
   フォント重量：太字;
   テキスト整列：センター;
   color：＃56A8CC;
   表示：ブロック;
   animation: bounce 300ms infinite alternate ease-in;
   }

   .tipbox {
   font-family: "SOYO Maple Regular";
   text-rendering: optimizelegibility;
   -webkit-font-smoothing：アンチエイリアス;
   -moz-osx-font-smoothing: グレースケール;
   }

   @keyframes bounce {
   から {
   transform: translateY(0);
   }
   に {
   transform: translateY(-5px);
   }
   }

   @media（最大幅：1200px）{
   .tipbox {
   幅：80％;
   パディング: 20px 10px 15px 15px;
   }

   .tipbox::before {
   左：20px;
   font-size：1.2em;
   }
   }

   @media（最大幅：768px）{
   .tipbox {
   幅：90％;
   パディング: 15px 10px 10px 10px;
   }

   .tipbox::before {
   左：15px;
   font-size：1em;
   }
   }

   @media（最大幅：480px）{
   .tipbox {
   幅：100％;
   パディング: 10px 5px 10px 10px;
   }

   .tipbox::before {
   左：10px;
   font-size：0.9em;
   }
   }

   ですが、ティーストーリーではうまくいきます、

   応答

   • こんにちは、ブロッコリードットコム様。そのCSSコードをjsfiddleでテストしてみるとうまくいきます。
     WordPressでもうまく動作しそうですが、理由はわかりませんね。
     私は時間があるときに一度テストして結果を共有します。

     ちなみに私は他の方法でメモ、警告、ヒント。まとめなどのボックスを作って使っています。

     応答

   • GeneratePress テーマでテストしてみると、うまく動作することを確認しました。テーマによっては、数値は少しずつ調整する必要があります。

     あなたの記事に画像をアップロードして、ここに画像リンクを共有してください。

     https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F0SY9y%2FbtsIhyflMZp%2F6YwfkZaxAejcEA4bl7Bdd1%2Fimg.webp

     応答

   • このコードを私のブログに公開してもいいですか？ （参考にjsfiddleに投稿したのはアカウントにログインしていないためアップロードして削除されないことをご了承ください。）

     適用方法は Naver カフェに載せました。

     https://cafe.naver.com/wphomepage/41385

     問題が発生した場合は、一般人が閲覧できないように投稿を設定します。

     応答

     • これまで気にしてくださって本当に感謝するだけです。公開の有無は気に入っても構いませんが、失礼にならない場合は出所を残していただくなら、さらに感謝します。

       さて、上に共有してくれたカフェリンク少し前に加入しました。登録を承認していただきありがとうございます。

     • HTMLエディタにしてはいけませんし、今カフェに共有してくれた方法通りにしたのにもなりませんね。

     • このブログにも適用してみると（スタイル調整が少し必要でしたが）うまくいきました。

       CSSコードが正しくロードされているかどうかを確認してみますか？

       チャイルドテーマ内のスタイルシートファイル（style.css）にコードを追加してもテストしますか？
       適用後にキャッシュも削除してください。

       さまざまな方法でうまくいかない場合は、そのtipboxスタイルが適用されましたが、うまく機能しない記事のURLを教えてください。 Naver カフェを通じてURLを教えてもらえます。

     • 休む必要がありますが、これまで気にしていただきありがとうございます。カフェに書かれた投稿のコメントにリンクを残しました

     • 見てみると、前のCSSコードにわずかなエラーがありますね。そのため、.tipboxのスタイルが適用されなかったのです。カフェに新しい回答がありましたので参考にしてください。

     • 既存のコードは私が使っていたそのまま書いて(閉じる)中括弧が重複している部分を消すとすぐになりますね!!!!私が使用したいCSSと全く関係ないものはんだにこんなに苦労だったなんて何かハッタリですね！ありがとうございます！次回サイトリニューアルやホスティングを移すと、またワード様にお任せします！

     • ありがとうございます〜暑さに健康に気をつけて、楽しい週末と休日をお過ごしください。

3. ボタンブロックプロパティの詳細セクションで、追加のCSSクラスセクションに、すべての記事の内容を同じCSSクラスとして漢方に追加する方法はありますか？

   応答

   • すべての記事のボタンにCSSクラスをまとめて追加する方法があるかどうかはわかりません。探してみればあるかもしれません。

     応答

4. いつもよく見ています。 CSSに関連して気になることがありますが、用語もよくわからないので探すのが難しいと感じています。
   1.ジェネレートテーマを使用しています。
   2. 本文内容右側にスクロールするたびに、通るウィジェットを作成したいと思います。
   3. モバイルに適用されるウィジェットを作成したいと思います。
   上記の内容に関して書かれた記事がありますか？

   応答

   • こんにちは、次の記事を参照して特定の要素をサイドバーなどに固定してみてください。
     https://www.thewordcracker.com/basic/%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4-%ec%82%ac%ec%9d%b4%eb%93%9c%ec%97%90-%ed%80%b5-%eb%a9%94%eb%89%b4-%ed%80%b5-%eb%b0%94-%ec%b6%94%ea%b0%80%ed%95%98%ea%b8%b0/

     モバイルにのみ適用したい場合は、CSSメディアクエリを使用してモバイルからのみ読み込むことができます。

     GeneratePress テーマのCSSモバイルブランチポイントについて、次の記事を参照してください。

     https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-generatepress-%ED%85%8C%EB%A7%88-css-%EB%AF%B8%EB%94%94%EC%96%B4-%EC%BF%BC%EB%A6%AC/

     基本的なCSSについて理解すれば、ある程度応用が可能でしょう。

     https://cafe.naver.com/wphomepage/16730

     応答

5. こんにちは。 WordPress 情報屋さん〜！
   ご紹介いただいた内容を参考に、特定のページでcss呼び出して使いすぎています。 ありがとうございます（__）

   一つの質問があります。
   特定のページが多数あるときに同じcssを呼び出そうとした場合はどうすればよいですか？
   function front_page_style_sheet() {
   if (is_page(1) ) {
   wp_enqueue_style( 'front-page-styling', get_stylesheet_directory_uri() . '/base.css' );
   }}
   add_action('wp_enqueue_scripts', 'front_page_style_sheet');

   応答

   • PHPに関する事項です。 arraryを使用してください。

     例：

     is_page( array( 42, 'about-me', 'Contact' ) );

     ワープの公式文書を参照してください。
     https://developer.wordpress.org/reference/functions/is_page/

     応答

     • フレンドリーな回答をありがとう。 (__)

       申し訳ありませんが、もう一つ質問があります。
       多数のページ（1〜5）は以下のように呼び出すことに成功しました。
       ただし、ポストIDを追加した場合は適用されません。

       if（is_page（array（1、2、3、4、5））））{

       ページのみ可能でポストは不可ですか？

     • is_single() を試してください。

       https://developer.wordpress.org/reference/functions/is_single/

6. ワード様こんにちは。 諮問します。

   私もジェネレートプレスを使用していますが、h2、h3をここの形のように変更しようとしましたが、適用されないのでお問い合わせください。
   追加のcssに.single .entry-content h2 {これを入れるように言いました。
   これはできません。
   しかし、適用する画面でのみ適用されます。
   WordPressから出てみると適用されません。

   .single .entry-content h2 この文字でいろいろなバリエーションを尽くしても同じです。
   どうすればいいですか？

   ありがとうございます。

   応答

   • こんにちは、移動三様。 基本的なCSSを理解すれば簡単に可能です。

     https://cafe.naver.com/wphomepage/16730

     ページに適用されている場合は、.page .entry-content h2 {}式で行う必要があります。

     管理ページでは、実際には適用されない問題はキャッシュの問題かもしれません。

     1. キャッシュプラグインのキャッシュを削除します。
     2. ブラウザキャッシュを削除します。
     3. クラウドウェイズなどの場合は、サーバーキャッシュを削除する必要があります。

     https://www.thewordcracker.com/miscellaneous/%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C%EC%9B%A8%EC%9D%B4%EC%A6%88-%EC%84%9C%EB%B2%84-%EC%BA%90%EC%8B%9C-%EC%82%AD%EC%A0%9C-%EB%B9%84%ED%99%9C%EC%84%B1%ED%99%94-%EB%B0%A9%EB%B2%95/

     試してみてうまくいかない場合は、このコメントに秘密のコメントとして適用できないページのURLを教えてください。

     応答

7. 私は通知板[ルックス]にちょうど3つしかありません[テーマ-ユーザー定義-メニュー]

   応答

   • アカウントが完全な管理者アカウントであることを確認しますか？ 次の記事を参照してください。

     https://avada.tistory.com/568

     アカウントが制限付きの管理者アカウントである場合、または管理者アカウントでない場合は、一部の機能（テーマ、プラグインのインストール/削除など）を使用できない場合があります。

     応答

8. この記事はで書かれていますか？ Naver ユーザーラエディタの使用は難しいです。 WordPress エディタでHTMLに入れることができますか？ それとも他のテーマがあるのか​​、この悩みをどのように解決すればいいのでしょうか。

   応答

   • この記事は基本エディタ（ブロックエディタです。 Gutenberg）で書かれています。
     HTMLはカスタムHTMLブロックを使用して追加できます。

     ブロックエディタの使い方については、次の記事を参照してください。

     https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B5%AC%ED%85%90%EB%B2%A0%EB%A5%B4%ED%81%AC-%ED%82%A4%EB%B3%B4%EB%93%9C-%EB%8B%A8%EC%B6%95%ED%82%A4/

     また、 https://www.thewordcracker.com/basic/how-to-start-wordpress/ 記事の「文章を書く」部分も参考にしてください。

     エレメンページビルダーナ Avadaの場合 Avada ビルダーなどのページビルダーでも文を作成することが可能ですが、文（ポスト）は基本エディタで作成することをお勧めします。 ページは、ページビルダーを使用している場合はページビルダー（例： Elementor）で作ることができます。 次の記事を参照してください。

     https://avada.tistory.com/1811

     WordPress エディタ（Gutenberg）は Naver私のティーストーリーが提供するエディターとは比較にならないほど強力です。 HTML、CSSで簡単にカスタマイズ可能 WordPress 使い方を少し身につければ、javascript、PHPなども適用が可能です。

     応答

9. 今word様現在の文に適用されている小見出しcssをh2に適用したい前 newspaper テーマを書いています。
   newspaper テーマで、現在この記事のサブタイトルcss適用したいのですがcss情報教えていただけますお問い合わせについてでしょうか？

   応答

   • こんにちは、dylan様。 Newspaper テーマで小タイトル（h2、h3、h4、h5...）ヘディングスタイルを指定したい場合は、次の記事を参照してください。

     https://avada.tistory.com/1633

     CSSコードは、必要に応じて適切に変更が可能です。

     この WordPress ブログには、現在の ツェナーレートのテーマが使用中であり、次のCSSコードがH2タグに適用されています。

     .single .entry-content h2 {
font-size: 1.3em;
margin: 1.15em 0 .6em;
font-weight: 400;
position: relative;
text-shadow: 0 -1px rgb(0 0 0 / 60%);
line-height: 40px;
background: #355681;
background: rgba(53,86,129,.8);
border: 1px solid #fff;
padding: 5px 15px;
color: #fff;
border-radius: 0 10px;
box-shadow: inset 0 0 5px rgb(53 86 129 / 50%);
font-family: 'Muli',sans-serif;
}

     応答

     • 現在、私は newspaper テーマを使用中なのにword様ホームページのh2、h3 cssコードをどのように適用できるかどうか知りたいです。
       上記のコードを newspaper cssに適用させるので、適用がダメですね。

     • Newspaper テーマは、上記のコードでは、.single .entry-content h2部分を.single .td-post-content h2に変えてみてください。

       .single .td-post-content h2 {
// css 코드
}

       上記のコードを応用して適切に変更してください。

     • はい一人css少しずつ知って見て触ってみたところ、目的のスタイルの実装がなりましたね、本当にありがとうございます！
       良い秋夕連休を過ごしてください〜

10. エレメンプロを使用している場合、エレメン内でカスタムCSSコードを追加することが可能です。

    応答

11. こんにちは。
    とてもよくある質問をおかけして申し訳ありません。 Naver ブログで WordPress ブログに移す過程が初めてだからか非常に難しいですね。言われたように Bluehostのサブドメイン機能を活用して、ブログの WordPress サイトを作りました。 Themeforestから story blog というテーマを先に購入しておいたことがあり、これを活用しようとしています。 デモが適用された私の新しいサイト https://blog.alldak.net을 見れば投稿のクリック領域がテキストのみハゲクム設計されています。 私はこれを http://the-edit.co.kr/< サンプルサイトのように、画像全体の領域をクリックされるようにしたいです。 CSSの勉強をしながら、Google Chromeの開発者モードで一時間以上の解決策を見つけてみても、まったくわかりません。どうすればいいでしょう？..

    応答

    • こんにちは？

      質問された部分については、時間が飛ぶときに一度見てソリューションがあれば、共有するようにします。

      楽しい時間をお過ごしください:)

      応答

      • 言葉だけでも感謝します。 自ら解決策を参照し、ロックします。^^

12. こんにちは気にしたよく見ていきます。 WordPressを知って一つの不思議おりお問い合わせください。既存の手作業のホームページは、ウェブ上にHtmlファイルが存在して、その部分に合わせて変更し、レイアウトとスタイルを適用しながら作業をしたが WordPressはPHP言語になったファイルしかない。 ページを変更してレイアウトを変更する必要があるのですが、どうすればよいかについて質問します。 。 ありがとう

    応答

    • こんにちは？
      私のブログを訪問していただきありがとうございます^^
      まず https://www.thewordcracker.com/basic/the-anatomy-of-a-wordpress-posts-request/文を一度参考にしてください。

      そしてなるべくテーマのソースファイルを変更していない方がいいでしょだよ、修正が必要な場合チャイルドテーマを作ってください。 特にプラグインや WordPress コアファイルは変更しないことをお勧め（変更、更新するたびに問題になります）。

      修正は可能であれば、アクション/フィルタ（フック）を確認して、アクション/フィルタを介して調整してください。

      だから、手間下さい。

      応答

13. 気になることをすべて解決しました。 詳細な説明ありがとうございました^^

    応答

    • ありがとうございます^^楽しい一日を過ごす。

      応答

14. cssコードをどこに入れること知らなくて迷ったが、おかげでうまく解決されました。 ありがとうございます。

    応答

15. こんにちは。ここ見ると親切によく説明、ありがとうございます。 私も WordPress敷い無料テーマのインストールして作っているのですが。背景色と文字サイズ変更は、スタイルシートで調整した。スレッドボックスで境界線なくすとスレッドの日付と名前のようなものだ消したい。何直さなければか全く分からないんですよ。どなたSimple Custom CSSプラグインを敷くとアドバイスくださった。添加聞いてみるのにそれftp接続した後、どこカルアヤされ？ 次にどのように修正するかよく分かりません。ここで説明お願い難しいですか？ 少しでもアドバイスお願いします。ㅜ

    応答

    • 管理者ページ（ダッシュボード）で プラグイン>プラグインを追加するを選択して「Simple Custom CSS」を検索してインストールします。 このブログにプラグインをインストールする方法について説明した記事があります。 一度検索してみてください。

      応答

16. よく見ました。FTPを使用してcssを変更するときのparents themeこのアップグレードの場合、修正はすべて消えませんか？ 

    応答

    • こんにちは？

      親 Theme 内のCSSファイルで変更すると、テーマが更新されると修正は消えます。
      子テーマを利用してみてください。 それともプラグインを使用してもドゥェゴヨ。

      子テーマの作成方法は、 https://www.thewordcracker.com/basic/should-we-create-a-child-theme-and-how-to-do/ 文を参照してみてください。

      CSSのみが修正される場合は、あえてChild Theme作成せず、Simple Custom CSSのようなプラグインとしても適しているようです。

      手間下さい。

      応答

17. 既定のスタイルシートファイルではなく、別のcssファイルを作成、そこにcssコードを入れてたい。 どうすればいいですか？

    応答

    • こんにちは？ ブログを訪問していただきありがとうございます。 簡単に

      @import url（ "../ mycustomstyle.css"）;

      上記のようなコードを追加すると、なりそうです。

      それよりも、 https://www.thewordcracker.com/intermediate/add-a-second-style-sheet-to-wordpress-theme/ 記事で紹介された方法を参考にしてみてください。

      応答

      • アドバイスありがとうございます。 お知らせいただいた方法で試してみるましょう。

18. よく読みました。 テキストエディタでのMエディタを使用してね。 私も使用するうれしいですね。 まともなプログラムです。

    応答

19. 良い文ですね〜

    応答

20. CSSコードを WordPressでどのように入れなければならないのかと思いましたが…ありがとう。

    応答

21. こんにちは？

    Ftpを使用すればいいとするftpの使用が容易ですか？

    応答

    • こんにちは？ WordPress サイトを運営するには、どうしてもftpを知っていれば良さそうです。
      ftpは別のないコンピュータに慣れていない方には少し難しいかもしれないだろうという気がしますね。
      インターネットにFilezillaの使用法と検索して参考にしてみてください。
      だから、楽しい週末を。

      応答

22. よく見ていきます

    応答

23. この記事のおかげで、気がかりなことが解けました。

    cssを学んでみたい本を買って見なければならでしょうか？

    応答

    • こんにちは？
      本を買って見てもドゥェゴヨ、 https://opentutorials.org/course/4 ページの講座を聞いご覧になっても良いです。
      本は一グォンチュムあっても大丈夫のようです。 私は最初にCSSを接するとき概念とること本で始め、以降は主にインターネットを参照しました。

      応答

      • 回答ありがとうございます。 CSSの本を買うならどんな本がいいのでしょう？

24. おかげで、簡単にcssコードを入れました。 こっくり

    応答