ブログにトップページに戻るボタンとプルダウンのメニューを設置 - ブログ/カスタマイズ

mineoおすすめ契約方法

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

2016.06.29 | カテゴリ:ブログ/カスタマイズ

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

今回弄った点は以下の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 //ヴォルフロッシュ 


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

スポンサードリンク


ブログ/カスタマイズ』カテゴリの関連記事

人気記事ランキングに画像を付けて表示する 再考
FC2ブログでスクロールしてもサイドバー(プラグイン)を固定化させる
ブログへのYouTune埋め込み動画をスマホ用にサイズを自動変換
FC2ブログに画像付きエントリー記事一覧表示
FC2ブログ タグ別の関連エントリー記事一覧設置修正

関連タグ:

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

Fire7hklk.png   Fire7HD8300x250.jpg  

この記事へコメントする・コメントを見る (0)

今日の人気ページ

fire600.jpg

新着記事

全裸待機禁止Tシャツ企画進行中!? NifMoのTwitterが面白い [08月20日]
iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」 を紹介!AppStoreから削除される前に入手を [08月19日]
iPhoneのバッテリー診断アプリの決定版 「Battery Life」【悲報 再削除】 [08月18日]
Googleが警告を出すので早期のFC2ブログのSSL化を求む [08月18日]
セブンスター仕様1935レプリカZippoが当たるQRコードキャンペーンに挑戦[2017年8月1日-10月31日] [08月15日]
JTが電気加熱型たばこ『Ploom TECH』の抽選販売受付を開始【第5回目】 [08月11日]

mineo紹介キャンペーン
最新記事
2016年人気記事ランキング
Apple公式のiPhoneのバッテリー診断方法 [2017年最新版] dsgre.jpg
iPhoneのバッテリー診断アプリの決定版 「Battery Life」 rank20160605 (3)
iPhoneのホーム画面のアイコンの位置を自由に変更する裏ワザthdth.jpg
クリックポストの配達日数を実際に体験した日数と目安の調べ方を紹介rank20160605 (10)
iPhoneのバッテリーの劣化を調べるiOSアプリ 「coconutBattery」hjkh.jpg
PHILIPS(フィリップス) ソニックケアーを修理に出す60409121432820.jpg
FREETEL Simple2はまさかの3種類展開と1年間無料キャンペーン開始FREETE.jpg
iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」を紹介dndeth.jpg
あのiPhoneのバッテリー診断アプリ「coconutbattery」がAppStoreに復活!→【再削除】→iOS10でアプリも起動せずhjkh.jpg
ドコモ「Xiパケ・ホーダイ for iPhone」を解約(廃止)rank20160605 (6)
Amazonのタブレット Kindle Fire HDで自炊漫画を読むblog-entry-1037.jpg
iPhone最強の広告ブロックアプリ 「AdBlock」 がiOS10で復活yfyfghjv.png
docomo契約SIMカードは差し替え注意201620.jpg
メルカリ 返金までの流れを実体験 その5 「返金(取引キャンセル)編」23131.jpg
ドコモ Xiパケ・ホーダイ for iPhoneを解約(廃止)の注意点201615.jpg
mineo紹介キャンペーンの甘い罠→【再延長】2017年1月31日まで→【仕様変更】一部条件で特典がEJOICAセレクトギフトに201616.jpg
ドコモのパケットサービスを解約しようとするが問題発生201617.jpg
iPhoneバッテリー診断アプリの信憑性gufddcrt.jpg
メルカリ 返金までの流れを実体験 その1 「商品破損編」rank20160605 (9)
docomo iPhone契約SIMをガラケーに挿す201613.jpg
記事を探す
サイト内検索
  • iPhone/全般(50)
  • iPhone/アプリ(53)
  • iPhone/アイテム(39)
  • MVNO(54)
  • MVNO/mineo(124)
  • MVNO/NifMo(19)
  • MVNO/0SIM(10)
  • FREETEL/Simple/Simple2(43)
  • タブレット(29)
  • ケータイ/スマホ雑記(29)
  • ケータイ/スマホNEWS(233)
  • NM705i/6120c(2)
  • 705NK/N73(94)
  • Nokia E51(42)
  • 雑記(95)
  • ブログ記事録(105)
  • ブログ/アクセス数公開(30)
  • ブログ/カスタマイズ(34)
  • プリペイド/プリモバイル(13)
  • デジカメ(4)
  • LINE(14)
  • IQOS/PloomTECH/Zippo(23)
  • アンケート(3)
  • MVNO2台持ち用 通話専用機種(30)
  • NOKIA その他(3)

  • 月別一覧を開く

    関連ワード一覧を開く

    全記事一覧表示
    Author
    ペンギンのアイコン素材管理人:705んk
    @musiatui | Twitter

    iNoWBh.png

    管理人利用中アイテム
    カテゴリ別記事一覧