Latest Entries
トップメニューの作り方
ブログの場合、TOPページの一番上は最新記事になりますよね。
（古い順にした場合は逆ですが）
これはこれで、便利なのですが、情報系ブログとしては、記事以外の情報を常に表示させたい場合があります。
というわけで、TOPページの一番上に普遍的に表示されるメニューを作ってみましょう。
と、思ったのですが、TOPページのみにメニューを入れる方法が見つかりません(T T)
TOPを別ページにすることで解決できるのですが、SEO的に「？」なのでどうもなぁ。。。
ということで、TOPだけに入れるというのは諦めて、「記事ページ」と「それ以外のページ」で別々のメニューを付けてみたいと思います。
いつも通り、「管理者ページトップ」から「テンプレートの設定」画面に入ります。
現在選択しているテンプレートに小さな旗が立っていますので、その行の「修正」を押してみてください。
HTMLの編集欄をクリックし「Ctrl+F」を押します。
すると、検索画面が表示されますので、「<!-- primary-column -->」を探してください。
この部分から下がブログの本文になっているようなので、メニューを一番上に置くためにはこの上に何か書けば良さそうです。
今回は、「記事ページ」と「それ以外のページ」で別々のメニューを付けるのでこんな風にしてみました。
<!--not_permanent_area-->
<div class="section">
<h3>メニューのタイトル</h3>
<div class="entry-body">
〜ここに表示したいメニューのHTML〜
</DIV>
</DIV>
<!--/not_permanent_area-->
<!--permanent_area-->
<div class="entry-body">
〜ここに「記事ページ」で表示するHTML〜
</div>
<!--/permanent_area-->
<!-- primary-column -->
記事以外のページではサイトマップ、記事ページではお薦め広告などを貼ってみると面白いかと思います。
（古い順にした場合は逆ですが）
これはこれで、便利なのですが、情報系ブログとしては、記事以外の情報を常に表示させたい場合があります。
というわけで、TOPページの一番上に普遍的に表示されるメニューを作ってみましょう。
と、思ったのですが、TOPページのみにメニューを入れる方法が見つかりません(T T)
TOPを別ページにすることで解決できるのですが、SEO的に「？」なのでどうもなぁ。。。
ということで、TOPだけに入れるというのは諦めて、「記事ページ」と「それ以外のページ」で別々のメニューを付けてみたいと思います。
いつも通り、「管理者ページトップ」から「テンプレートの設定」画面に入ります。
現在選択しているテンプレートに小さな旗が立っていますので、その行の「修正」を押してみてください。
HTMLの編集欄をクリックし「Ctrl+F」を押します。
すると、検索画面が表示されますので、「<!-- primary-column -->」を探してください。
この部分から下がブログの本文になっているようなので、メニューを一番上に置くためにはこの上に何か書けば良さそうです。
今回は、「記事ページ」と「それ以外のページ」で別々のメニューを付けるのでこんな風にしてみました。
<!--not_permanent_area-->
<div class="section">
<h3>メニューのタイトル</h3>
<div class="entry-body">
〜ここに表示したいメニューのHTML〜
</DIV>
</DIV>
<!--/not_permanent_area-->
<!--permanent_area-->
<div class="entry-body">
〜ここに「記事ページ」で表示するHTML〜
</div>
<!--/permanent_area-->
<!-- primary-column -->
記事以外のページではサイトマップ、記事ページではお薦め広告などを貼ってみると面白いかと思います。
コメント
ううーん。。。
キティさん、こんにちわ。
そーなんですか！ってことで他のテンプレ見てみたのですが、記述の仕方が違いますね。
何とか共通点を見つけようと思ったのですが、見つからないですね。
ん〜、どうやって表現しようかなぁ。。。
そーなんですか！ってことで他のテンプレ見てみたのですが、記述の仕方が違いますね。
何とか共通点を見つけようと思ったのですが、見つからないですね。
ん〜、どうやって表現しようかなぁ。。。
monotone
aflさん、こんばんわ〜。
メニューをmonotoneで作ってみたのですが、微妙にラインが崩れたりしたため、monotoneを断念して、aflさん使用のskin07でmonotoneの背景に差し替えて、メニューを作ることに成功しました！ありがとうございます！
あ、一つお聞きしてもいいでしょうか？横長の赤線がありますよね。これって、色を変えることできませんかね？いろいろいじったのですが、かわらないんです…。
ブログのコンテンツが充実したら、aflさんのアフィリエイトこっそり報告blog(ブログ)からASP登録したいと思います♪
メニューをmonotoneで作ってみたのですが、微妙にラインが崩れたりしたため、monotoneを断念して、aflさん使用のskin07でmonotoneの背景に差し替えて、メニューを作ることに成功しました！ありがとうございます！
あ、一つお聞きしてもいいでしょうか？横長の赤線がありますよね。これって、色を変えることできませんかね？いろいろいじったのですが、かわらないんです…。
ブログのコンテンツが充実したら、aflさんのアフィリエイトこっそり報告blog(ブログ)からASP登録したいと思います♪
すいません
自己解決いたしました！htmlやスタイルシートをいじるのがほとんど初めてだったのですが、なんとなく分かってきました！いろいろいじってみるの楽しいですね♪ブログにはまっております(笑)
ブログ初心者さん、こんにちわ。
自己解決されましたか！すばらしいですね〜。
僕の方でも調べたので、他の方のために後ほど記事にしてみたいと思います〜
自己解決されましたか！すばらしいですね〜。
僕の方でも調べたので、他の方のために後ほど記事にしてみたいと思います〜
どちらに書いたらいいのかな。。
aflさん、こんばんは！
テンプレートskin07で２つ問題が発生してしまいました。
Netscape7.1で、見たところ
(1)GoogleAdsenseが、記事の下ではなく変なところにかぶって表示されてしまいました。afｌさんの、FC2でブログ・アフィリエイトも同様の現象が起きておりました。
(2)Secondary-Columnの、htmlでMonthlyやAppendixを削除して、残りの配置の順番を変更して、スタイルシート部分で
/* 位置調整（一番上に表示） */
/* 位置調整（中間に表示） */
/* 位置調整（一番下に表示） */
部分もhtmlで変更したとおりの順番に変えたところ、CATEGORIES、RECENT ENTRIES、RECENT COMMENTS、RECENT TRACKBACKS、Searchなどが、空白がなくなりくっついて表示されてしまいました。こちらの方は、aflさんのFC2でブログ・アフィリエイトはNetscapeで正常に表示されていました。
この２つの原因わかりますでしょうか？
分かりましたら、教えていただけますでしょうか.
テンプレートskin07で２つ問題が発生してしまいました。
Netscape7.1で、見たところ
(1)GoogleAdsenseが、記事の下ではなく変なところにかぶって表示されてしまいました。afｌさんの、FC2でブログ・アフィリエイトも同様の現象が起きておりました。
(2)Secondary-Columnの、htmlでMonthlyやAppendixを削除して、残りの配置の順番を変更して、スタイルシート部分で
/* 位置調整（一番上に表示） */
/* 位置調整（中間に表示） */
/* 位置調整（一番下に表示） */
部分もhtmlで変更したとおりの順番に変えたところ、CATEGORIES、RECENT ENTRIES、RECENT COMMENTS、RECENT TRACKBACKS、Searchなどが、空白がなくなりくっついて表示されてしまいました。こちらの方は、aflさんのFC2でブログ・アフィリエイトはNetscapeで正常に表示されていました。
この２つの原因わかりますでしょうか？
分かりましたら、教えていただけますでしょうか.
IEでは、
２つとも正常です！
（２）に関しまして
投稿と同時に、不要なコンテンツの削除というビンゴなものが(^^;)
htmlでいらない部分を削除しても、スタイルシートではいらない部分も残さないとNetscapeは、ダメみたいですね。ＩＥはスタイルシートの部分削除してもちゃんと表示されるのに(^^;)
htmlでいらない部分を削除しても、スタイルシートではいらない部分も残さないとNetscapeは、ダメみたいですね。ＩＥはスタイルシートの部分削除してもちゃんと表示されるのに(^^;)
参考にさせていただきます。
はじめまして！参考にさせていただいています。
今日は力つきたので、メニューのカスタマイズは明日トライします。
こちらも「アフィリエイトこっそり報告blog」の方も勝手ながらリンクさせていただきました。
今日は力つきたので、メニューのカスタマイズは明日トライします。
こちらも「アフィリエイトこっそり報告blog」の方も勝手ながらリンクさせていただきました。
こんばんは！平蔵です。
おかげさまでトップメニューの形が完成しました！
内容はまだ思考中ですが一応PRだけ表示しました（汗）
記事ページもいっしょなので今から作りなおそうと思います。
いろいろ勉強させて頂き大変有難いです。
今後とも宜しくお願いします。
おかげさまでトップメニューの形が完成しました！
内容はまだ思考中ですが一応PRだけ表示しました（汗）
記事ページもいっしょなので今から作りなおそうと思います。
いろいろ勉強させて頂き大変有難いです。
今後とも宜しくお願いします。
ブログ初心者さん、こんにちわ
障害情報ありがとうございます！
（２）の方は自己解決されたようで、流石ですね〜
（１）の方は僕も今のところ解らないです。。。
情報探しているので、解決次第報告します！
障害情報ありがとうございます！
（２）の方は自己解決されたようで、流石ですね〜
（１）の方は僕も今のところ解らないです。。。
情報探しているので、解決次第報告します！
ブラウンさん、はじめまして！
とってもステキな色合いのブログですね〜。
写真もキレイだし。
メニューのカスタマイズうまくいったでしょうか？
問題等ありましたらお気軽にどうぞ〜
とってもステキな色合いのブログですね〜。
写真もキレイだし。
メニューのカスタマイズうまくいったでしょうか？
問題等ありましたらお気軽にどうぞ〜
平蔵さん、こんにちわ。
着々とカスタマイズされていますね！
いろいろ試行錯誤しながら、やっていく過程がまた楽しいですよね〜
こちらこそいろいろ勉強させてください！
着々とカスタマイズされていますね！
いろいろ試行錯誤しながら、やっていく過程がまた楽しいですよね〜
こちらこそいろいろ勉強させてください！
３日試行錯誤しても…。
aflさん、こんばんわ。
トップメニューのリンクを、Primary-Columnのリンク部分と同様に
マウスが触れたとき、色を変えたいのですが、
スタイルシートでa:hoverをどうにかすればいいのは分かるのですが、トップメニューのリンク部分だけ試行錯誤していじってもかわらないんです…。
どうすればいいかお分かりでしょうか？
トップメニューのリンクを、Primary-Columnのリンク部分と同様に
マウスが触れたとき、色を変えたいのですが、
スタイルシートでa:hoverをどうにかすればいいのは分かるのですが、トップメニューのリンク部分だけ試行錯誤していじってもかわらないんです…。
どうすればいいかお分かりでしょうか？
ブログ初心者さん、こんにちわ。
おそらく、メニューをテーブルで組んでいるからだと思うので、スタイルシートでtableタグの設定をテキストと同じにすれば、可能ではないかと。
また、手っ取り早くはメニューを作ったHTMLで直接そのように設定すればいいと思います。
具体的には、近いうちに記事にて研究してみたいと思います〜
おそらく、メニューをテーブルで組んでいるからだと思うので、スタイルシートでtableタグの設定をテキストと同じにすれば、可能ではないかと。
また、手っ取り早くはメニューを作ったHTMLで直接そのように設定すればいいと思います。
具体的には、近いうちに記事にて研究してみたいと思います〜
うーん
いろいろ試していますが、今回はかなりはまっております(汗)
まだまだ、がんばりますよぉ♪
まだまだ、がんばりますよぉ♪
ブログ初心者さん、こんにちわ。
元記事自体にタグが抜けていたので修正しておきました。
この形にすれば、TOPメニュー内のリンクも色が変わるようになります〜
元記事自体にタグが抜けていたので修正しておきました。
この形にすれば、TOPメニュー内のリンクも色が変わるようになります〜
返信遅くなって申し訳ありません。
aflさん、こんばんは。
リンクの件は解決いたしました。
また、メニュー作成の件でお聞きしたいことが…。
「記事ページ」と「それ以外のページ」で別々のメニューを付けるの場合
<!--not_permanent_area-->
<div class="section">
<h3>メニューのタイトル</h3>
<div class="entry-body">
〜ここに表示したいメニューのHTML〜
</DIV>
</DIV>
<!--/not_permanent_area-->
<!--permanent_area-->
<div class="entry-body">
〜ここに「記事ページ」で表示するHTML〜
</div>
<!--/permanent_area-->
<!-- primary-column -->
を行えば、
最近の記事や最近のコメントから飛んだ場合は、permanent_areaで指定した部分が表示され、カテゴリから飛んだ場合に、TOPページと同じnot_permanent_areaで指定した部分が表示されますよね？
このカテゴリから飛んだ場合にもpermanent_areaで指定した部分が表示されるようにできないのでしょうか？
htmlやCSSの本を買ってきて読んでいるのですが…。
よろしくお願いいたします。
リンクの件は解決いたしました。
また、メニュー作成の件でお聞きしたいことが…。
「記事ページ」と「それ以外のページ」で別々のメニューを付けるの場合
<!--not_permanent_area-->
<div class="section">
<h3>メニューのタイトル</h3>
<div class="entry-body">
〜ここに表示したいメニューのHTML〜
</DIV>
</DIV>
<!--/not_permanent_area-->
<!--permanent_area-->
<div class="entry-body">
〜ここに「記事ページ」で表示するHTML〜
</div>
<!--/permanent_area-->
<!-- primary-column -->
を行えば、
最近の記事や最近のコメントから飛んだ場合は、permanent_areaで指定した部分が表示され、カテゴリから飛んだ場合に、TOPページと同じnot_permanent_areaで指定した部分が表示されますよね？
このカテゴリから飛んだ場合にもpermanent_areaで指定した部分が表示されるようにできないのでしょうか？
htmlやCSSの本を買ってきて読んでいるのですが…。
よろしくお願いいたします。
ブログ初心者さん、こんにちわ。
えーと、ちょっとご質問の意味が分からないのですが（笑）
基本的にこのタグは、「記事ページ以外ではこうする」と「記事ページではこうする」っていう設定を行っています。
これは、リンク元には左右されないので、同一ページであれば、どこから来ても同じように表示されているはずです。
こういう事ではないかなぁ？
えーと、ちょっとご質問の意味が分からないのですが（笑）
基本的にこのタグは、「記事ページ以外ではこうする」と「記事ページではこうする」っていう設定を行っています。
これは、リンク元には左右されないので、同一ページであれば、どこから来ても同じように表示されているはずです。
こういう事ではないかなぁ？
説明が悪かったですm(_ _)m
こんばんは、aflさん。
えっとですねぇ、例えば、aflさんのこのブログ「FC2でブログ・アフィリエイト」では、
記事ページ=http://affiliatego.blog10.fc2.com/blog-entry-数字.html
カテゴリページ=http://affiliatego.blog10.fc2.com/blog-category-数字.html
ってなってますよね？
>「記事ページ以外ではこうする」と「記事ページではこうする」っていう設定をした
TOPページと記事ページ「blog-entry-数字.html」は異なるメニューが表示され、
※TOPページとカテゴリページ「blog-category-数字.html」は同じメニューが表示されますよね。
今回、TOPページとカテゴリページ「blog-category-数字.html」のメニューを異なるようにしたいのです。さらに、記事ページ「blog-entry-数字.html」とカテゴリページ「blog-category-数字.html」は同じメニューにしたいのです。
こんな設定できるのですかね…？
えっとですねぇ、例えば、aflさんのこのブログ「FC2でブログ・アフィリエイト」では、
記事ページ=http://affiliatego.blog10.fc2.com/blog-entry-数字.html
カテゴリページ=http://affiliatego.blog10.fc2.com/blog-category-数字.html
ってなってますよね？
>「記事ページ以外ではこうする」と「記事ページではこうする」っていう設定をした
TOPページと記事ページ「blog-entry-数字.html」は異なるメニューが表示され、
※TOPページとカテゴリページ「blog-category-数字.html」は同じメニューが表示されますよね。
今回、TOPページとカテゴリページ「blog-category-数字.html」のメニューを異なるようにしたいのです。さらに、記事ページ「blog-entry-数字.html」とカテゴリページ「blog-category-数字.html」は同じメニューにしたいのです。
こんな設定できるのですかね…？
アドセンのNetscape表示
aflさん、こんばんは。
Netscapeでの、GoogleAdsenseの不具合ですが、
スタイルシート部分の
*:before, *:after {
content : "";
}
部分を削除すれば、正常に表示されるようです！
Netscapeでの、GoogleAdsenseの不具合ですが、
スタイルシート部分の
*:before, *:after {
content : "";
}
部分を削除すれば、正常に表示されるようです！
ブログ初心者さん、こんにちわ。
あ、そういうことですね、分かりました。
で、結論ですが、おそらくそれは難しいです。
というのも、そういった動作を定義する関数がないんですよ、FC2自体に。
（実は、この記事を作ったときに調べましたｗ）
いろんな方法を駆使すれば出来るかもしれないのですが、今のところ僕には無理です。。。
それから、ネスケの件情報ありがとうございます。
後ほど確認してみたいと思います〜
あ、そういうことですね、分かりました。
で、結論ですが、おそらくそれは難しいです。
というのも、そういった動作を定義する関数がないんですよ、FC2自体に。
（実は、この記事を作ったときに調べましたｗ）
いろんな方法を駆使すれば出来るかもしれないのですが、今のところ僕には無理です。。。
それから、ネスケの件情報ありがとうございます。
後ほど確認してみたいと思います〜
コメントの投稿
トラックバック
http://affiliatego.blog10.fc2.com/tb.php/8-1b5c577e
このカスタマイズとてもやりたいんですが
私のテンプレ[default] ではできなそうです。
primary-columnがないんですよね〜
テンプレ作者が違うから
ｈｔｍｌの記述が違うんですね、きっと。
考えすぎて（悩みすぎて）頭痛くなってきました・・・とほほ
・・・と、あきらめていたんですが
ひょんなことでさらっとできました〜♪