--
--/--
--:--
スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
3p1-5

Related Posts Plugin for WordPress, Blogger...
3p1-5
2013
10/17
00:17
ブログカスタマイズ
CM:2
TB:0

こんにちはっ✩

検索結果は、一般的にはテキストで一覧を表示されますよね。

画像付きで表示できないかなぁと思い、
hatena chips様を参考にしながら作ってみましたヽ(・∀・)ノ


ソースコード





このダグは、検索した記事に掲載されている一番最初の画像が、
サムネイルとして表示されるというものです。


しかし、記事に画像が貼られていても
必ずサムネイルとして表示してくれるわけでもなさそうです・゜・(ノД`)・゜・


なので「画像があっても表示してくれない」&「画像が記事にない場合の対策」として
背景画像に「no-image」という画像を設定して表示させるようにしました。

ソースコード

これなら、画像部分が真っ白になっていても違和感無いですね(*゚▽゚*)








ありのごとくあつまりてさんのサイトを参考にして
検索結果0場合のメッセージも表示するようにしました。

ソースコード






↓いろいろ試行錯誤した完成体がコレです。
 ちなみに、ダブルクリックで選択できます✩

【HTML部分】
<!--search_area-->
<div class="content_search">
<div class="s_e">
<div class="s_t">
<div class="s_t2">
<p class="sub_header_search"><%template_search_entry> : <%sub_title></p>
<ul class="list_body_search1">
<!---------検索結果0の場合に表示するメッセージここから--------------->
<div class="none block<!--topentry--><%topentry_no><!--/topentry-->">
<BR>
申し訳ありません。<BR>
この用語を含む記事は見つかりませんでした。<BR>
用語を略称ではなく、正式名称で入力して頂くと記事が見つかる場合があります。<BR>
<BR>
<BR>
【例】「なのは」⇒「魔法少女リリカルなのは」<BR>
<BR>
<BR>
</div>
<!---------検索結果0の場合に表示するメッセージここまで--------------->
<!--topentry-->
<div class="entry_image"><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_image_w300></a></div>
<li>
Date : <%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_hour>:<%topentry_minute>)<BR>
Category : <a href="<%topentry_category_link>" title="<%template_view_category>"><%topentry_category></a><BR>
Title : <a href="<%topentry_link>" title="<%topentry_discription>"><%topentry_title></a>
</li>
<!--/topentry-->
</ul>
</div>
</div>
</div>
</div>
<!--/content_search-->
<!--/search_area-->






【CSS部分】

.s_t {
	background-image:url(検索結果の上の背景画像URL);
	background-repeat:no-repeat;
	background-position:0 top;
	margin:0px;
	padding:0px;
}

.s_e {
	background-image:url(検索結果の中の背景画像URL);
	background-repeat: repeat-y;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.s_t2 {
	background-image:url(検索結果の下の背景画像URL);
	background-repeat:no-repeat;
	background-position:0 bottom;
	margin:0px;
	padding: 0px 0px 2px 0px;
}

.content_search {
	margin: 30px 0px 20px 20px;
	padding: 0px 0px 0px 0px;
	text-align: left;
}

.sub_header_search {
	text-align: center;
        font-weight: 550;
        font-size: 12px;
	margin-bottom: 10px;
	padding: 10px 0px 20px 0px;
        color:#ff0066;
}

.entry_image { 
	float: left; 
	margin: 0px 13px 0px 0px;
} 

.list_body_search1 {
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 10px;
}

.list_body_search1 li {
	background-image:url(背景画像URL);
	background-repeat:no-repeat;
	background-position:0 0;
        width: 555px;
        text-align: right;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	margin: 10px 0px 10px 0px;
	padding: 0px 0px 160px 0px;
}

/*検索結果に記事がある場合・無い場合*/
.none {
	display:none;
}

.block {
	display:block;
} 





このタグは、paddingborderを使用しているため、
IEではレイアウト崩れしてしまいました。。。。。。Σ(゚д゚lll)
sleipnir、Chrome、Opera、Firefox、Safariでは大丈夫でした。


なので、IE対策のために以下のmetaタグを<head>~</head>の間に入れます。


せきらら白書~備忘録~様より
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">


これで、IEのレイアウト崩れ対策ができました✩





画像の大きさ(width・height)、余白(paddin・gmargin)などは調節して下さい。
素人が見よう見真似で作ったので、おかしな箇所があるかもしれません;;ヽ(;▽;)ノ


何かあっても責任はとれませんので、
必ずバックアップをとってから試してみてくださいね┌(┌^o^)┐


3p1-5
*関連記事*

Related Posts Plugin for WordPress, Blogger...
3p1-5

゜・:*:.☆,。・:*:・゜’☆ Track Back ☆..:*:・゜’☆,。・:*:・゜☆・:*:・゜

゜・:*:.☆,。・:*:・゜’☆ Comment ☆..:*:・゜’☆,。・:*:・゜☆・:*:・゜

へーこんなのもできるのかぁ
下手に弄るとわけわかめだから勉強してくださる方がいるととても参考になります

>>恭也さん


返信遅くてすみません;;
私も下手に触ってますww
その度に、ワケワカメ状態になります(^^;)

同じタグでも、ブラウザによって解釈が違っていたり、対応していなかったりするので、どの環境で見ても同じように見えるようにするのが難しいです;;
いろんなサイト様を参考にして、試行錯誤しながらやってます☆

゜・:*:.☆,。・:*:・゜’☆ コメントの投稿 ☆..:*:・゜’☆,。・:*:・゜☆・:*:・゜

非公開コメント


≪ ハルにゃんのおねだり

【FC2】カテゴリーを画像で!カテゴリ最新記事カスタマイズ!! ≫


このブログは主に、
コスプレ、同人、コミケ等、オタク
について書いています❤


❤ 本家サイト ❤
 [ strawberry-milk ] CHERRYのサイトに飛びます!



 [ コミケ webカタログ ]
 [ コミケ コスプレコミュニティ ]
 [ コスプレイヤーズアーカイブ ]
 [ Cure World Cosplay ]  [ facebook ]  [ mixi ]
*Ranking*
ランキングに参加しています。
よければ ポチッ とお願いします❤

 [ 人気Blog Ranking ]  [ ブログランキング・にほんブログ村へ ]
 [ FC2ブログランキング ]  [ ブログランキング ドット ネット ]
 [ ブログ王 ランキング ]  [ ブログの殿堂 ]
*profile*
素材 バナー CHERRY コスプレ
名前 : CHERRY
性別 : 女性
血液型 : A型
生年月日 : 04月 07日
現住所 : 愛知県
出身地 : 静岡県
自己紹介 :
コスプレイヤーのCHERRYです。アニメやコスプレ、同人活動などについて描いています☆
AJ、栄コスフェス、コスサミ、コミケに出没しますw
*Tweets Wind*
*pixiv*
*Archives*
 
*Search*
*Recent Entries*

Powered by FC2ブログ

FC2Ad

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。