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

上記の広告は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 ]
*Information*
◆同人誌販売中です◆

「Strawberry Milk Vol.11」
とらのあな様  BOOTH様
DLsite様  メロンブックスDL様
DMM様  とらのあな電子書籍様


「Strawberry Milk Vol.10」
同人堂様  BOOTH様
DLsite様  メロンブックスDL様
DMM様  とらのあな電子書籍様


「Strawberry Milk Vol.9」
同人堂様  BOOTH様
DLsite様  メロンブックスDL様
DMM様  とらのあな電子書籍様


「Strawberry Milk Vol.8.5」
BOOTH様  DLsite.com様 
DMM.com様  メロンブックスDL様


「Strawberry Milk Vol.8」
BOOTH様  DLsite.com様  DMM.com様  メロンブックスDL様
とらのあな電子書籍様


「Strawberry Milk Vol.7」
BOOTH様  DLsite.com様  DMM.com様  メロンブックスDL様 とらのあな電子書籍様


「Strawberry Milk Vol.6」
BOOTH様  DLsite.com様  DMM.com様  メロンブックスDL様 とらのあな電子書籍様


「Strawberry Milk Vol.5」
BOOTH様  DLsite.com様
DMM様  メロンブックスDL様
とらのあな電子書籍様


「Strawberry Milk Vol.4」
BOOTH様  DLsite.com様
DMM様  メロンブックスDL様
とらのあな電子書籍様


「Strawberry Milk Vol.3」
BOOTH様  DLsite.com様
DMM様  メロンブックスDL様
とらのあな電子書籍様


「Strawberry Milk Vol.2」
BOOTH様  DLsite.com様
DMM様  メロンブックスDL様
とらのあな電子書籍様


「Strawberry Milk Vol.1」
BOOTH様  DLsite.com様
DMM様  メロンブックスDL様
とらのあな電子書籍様

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