Google検索をFC2ブログに付けてみた♪

お友達の「yozoの気が向いたと記2.0」のyozoさんの
Google検索を設置するを見て、うちのブログにも
Google検索窓をつけてみました♪('-'*)エヘ

設置の仕方はyozoさんの記事に詳しく書かれてありますので
そちらの記事を参考にしてください。
ブログのアドレス部分を変更しただけでそのまま使わせていただきました。
本当に分かりやすかったです。yozoさん、ありがとうございます。ペコリ(o_ _)ｏ))

Google検索をなぜつけたかというと、
２つ以上のキーワードで検索出来るからなのです。
AND検索、OR検索など使いこなせれば便利だよね～♪
こちらはコメント欄なども範囲に入るようなので便利かも♪
ただ、はっきりとワードが分かっている場合はもとの検索窓の方が
分かりやすいかな？(○￣ ～ ￣○;)ウーン・・・
コメント部分を検索するのって私だけのような気もするし。
しばらくはこのまま２つ並べておくことにします。
右サイドの「記事検索♪」の部分にありますので
(折りたたみになっていますので「記事検索♪」の部分を
クリックして開いてくださいね♪)
何かお探しのものがありましたら使ってみてくださいね♪*'ー')ノ

yozoさん、ありがとうございました。(*- -)(*_ _)ペコリ

↓ぽちっとよろしくお願いします♪ペコリ(o_ _)ｏ))

カテゴリ別の記事一覧を表示!!

前回は月別の記事一覧を表示!!にて月別の記事一覧を出しましたが、
今回はカテゴリ別の記事一覧を表示できるようにカスタマイズしてみました。

今回のカスタマイズも「yozoの気が向いたと記2.0」のyozoさんの記事に
お世話になりました。
カテゴリの記事一覧を表示させる（FC2のみ）です。

基本的には前回とほぼ同じ感じのカスタマイズです。
(１)htmlに記述を加えます。
yozoさんのカテゴリの記事一覧を表示させる（FC2のみ）の
５の手順に従い、
<!--topentry-->の上に記述を加えました。

何点か変更させていただいたところは

<span style="color:#ff3300; font-size:15px;"><%sub_title> の記事一覧</span>

の部分を文字色、文字の大きさを変更するために

<span style="color:#ff2b60; font-size:15px; font-weight:bold;"><%sub_title> の記事一覧</span>

としました。赤字の部分が変更部分です。

また月別と見た目を合わせるため

<ul>
<!--topentry-->
<li><a href="<%topentry_link>" title="<%topentry_title>へ"><%topentry_year>/<% topentry_month>/<%topentry_day> <%topentry_title></a></li>
<!--/topentry-->
</ul>

を

<ul>
<!--topentry-->
<li><%topentry_year>/<%topentry_month>/<%topentry_day><a href="<%topentry_link>" title="<%topentry_title>へ"> <%topentry_title></a></li>
<!--/topentry-->
</ul>

と変更。
年月日の部分がリンクに入らないようにしました。

(２)cssの追加
yozoさんのcssを参考に次のようにしました。

/* カテゴリ一覧表示部分 */
.category_area {
margin: 0px 20px 15px 30px;
padding: 15px;
color: #444444;
font-size: 12px;
line-height: 140%;
background: #ffeaef;
border: 1px solid #e2a1a1;
}

こちらはほぼ前回の月別のCSSと同じです。

右の「記事検索♪」の部分にカテゴリが選べる部分がありますので
良かったら遊んでみてくださいね♪(=´ー｀)ノ
初めて来てくださる方たちは興味のあるカテゴリの記事を見てくださることも
多いでしょうし、記事の一覧が出て、記事が読みやすくなったのではと思います♪
yozoさん、分かりやすい記事をありがとうございました♪(o*。_。)oペコッ

↓応援よろしくお願いします。(*- -)(*_ _)ペコリ

月別の記事一覧を表示!!

「ブログを見てくださる方が、見やすいようにしたい!!」と思いながら
なかなか出来ておりませんでした。
また少しずつ頑張っていこうと思います♪
自分自身が過去記事を探しにくいというのもありますし。(笑)
まずは「yozoの気が向いたと記2.0」のyozoさんの
月別に記事のタイトル一覧を表示させる（FC2）を参考にさせていただきました。
このカスタマイズは右サイドバーにある月別アーカイブで、ある月を選ぶと
その月の記事タイトル一覧が出るというもの。
これがない場合、ずらずらと記事が並んでしまいますので
探すのに時間がかかってしまいます。
記事タイトルを見れば大体どんな記事か想像できますので
こうして一覧になる方が分かりやすいですよね♪

ということでyozoさんの記事を参考にカスタマイズしました。
私はyozoさんと同じ小粋空間さんのテンプレを使っているので
そのままソースを使用させていただきました♪
簡単に手順を書いておきます♪

(１)htmlに記述を加えます。
yozoさんの月別に記事のタイトル一覧を表示させる（FC2）の５，６の手順に従い、
<!--topentry-->の前と、<!-- 中央カラム終了 --> の後に
記述を加えました。

何点か変更させていただいたところは

<span style="color:#ff3300; font-size:15px;"><%now_year>年<%now_month>月の全記事一覧< /span>

の部分が「○年△月の全記事一覧」と一番上に書かれる部分なのですが、
この部分の文字色などを変更。

<span style="color:#ff2b60; font-size:15px; font-weight:bold;"><%now_year>年<%now_month>月の全記事一覧</span>

としました。赤字の部分が変更部分です。

また

<ul>
<!--topentry-->
<li>
<a href="<%topentry_link>#CommentHeader" title="<%topentry_title>へ"><%topentry_title> （<% topentry_month>/<%topentry_day>）</a>
</li>
<!--/topentry-->
</ul>

の部分ですが、日付、記事タイトルの順番に出るように下のように変更いたしました。

<ul>
<!--topentry-->
<li>
<%topentry_month>/<%topentry_day>
<a href="<%topentry_link>#CommentHeader" title="<%topentry_title>へ"><%topentry_title> </a>
</li>
<!--/topentry-->
</ul>

と変更です。

(２)cssの追加
yozoさんのcssを参考に次のようにしました。

/* 月別一覧表示部分*/
.date_area {
margin: 10px 230px 10px 30px;
padding: 15px;
color: #444444;
font-size: 12px;
line-height: 140%;
background: #ffeaef;
border: 1px solid #e2a1a1;
}

赤字が変更部分です。
・marginの上部分が右サイドバーと揃うように数値調整
・font-sizeを11pxから12pxに変更
・backgroundの部分で背景色を変更
・borderの部分で枠の線の色を変更　サイドバーの枠と色をそろえました。
また今度時間があるときに画像を配置したりしようと
思っています♪

これで少し記事を探しやすくなったと思います。
yozoさん、分かりやすい記事をありがとうござました!!(*- -)(*_ _)ペコリ

少し話が変わるのですが、このカスタマイズ中に不可解なことが起こりました。
私は今、メインブラウザをFirefox2.0.0.3にしているのですが、
今回もFirefox2.0.0.3でカスタマイズをしておりました。
そのときにyozoさんの記事をコピペしていたのですが、
何故かソースの一部分に半角スペースが入ってしまったのです。Σ(・ω・ノ)ノ!
そのため初め、カスタマイズ失敗か？と思ったのですが。。。
あ、yozoさんの記事がおかしいわけではないですよ!!
yozoさんの記事ではちゃんとスペースがない状態になっています。
実際IEでコピペするとそんな現象は起こらなかったんですもの。
これはFirefox2.0.0.3で起こる現象なんでしょうか？
前の1.5のときは起こらなかったような気がしているのですが。。。
なのでもしもFirefox2.0.0.3でカスタマイズをされる方は
コピペしたものが記事どおりであるか確認した方がいいかもしれません。
他の原因だったらごめんなさい。(o*。_。)oペコッ

↓ポチっとしてくれると嬉しいです♪d(*⌒▽⌒*)b ﾆｺﾆｺｯ

冬のスキンに模様替え♪

さてクリスマスも終了なので今度は冬のスキンに変更です♪
今回も新しいことに挑戦したわけではないですが、
壁紙やアイコンなどを変えたことですごく見た目が変わって嬉しいです♪

まずは壁紙は「柚莉湖♪風と樹と空と♪」さまより
お借りしてまいりました。
以前、このタイプの春バージョンをBlogPet背景でお借りしました♪
色がすっかり変わってしまってガラッと印象が変わってビックリです♪
とっても静かな村のイメージでほのぼの～♪
「柚莉湖♪風と樹と空と♪」さま、素敵な壁紙をありがとうございました♪(*- -)(*_ _)ペコリ

そして記事の日付の左の雪うさぎと記事の最後のライン、
右サイドのタイトルの左の雪うさぎとリストに使った雪うさぎは
「季節の窓」さまよりお借りしております。
とっても可愛らしい雪うさぎをいっぱい配置してみました♪
「季節の窓」さま、可愛い素材をありがとうございました。ペコリ(o_ _)ｏ))

今回も基本的には今まで画像を入れていた部分を変更しただけです♪
カスタマイズについては「FC2カスタマイズ」のカテゴリにありますので
よかったらどうぞ♪(=´ω｀)ﾉシ

今回ひとつだけCSSを追加しました。
<hr />というタグがあります。
このタグはこれだけで線を入れてくれる優れものです♪
私もうさびの投稿に追記を入れるときに毎回使っているのですが、
うちのテンプレでは灰色の線になっていました。
毎回<hr class="～" />のようにする方法もあるのですが、
基本的にこの水平線は記事の枠と同じ色で使うことが多いので、
CSSに以下の記述を書き込むことにしました。

hr{
color: #817cbc;
background-color: #817cbc;
border: none;
}

これで<hr />と書き込むだけで色が付きます♪
他の色にしたいときだけ別のクラスを作るか、
<hr style="color: #817cbc; background-color: #817cbc; border: none;">のように
記述するようにしようと思っています。

線に色をつける方法は以前「naoKの｢ホイきたー!」」のnaoKさんに
教えていただいたそのままを使いました♪
これだとFirefoxでもきちんと色が変わります♪
naoKさん、ありがとうございました♪(*- -)(*_ _)ペコリ

ということで冬のテンプレも楽しんでいただけると嬉しいです♪d(*⌒▽⌒*)b ﾆｺﾆｺｯ

↓応援よろしくお願いします!!( ^.^)( -.-)( _ _)

alt属性とtitle属性って!! クリスマススキンに模様替え♪

あと一ヶ月でクリスマスですね～♪
クリスマスは大人になってもなんだかワクワクするイベント。
ブログでもクリスマスを楽しもうと思い、
いろいろな素材屋さん巡りをして素敵な画像に出会うことが出来ました♪
いろいろお借りしてきて自分のブログをカスタマイズしてみました♪
今回はいつも以上に画像が多いので、ちょっと重いかも。(゜ー゜;Aアセアセ
あまりにも重かったので別サーバにアップしたらちょっとましになった。。。と思います。
(※基本的にＦＣ２は外部サーバから画像を呼び出しすることは出来ません。
相性のいいサーバがあったのでそちらに画像をアップしております。)

今回は新しいことには全く挑戦していないので、
画像をお借りした素材屋さんの紹介をさせていただきますね♪
ブログタイトル部分(バナー部分)の画像と後ろの壁紙をお借りしたのは
「季節の窓」さまです。
検索でたどり着いたのですが、本当に素敵な素材でいっぱいでした♪
とっても素敵なクリスマスツリーといい、夜の町並みといい素敵です♪
「季節の窓」さま、ありがとうございました♪(*- -)(*_ _)ペコリ

次はハロウィンのときにもお世話になりました
「犬の素材*今日もわんパグ」さまよりお借りしてきました素材のご紹介です♪
ブログタイトル下のそりを引いているトナカイ＆サンタさん。
記事下の手を振っているわんこ画像２点。
右サイドの各タイトルの頭につけたサンタの乗っているブッシュ・ド・ノエル。
そして右サイドバーの「最近の記事」や「最近のコメント」などの頭についている
クリスマスツリーのアイコンをお借りしてきました♪
手を振っているわんこが可愛くて可愛くて一目ぼれ♪(*^。^*)ポッ！！
わんこ素材がいっぱいですのでわんこ好きにはたまりませんよ♪d(*⌒▽⌒*)b ﾆｺﾆｺｯ
「犬の素材*今日もわんパグ」さま、可愛い素材をありがとうございました!!(o*。_。)oペコッ

次に記事タイトルしたのラインと右サイドバータイトルの下のライン、アイコンは
以前もお邪魔させてもらった「★Paper Company-壁紙屋-★」さまより
お借りしました。
右サイドバーの下のラインはちょっと短すぎたので両脇にアイコンを配置させてみました。
「★Paper Company-壁紙屋-★」さま、ありがとうございました。ペコリ(o_ _)ｏ))

そして記事の一番したの手を振るわんこの間にあるベルつきラインは
「柚莉湖♪風と樹と空と♪」さまよりお借りしました。
可愛いラインをありがとうございました♪(o*。_。)oペコッ

ＣＳＳ設定の画像は無理ですが、ＨＴＭＬ設定で配置している画像は
画像の上にマウスカーソルをのせますとどの素材屋さんにお借りしたかが
分かりますので、興味のあるかたは確認してみてくださいね!!

さてさてこの画像の上にマウスカーソルを置くと
ポップアップで説明が出るものなのですが。。。

左の画像の上にマウスカーソルを置いてみてください。
四角の枠に囲まれて文字が出ますよね♪
この機能について思いっきり勘違いしていることに
今日気がつきました。(^^;;

imgタグの中にalt="画像の説明"のように入れているのですが、
IE(Internet Explorer)ではこれだけでポップアップで説明が出ていました。
alt属性は画像が表示されないときに代わりに表示される文字のことなのですが、
alt属性がこの機能も兼ねているのだと思っていました。

ところがっ!!FireFoxではマウスカーソルを上においてもポップアップが
出ないのです!!(・_・o)ン? (o・_・)ン? (o・_・o)ン?
そこでいろいろ検索して調べてみたところ
「Web標準普及プロジェクト」さまの
「img要素でalt属性の内容がポップアップしない」のページを
発見したのです!!
このページによりますと

ツールチップとしてポップアップするべきはtitle属性に指定された内容です

ということでした。
なるほど～。勉強になりました。
なのでimgタグは
<img src="http://画像のアドレス" alt="代替テキスト" title="ポップアップで表示させたい言葉" width="画像の幅" height="画像の高さ" />
のように書くといいということですね♪
ちなみにIEではalt属性だけのときはaltの中身がポップアップで出ますが、
どちらも入れた場合はtitle属性の方の中身がポップアップで出るようです。
「Web標準普及プロジェクト」さまは
「Webブラウザを選ばないWebサイト」を作ろうというプロジェクトだそうです。
いろんな環境の方に同じ状態で見てもらえるサイトをつくるというのは大事なことだと思うので
私もしっかり勉強していこうと思います!!

↓応援よろしくお願いします!!( ^.^)( -.-)( _ _)