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

上記の広告は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
スポンサーサイト
2013
10/15
01:39
ブログカスタマイズ
CM:0
TB:0

どうも!
こんにちはっ✩


ありのごとくあつまりてさんのサイトを参考にして
「カテゴリー」をテキスト表示から画像表示に変更してみました。


ソースコード



HTML内に記載する
<%category_name> (<%category_count>)」が不要だったので
その部分を削除しました。


しかし、
CSSに「list-style:none;」と、記述しているのに
以前使用していたリストアイコンが表示されていました。



削除した「<%category_name> (<%category_count>)」を
再度記述したら、この現象は治りました。



ちょっとイミフだったので
CSS内のリストアイコンのURLだけ削除して使用することにしました。







カテゴリ記事一覧のカスタマイズ



サイドバーのカテゴリをクリックした際に
本文記事の上に、カテゴリ記事一覧が表示されたら
便利だなぁと思い作りました。


こんな感じに、背景画像やアイコンをつけて可愛い感じにしてみました。
ソースコード



↓ちなみに、ダブルクリックで選択できます✩

【HTML部分】
<!--category_area-->
<div id="cm2" class="content2">
<TABLE cellpadding=0 cellspacing=0>
<TBODY>
<TR>
<TD height=64px style="background:url(タイトルの背景画像URL) no-repeat"><p class="sub_header2"><b>カテゴリ:<%sub_title> の最新記事一覧</b></p>
</TD>
</TR>
<TR>
<TD style="background:url(記事一覧の背景画像URL) repeat-y">
<ul class="entry_title">
<!--topentry-->
<li><img src="リストアイコンのURL" width="13" height="13" border="0"><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
<!--/topentry-->
</ul>
<p class="page_navi2" align="center">
<!--prevpage-->
<a href="<%prevpage_url>" title="前のページへ"> << *Back Page* </a>
<!--/prevpage-->
<img src="ページおくりのアイコン画像URL" width="21" height="27" border="0">
<!--nextpage-->
<a href="<%nextpage_url>" title="次のページへ"> *Next Page* >> </a>
<!--/nextpage-->
</p>
</TD>
</TR>
<TR>
<TD><img src=下部に表示させる画像のURL>
</TD>
</TR>
</TBODY>
</TABLE>
</div>
<!--/content2-->
<!--/category_area-->





【CSS部分】
.cm2 {
  font-family:'Comic Sans MS';
  font-weight:bold;padding-left:0px;
  text-align:center;
  height:54px;
}

.content2 {
  margin: 10px 0px 10px 10px;
  padding: 0px 0px 0px 0px;
  text-align: left;
}

.sub_header2 {
  text-align: center;
  margin-bottom: 10px;
  padding: 10px 0px 20px 0px;
         color:#ff0066;
}

.entry_title {
  background-image: url(背景画像のURL);
  line-height: 25px;
  background-repeat: no-repeat;
  background-position: right bottom;
  margin: 0px 10px 0px 0px;
  padding: 10px 0px 0px 20px;
}


/*ページナビゲーターの設定*/
.page_navi2 {
         padding: 0px 0px 0px 0px;
  margin: 20px 0px 5px 0px;
  text-align: center;
}


.page_navi2 li {
         display: block;
}



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


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


3p1-5
*関連記事*

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

こんにちはっ☆彡
ここんとこ、ブログをカスタマイズしておりました。

カスタマイズといっても、目立つようなカスタマイズはしていないですが(^^;)




記事の下部に表示される「関連記事」のリストマークが、
いつの間にか画像で表示されなくなっていたので、
その修正をかねて若干カスタマイズしました。






関連記事サムネイルウィジェットの導入


関連記事を画像サムネイルで表示してくれるウィジェット
LinkWithin」を導入してみました✩

うぇぶ小屋さんのサイトを参考にさせて頂きました!


LinkWithin
画像で表示してくれるので、テキストよりも内容が伝わりやすいです。

しかし、FC2に導入すると、
「関連記事」というよりも「最新記事」が表示されてしまうのが難点です(ノД`)・゜・







関連記事のリストマーク


「関連記事」のリストマークを画像にしている方は多いかと思いますが、

「滞在中の記事」と「それ以外の記事」とで
リストマークを別のものにするタグを記載したいと思います。


ソースコード
滞在中の記事アイコンは  、それ以外の記事アイコンは  で表示しています。



↓ちなみに、ダブルクリックで選択できます✩

【HTML部分】

*関連記事*





【CSS部分】


.relate_ul {
}


.relate_ul li {
	list-style-position: outside;
	margin-left: 15px;
}


.relate_dl {
	background: url(本文と関連記事の間の画像URL) no-repeat;
	margin: 10px 0px 10px 0px;
	border-top-width: px;
	border-right-width: px;
	border-bottom-width: px;
	border-left-width: px;
	border-top-style: ;
	border-right-style: ;
	border-bottom-style: ;
	border-left-style: ;
	padding: 1em 1em 0em;
}


.relate_dt {
	font-weight: bold;
	margin-bottom: 0.5em;
	padding: 10px 0px 2px 0px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
}


.relate_dd {
	margin: 0em 1em 1em;
}


.relate_pre {
	margin: 1em auto;
	padding: 0.5em;
	border: 1px solid;
	font-family: sans-serif;
	overflow: auto;
	width: 90%;
}


.relate_li {
        list-style-image: url(滞在中ではない記事のアイコン);
}


.relate_li_nolink {
         list-style-image: url(滞在中の記事のアイコン);
}





素人が見よう見真似で作ったので、おかしな箇所があるかもしれません;;ヽ(;▽;)ノ


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




3p1-5
*関連記事*

Related Posts Plugin for WordPress, Blogger...
3p1-5
2013
10/10
00:49
にゃんこ写真日記
CM:0
TB:0

ある日、ハルにゃんは困っていた・・・・・


20131010-1

20131010-2

20131010-3

20131010-4

20131010-5




椅子にかけてあった上着に、ハルにゃんの爪がひっかかってしまったようです。

動けず可哀想だったので、とってあげましたょ。



















20131010-6

何故か、どや顔のハルにゃんでしたww



3p1-5
*関連記事*

Related Posts Plugin for WordPress, Blogger...
3p1-5
2013
10/09
00:24
にゃんこ写真日記
CM:0
TB:0

今日は、眠気と格闘しているハルにゃんのお話です。


20131009-1

20131009-2

20131009-3

20131009-4

20131009-5

20131009-6

20131009-7

20131009-8

20131009-9


やはり眠気には勝てにゃいハルにゃんでした。

目の前に虫やゴキブリが現れても、退治してくれないのは悲しいですにゃ。

いつか退治してほしいですぞ!ハルにゃんっ!!



3p1-5
*関連記事*

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

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


❤ 本家サイト ❤
 [ 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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。