サポート » テーマ » RaindropsテーマでのBLOGパーツ

  • 解決済 susumu0607

    (@susumu0607)


    Raindropsを使わさせて頂いております。
    BlozooやACR WEBの逆アクセスなどのBLOGパーツを使用すると
    Raindropsテーマではパーツの表幅が全部均等になってしまいます。
    均等にならない方法などはあるのでしょうか?

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは

    Raindropsテーマではパーツの表幅が全部均等になってしまいます。
    均等にならない方法などはあるのでしょうか?

    どのような事をしたいのか、理解できないんですが 

    WEBサイトを教えていただけると話が早いような気がしますが、可能ですか?

    http://idolget.wpblog.jp/
    こんな感じで別のテーマなら各々セル幅違うのにRaindropsのテーマにしたら
    各セルが均等に^^;

    質問の意味が分かりました、お手数かけました。

    Raindropsテーマは、デフォルトでセルが均等配置される設定が行われています。

    これは、過去のFirefoxのバグに由来する問題に関係した設定が主な原因でしたが、その設定の状態で、すでに多くのユーザーが利用しているため、均等配置を維持しています。

    この問題は、auto というクラスをtable要素に追加していただくことで解決できます

    例(提示サイトのテーブルでの例)

    <table border="0" bgcolor="#44AA44" cellspacing="1" class="acr_ranking_sys auto">

    Raindropsテーマの table 要素のCSSクラスの詳細は、

    http://www.tenman.info/wp3/manualraindrops/archives/662

    http://www.tenman.info/wp3/manualraindrops/archives/1798

    のあたりを参照していただくと良いと思います。

    セル内のテキスト位置を指定するクラスもあります。提示されたテーブルには、色も設定されているようでしたが、bgcolor属性等は、Raindropsテーマ投稿領域では反映しません。
    (これらの属性値による色指定は、一般にスタイルに移行しています)

    提示いただいたテーブルを、Raindrops風に指定しなおすと、以下のようになります。

    投稿本文

    <table border="0" cellspacing="1" class="acr_ranking_sys center auto">
    <tbody>
    	<tr class="row1">
    		<td colspan="3">
    			<span>人気ページランキング</span>
    		</td>
    	</tr>
    	<tr class="row2">
    		<td>-</td>
    		<td>ページ</td>
    		<td>-</td>
    	</tr>
    	<tr class="row3">
    		<td>PR</td>
    		<td class="left" colspan="2"><script type="text/javascript">ARATA_adspotId = 296;</script><script type="text/javascript" src="https://ad.ad-arata.com/static/embed.js"><!--//--></script><span id="ARATA_AD_1"><span id="MOredrefncs_ph_1" class="MOredrefncstx text_done"><a class="MOredrefncstx" target="_blank" href="https://ad.ad-arata.com/click?a=296&m=172&c=638&v=37&d=448446&s=3219&t=1452764795966&h=b2d200cf7f89044df99e1c181de7634a809a39a7">無料で英語が話せるようになる!</a></span></span></td>
    	</tr>
    	<tr class="row4">
    		<td>1</td>
    		<td class="left">
    			<a href="http://idolget.wpblog.jp/" target="_blank">http://idolget.wpblog.jp/</a>
    		</td>
    		<td>1</td>
    	</tr>
    	<tr class="row5">
    		<td>PR</td>
    		<td class="left" colspan="2">
    				<a href="http://rp.mcnt.jp/jump.php?http://cashing.zaitsu-labs.com/minnano/?jb=naisyo&r=jkkacr1601010200" target="_blank" class="external">3万円から借りたい!少額でも大丈夫!</a><img src="http://report2.ziyu.net/pvi.php?1601jp2102" style="display:none"/>
    		</td>
    	</tr>
    	<tr class="row6">
    		<td class="left" colspan="3">
    			<a href="http://pranking11.ziyu.net/edit.php?id=aoineko" class="external">Edit</a>
    			LastUpdate:01/14 16:44
    		</td>
    	</tr>
    	<tr class="row7">
    		<td colspan="3">-<a href="http://www.ziyu.net/" target="_blank" class="external">ACR WEB</a>-</td>
    	</tr>
    </tbody>
    </table>

    この投稿のカスタムCSS メタボックス

    .acr_ranking_sys .row1 td{
        background:#44AA44;
    }
    .acr_ranking_sys .row1 span{
        color:#fff;
        display:block;
    }
    .acr_ranking_sys .row6 td, .acr_ranking_sys .row4 td, .acr_ranking_sys .row2 td{
        background:#ccc;
        white-space: nowrap;
    }
    .acr_ranking_sys .row7 td, .acr_ranking_sys .row6 td, .acr_ranking_sys .row5 td, .acr_ranking_sys .row3 td{
        background:#999;
        white-space: nowrap;
    }
    .acr_ranking_sys {
        background:#44AA44;
    }
    .acr_ranking_sys td, .acr_ranking_sys a{
        color:#000;
    }

    (みやすくするため、trにクラスを割り当てましたが、nth-child()等を使えば、もっとシンプルに色設定が出来るかもしれません。未テスト)

    もし、常にセルの均等配置は行いたくない場合

    デフォルト設定を変更するには、

    管理画面 / 外観 / カスタマイズ の 高度な設定、 サイト全体のCSSに、

    table {
    table-layout:auto;
    }

    を指定していただくと、要望通りになると思います。
    (この項目でスタイルを設定していただいた場合は、
    チャイルドテーマを使用していなくても、Raindropsをアップデートしても、設定は維持されます)

    サイドバーのテキストウィジェットのテーブルの、前景色と背景色のコントラストの問題について

    背景色は、テーブル要素のスタイルが適用されているのに対して、前景色はRaindropsの色が適用される CSSの競合によって発生しています。

    サイト全体のCSSで、文字色、リンク色のスタイル指定を詳細度を上げて、行ってみてください。

    ご丁寧なご指導ありがとうございました^^

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「RaindropsテーマでのBLOGパーツ」には新たに返信することはできません。