記事上あたりのダグリスト?のレイアウト崩れ

Simplicityの特徴 フォーラム Simplicityについての質問 記事上あたりのダグリスト?のレイアウト崩れ

このトピックには9件の返信が含まれ、1人の参加者がいます。1 週、 3 日前 まママ さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #60731

    まママ

    いつも拝見させていただいて参考にしています。

    この度、どうしてもわからない箇所がありまして質問させていただきます。

    全くCSSに知識のない初心者なのですが
    サイトの記事のページに行きますと記事上のタグリスト?のようなフォルダマークのところが
    やたら改行されしまってレイアウトが崩れています。。。

    これはなぜなのか全くわからず、どなたか助けていただきたくお願い致します。

    サイトは

    まだブログを始めたばかりの初心者です。。。どうぞよろしくお願いいたします。

  • #60732

    Akira

    原因は、子テーマの style.css の下記の指定です。

    a {
      width: 98%;
      height: auto;
      margin: 36px 0;
      font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
      line-height: 1.5;
      word-wrap: break-word;
      box-sizing: border-box;
      display: block;
    }

    このうち、display: block; の指定で、そのような表示になっています。

    対策は 2 つあります。

    1 つ目は、display: block; を削除するもの。

    2 つ目は、下記の CSS を子テーマの style.css の最後に追加するものです。

    .post-meta a,
    .credit a {
      display: inline;
    }

    1 つ目の対策は、現在のサイドバーの表示が若干変わります。

    2 つ目の対策は、現在の表示と同じで、おかしくなった部分のみを修正しています(サイトの 1 番下のクレジット表記も同様におかしくなっています)。

  • #60733

    まママ

    ご丁寧にありがとうございます。

    両方実践してみましたところタグリストのところは直りました!!

    本当にありがとうございます!

    が、下の方のレイアウトの崩れが気になりまして、こちらも直したいのですが
    どうしたらいいのでしょうか?

    シェアする、より下の部分になります。

    たびたび申し訳ありませんがよろしくお願いいたします。

  • #60734

    Akira

    Twitter の部分がズレてますね。

    a タグへの CSS の指定のうち、margin: 36px 0; と box-sizing: border-box; が原因でズレています。

    現在は、子テーマの style.css でこのように指定されています。

    a {
      width: 98%;
      height: auto;
      margin: 36px 0;
      font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
      line-height: 1.5;
      word-wrap: break-word;
      box-sizing: border-box;
    }

    どのような理由で指定されているのか分からないので何とも言えませんが、下記の指定だけで十分な気はします。

    a {
      font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
      line-height: 1.5;
    }

    また、最新記事の「ランタンスタンド☆」のスノーピークの商品リンク部分が、ズレているように思えます。

    下記の指定を追加されると、商品リンクの下の文章のズレが直ります。

    .booklink-footer {
      clear: both;
    }
  • #60735

    まママ

    ありがとうございます!

    もう何もかも手探りで調べたコードをとにかく貼り付けてみては消しての繰り返しで
    不要な部分がいくつかあるかもしれません。。。

    今また直してみましたが、この楽天、アマゾンの枠が一つだけ二重になってしまうのはなぜなのかと
    あと急に今までエンターを押すだけで改行できていたのがブログ下の部分になると
    改行されず。

    なぜ急になってしまったのがわからず。。。。

    何から何までわからずで本当に申し訳ありませんがお助けいただけたらと思います、、、

  • #60736

    Akira

    楽天、アマゾンの枠が一つだけ二重になってしまうのはなぜなのか

    2 つの変更で修正できます。

    まず、カスタム CSS にお書きになった CSS の中から、下記の CSS を探します。

    .shoplinkrakuten,
    .shoplinkjalan,
    .shoplinkjtb,
    .shoplinkrurubu {
      float: left;
      width: 40%;
      text-align: center;
      margin: 17px 10px 0;
      padding: 5px 0;
      border: 1px solid #ccc;
      border-radius: 8px;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
      background: -moz-linear-gradient(top,#FFF 0%,#EEE);
      background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
    }

    この中から、border: 1px solid #ccc; を削除します。

    次に、子テーマの style.css から、下記の CSS を探します。

    .kaerebalink-link1 div a,
    .booklink-link2 div a,
    .tomarebalink-link1 div a {
      border-width: 2px;
      border-style: solid;
      font-size: 90%;
      font-weight: bold;
      border-radius: 5px;
      padding: 0.7em 0.3em;
      width: 100%;
      text-align: center;
      display: block;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    ここに、box-sizing: border-box; を追加します。

    今までエンターを押すだけで改行できていたのがブログ下の部分になると改行されず

    サイト上部では文章が p タグで囲まれていますが、商品リンク以降は文章が div タグで囲まれています。

    おそらく、これが原因ですが、なぜこのようになるのかが分かりません。

    「投稿の編集」のテキストエディタで、商品リンク以降の HTML を確認されるしかないような気がします。

    または、お使いのプラグインが悪さをしているのかもしれません。

  • #60737

    まママ

    ありがとうございます!

    完璧に直りました!感激です!!基本知識もなく全くお手上げなところ
    本当に助かりました。。。

    改行の件はやはり地道に直すしかないのですね。。。
    頑張ります!こちらも本当にありがとうございました。

    あと最後1点だけ質問があるのですが
    サイドバーのカテゴリの欄がランダムに表示されているのが気になり、
    これを整理してメインメニューのように表示するのは可能なのでしょうか?

    なんども質問を重ねてしまい、申し訳ありません。。。
    どうぞよろしくお願いいたします。

  • #60738

    Akira

    カテゴリーを任意の順番にするには、2 つの方法があります。

    1 つが、プラグインの Category Order and Taxonomy Terms Order を使うものです。

    ドラッグ & ドロップで、簡単に順番を変更できます。

    また、「カテゴリー」ウィジェットの「ドロップダウン表示」や「投稿数を表示」、「階層を表示」などでも、見た目を変更できます。

    もう 1 つが、「カスタム HTML 」ウィジェットに HTML をお書きになるものです。

    <ul>
      <li><a href=&quot;http://camp373.com/category/camp&quot;>キャンプ場</a></li>
      <li><a href=&quot;http://camp373.com/category/my-favorite/dod&quot;>DOD</a></li>
      <li><a href=&quot;http://camp373.com/category/camp/big-land-camp-ground&quot;>BIG LANDキャンプ場</a></li>
    </ul>
  • #60739

    Akira

    あら…。ダブルクォーテーションが変換されていないので、再度 HTML の貼り付け。

    <ul>
      <li><a href="http://camp373.com/category/camp">キャンプ場</a></li>
      <li><a href="http://camp373.com/category/my-favorite/dod">DOD</a></li>
      <li><a href="http://camp373.com/category/camp/big-land-camp-ground">BIG LANDキャンプ場</a></li>
    </ul>
  • #60742

    まママ

    やってみましたところ、
    カテゴリーのウィジットによって綺麗に表示させることができました!!

    この度は手取り足取り教えていただき本当にありがとうございました!

    また今後ともどうぞよろしくお願いいたします。

トピック「記事上あたりのダグリスト?のレイアウト崩れ」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)