北京棒球小僧トップページへ矢印:赤(右3) カープキャップ1Blog technique 矢印:赤(右3)カープユニフォーム1ページ内ナビを付ける

2006年03月13日

カープユニフォーム1 ページ内ナビを付ける

ブログカスタマイズ ONE POINTアドバイス第30弾!!
簡単に言いますと最上部にジャンプする機能を付けると言う事です。
記事もいつも短め、コメントも無く、トラックバックも無くと言う方は特に必要ありませんが一画面に縦長になっているサイトの方は付けた方が閲覧している方には優しいサイトに変身すると思います。

デザイン→HTML編集で下記の記述を探してください(最初の方にあります)
<div id="content">
<% content_main %>
<% if:page_name eq 'comment' -%>
<div id="comments">
<div class="comments-head">"<% article.subject | tag_break %>"へのコメント<br /></div>

それから赤字の部分を追加します。
<div id="content">
<a name="ue"></a>
<% content_main %>
<% if:page_name eq 'comment' -%>
<div id="comments">
<div class="comments-head">"<% article.subject | tag_break %>"へのコメント<br /></div>

赤字の部分はジャンプ先の最上部設定です。
これは表記されるものではありませんので外観は何も変わりません。
さてここからがポイントです。
<div class="updown"><a name="sita" href="#ue">上</a></div>

を好きな所に追加すれば『上』と表示が出てこれをクリックすると一番上に飛ぶ様になります。
では、何処にこれを置くかです。
私の場合は、3箇所に設定しています。
記事の更新日付、ニックネーム、コメント数、トラックバック数、カテゴリ名が記述してある隣に。
これは編集する場所が
デザイン→コンテンツ→記事コンテンツ→HTML編集
<div class="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%>
<% if:article_weather -%>
| <% article_weather.state %> <% article_weather.weather_emoji -%>
<% /if -%>
<% if:diet_log -%>
| <% if:diet_log.condition == -2 %>絶不調<img src="<% site_info.blog_url %>/img/icon/5.gif" width="16" height="17" border="0" alt="絶不調" /><% /if -%>
<% if:diet_log.condition == -1 %>不調<img src="<% site_info.blog_url %>/img/icon/4.gif" width="16" height="17" border="0" alt="不調" /><% /if -%>
<% if:diet_log.condition == 0 %>普通<img src="<% site_info.blog_url %>/img/icon/3.gif" width="16" height="17" border="0" alt="普通" /><% /if -%>
<% if:diet_log.condition == 1 %>好調<img src="<% site_info.blog_url %>/img/icon/2.gif" width="16" height="17" border="0" alt="好調" /><% /if -%>
<% if:diet_log.condition == 2 %>絶好調<img src="<% site_info.blog_url %>/img/icon/1.gif" width="16" height="17" border="0" alt="絶好調" /><% /if -%>
<% /if -%>
<% if:article.accept_comment_show -%>
| <a href="<% article.page_url %>#comment">Comment(<% article.children_count | __or__ | echo('0') %>)</a>
<% /if -%>
<% if:article.accept_tb_show %>
| <a href="<% article.page_url %>#trackback">TrackBack(<% article.tb_count | __or__ | echo('0') %>)</a>
<% /if -%>
<% if:style.disp_category %>| <a href="<% article_category.page_url %>"><% article_category.name %></a><a href="#ue">上</a><% /if %>

次にコメント欄の一番下に置きました。
この場合
<div class="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%>
<% if:article_weather -%>
| <% article_weather.state %> <% article_weather.weather_emoji -%>
<% /if -%>
<% if:diet_log -%>
| <% if:diet_log.condition == -2 %>絶不調<img src="<% site_info.blog_url %>/img/icon/5.gif" width="16" height="17" border="0" alt="絶不調" /><% /if -%>
<% if:diet_log.condition == -1 %>不調<img src="<% site_info.blog_url %>/img/icon/4.gif" width="16" height="17" border="0" alt="不調" /><% /if -%>
<% if:diet_log.condition == 0 %>普通<img src="<% site_info.blog_url %>/img/icon/3.gif" width="16" height="17" border="0" alt="普通" /><% /if -%>
<% if:diet_log.condition == 1 %>好調<img src="<% site_info.blog_url %>/img/icon/2.gif" width="16" height="17" border="0" alt="好調" /><% /if -%>
<% if:diet_log.condition == 2 %>絶好調<img src="<% site_info.blog_url %>/img/icon/1.gif" width="16" height="17" border="0" alt="絶好調" /><% /if -%>
<% /if -%>
<% if:article.accept_comment_show -%>
| <a href="<% article.page_url %>#comment">Comment(<% article.children_count | __or__ | echo('0') %>)</a>
<% /if -%>
<% if:article.accept_tb_show %>
| <a href="<% article.page_url %>#trackback">TrackBack(<% article.tb_count | __or__ | echo('0') %>)</a>
<% /if -%>
<% if:style.disp_category %>| <a href="<% article_category.page_url %>"><% article_category.name %></a><a href="#ue">上</a><% /if %>

最後にトラックバック欄の一番下に置く場合は
この記事へのトラックバック<br />
<% /if %>
<% loop:list_individual_article_tb -%>
<hr />
Tracked from <a href="<% tb.url %>" target="_blank" rel="nofollow"><% tb.blog_name | html %></a> at <% tb.createstamp | date_format('%Y-%m-%d %H:%M') %><br />
Title: <a href="<% tb.url %>" target="_blank" rel="nofollow"><% tb.title | html %></a><br />
<% tb.excerpt | text_summary | html %><br />
<% /loop -%>
</div>
<div class="updown1"><a href="#ue">上</a></div>

ちなみに何処に置いても基本的には問題ありませんので各自の責任で実施してください。
posted by むさC16 at 14:50 | Comment(18) | TrackBack(0) | カープキャップ1Blog technique 上へジャンプ
この記事へのコメント
「私の場合は、」。。。[疑問(字)]

自分で考えろっつー事ですね!
コメント用アイコン1Posted by ドカベン at 2006年03月13日 15:00
執筆中にコメントはアウトですよ[笑(字)]
今ちょうど追記しときましたのでヨロピクです。
コメント用アイコン1Posted by むさC16 at 2006年03月13日 15:08
了解どすぅ[〜(字)][笑顔(ヒヨコ)]
コメント用アイコン1Posted by ドカベン at 2006年03月13日 15:12
これがもし出来たら他の機能も伝授しますよ[ビックリ(字)]
なんせ、今回は2段階の編集だからプッツンする人はしちゃうでしょうね。
すごく簡単なんですが慣れが必要かと。。。
健闘を祈ります[自慢顔(ヒヨコ)]
コメント用アイコン1Posted by むさC16 at 2006年03月13日 15:19
質問[ビックリ(字)]

@「次に」の部分のソースが一番上のソースと一緒です。
A「最後に」のソースの赤字部分が「updown」のうしろに「1」が入っていますが、
 何か意味があるのでしょうか?更に、ここの部分の赤字の後ろのディブも赤では。。。
B「最後に」だけがディブクラスから入っていますが、最初と二番目のにはディブから
 入れなくて良いのでしょうか[疑問(字)]

さっぱり上手くいきません。。。まだまだ修行が足りませんね[泣く(ヒヨコ)]
コメント用アイコン1Posted by ドカベン at 2006年03月14日 12:50
取り付け位置に出てきましたが、コメントを出さない状態で記事のeditと交換したものだけ反応します。しかし、コメント欄を出した状態ですと、取り付けた全てのボタンが機能しません。。。アドバイスお願いします[笑顔(ヒヨコ)]
コメント用アイコン1Posted by ドカベン at 2006年03月14日 12:55
ふ[〜(字)][焦る(ヒヨコ)]
border=0の前に半角スペースを追加してください。
<div class=※※>※※にしてください。
</class>と言うのは無効です。
今の所半分は出来ているのでケアレスミスだけなんです。
確認は慎重にやってください。
一つのスペースのミスでも無効になるのでこういうミスは絶対避けてください。
コメント用アイコン1Posted by むさC16 at 2006年03月14日 20:52
何度もすいません。。。
「border=0の前に半角スペースを追加してください。」
が、どこを指しているのかわかりません[泣く(ヒヨコ)]
あと、div classとすると、改行されてしまいpostedbyの下にきてしまいます。

何とか愛の手を[ビビリ顔(パンダ)][ビックリ(字)]
コメント用アイコン1Posted by ドカベン at 2006年03月15日 09:48
『posted by』の横に付けているトップアイコンは
デザイン→コンテンツ→記事→HTML編集で<div ※※>の所をそっくりそのままこれに変えてください。border=0の前のスペースもこれの事を言っているんです。
<a href="#ue"><img src="http://kaedelikebasebal.sakura.ne.jp/sblo_files/kaedelikebaseball/image/top.gif" alt="上へジャンプ" border=0 /></a>
ま、一度やってみると良いかもしれませんね。
<a name="ue"></a>
の追加場所ですがちゃんとデザイン→HTMLの所に追加しているんですよね[odoroki(字)]
どうも何故記事ページで上手く行かないのか理解できません[泣く(ヒヨコ)]
コメント用アイコン1Posted by むさC16 at 2006年03月15日 13:12
確認です。。。
@の所をそっくりそのままこれに変えてください。
 というのは、ディブ。。。もすべて換えてしまうという事でいいんですよね?

Aの追加場所ですがちゃんと。。。
 というのは1箇所でいいんですよね?

やってみましたが、できません。。。[ビビリ顔(パンダ)]
コメント用アイコン1Posted by ドカベン at 2006年03月15日 15:40
@でDIVを使うと枠になってしまいますから当然、改行されます。
だから、DIVは使わない。
もし使ったとしたらスタイルシートでFloatを使うのは[N.G(字)]と思います[自慢顔(ヒヨコ)]
ただのリンク(a)でやってみる手が手っ取り早いでしょう。
あくまでもこの解決方法ボタンの設置に関するものだけです。
ジャンプ機能はまた次の段階で解決としましょう[笑顔(ヒヨコ)]
コメント用アイコン1Posted by むさC16 at 2006年03月15日 16:30
近々にご指導お願いします[ビックリ(字)][照れ顔(パンダ)]
コメント用アイコン1Posted by ドカベン at 2006年03月15日 19:17
できました、できました[ビックリ(字)][ビックリ(字)]

原因はHTMLの方のおく位置でした[ビックリ(字)]
私がおいていたのはトップページにしか反映されない「ようこそ」の上でした。
だからコメント欄の時には「ようこそ」がでなくなり、トップ指定ができない状態で機能
しなかったようです。

今回はボディの一番上に設定させたところ[笑顔(ヒヨコ)]でした[ビックリ(字)]

お電話で理屈を教えてもらったから解決できたのだと思います[ビックリ(字)][ビックリ(字)]

本当にありがとうございました[笑顔(ヒヨコ)]
コメント用アイコン1Posted by ドカベン at 2006年03月15日 21:38
おめでとうございます[祝(字)]
ようやく出来たんですね[自慢顔(ヒヨコ)]
ま、次は何をしましょうか[疑問(字)]
そろそろコメント欄に絵文字でも入れましょうか[疑問(字)]
コメント用アイコン1Posted by むさC16 at 2006年03月15日 21:51
まずはパンくずと横型カウンターをとりつけます!!
記事のバックグランド、ピンクでステキです[笑顔(ドクロ)]
コメント用アイコン1Posted by ドカベン at 2006年03月16日 09:23
パンくずは3箇所(記事ページ、カテゴリページ、アーカイブページ)にソースを追加するのでnavi部ソース読解が必要です。
あとは設置位置に気を付ける様に[ビックリ(字)]
カウンタ設置は何故未だ出来ないのかは不思議に思ってます[焦る(ヒヨコ)]
いずれにせよ、比較的簡単ですので頑張って下さいな[自慢顔(ヒヨコ)]
コメント用アイコン1Posted by むさC16 at 2006年03月16日 15:52
誠に言いにくいのですが。。。

か、カウンターにてこずってます。
すっごく他人原因論ですが、ミリ○○のやつって、デジタルの取り付け方付いてないですよね[疑問(字)]
サンプルはわかったけど、それをどうやってとりつけるのかを説明しろ[ビックリ(字)]ってひとりで暴れてます[ビビリ顔(パンダ)]
私のブログのカウンターの下でひそかに未完成のカウンター君がいます。
助けて下さい!

あと、クッキーも挑戦しようとしたのですが、重くなるって説明があり却下してしまいました。パンくずに関してはカウンターのあと。。。なんて思ってましたが、カウンターでつまずいてます[眠顔(カエル)]
コメント用アイコン1Posted by ドカベン at 2006年03月16日 16:45
モ〜[牛さん(動物)]モ〜[牛さん(動物)]
なんで出来ないんですかね[焦る(ヒヨコ)]
ま、ドカベンさんの方に書き込みしましたので参照してください[自慢顔(ヒヨコ)]
コメント用アイコン1Posted by むさC16 at 2006年03月16日 17:14
上へジャンプ
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

上へジャンプ
さくらインターネット株式会社 株式会社ぐるなび 株式会社オートウェイ 損保ジャパンの海外保険 オクトパストラベル・ジャパン
中国醸造株式会社 有限会社BBシステム 日本シグマックス株式会社 日本シグマックス株式会社 株式会社コーエイプランニング OTAIRECORD株式会社