Twenty Ten 1.1で、枠を付けたい
-
こんにちは。よろしくお願いします。
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
などに付け加えて、希望を叶えるように出来ないでしょうか?
どうか、お願い申しあげます。
-
スイマセン、追加させて頂きます。
HTMLソースで例えますと、
<h2 class=”entry-title”>から
<!– .entry-content –>の手前ぐらいまでを枠で囲みたいです。
厚かましくてスイマセン。よろしくお願いします。こんにちは、
twentytenのstyle.cssの末尾に以下の内容をコピペしてみてください。
.hentryというクラスは、テンプレートを探しても出てきません(post_class()という関数が、生成しています)が、WEBに表示したときのhtmlソースには見えます。
ひとつの投稿を一くくりにしているので、テンプレートを改変しなくても、スタイルだけで変更ができますけど、どうですか?
.hentry{ border:1px solid #000; }
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;
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
-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内の何処かへフォルダ作成しファイルアップ(ファイル保存)して、
パスを指定(これが正確には不明です)したらいいのでしょうか?スイマセンが、お願い申し上げます。
スイマセン、確認ミスで、
無駄な記述(一番上の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さんしだいでーす
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/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/
では、これを最後のお返事とさせていただきます。
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つ別途に、このテーマで質問させて頂こうと考えております。
ご面倒ではありましょうが、お構い無ければ、お教えください。
今後ともどうかよろしくお願い申し上げます。
- トピック「Twenty Ten 1.1で、枠を付けたい」には新たに返信することはできません。