人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

wordpress3.5に関して質問です。
http://q.hatena.ne.jp/1362636593
先日質問させて頂いた内容と基本的に同じなのですが質問内容の詳細が欠けていました。
style.cssに下記の記述を追加する事によりトップページの表示の問題は解決しました。
ーーーーーーーーーーーーーーーーーー
.entry-content img {
float: left;
padding-right: 2em;
}

.entry-content .entry-meta {
clear: both;
}

ーーーーーーーーーーーーーーーーーーーーーーーーー

上記の設定を加えると実際の投稿ページでも画像が左、テキスト部分が右になってしまいます。
実際の投稿されたページは

http://taisy0.com/2013/03/08/14740.html

こんな感じで表させたい。具体的には

テキスト

画像(中央揃え)

テキスト

こんな順番で表示させたいです。
どのような作業が必要か教えて頂ければと思います。


1362710022
●拡大する

●質問者: mkusume
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

補足です。
対象としているサイトのアドレスは
http://dca-labo.info/demo8/
です。


1 ● a-kuma3
●140ポイント

style.cssを以下のような感じにすれば行けると思います。

body.home .entry-content img { /* body.home を追加 */
 float: left;
 padding-right: 4em;
}

body.home .entry-content .entry-meta { /* body.home を追加 */
 clear: both;
}

/* 個別ページ用のスタイル */
body.single-post .entry-content img {
 display: block;
 margin-right: auto;
 margin-left: auto;
}

トップページと、個別のページでは body 要素についているクラスが違っているので、トップページ用には、現在指定しているスタイルのセレクタに body.home のしばりを追加しました。

個別の投稿ページでのスタイル指定は、body の .single-post をセレクタに入れたところで、IMG を block 要素にして、左右のマージンを auto にしています。


mkusumeさんのコメント
回答ありがとうございます。 上記修正しましたが思ったように変わりません。 http://dca-labo.info/demo8/css/style.css 上記に実際に修正したスタイルシートをアップしました。 お手数おかけしますが確認後ご指導頂ければと思います。

a-kuma3さんのコメント
>> 上記修正しましたが思ったように変わりません。 << ぼくのところでは、こんな風に見えてますが、「思ったように」との違いがよく分かりません。 [http://dca-labo.info/demo8/:title=トップページ] f:id:a-kuma3:20130308222731j:image [http://dca-labo.info/demo8/?p=106:title=個別ページ] f:id:a-kuma3:20130308222732j:image

mkusumeさんのコメント
説明不足で大変申し訳ありません。 見てほしいページ(投稿)は テスト投稿 http://dca-labo.info/demo8/?p=151 テスト投稿2 http://dca-labo.info/demo8/?p=168 に関してです。 上記に関してそれぞれがトップページでは 画像が左、文章が右 にきてほしいです。 現状そうなっていないので再度お伺いしています。

a-kuma3さんのコメント
>> 上記に関してそれぞれがトップページでは 画像が左、文章が右 にきてほしいです。 << 意図してることは分かりました。 HTML のスタイルの解釈は、書いている順番で行われるので、ある文章の後にくる(かどうか分からない)画像のサイズを予測して文章を右にずらす、ということはできません。 意図通りにしたければ、画像を文章よりも先に書くしかないです。

mkusumeさんのコメント
早速の回答ありがとうございます。 現在色々とテンプレートを修正しているのは http://taisy0.com/ このサイトに近いレイアウトを実現したい為です。 上記サイトの個別ページですが http://taisy0.com/2013/03/08/14763.html 上記ページは画像の前に文章がきています。 あとサイト内検索をした時の検索結果を表示した際に画像が左、文章が右に きています。 http://dca-labo.info/demo8/?s=%E3%82%B8%E3%83%9F%E3%83%98%E3%83%B3&submit=%E6%A4%9C%E7%B4%A2 「ジミヘン」というキーワードで検索した結果です。 テスト投稿とテスト投稿2は画像の前に文章がきています。 これは何か例外的な処置をしているのでしょうか。 大変お手数おかけしますがご指導頂ければと思います。

a-kuma3さんのコメント
検索ページのひとつの記事の部分の HTML を抜き出したものがこちらです。 >|html| <article id="post-168" class="post-168 post type-post status-publish format-standard hentry category-1"> <header class="entry-header"> (省略) </header><!-- .entry-header --> <div class="entry-summary"> <a href="http://dca-labo.info/demo8/?p=168"><img width="150" height="150" src="http://dca-labo.info/demo8/wp-content/uploads/2013/03/abc.fw_-150x150.png" class="alignleft wp-post-image tfe" alt="" title="" /></a><p>選曲、演奏ともに小細工がなくて良いです。Char流ジミヘン解釈がそのままストレートに出ています。「Purple Haze」や「Manic Depression」はライブでは昔からお馴染みの曲ですが、その他の曲は初めて聴き &hellip; <a href="http://dca-labo.info/demo8/?p=168">続きを読む <span class="meta-nav">&rarr;</span></a></p> </div><!-- .entry-summary --> <footer class="entry-meta"> (省略) </footer><!-- .entry-meta --> </article><!-- #post-168 --> ||< 検索ページだけ、画像が先に来て、記事が後に来ています。 画像 (IMG タグ) には、alignleft クラスが指定されており、これに float: left; というスタイルが style.css で指定されているので、画像の次に来ている文章が画像の右側に配置されています。 TwentyEleven の [http://themes.svn.wordpress.org/twentyeleven/1.5/content.php:title=content.php] には、以下のように書かれています。 >|php| <?php if ( is_search() ) : // Only display Excerpts for Search ?> <div class="entry-summary"> <?php the_excerpt(); ?> </div><!-- .entry-summary --> <?php else : ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <?php endif; ?> ||< is_search() が真、つまり検索ページのときだけ、記事の記述方法を変えています。 トップページでも、記述を変えたければ is_home() で判定すれば良いのかな? http://wpdocs.sourceforge.jp/Conditional_Tags#The_Main_Page >|php| <?php if ( is_search() || is_home() ) : // Only display Excerpts for Search or Home ?> <div class="entry-summary"> <?php the_excerpt(); ?> </div><!-- .entry-summary --> <?php else : ?> ||< # ぼくの手にはちょっと余るので、詳しそうな方にリクエストを出しておきます (^^ゞ

mkusumeさんのコメント
こんな深夜までご対応真にありがとうございます。上記確認してみます。

rouge_2008さんのコメント
「抜粋」の欄に入力したテキストを「the_exerpt()」で出力しているのではないかと思いますが、確認はしていないです・・・(^^; (※個別投稿ページでは画像の後ろにさらに「the_content()」で本文全体を出力) http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_excerpt

mkusumeさんのコメント
ありがとうございます。 確認します
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ