全文表示の投稿ページの記事と記事の間隔を小さくしたい

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 全文表示の投稿ページの記事と記事の間隔を小さくしたい

  • このトピックには8件の返信、2人の参加者があり、最後にGIGIにより11年、 1ヶ月前に更新されました。
8件の返信スレッドを表示中
  • 投稿者
    投稿
    • #31083
      GIGI
      ゲスト

      はじめまして。
      wordpress初心者です。simplicityをはじめて使いながら,勉強中です。

      質問なのですが,
      トップページに全文を表示させる形式にて投稿記事を表示させました。
      各記事は,SNSのボタンや広告など何もオプションはつけずに,テキストのみが表示されております。
      そこまではうまくいったのですが,記事と記事の間が3cmほども空いてしまいました。
      この投稿ページの記事の余白については,以前のフォーラムにも書かれておりましたが,子テーマstyle.cssにて,ちょっと大げさに,

      #main {
      padding: 0px;
      }

      と書いても,何も反映されません。
      !important をつけることもしてみましたが,変更されませんでした。

      また,以前のフォーラムにて(http://wp-simplicity.com/suport/topic/%E8%A8%98%E4%BA%8B%E9%96%93%E3%81%AE%E4%BD%99%E7%99%BD%E8%A8%AD%E5%AE%9A/)

      >css/css-custom.cssは、カスタマイザー→その他→「カスタマイザーのスタイルを外部CSSに書き出す」にチェックを入れると作られます(おそらく)。

      とありましたが,うまくcss-custom.cssを作ることができませんでした。
      初歩的な質問で申し訳ありませんが,もしできましたらお教え願えないでしょうか。

      お時間のあるときに,どうぞ宜しくお願い致します。

    • #31110
      Hidekichi
      ゲスト

      #mainにmargin-bottom:30pxとかが入っているせいではないでしょうか?
      全文表示だと、#main .postあたりかもしれません。子テーマstyle.cssでいじくれない場合は、jQueryなどでやるのも方法です。
      『サムネイル大』のレイアウトでHTML内に自動生成されるCSSの変更方法 ここらを参考までに。

      セレクタを変えて、.css()の中身を変更します。jQueryの場合は、-がついているプロパティはクォートで囲む必要があります。また複数ある場合はカンマで区切ります。

      jQueryのcssはその該当するタグの中にstyle=”…”で書き込まれますので何より優先されるはずです。

      >css-custom.cssを作ることができませんでした

      これ前にも違うトピックであったのですが、おそらく作られるフォルダのパーミッションが書き込みできない設定になっているのではないかと思ったりします。確か、親テーマのcssフォルダだったかなぁと。
      ここを755とか777あたりにして書き込める状態にした後、css-custom.cssが書き込まれたら元のパーミッションに戻すと言うのも方法です。705でもいけるかな。707だとイケると思います。おそらく。

      自分 : グループ : その他 = 7 : 7 : 7(全開放)←これは危険
      自分 : グループ : その他 = 7 : 0 : 7(開放)←apacheは読み書きできたら良いので実行は不要
      自分 : グループ : その他 = 7 : 0 : 5(apache読み書きのみ)

      この一番下がムリな場合は707にしたら良いかと思います。真ん中はグループの部分で、共用サーバーの場合は必ず0にしておく方が良いです。
      wp-config.phpとか、.htaccessなんかはいじられるとアレなので、404とかにしておくと読むだけになります。ただしキャッシュプラグインとかでhtaccessを上書きするような奴を利用している場合は、606、604あたりが良いかも知れません。404にしておいて、変更のたび自分でアップロードするってのが一番セキュリティ的にはアリかもしれませんが、ガチガチにすると面倒臭いだけですので604あたりが良いのかも知れませんね。

      ただし、サーバーの仕様によってここらは変わったりします。←これ重要

      プラグインの自動アップデートができたり、画像やメディアが普通にアップロードできるのであれば、uploadフォルダのパーミッションを参考にされると良いかも知れません。

      まぁ関係ない部分でできない(フォルダあるいはファイルが作られない)のかも知れませんけども、おそらくこのあたりの問題かなぁと思ったりも。

    • #31129
      アバター画像わいひら
      キーマスター

      トップページに全文を表示させる形式にて投稿記事を表示させました。

      これはテーマカスタマイザーの「レイアウト(全体・リスト)」の「一覧リストのスタイル」を「本文表示」にしたということでしょうか。それともカスタマイズでそのようにしたということでしょうか。

      とありましたが,うまくcss-custom.cssを作ることができませんでした。

      これは、サーバーの設定で書き込みが許可されていない場合は利用できないかもしれません。

    • #31227
      GIGI
      ゲスト

      わいひらさん,再びコメント下さりありがとうございます。
      まだ全然解決できないまま,途方に暮れております。

      >これはテーマカスタマイザーの「レイアウト(全体・リスト)」の「一覧リストのスタイル」を「本文表示」にしたということでしょうか。

      はい。この設定です。

      >css-custom.cssは、サーバーの設定で書き込みが許可されていない場合は利用できないかもしれません。

      教えて頂いたとおりにパーミッションの変更でうまくいきました。

      また,私の方の勘違いで,#main からマージンの変更はできました。が,増やす方だけで,余白部分を減らすことはできませんでした。

      そこで,mainのマージンによる余白のせいではないだろうと思い,以下のclassのマージンも減らしてみましたが,ダメでした。
      .article-list .footer-post-meta{
      margin: 5px;
      }

      親テーマのcssより考えられるclassをコピペしては,マージン部分を減らしてみましたが,変化がなく,ちょっと行き詰まっております。
      ただ,この件はだいぶ初歩的なことなのだろうと思い,なんとか自分で解決しなくてはとも思い,もう一度質問するのは控えておりましたが,やはりだいぶ行き詰まっておりますので,もしお気づきの点がありましたら,お時間のあるときで大丈夫ですので,ご教示願えると大変助かります。

    • #31232
      e-farmer
      ゲスト

      GIGIさん
      私も同じ経験をして調べた内容を説明をします。

      entry-body.phpの最後の部分に

         <?php if ( is_list_style_bodies() ): //本文リストスタイルの時?>
        <hr class="sep" />
        <?php endif; ?>
      

      と言う記述が有り、Simplicty(親)のスタイルシート (style.css)で

      hr.sep {
        background-image: -moz-linear-gradient(left center , rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        border: 0 none;
        height: 1px;
        position: relative;
        margin-bottom:130px;
      }

      と指定されているためです。

       つまり記事と記事の間に130pxのスペースがついた見えない線が指定されています。

      対策は、Simplicity childのスタイルシート (style.css)に

      hr.sep {
        margin-bottom:10px;
      }

      を追加して下さい。間隔スペースの10pxは適当に指定して下さい。
      これで直ることを祈ります。

      あと、cssの何処を変更すれば良いかは、ieならF12を押すと画面下にが現れる解析ツールを使うと早く判ります。

    • #31276
      アバター画像わいひら
      キーマスター

      e-farmerさんありがとうございます。
      僕もこの設定だと思います。

      また、親テーマでスタイル部分を探すのは大変だと思うので、デベロッパーツールをうまく使うとなにかとはかどるかもしれません。
      WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

    • #31354
      GIGI
      ゲスト

      e-farmerさん,わいひらさん

      お返事が遅れましたが,丁寧に教えて下さりありがとうございます。

      e-farmerさんのご指摘のとおりhrタグのマージン変更で無事に解決致しました。
      教えて下さり本当にありがとうございます。
      私の方でもブラウザからソースを見て,hrタグの存在は確認していたのですが,まさかそこにマージンが130pxも設定されているとは思いませんでした。
      もう少しちゃんとソースもスタイルシートも読めるようにしないとダメですね。

      それから,わいひらさんが教えて下さったように,デベロッパーツールもはじめて使ってみましたが,とても良かったです。

      まとめてお返事をして恐縮ですが,お二人とも本当に助かりました。
      WordPressは,使いこなせないかも,,,と弱気になっていましたが,また気を取り直して,サイトを仕上げてしまおうと思います!

      では,またつまずきましたら,お世話になるかもしれませんが,引き続きがんばります!!

      GIGI

    • #31377
      Hidekichi
      ゲスト

      わいひらさんには、違う形で連絡をしたのですが、粋な計らいでトピックが閉じていたのを開けてもらっちゃいましたので、ひとつ僕なりの案を書いておきます。

      その前に、hrが原因とは気が付きませんでした(笑)

      で、そのhrについてなのですが、現在、
      [div id=”post-xxx”]
      [div class=”article”][/div]
      [hr]
      [/div]

      このように設置されています。僕の解釈では、hrのmargin-bottomの設定は記事と記事の間隔を開けるためのものだと思うんです。なので、本来は、

      記事
      —-
      記事

      このように、記事の間のセパレーターとしてhrを用いるのであれば、
      [div id=”post-xxx”]
      [div class=”article”][/div]
      [/div]
      [hr] ← ここ
      [div id=”post-xxx”]
      [div class=”article”][/div]
      [/div]

      「ここ」に入るべきだと思うんです。そうすれば、記事間を均等に開けることができ、かつより簡単に記載することが可能です。


      ※ 記事の間隔がわかりやすいように.articleには背景色(濃いグレー)を入れてます。

      上記hrのcss 例)

      hr.sep {
          background-image: -moz-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.75), transparent); /* ※ 1 */
          border: 0px none;
          height: 1px;
          margin: 50px 0px; /*新規追加*/
          width: 100%;  /*継承の打ち消しのため追加*/
          /*position: relative;*/ /*不要*/
          /*margin-bottom: 130px;*/ /*不要*/
      }

      ※ 1 firefoxからプロパティを書き出しているので-moz-になってますが、-webkit-や-ms-など他のベンダープレフィックスが必要かも。can i use | linear-gradientを見る限り、最近のブラウザだと要らない感じなんですが念の為。

      それからオプションとして、hrのheightが1pxなので、完全に中央と言うわけではないと思われます。本来なら、transform: translateY(-0.5px);で中央かと思うんですけれども、-1pxぐらいで僕的には中央に見えるように思います。ここらはお好みで。

      もしこれらを修正するとなると、該当するPHPのhr書き出し部分を#post-xxxの閉じdivの後に書けば良いと思うんですが、どのphpファイルかは調べるのが面倒なので、各々調べて下さい(笑)
      たぶんentry-body.phpの最後あたりじゃなかろうかと思います。

      phpファイルを修正するのがアレな人はjQueryでもイケます。

      jQuery(function($){
        $(function(){
          $("[id^=post-]").find("hr").remove();
          $("[id^=post-]").each(function(){
            $(this).not(":nth-of-type(1)").before("<hr class='sep' />")
          });
        });
      });

      子テーマjavascript.jsに追記します。これでhrが#post-xxxの後に入るので、cssで.sepを修正すれば完成です。

      Attachments:
    • #31417
      GIGI
      ゲスト

      Hidekichiさん

      詳しい解説と解決方法を教えて下さりありがとうございます。
      本当に勉強になります!

      まだまだ初心者なので,ぜひこれからも宜しくお願いします<(_ _)>

      GIGI

8件の返信スレッドを表示中
  • トピック「全文表示の投稿ページの記事と記事の間隔を小さくしたい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)