［ [ブログの知識]HTML,CSSｶｽﾀﾏｲｽﾞ ］ 2008/06/23(月)
やさしいブログは迷子を救うか？
先日パンくずリストの追加については
その間の時間のロスについて暴露しました。
あなたも気をつけてくださいね。
ランキング参加中です → 人気ブログランキングは ⇒ 今●位
ところでこのパンくずリストですが
そもそも追加設置しようと考えたのは
特にはじめて訪問して頂いた方にでも
少しでも見やすくなれば、そう考えてのことです。
検索エンジンからの訪問者が
6月には入って22日までに171回
昨日6/22だけで見るとgoogleのみですが16回
最初に比べるとかなり増えたのが設置のきっかけです。
そこで昨日のパンくずリスト設置
についての詳しい内容をお伝えいたします。
ＨＴＭＬ設定
<!-- パンくずリスト -->
<!--not_index_area-->
<div class="pankuzu">
<!--permanent_area-->
<!--topentry-->
<a href="<%url>" title="TOPページへ">TOP</a> > <a href="<%topentry_category_link>"><%topentry_category></a> > title − <%sub_title>
<!--/topentry-->
<!--/permanent_area-->
<!--category_area--> >
<a href="<%url>" title="TOPページへ">TOP</a> > カテゴリー − <%sub_title> >
<!--/category_area-- >
<!--search_area-- >
<a href="<%url>" title="TOPページへ">TOP</a> > 検索 − <%sub_title> の検索結果
<form action="./" method="get"><input type="text" size="20" name="q" value="" maxlength="200" class="ipt" /> <input type="submit" value="Search" class="search" /></form>
<!--/search_area-- >
<!--date_area-- >
<a href="<%url>" title="TOPページへ">TOP</a> > 月別 − <%now_year>年<%now_month>月
<!--/date_area-- >
<!--edit_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > edit − 修正画面
<!--/edit_area-->
<!--tag_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > <%tag_word>
<!--/tag_area-->
</div>
<!--/not_index_area-- >
<!-- パンくずリスト ここまで-->
設置追加の位置で見栄えも変わります。
このブログの現在の設定 （パンくずリストパターン１）
この場合はブログの紹介文の下となってます。
ＨＴＭＬ設定でいうと
<body>の中にある<%introduction>の後ろの方に張りつけます。
<!-- 画面上部 header ここまで -->のあとに追加ということになります。
違った設定 （パンくずリストパターン２）
少し変化をつけて記事のタイトルの
すぐ上に設置したいならば<!--topentry-->のすぐ前に張りつけます。
記事タイトルが下がって表示されます
２カラムなどではこちらの方がいいかもしれませんね。
このパンくずリストパターン２で表示している
紫で囲んだ部分の余白設定や
文字の大きさはＣＳＳシートで設定できます。
ＣＳＳシートへの追加
.pankuzu {
font-size:12px;
text-align:left;
margin:0px 0px 10px 185px;}
.pankuzu a:link{color:blue}
.pankuzu a:visited{color:red}
上記をＣＳＳの最終行に
一行あけて入れるとｏｋです。
margin:0px 0px 10px 185px;は
間隔をあけるという意味ですから
数字を大きくするとそれだけ空間ができます。
左から上・右・下・左に対応しているので
このブログでは左からのスペースを185pxと
ちょうど記事タイトルの上にくるように設定しています。
（パンくずリストパターン１参考に）
ｈｔｍｌの追加位置でも変化します
表示部分からの距離という事で考えてください。
（パンくずリストパターン２ではずれてます）
文字の大きさは
font-size:12px;
リンクの色は
.pankuzu a:link{color:blue}
.pankuzu a:visited{color:red}
色については#ff9900のコードでもｏｋですから！
以上でパンくずリストの設置は完了です。
今回画像で二つのパターンを作成してみましたが
パンくずリストパターン１と２ではどちらが見栄えがいいでしょう？
引き続き質問メール相談など受付中です。
気軽にご連絡をどーぞ！！
＜ご相談・ご質問はこちらからお気軽にどうぞ＞
最後までお読み頂きありがとうございます。
＊編集後記
ここでちょっとご感想を頂ければうれしいです。
１がいいなぁ、いゃ２の方がいい 等
コメントをいただければありがたいです。
こんなものいらないって感想でもいいです。
よろしく御願い致します。
本日の記事が参考になったという方
クリックしていただけると最高です!
↓ ↓
よろしかったらこちらのひと押しもよろしくお願いします
↓ ↓
あなたのアフィリエイトにおすすめは
【稼ぐブログの構築なら】
▼ブログアフィリエイト最終奥義【爆転】
【格安優良で簡単のステップメール】
▼リピートアフィリエイト
【携帯で簡単にアフィリエイト】
▼最新携帯アフィリエイトノウハウ
【無料お試し期間付商材】 Google アドセンス商材
▼アドセンスアフィリエイトパック
＜ご相談・ご質問はこちらからお気軽にどうぞ＞
先日パンくずリストの追加については
その間の時間のロスについて暴露しました。
あなたも気をつけてくださいね。
ランキング参加中です → 人気ブログランキングは ⇒ 今●位
ところでこのパンくずリストですが
そもそも追加設置しようと考えたのは
特にはじめて訪問して頂いた方にでも
少しでも見やすくなれば、そう考えてのことです。
検索エンジンからの訪問者が
6月には入って22日までに171回
昨日6/22だけで見るとgoogleのみですが16回
最初に比べるとかなり増えたのが設置のきっかけです。
そこで昨日のパンくずリスト設置
についての詳しい内容をお伝えいたします。
ＨＴＭＬ設定
<!-- パンくずリスト -->
<!--not_index_area-->
<div class="pankuzu">
<!--permanent_area-->
<!--topentry-->
<a href="<%url>" title="TOPページへ">TOP</a> > <a href="<%topentry_category_link>"><%topentry_category></a> > title − <%sub_title>
<!--/topentry-->
<!--/permanent_area-->
<!--category_area--> >
<a href="<%url>" title="TOPページへ">TOP</a> > カテゴリー − <%sub_title> >
<!--/category_area-- >
<!--search_area-- >
<a href="<%url>" title="TOPページへ">TOP</a> > 検索 − <%sub_title> の検索結果
<form action="./" method="get"><input type="text" size="20" name="q" value="" maxlength="200" class="ipt" /> <input type="submit" value="Search" class="search" /></form>
<!--/search_area-- >
<!--date_area-- >
<a href="<%url>" title="TOPページへ">TOP</a> > 月別 − <%now_year>年<%now_month>月
<!--/date_area-- >
<!--edit_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > edit − 修正画面
<!--/edit_area-->
<!--tag_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > <%tag_word>
<!--/tag_area-->
</div>
<!--/not_index_area-- >
<!-- パンくずリスト ここまで-->
設置追加の位置で見栄えも変わります。
このブログの現在の設定 （パンくずリストパターン１）
この場合はブログの紹介文の下となってます。
ＨＴＭＬ設定でいうと
<body>の中にある<%introduction>の後ろの方に張りつけます。
<!-- 画面上部 header ここまで -->のあとに追加ということになります。
違った設定 （パンくずリストパターン２）
少し変化をつけて記事のタイトルの
すぐ上に設置したいならば<!--topentry-->のすぐ前に張りつけます。
記事タイトルが下がって表示されます
２カラムなどではこちらの方がいいかもしれませんね。
このパンくずリストパターン２で表示している
紫で囲んだ部分の余白設定や
文字の大きさはＣＳＳシートで設定できます。
ＣＳＳシートへの追加
.pankuzu {
font-size:12px;
text-align:left;
margin:0px 0px 10px 185px;}
.pankuzu a:link{color:blue}
.pankuzu a:visited{color:red}
上記をＣＳＳの最終行に
一行あけて入れるとｏｋです。
margin:0px 0px 10px 185px;は
間隔をあけるという意味ですから
数字を大きくするとそれだけ空間ができます。
左から上・右・下・左に対応しているので
このブログでは左からのスペースを185pxと
ちょうど記事タイトルの上にくるように設定しています。
（パンくずリストパターン１参考に）
ｈｔｍｌの追加位置でも変化します
表示部分からの距離という事で考えてください。
（パンくずリストパターン２ではずれてます）
文字の大きさは
font-size:12px;
リンクの色は
.pankuzu a:link{color:blue}
.pankuzu a:visited{color:red}
色については#ff9900のコードでもｏｋですから！
以上でパンくずリストの設置は完了です。
今回画像で二つのパターンを作成してみましたが
パンくずリストパターン１と２ではどちらが見栄えがいいでしょう？
引き続き質問メール相談など受付中です。
気軽にご連絡をどーぞ！！
＜ご相談・ご質問はこちらからお気軽にどうぞ＞
最後までお読み頂きありがとうございます。
＊編集後記
ここでちょっとご感想を頂ければうれしいです。
１がいいなぁ、いゃ２の方がいい 等
コメントをいただければありがたいです。
こんなものいらないって感想でもいいです。
よろしく御願い致します。
本日の記事が参考になったという方
クリックしていただけると最高です!
↓ ↓
よろしかったらこちらのひと押しもよろしくお願いします
↓ ↓
あなたのアフィリエイトにおすすめは
【稼ぐブログの構築なら】
▼ブログアフィリエイト最終奥義【爆転】
【格安優良で簡単のステップメール】
▼リピートアフィリエイト
【携帯で簡単にアフィリエイト】
▼最新携帯アフィリエイトノウハウ
【無料お試し期間付商材】 Google アドセンス商材
▼アドセンスアフィリエイトパック
＜ご相談・ご質問はこちらからお気軽にどうぞ＞
トラックバックURLは http://ariestetu.blog18.fc2.com/tb.php/148-93136f1c
トラックバック
コメント
by どら見☆AQUASでムスメの幼稚園費かせぐ！ : URL
おはようございます。どら見です。
いつも温かいコメントありがとうございます。
スゲー！HTMLのレクチャーできるなんて！
FC2の人には嬉しい情報ですね。
今日仕事から帰ったらやってみようかな？
いろんなパターンが試せて嬉しいです！
僕は１が好きかな？
またお邪魔します。
応援ぽちぽち♪
by 【ふろいで】 : URL いつも温かいコメントありがとうございます。
スゲー！HTMLのレクチャーできるなんて！
FC2の人には嬉しい情報ですね。
今日仕事から帰ったらやってみようかな？
いろんなパターンが試せて嬉しいです！
僕は１が好きかな？
またお邪魔します。
応援ぽちぽち♪
2008/06/23(月) 06:45:42 #-[ 編集]
てっさん、おはようございます！…【ふろいで】です
いつもお越しいただき、感謝しています
いただくコメントを読むのが毎日、楽しみです
ご心配をおかけしました
まずは、応援２ぽち☆
このような情報って、保存版ですよね
まだまだ、出てきます…よね？
わくわくしています
また、寄せていただきますね！
by イオ＠報酬額４００万突破！ : URL いつもお越しいただき、感謝しています
いただくコメントを読むのが毎日、楽しみです
ご心配をおかけしました
まずは、応援２ぽち☆
このような情報って、保存版ですよね
まだまだ、出てきます…よね？
わくわくしています
また、寄せていただきますね！
2008/06/23(月) 09:17:23 #-[ 編集]
イオです。
いつもありがとうございます。
検索からの訪問は
嬉しいですよね。
うちは毎日５０〜７０くらいは
ありますが、もっと増やしたいです。
P.S
メール受け取りました。
ではまた来ます。応援♪
by サト愛☆愛でいっぱいのお金持ち : URL by みきです。 : URL いつもありがとうございます。
検索からの訪問は
嬉しいですよね。
うちは毎日５０〜７０くらいは
ありますが、もっと増やしたいです。
P.S
メール受け取りました。
ではまた来ます。応援♪
2008/06/23(月) 09:32:21 #-[ 編集]
みきです。
いつも応援＆コメントありがとうございます。
1ですかね〜
でも訪問者に優しいブログで
いいですね〜
ちょっとしたとこで変わりますね。
応援＾＾していきます♪ぽちぽち！
by マツボウ＠反逆のアフィリ仮面 : URL いつも応援＆コメントありがとうございます。
1ですかね〜
でも訪問者に優しいブログで
いいですね〜
ちょっとしたとこで変わりますね。
応援＾＾していきます♪ぽちぽち！
2008/06/23(月) 14:26:03 #-[ 編集]
てっさん
始めまして
マツボウと申しますm(__)m
じゅゆりん様のブログから遊びに来ました♪
いろいろ研究されていて
僕も見習わないといけません。
なんとなく１の方が僕的にはいいですかねぇ〜^^
応援させていただきます！ポチ♪
by 整体師【ハル】 : URL 始めまして
マツボウと申しますm(__)m
じゅゆりん様のブログから遊びに来ました♪
いろいろ研究されていて
僕も見習わないといけません。
なんとなく１の方が僕的にはいいですかねぇ〜^^
応援させていただきます！ポチ♪
2008/06/23(月) 14:48:04 #-[ 編集]
てつさん
こんにちは！
サイトを見るたび新しい
ことに挑戦されて
どんどん華やかになって
きていますね。
私も見習って
がんばります。
よろしくお願いします。
by Ryu-G@ブログアフィリエイトで稼ぐ戦略と仕組み : URL こんにちは！
サイトを見るたび新しい
ことに挑戦されて
どんどん華やかになって
きていますね。
私も見習って
がんばります。
よろしくお願いします。
2008/06/23(月) 15:08:07 #-[ 編集]
こんにちは、Ryu-Gです。
いつもあたたかいコメントありがとうございます＾＾
パンくずリストは
特に個別記事に訪問した人には
親切ですね＾＾
自分的にはパターン２かな。
その記事のパンくずリストというのが
わかりやすいと思うので。
応援済み
こんにちは〜〜 by 情報商材アフィリエイト【スネイプ】 : URL いつもあたたかいコメントありがとうございます＾＾
パンくずリストは
特に個別記事に訪問した人には
親切ですね＾＾
自分的にはパターン２かな。
その記事のパンくずリストというのが
わかりやすいと思うので。
応援済み
2008/06/23(月) 18:19:00 #-[ 編集]
こんにちは、スネイプです。
パンくずリストはって難しそうですね。
パターン１がすっきりしてていいかな？
素晴らしい情報に感謝です！
応援ポチッ
by ヒキ、情報商材アフィリエイト倉庫 : URL パンくずリストはって難しそうですね。
パターン１がすっきりしてていいかな？
素晴らしい情報に感謝です！
応援ポチッ
2008/06/23(月) 18:46:58 #mQop/nM.[ 編集]
こんばんは、ヒキです！
いつも、ご訪問頂きありがとうございます。
THMLの改変作業ですか？
私が一番苦手なところです。
てつさんのこの記事を読んで
ちょっと勉強して帰ります！
それでは、また来ますね。
応援ポチ済みです！
by エッジロック : URL いつも、ご訪問頂きありがとうございます。
THMLの改変作業ですか？
私が一番苦手なところです。
てつさんのこの記事を読んで
ちょっと勉強して帰ります！
それでは、また来ますね。
応援ポチ済みです！
2008/06/23(月) 20:26:14 #-[ 編集]
こんばんは、エッジロックです。
いつもご訪問＆温かいコメントありがとうございます。
パンくずリストもそうですが、見てもらう人に対しての小さな努力もすごく大切だと感じました。
私はパターン１がいいと思いました。
応援ポチ↓
by 学生起業家 : URL by アフィリ完全攻略 : URL いつもご訪問＆温かいコメントありがとうございます。
パンくずリストもそうですが、見てもらう人に対しての小さな努力もすごく大切だと感じました。
私はパターン１がいいと思いました。
応援ポチ↓
2008/06/23(月) 22:07:23 #xueRIULk[ 編集]
どーもTAKEです。いつもコメントありがとうございます。
自分はHTMLがとても苦手な分野なので、中々やる気が
おきません・・・本当はやらなければいけないんですが
１番がいいですね
応援P
by リーマン : URL 自分はHTMLがとても苦手な分野なので、中々やる気が
おきません・・・本当はやらなければいけないんですが
１番がいいですね
応援P
2008/06/23(月) 23:15:34 #-[ 編集]
こんばんは。リーマンです。
てっさんはこの事にお悩みでしたか！
まったく回答できずにその節は
失礼いたしましたm(_ _)m
はずかしながら、パンくず・・・とやら
まったく存じ上げませんでした（汗）
それにしても、新たな情報がドンドン
追加されて凄いブログになってきて
ますね。また勉強しに来ます！
応援！ 拝
こんばんは by 【どんきぃ】・・・初心者教室開催中 : URL てっさんはこの事にお悩みでしたか！
まったく回答できずにその節は
失礼いたしましたm(_ _)m
はずかしながら、パンくず・・・とやら
まったく存じ上げませんでした（汗）
それにしても、新たな情報がドンドン
追加されて凄いブログになってきて
ますね。また勉強しに来ます！
応援！ 拝
2008/06/23(月) 23:25:52 #6i1.neBA[ 編集]
こんばんは。【どんきぃ】です♪
いつもブログへの訪問＆温かいお気遣いのコメント
本当にありがとうございます。
個人的にはパターン２のほうが好きかな＾＾
でも、パンくずリストって、訪問者に優しいのか、
どうかは、ちょっと分かりません。
訪問者様が見てどう思うか･･･そこが重要なんですよねｗ
またお邪魔させて頂きます☆
感謝の応援ポチ←済です♪
by アフィリエイトハンター小室 : URL いつもブログへの訪問＆温かいお気遣いのコメント
本当にありがとうございます。
個人的にはパターン２のほうが好きかな＾＾
でも、パンくずリストって、訪問者に優しいのか、
どうかは、ちょっと分かりません。
訪問者様が見てどう思うか･･･そこが重要なんですよねｗ
またお邪魔させて頂きます☆
感謝の応援ポチ←済です♪
2008/06/23(月) 23:28:00 #-[ 編集]
こんにちは
アフィリエイトハンター小室です。
いつも訪問、暖かい応援ありがとうございます！
凄く丁寧で詳細な説明記事ですね。
知識もさる事ながらてっさんの
姿勢に感動しました。
僕見習います！
また遊びにきます。
応援！
by みのごり最強アフィリエイター養成ジュクみのごり@最強アフィリ : URL by 拾得ブログ！元お笑い芸人大田のブログで稼ぐための拾得ブログ!!の大田 : URL by かず＠ステップメールアフィリエイター : URL アフィリエイトハンター小室です。
いつも訪問、暖かい応援ありがとうございます！
凄く丁寧で詳細な説明記事ですね。
知識もさる事ながらてっさんの
姿勢に感動しました。
僕見習います！
また遊びにきます。
応援！
2008/06/24(火) 00:06:42 #-[ 編集]
ども！かずです。
いつもお世話になります。
ほんと、親切な記事を書かれますよね＾＾
そう！ここなんです！
てっさんの記事が変わったと思ったのは＾＾
訪問者の知りたい記事を
親切に教えてくれるブログ
こういったものはのちのち重宝しますからね＾＾
応援済み＾＾
いつもお世話になります。
ほんと、親切な記事を書かれますよね＾＾
そう！ここなんです！
てっさんの記事が変わったと思ったのは＾＾
訪問者の知りたい記事を
親切に教えてくれるブログ
こういったものはのちのち重宝しますからね＾＾
応援済み＾＾
2008/06/24(火) 02:01:50 #-[ 編集]
コメントの投稿
| このページの先頭へ |
管理人の紹介
Author: てっ
情報商材を徹底的にレビュー
アフィリエイトに役立つ情報を
あなたにわかりやすく提供してます
＞＞アフィリエイトを開始して＜＜
人気ブログランキングは今何位かなぁ
↓ ↓
＜最新記事はＴＯＰページから＞
＞＞お問い合わせはこちら＜＜
相互リンクはコチラから
ﾌﾞｯｸﾏｰｸ・ＲＳＳ
新着情報最近のコメント
カテゴリー
- [初めての方へ]サイトコンセプト(2)
- [初めての方へ]アフィリエイトとは(1)
- [初めての方へ]アフィリエーターとは(1)
- [初めての方へ]ブログって何？(1)
- [初めての方へ]情報商材の疑問(2)
- [アフィリエイト]ブログ選択(1)
- [アフィリエイト]アドレスの複数取得(1)
- [ASP紹介]ASPの登録(1)
- [ASP紹介]最新お勧め(3)
- [情報商材]情報商材とは(1)
- [情報商材]種類と方向性(2)
- [情報商材]初心者でも大丈夫(3)
- [商材判定]TOP(1)
- [商材判定]おすすめ情報(1)
- [商材判定]ダメ情報(1)
- [商材レビュー]アフィリエイト虎の巻(1)
- [商材レビュー]夢リタ(1)
- [商材レビュー]何も売らないｱﾌｨﾘｴｲﾄ(2)
- [商材レビュー]プラチナパッケージ(6)
- [商材レビュー]ｱﾄﾞｾﾝｽ最速戦略書(1)
- [商材レビュー]お試し期間付商材(1)
- [商材レビュー]ＡＱＵＡＳ(アクアス)(2)
- [商材レビュー]Zepping(2)
- [商材レビュー]ｵｰﾄﾒｰｶｰｺﾝﾋﾞ(1)
- [商材レビュー]ｱﾌｨﾘｴｲﾄｺﾝﾌﾟﾘｰﾄﾊﾟｯｸ(1)
- [商材レビュー]携帯(2)
- [商材レビュー]バカ売れ商材発掘法(1)
- [商材レビュー]爆転(8)
- [商材レビュー]リピートアフィリ(8)
- [商材レビュー]ネットビジネス夏祭り2008(5)
- [商材レビュー]mixi系(1)
- [商材レビュー]ﾔﾌｰｱﾌｨﾘｴｲﾄ攻略法(6)
- [商材レビュー]書籍(2)
- [戦略]儲ける鉄則(30)
- [戦略]しくみ構築(20)
- [戦略]虎の巻ストーリー(12)
- [戦略]夢リタ実践記(17)
- [戦略]爆転ノウハウ(13)
- [戦略]キーワード・表現(4)
- [戦略]モチベーション(2)
- [戦略]ツール活用(6)
- [戦略]アドセンス(1)
- [戦略]メルマガ(7)
- [戦略]音速貴公子レポート(4)
- [戦略]稼ぐレポート紹介(23)
- [戦略]無料レポートでアフィリ(5)
- [戦略]媒体で稼ぎ続けるために(1)
- [SEO]対策と効果(19)
- [ツール]ブログに役立つ(16)
- [ツール]キーワードを探す(4)
- [経歴]あし＠(2)
- [経歴]RSS(2)
- [経歴]解析TOOL(1)
- [経歴]ランキング(2)
- [経歴]アドセンス(1)
- [ブログの知識]HTML,CSSｶｽﾀﾏｲｽﾞ(7)
- [雑記]伝えたいこと(20)
- [雑記]ブログを育てる(5)
- [雑記]気をつけて(5)
- [雑記]学ぶ(5)
- [雑記]思考(6)
- [雑記]想い(11)
- [過去記事]再注目(6)
- [プレゼント]購入者特典(1)
- [プレゼント]スペシャル特典(1)
- [プレゼント]オリジナル特典(1)
- [お気に入り]サイト集(2)
- [号外]お得な情報(21)
ブログ全記事表示
必見無料で稼げるＡＳＰ
てっの無料レポート
物販アフィリの狙い目
メルマガこれで始めました
ｱﾌｨﾘｴｲﾄを基礎から学ぶ
月別アーカイブ
ＱＲコード
夢のコラボが実現
何も売らないアフィリエイト
激安ｱﾄﾞｾﾝｽ最速戦略書
アクセスＵＰに効果抜群
AQUASならHTMLも楽々
楽天アフィリ支援ツール
無料のお得情報
アクセスランキング
管理画面リンク
RSSリンク
厳選Rankingｻｲﾄ集
Yahoo!ﾛｸﾞｰﾙ
editaｺﾐｭﾆﾃｨ
検 索
ｵｰﾄﾘﾝｸﾈｯﾄ
あし＠
揉むか揉まれるか(07/ 04)
まーくん（レンタルサーバー研究者）(06/ 29)
ヒデゾー(06/ 25)
日向あおい＠メルマガはじめました。(06/ 18)
リ・ファリーヌ 改め 初音（はつね）(06/ 16)
土佐和喜 副業革命のサイト群(06/ 14)
こころ＠リサイクルショップネット部門担当！(06/ 14)
ブログとメルマガで夢をつかむ方法(06/ 11)
レオンピ（蓮坊ノンビイ）(06/ 04)
いんぐらむ＠アドセンスで１３０万円(06/ 03)