ヒビコレ

iPhone使いの携帯・スマホ関連の雑記ブログ

2717930.jpg

ブログにトップページに戻るボタンとプルダウンのメニューを設置

カスタマイズ』カテゴリの関連記事

スポンサードリンク

ブログを弄ったので自分用のメモとその報告を。

今回弄った点は以下の2点。

・トップページに戻るボタンの設置
・プルダウンのメニューの設置

今回の設置はFC2ブログでの設置方法になります。それでは個別に設置方法を記載していきます。

トップページに戻るボタンの設置


2月ぐらいから記事の濃さを少し意識するようになり、その関係で記事が長くなっています。そうなるとトップページに戻るのも手間がかかっているだろうと思い、このボタンを設置しました。

aWyoD.png

何個か方法はありましたが、一番簡単そうなのを発見しそちらの方法で設置しました。参考にしたサイト様は以下。

参照 「ページの先頭へ戻る」の常駐表示:CSS小技


まずはHTML内のフッター内に以下のコードを入力。フッターの記載はどのテンプレートでも同じになっているかは知らないが、私は <div id="footer"> の下に設置。

<div id="body-inner">
<div class="page-back"><a href="#header"><img src="画像" /></a></div>
</div>


赤字の画像部分に表示させたい画像のURLを記載して下さい。

次にスタイルシート内に以下を記載します。

.page-back {
position: fixed;
bottom: 10px;
right: 10px;
}


位置の調整については赤字の数字を変更して下さい。bottomが縦の位置、rightが横の位置になります。

ボタンを左側に設置したい場合は緑色文字のrightを left に変更すると左側に設置になります。

これで最初の画像のようにトップページに戻るボタンの表示が出来ました。

戻るボタンの画像については、以下のサイト様の無料素材を利用させてもらいました。

参照 topへ戻るボタン | EC design(デザイン)


このボタン系はSNSボタンも設置してもいいかなと思ったが、スマホからPCで見た時に結構邪魔になるのではと気付いた。

BbQ2y.png

最近はスマホからのアクセスもかなり多い。それでもスマホ用の表示も可能にしているが、スマホからPC表示用の閲覧の方が多い。って事で他のボタン類については一旦保留。

プルダウンメニューの設置方法


以前はブログタイトル下にはRSS・SNS・問い合わせボタンを設置していました。

dfggsfg.jpg

良くあるパターンでこれはこれでいいと思っていたが、別の部分が気になった。

これは少し前に右プラグインに設置しているカテゴリや月別等の一覧を折りたたんだ。

bfhd.png

目的はスッキリさせる事でそれは出来たが、位置が分かりにくくなってしまったと思います。普段見ている私でさえ若干探すのにイラッとするからリピーターの方や、ましてや初見の訪問者の方は見た事がない方もいると思う。

これではPVに影響するだろうと、先のRSS等を設置していた箇所にこれを表示させる事にしました。メニューはプルダウン形式でクリックしてもらうと、それぞれの一覧が出るようになっています。

dffgs.jpg

表示させたのは以下の4点。

・カテゴリ一覧
・月別一覧
・新着記事
・最新コメント

設置方法は以下のコードをHTML内の設置したい箇所に挿入して下さい。

<!-- ▼ プルダウンメニュー ▼ -->
<script type="text/javascript">
<!--
function jumpmenu(targ,selObj,restore) {
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>

<form id="categories_archives" name="categories_archives" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)"style="width:200px;">
<option value="<%url>" selected="selected">カテゴリ一覧</option>
<!--category-->
<option value="<%category_link>">■<%category_name>[<%category_count>]</option>
<!--/category-->
</select>

<form id="monthly_archives" name="monthly_archives" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)"style="width:200px;">
<option value="<%url>" selected="selected">月別一覧</option>
<!--archive-->
<option value="<%archive_link>">■<%archive_year>-<%archive_month>[<%archive_count>]</option>
<!--/archive-->
</select>

<form id="recent" name="recent" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)"style="width:200px;">
<option value="<%url>" selected="selected">新着記事</option>
<!--recent-->
<option value="<%recent_link>">■<%recent_title> - <%recent_month>/<%recent_day></option>
<!--/recent-->
</select>

<form id="rcomment" name="rcomment" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)"style="width:200px;">
<option value="<%url>" selected="selected">新着コメント</option>
<!--rcomment-->
<option value="<%rcomment_link>#comment<%rcomment_no>">■<%rcomment_name> - <%rcomment_month>/<%rcomment_day></option>
<!--/rcomment-->
</select>

</form>
<!-- ▲ プルダウンメニュー ▲ -->


メニューの幅を変更したい時は各 px の数字を変更。プルダウンメニューの最初に■が表示されていますが、変更する場合は上記コードの■を変更して下さい。

アイコン画像を表示させたいと思って試したが無理だった。方法が分かれば記載しますが一旦保留で。

今回のコードで参考にさせてもらったのは以下のサイト様。

参照 初心者でもできる簡単FC2ブログの作り方 はじめまして


私が設置したのは先の4点ですが、トラックバックやリンクも表示させたいって方は上記のサイト様にコードが記載されていますのでご確認下さい。

取りあえず設置しましたが、細かい所は後で調整します。またタグ一覧も表示出来ないかと思考中。

RSSボタンやSNSボタンの設置


上記でRSSボタン等を入れ替えてプルダウン形式のメニューを表示させましたが、RSSボタンはどうすんだって話。頻繁に必要なボタンでは無いもののやはりリピーター作りには用意させておきたい。

予定としてはブログタイトルの横に設置予定ですが、これはまた後日書きます。

[後日記載予定]

RSSボタンやSNSボタンの設置


この手のカスタマイズはちょこちょこ行なっていますが、目的としてはPVアップのためですが、イコール閲覧者に快適に見てもらいたいってのがある。

ですが今ひとつ効果が分からないのが難点。コメントで反応が分かるサイトならいいが、元来このブログはコメントが少ない。そしてリピーターもそれほど多くはない。

その都度アンケートを取るか、いいねボタンを設置しようかとも思っているが、その辺はまた考えます。取りあえずPVがアップしているなら好評なのだと思いたい。

タグ一覧もプルダウン化 ※2016.7.16 追記


以前行なったタイトル下にカテゴリ等のプルダウン化を行いましたが、これにタグ一覧も追加しました。

【以下方法で表示は可能になりましたが、リンクが機能していません現在調整中】

これでタイトル下にプリダウン化した物は以下の4つ。

・新着記事
・カテゴリ一覧
・月別一覧
・最新コメント
・タグ一覧 ← new021_11.gif

またRSSやTwitterボタン等はそれに合わせて右上に移動。

xc4FR6ds.png

それではHTML内に挿入するコードを。追加したタグ部分を赤字で記載しています。

<!-- ▼ プルダウンメニュー ▼ -->
<script type="text/javascript">
<!--
function jumpmenu(targ,selObj,restore) {
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>

<!-- 新着記事 -->
<form id="recent" name="recent" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)"style="width:180px;">
<option value="<%url>" selected="selected">新着記事</option>
<!--recent-->
<option value="<%recent_link>">■<%recent_title> - <%recent_month>/<%recent_day></option>
<!--/recent-->
</select>
<!-- /新着記事 -->

<!-- カテゴリ -->
<form id="categories_archives" name="categories_archives" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)"style="width:180px;">
<option value="<%url>" selected="selected">カテゴリー</option>
<!--category-->
<option value="<%category_link>">■<%category_name>[<%category_count>]</option>
<!--/category-->
</select>
<!-- /カテゴリ -->

<!-- 月別アーカイブ -->
<form id="monthly_archives" name="monthly_archives" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)"style="width:180px;">
<option value="<%url>" selected="selected">月別アーカイブ</option>
<!--archive-->
<option value="<%archive_link>">■<%archive_year>-<%archive_month>[<%archive_count>]</option>
<!--/archive-->
</select>
<!-- /月別アーカイブ -->

<!-- コメント -->
<form id="rcomment" name="rcomment" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)"style="width:180px;">
<option value="<%url>" selected="selected">最新コメント</option>
<!--rcomment-->
<option value="<%rcomment_link>#comment<%rcomment_no>">■<%rcomment_name> - <%rcomment_month>/<%rcomment_day></option>
<!--/rcomment-->
</select>
<!-- /コメント -->

<!-- タグ -->
<form id="tag" name="tag" action="">
<select name="tag" onchange="document.PDTg.submit()"style="width:180px;">
<option value="">タグ</option>
<!--ctag-->
<option value="<%ctag_name>">&nbsp;<%ctag_name> (<%ctag_count>)</option>
<!--/ctag-->
</select>
<noscript><input type="submit" value="Go" /></noscript>

<script type="text/javascript"><!--
var NTg=new Array();
//===================================
NTg[0]="*";
NTg[1]="*";
NTg[2]="*";
NTg[3]="*";
NTg[4]="*";
NTg[5]="*";
//==================================
var A=document.PDTg.tag.childNodes;
for(i=0;i<NTg.length;i++){ for(j=0;j<A.length;j++){
if(A[j].nodeType==1){ if(A[j].value==NTg[i]){
document.PDTg.tag.removeChild(A[j]);break;
} } } }
//--></script>
</select>
<!-- /タグ -->


</form>
<!-- ▲ プルダウンメニュー ▲ -->


各サイズはこのブログに合わせていますので変更は px の数字を変更。並び替えも好みで変えて下さい。

移動させたRSS等のアイコンは以下のサイト様のを利用させてもらいました。

ミニ・ソーシャル・アイコン -Web Design -Works //ヴォルフロッシュミニ・ソーシャル・アイコン -Web Design -Works //ヴォルフロッシュ 


後は記事検索と全記事一覧も同列に並ばせたいが、まだ上手くいかないので出来次第追記で記載します。

 カスタマイズ

ブログカスタマイズメニュープルダウンHTMLFC2ブログ

スポンサードリンク

今日の人気ページ

Fireタブレットが4,000円OFF-

0 Comments

コメント *クリック