• 締切済み

ワードプレスのCSSの設定を教えてください

こんにちは。Twenty tenのテーマを使ってます。 記事タイトルと投稿記事の間の行間(画像赤枠)を狭くしたいのですが、CSSのどこの部分を変更したらいいのでしょうか。 わかる方、教えてください。 よろしくお願いします。

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

>わかったんですけど、CSSを保存しても変更ができませんでした。どうしたらいいでしょうか。 こちらを参考に  ⇒FirebugでCSSソースをそのまま編集する方法 | Sabakura Blog( http://blog.serverkurabe.com/firebug-edit-css-source )

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

当然、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxをお使いだと思いますが、アドオンにあまりにも有名な Firebug( https://addons.mozilla.jp/firefox/details/1843 )があります。  それで、それらの要素に適用されているスタイルを確認して修正してみるのが一番早いです。

take0514
質問者

補足

ありがとうございます。修正するところは、わかったんですけど、CSSを保存しても変更ができませんでした。どうしたらいいでしょうか。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • ワードプレスCSSカズタマイズに関して/初心者です

    WardPressのCSSカスタマイズに関して質問です。 WP初心者です。 現在 Gridsby (無料版)というテーマを使っております。 DEMOサイト> http://modernthemes.net/demo/?theme=Gridsby やりたいことは以下3つです。 (1)TOPページの画像にマウスオーバーした時に、その画像上に記事タイトルと投稿日付を表示させたいです。出来ればフェイドイン/アウトなどアクションが付けられればベターです。 (2)テーマのデフォルトカスタマイズで、最新投稿が一番左上に来るように設定できるのですが、その画像上が最新投稿だと分かるように、『NEW』という文字を点滅させる等、何か表示が出来ませんでしょうか? (3)画像をクリックすると各画像の詳細ページに移動します。タイトル下のラインの下か、タイトル右横に日付を挿入したいのですが、なにか方法は有りますでしょうか? 以上です。 以前にブログのHTML/CSSをいじったことは有ります。勘で「このパートは文字のサイズっぽいな」とあたりをつけて数字をいじってみるとかのレベルです。 ピンポイント回答頂ければありがたいですが、 「このページで勉強すれば出来るよ」というような参考サイトが有ればお教えください。 TOPページのスクリーンショット載せておきます。 ヨロシクお願いいたします。

    • ベストアンサー
    • CSS
  • ワードプレスでレイアウトが崩れてしまいました。

    CSSなどのことはほぼ分からないのですが、詳しい方がいましたら是非お力になっていただきたいと思っております。お願いします。 スティンガー3を使用しております。 header.php を変更したときに思ったようにならなかったので追加したコードを削除したところでおかしくなったと思います。変更内容はトップページ以外、ヘッダー画像をでないようにしようとしていました。 現象は、ヘッダーの画像を横並びに配置していたのですが、縦に二つ並ぶようになりました。 この現象と同時に気がついた異変がまだありまして、h2の装飾を子テーマを使って変更していたんですが、これの装飾がなくなりました。(現在は戻ってはいますが、子テーマで変更しようとしても反映されず、親テーマを変更すると反映されます。) 抜粋記事の枠の大きさなどわかりやすいところを子テーマを使い変更してみましたところ、きちんと反映されました。 ヘッダー画像が回り込まなくなったことと、子テーマで変更できなくなったものがあることの関係は分からないんですが、かれこれ半日以上調べていたのですが完全にいき詰まったのでこちらに質問させていただきました。 もしわかる方がいましたらお力を貸していただきたいので宜しくお願いいたします。 http://arromanches-ngy.sakura.ne.jp/wp/?p=99 問題のサイトになります。トップ画像の下にある「広告のソースコード」という文字がトップ画像の右上に来るはずなんですが・・・。(CSSに関しては一度きちんと横並びになっていましたので問題ないと思います。)

    • ベストアンサー
    • CSS
  • ワードプレスのCSSを移動させる

    私の使っているテーマのCSSが全部で6つあります。 1つはPHPやHTMLと同じ場所にあるのですが、その中にCSSというフォルダがありそのフォルダの中に5個のCSSがあります。なので、ワードプレス上からいじれず、いちいちFTPからダウンロードしていじらなくてはならなく面倒です。 テーマ編集で表示される階層にあるCSSに @import url(css/html5reset-1.6.1.css); @import url(css/layout.css); @import url(css/common.css); @import url(css/nav.css); @import url(css/content.css); @import url(css/top.css); このような記述があり、これがCSSフォルダに送っているのだと思い、 CSSフォルダの中のCSSを正しい階層にもってきて、上記の部分を @import url(html5reset-1.6.1.css); @import url(layout.css); @import url(common.css); @import url(nav.css); @import url(content.css); @import url(top.css); このように書けば大丈夫だろうとおもったのですが、HPからCSSで指定されていたH1の淵の画像などがすべて消し飛びました。 なんとか、5つのCSSの階層を上にあげたいのですが、どのようにすればよいのでしょうか? ちなみに、使っているテーマは、 http://pacific.prime-strategy.co.jp/ これです。

    • ベストアンサー
    • CSS
  • CSS行間設定について困っています

    gooブログのCSS編集で、エントリー本文の行間を広くさせようと思い、 line-height:200%;で広く設定していて、今までうまくいっていました。 最近また少し背景画像や文字色など編集しようと思い、色々編集していたのですが、(この時に行間については何も変更していない)、この編集が終わった後に、自分のブログを見てみると、Firefoxでは正常なのですが、IEではなぜか行間がちゃんとCSSでの設定どおりになっているところとそうでないところとで、まばらなかんじになってしまって・・・。 想定される原因や解決法がお分かりの方がいらっしゃいましたら教えていただけないでしょうか。よろしくお願いいたします。

  • WPテーマHuemanのCSS

    投稿一覧を表示した時の、各投稿どおしをもう少し詰めたいです。 CSSで、post-titleやh2のmargin-bottomやpaddingの値を変更してみましたが上手くいきませんでした。 どこを見ればいいのでしょうか? 同じテーマを使用されてる方で変更に成功した人などいれば教えてください。

    • ベストアンサー
    • CSS
  • ワードプレスTwenty Sixteen 良いです

    ワードプレス Twenty Sixteen を勧められました Twentyどれも同じでしょうか? インターネットビジネスをしています 外観が違うだけ? 深い意味はあるのでしょうか? 見た目はTwenty Fifteenが レイアウト良さそうですが・・・ 商品アフィリエイト では よく見ますが よろしくお願いします。 _____________ Twenty Seventeen Twenty Fifteen Twenty Sixteen ・Twenty Seventeen は、没入感のあるアイキャッチ画像と 繊細なアニメーションを用いて、サイトに命を吹き込みます。 ビジネスサイトにフォーカスをあて、ウィジェット、ナビゲーション、 ソーシャルメニュー、ロゴ等はもちろんフロントページの 複数のセクションを目立たせます。 カスタム配色で非対称のグリッドの個性を出し、 投稿フォーマットでマルチメディアコンテンツを 際立たせます。 2017年のデフォルトテーマは、 多くの言語において、どんな才能に対しても、 どのようなデバイスでも、うまく動作します。 ______________________ Twenty Fifteen 2015年のデフォルトテーマはクリーンでブログ向けに、 分かりやすさを考えて設計されています。 Twenty Fifteen の単純明快なタイポグラフィは 多様な画面サイズで読みやすく、 複数の言語に適しています。 このテーマは「モバイル・ファースト」 アプローチを使ってデザインしました。 つまり、サイトの訪問者がスマートフォン ・タブレット・ノートまたはデスクトップパソコン のどれを使ってサイトに訪れていても、 あなたのコンテンツに最も注目が注がれるように なっているという意味です。 ___________ Twenty Sixteen は ずっと人気の WordPress レイアウト — ブログとウェブサイト用に完全に動作する、 オプションの右サイドバーのある水平の題字 — に対するモダンな試みです。 美しいデフォルトカラースキームのカラーオプション、 モバイルファーストのアプローチによる 調和した柔軟なグリッド、 細部にまで非の打ち所がない上品さを 備えています。 Twenty Sixteen は WordPress の外観を どこであろうとも美しく見せるでしょう。

  • cssで文字間、行間設定。

    cssで文字間、行間設定。 dreamweavercs4でサイトを作っています。 本で勉強しただけの素人です。 文字について質問です。 サイズ、行間と文字間を設定したのですが、 たとえば、文字10pt、行間11pt、文字間0ptとすると、文字間(横)はあまり詰まりません。 さらに試しに、文字10pt、行間12pt、文字間0ptにすると、行の間(縦)だけがひらくと思ったら、文字間もあきます。 ptで設定しないほうがいいでしょうか? 文字と文字の間はやや詰めた感じで、行間を少し開けたいのですが、うまくいきません。 行間を設定すると、文字の間もあいてしまうのは、なぜなんでしょうか?? いまいちよくわかりません。 担当のかたから、いつも、サイトの文字が読みにくい、といわれているのですが、微妙な設定がうまくいきません。 http://www.disney.co.jp/character/winnie_the_pooh/ プーさんの説明文のような、文字間隔にしたいです。(cssがみれませんでした。) どなたか、よろしくお願いします。

    • ベストアンサー
    • HTML
  • ワードプレスについて

    ワードプレス初心者です。 記事投稿ページに本文を入力する際にビジュアルかテキストかを選択し入力する と思うのですが、テキストの方にHTMLやCSSを入力して本文を作成したほうが 検索エンジンから見て分かりやすく、SEO的に有利になるんでしょうか?

    • ベストアンサー
    • SEO
  • ワードプレス初心者です。うまくいきません

    ワードプレス初心者です。うまくいきません 下記のように作ったのですがテーマノチェックをしました。 URLはデフォルトで下記となると考えてよいでしょうか? 真っ白になります。 http://URL.org/wordpress/ 初心者にもわかるように教えていただければ幸いです。 パス /htdocs/wordpress/wp-content/themes タイトルとりあえず適当に入れています。 テーマの名前 バージョン バージョン 作成者 作った人の名前 作成者の URI http://作った人の%20URL テーマの URI http://テーマの%20URL ライセンス ライセンス License URI ライセンスの URL 説明 テーマの説明 ソース <?php get_header(); ?> <body class="top-body"> <div class="container"> <header class="header u-boxshadow-0-0dot1rem-0dot1rem-a0dot9" role="banner"> <div class="headerinner-wrap-primary"> </div> <div class="headerinner-wrap-secondly u-gradient-lightgreen"> <!-- Navigation --> <?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?> <!-- /Navigation --> <ul class="c-social-btn-wrap"> </ul> <h2 class="c-heading-secondly c-heading-secondly--skin u-long-shadow"> </h2> <p class="u-centering-left-right-block-inline"> AAAAAAAAAAAAA<br /> AAAAAAAAAAAAAA<br /> AAAAAAAAAAAA<br /> </p> </div><!-- /.headerinner-wrap-secondly --> </header> <!-- /.header --> </main> <?php get_footer(); ?> <?php get_drawermenu(); ?> ・css /* Theme Name: テーマの名前 Description:テーマの説明 Theme URI: テーマの URL Author: 作った人の名前 Author URI: 作った人の URL Version: バージョン License: ライセンス License URI: ライセンスの URL */ @charset "utf-8";~ headerなどのphp、style.cssはすべてindex.phpのカレントディレクトリにあります。 画像以外はすべてカレントディレクトリでないといけないのですよね。 必須: テーマの css には .wp-caption の css クラスが必要です。 必須: テーマの css には .wp-caption-text の css クラスが必要です。 必須: テーマの css には .sticky の css クラスが必要です。 必須: テーマの css には .gallery-caption の css クラスが必要です。 必須: テーマの css には .bypostauthor の css クラスが必要です。 必須: テーマの css には .alignright の css クラスが必要です。 必須: テーマの css には .alignleft の css クラスが必要です。 必須: テーマの css には .aligncenter の css クラスが必要です。 必須: テーマ CSS 中に CSS クラス .screen-reader-text が必要です。Codex で実例を参照してください。 必須: このテーマはタグを表示していないようです。適切な場所にタグを表示するように変更してください。 必須: style.css ヘッダーに Text Domain: がありません。 推奨: テーマにサイドバー/ウィジェットエリアがありません。ウィジェット API をご覧ください。 警告: このテーマは、テーマ名に対して間違ったディレクトリにあります。ディレクトリ名はテーマのスラッグと一致する必要があります。このテーマの正しいスラッグとテキストドメインは %e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e5%90%8d%e5%89%8d です。 (子テーマの場合、このエラーは無視してください。) 必須: 待機状態のコメント返信のスクリプトを見つけることができません。プラグインとテーマの移行/2.7/Enhanced Comment Displayをご覧ください。 <?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?> 必須: テーマに投稿ペジネーションのコードがありません。投稿ペジネーションを追加するには posts_nav_link()、paginate_links()、the_posts_pagination()、the_posts_navigation()、next_posts_link()previous_posts_link() のいずれかを使ってください。 必須: テーマで wp_title() を呼び出すことはできません。 必須: コンテンツの幅が定義されていません。例: if ( ! isset( $content_width ) ) $content_width = 900; 必須: このテーマは標準的なアバター関数をサポートしていないようです。サポートするにはget_avatar、またはwp_list_commentsの関数のどちらかを用いてください。 必須: このテーマにはコメントのページ送り用のコードが含まれていません。paginate_comments_links()、the_comments_navigation、the_comments_pagination、next_comments_link()、previous_comments_link() のいずれかを使ってコメントのページ送りを追加してください。 必須: The theme must not used the <title> tags. 必須: No reference to add_theme_support( "title-tag" ) was found in the theme. 必須: wp_list_comments が見つかりません。wp_list_comments <?php wp_list_comments( $args ); ?> を参照してください。 必須: wp_link_pages が見つかりません。wp_link_pages <?php wp_link_pages( $args ); ?> を参照してください。 必須: wp_head が見つかりません。wp_head <?php wp_head(); ?> を参照してください。 必須: wp_footer が見つかりません。wp_footerをご覧ください。 <?php wp_footer(); ?> 必須: post_class が見つかりません。post_class <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> を参照してください。 必須: language_attributes が見つかりません。language_attributesをご覧ください。 <html <?php language_attributes(); ?> 必須: comments_template が見つかりません。comments_template <?php comments_template( $file, $separate_comments ); ?> を参照してください。 必須: comment_form が見つかりません。comment_form <?php comment_form(); ?> を参照してください。 必須: body タグ内の body_class 呼び出し が見つかりません。body_class <?php body_class( $class ); ?> を参照してください。 必須: add_theme_support( 'automatic-feed-links' ) が見つかりません。add_theme_support 書ききれないのでもう一つ作ります。 を参照してください。 必須: comment_form が見つかりません。comment_form <?php comment_form(); ?> を参照してください。 必須: body タグ内の body_class 呼び出し が見つかりません。body_class

  • htmlエディタのサイトをそのままワードプレスへ

    元々はワードプレスを使ってHPを作っていたのですが 最近htmlやCSSを勉強し始め、 bracketsというhtmlエディタで新たにサイトを作りました。 htmlエディタでのほうが自由度も高く、 慣れれば作りやすいように感じています。 しかし、たとえば画像を自動で圧縮してくれる EWWW Image Optimizerなどのような ワードプレスでの便利なプラグインも使いたくなりました。 そこで、htmlエディタで htmlファイルとcssファイルを作った後、 ワードプレスに移行すればいいと考えたのですが、 これがなかなかうまくいきません。 ひとまず、htmlのbody部分を ワードプレスの記事のテキストエディタにコピペし、 cssをワードプレスのstyle.cssにコピペしてみたのですが レイアウトが多少崩れてしまいます。 style.css以外のファイルで ワードプレスのテーマに元々含まれている要素が 反映されてしまっているためかと思われるのですが、 さすがにどこをどういじったらいいのかわかりませんでした。 htmlエディタで作ったものを そのままワードプレスで表示させるために 最も簡単な方法はどのようなものでしょうか?

    • 締切済み
    • CSS