サポート » テーマ » Twenty Ten 1.1で、枠を付けたい

  • 解決済 itiyama

    (@itiyama)


    こんにちは。よろしくお願いします。
    2010年版の WordPress テーマ「Twenty Ten 1.1」を使っています。
    バージョンは、3.02です。

    投稿する時に、投稿文章を
    <div style=”margin: 10px 0 0 0;padding: 5px;border: solid 1px #cacaca”></div>
    で挟むと、枠が表現出来ますが、
    これを
    投稿文章だけでなく、投稿タイトルを含めて、一つの枠に表示させたいのですが、
    分かりません。

    loop.php、functions.php、single.php、page.php
    などに付け加えて、希望を叶えるように出来ないでしょうか?
    どうか、お願い申しあげます。

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • トピック投稿者 itiyama

    (@itiyama)

    スイマセン、追加させて頂きます。
    HTMLソースで例えますと、
    <h2 class=”entry-title”>から
    <!– .entry-content –>の手前ぐらいまでを枠で囲みたいです。
    厚かましくてスイマセン。よろしくお願いします。

    こんにちは、

    twentytenのstyle.cssの末尾に以下の内容をコピペしてみてください。

    .hentryというクラスは、テンプレートを探しても出てきません(post_class()という関数が、生成しています)が、WEBに表示したときのhtmlソースには見えます。

    ひとつの投稿を一くくりにしているので、テンプレートを改変しなくても、スタイルだけで変更ができますけど、どうですか?

    .hentry{
    	border:1px solid #000;
    }
    トピック投稿者 itiyama

    (@itiyama)

    nobitaさん、こんにちは。
    ありがとうございました。できました~。
    素晴らしい!!です。こんな裏技があるなんて・・。
    予想も出来ませんでした。本当にありがとうございます。

    お構い無ければ、以下のことをお教えください。
    一つ一つの投稿記事の間隔を空けようとして、
    .hentry{
    }
    の箇所に、
    margin: 20px 0 0 0;padding: 8px;
    とか入れました。

    そうすると、記事の一番上の余白も20px出来てしまいます。
    margin: 0 20px 0 0;padding: 8px;
    とかしたら、全然、上手く行かないです。

    style.cssの中をmarginで探しましたし、
    #wrapper、#container もやってみましたが、
    思ったようになりませんでした。

    どうかご指導ください。

    下にあければいいんじゃない?

    margin-bottom: 20px;

    トピック投稿者 itiyama

    (@itiyama)

    kvexさん、こんにちは。
    ありがとうございました。ご指摘の通りでした。
    ホンマでした。解決しました。スイマセン、もう一つ、
    お願いしたいのです。恐縮です。

    この枠なんですが、
    border:4px solid #4169e1;
    と言うことでやってますけど、この枠を角丸にすることは、
    難しいのでしょうか?

    角丸テーブルをcssで。と言うことで、
    http://shinshu.fm/MHz/43.55/archives/0000057758.html
    http://ais1.biz/faq/index.php?action=artikel&cat=17&id=65&artlang=ja
    などを参考にさせていただき、見ているのですが、
    この様なものを適用できるんでしょうか?

    スイマセン、どうぞお願いします。

    こんにちは

    角丸は、古くから、いろいろなやり方が考案されています

    角丸を実現したいと情報を探し回ると、迷うと思います。

    もっとも、簡単に実現できる方法
    スタイルに指定を追加

    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;

    しかし、IEでは角丸できません

    そういう場合は、jQuery border-radius というキーワードで角丸情報を探すといいかも

    角丸実現のために、装飾用のタグを追加する方法は、現在でもいろいろ使われていますが、
    htmlとしては、推奨されない方法です。

    ただ、そういう角丸を探すときの キーワードは、sliding door css 等で調べてください。

    参考:http://d.hatena.ne.jp/tenman/20101124/p1

    トピック投稿者 itiyama

    (@itiyama)

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;

    nobitaさん、こんにちは。
    ありがとうございます。確かに、お教えの記述で、
    OperaとFirefoxで角丸が出てきました。

    分からないなりに、border-radiusのIE対応と言うことで検索しました。
    http://www.nutspress.com/2010/07/09/border-radius-and-box-shadow/
    によりますと、

    角丸コーナー用のスクリプトをIEのみに読み込ませるため、[if]を使うと言うことですが、
    <!–[if IE]>
    <script src=”<?php bloginfo(‘stylesheet_directory’); ?>/scripts/jquery.corner.js” type=”text/javascript”></script>
    <![endif]–>
    をヘッダー(header.php)の何処かへ書き込んで、

    jQuery Corner Demo
    http://www.malsup.com/jquery/corner/
    にある”jquery.corner.js”
    https://github.com/malsup/corner/raw/master/jquery.corner.js?v2.09
    をWordPress内の何処かへフォルダ作成しファイルアップ(ファイル保存)して、
    パスを指定(これが正確には不明です)したらいいのでしょうか?

    スイマセンが、お願い申し上げます。

    トピック投稿者 itiyama

    (@itiyama)

    スイマセン、確認ミスで、
    無駄な記述(一番上の6行ほど)を投稿しました。スイマセン。

    こんにちは

    jQuery Corner Demoにあるコードをちょっと借りて、実現することを確認しましょう

    <head>
    ....
    ....
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script type="text/javascript">
        // test auto-ready logic - call corner before DOM is ready
        $('.hentry').corner();
    
    </script>
    </head>

    実現できたことが確認できたら

    これで動作するなら、ファイルをどこに置いたら動作するのか、わかりますよね。

    次に、<!--[if IE]>とは、なんぞやを考えてみてください

    次に、WordPress流のやり方を学んでください。

    javascriptファイルをヘッダーに書き込む仕組みがあります。
    そのためには、PHPというスクリプトを勉強する必要があります。
    corner.jsは、jQueryと一緒に使って始めて動作をします。
    そのような、ファイルを、jQueryと一緒にロードして頂戴とか書くのがWordPress流
    みたいです

    参考
    <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

    でも、ヘッダにスクリプトをコピペしても、動作するなら、どこまで深く潜ってみるかは、itiyamaさんしだいでーす

    トピック投稿者 itiyama

    (@itiyama)

    nobitaさん、こんにちは。お世話になっております。
    ありがとうございます。

    お教えのように、ヘッダに挿入しましたところ、
    IEでは、枠が全く表示できませんでした。スイマセン。
    私のスキル不足で、お教えを理解出来てないと思います。
    (OperaとFireFoxでは、角丸コーナーを表現出来てます)

    それで、javascriptの”jquery.min.js”の行を削除してみると、
    IEでは、普通の枠になりました。(角丸になっていない)
    (こちらでもOperaとFirefoxさんは頑張ってくれています。)

    仰るように、corner.jsとjQueryと一緒に使わないと角丸にならないようです。
    しかし、私の技量では、これ以上は、テストできないです。
    そうではありますが、nobitaさんにお教え願ったお陰をもちまして、
    OperaとFifefoxで角丸コーナーを表現出来ておりますので、
    満足いたしました。もう少し、検索してトライしてみますが、
    PHPを勉強するのは、難しいですので、諦めようかなとも考えます。
    CGIのPerlが簡単だと聞いて、文献をしばらく読みましたが、
    断念した経験があるので、PHPも無理だと思います。
    長くなりました。スイマセン。もう少し粘ってから、解決済みにします。

    本当にありがとうございました。失礼します。

    こんにちは

    IEでは、枠が全く表示できませんでした

    うそつきnobitaですね、IEでは、背景だけで、ボーダーが表示されないみたいですね
    ごめんなさい

    border-radiusは、

    IE9からは、実装されるみたいなのですが、、、

    蛇足ですが、画像による角丸表現を含んだスタイルシートのフレームワークもあります。
    ちょっと面倒かもしれませんが、参考まで
    http://www.tenman.info/study/oocss/

    トピック投稿者 itiyama

    (@itiyama)

    nobitaさん、こんにちは。お世話になっております。

    お教え頂いたページ
    http://www.tenman.info/study/oocss/
    ですが、私には難しいと言いますか、
    参考になる箇所も分かりません。<(_ _)>
    角丸のIE対応については、見送ることにします。ありがとうございました。

    ●最後にしますので、もう一つだけお願いします。
    .hentryというクラスですが、スタイルシートに既存してました。
    検索して分かりました。

    style.cssの526行目当たりに、

    .hentry {
    	margin: 0 0 48px 0;
    }
    .home .sticky {
    	background: #f2f7fc;
    	border-top: 4px solid #000;
    	margin-left: -20px;
    	margin-right: -20px;
    	padding: 18px 20px;
    }
    .single .hentry {
    	margin: 0 0 36px 0;
    }

    と、720行目当たりに、

    .home .hentry.category-asides {
    	padding: 0;
    }

    がありますところへ、

    nobitaさんにお教え頂いたので、私が、

    .hentry{
    	margin-bottom: 20px;padding: 8px;
    	border:4px solid #4169e1;
    }

    と、書いています。

    これは、バッティングしないのでしょうか?
    ブログを使用していて不具合は感じないのですが、
    少々不安です。纏め方が分からないので、ご指導願えませんでしょうか?
    ご多忙の折、大変申し訳ありませんが、どうぞよろしくお願いします。

    こんにちは、

    .hentryというセレクタは、特に一箇所に記述しなければならにという規則はありません。

    それぞれ意味が違います。お示しいただいたコードを上から順に、

    .hentry{ /* .hentryにスタイルを指定する*/
    .single .hentry{/*そのうち、bodyのクラス single があるときの.hentryのスタイル*/

    .home .hentry.category-asides/*homeは、トップページなどのときに現れるbodyクラスで、かつ、.category-asidesというクラスと複数指定されている場合のスタイル*/

    という意味です。

    したがって、itiyamaさんが、どの場面でスタイルを適用したいのかによって、記述は変わります。

    例えば、トップページ5件表示のときにスタイルを指定したいのであれば、

    .home .hentry{
    	margin-bottom: 20px;padding: 8px;
    	border:4px solid #4169e1;
    }
    
    .home .hentry.category-asides {
    	padding: 0;
    }

    という記述になると思います。

    同じ指定が、後ろの行にあるときには、上書きされます。

    角丸のIE対応については、見送ることにします

    私も、なんか方法ないかなと考えていて、

    IEでもボーダーを引けるお遊びサンプルを作りました。
    実用には、ちょっとですが

    http://www.tenman.info/study/css/round/

    では、これを最後のお返事とさせていただきます。

    トピック投稿者 itiyama

    (@itiyama)

    nobitaさん、こんにちは。
    .hentryというセレクタについて、
    ご丁寧なご説明をありがとうございます。

    後ろに書いてあるのが上書きされる。と言うことが分かりましたし、
    このままでも問題ないと言うことをお教え頂いたので、
    現状のままでやっていきます。ありがとうございました。

    http://www.tenman.info/study/css/round/
    を拝見しました。IEでも出来るんですね。
    ではありますが、私では、
    style.cssに.cornerと、.contentを書き込むぐらいしか分かりません。

    又、<!–[if IE ]>~<![endif]–>や、
    v\:* { behavior: url(#default#vml);}
    o\:* { behavior: url(#default#vml);}
    もphpで書込方が分からず、使えませんので、

    角丸のIE対応については、今後の課題としたままで、
    やっていこうと思います。本当に、ご丁寧にご指導頂きありがとうございました。
    私の技量で何ができて何ができないのかが、分からないのが正直なところです。

    あと、1~2つ別途に、このテーマで質問させて頂こうと考えております。
    ご面倒ではありましょうが、お構い無ければ、お教えください。
    今後ともどうかよろしくお願い申し上げます。

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • トピック「Twenty Ten 1.1で、枠を付けたい」には新たに返信することはできません。