アメブロで【ページの上（先頭）へ戻る】ボタンを固定表示

アメブロは、トップページやカテゴリを選んだときに一度に表示される記事数を、１、３、５、１０から選んで変更することが出来ます。


芸能人ブログなどはほとんど１記事に表示数が設定されており、次の記事を読むためには一々次のページへジャンプしていかなければなりません。


ページをジャンプしていく毎にPVが加算されていくので、結果的にアクセスがものすごくあるように見えます。同じアクセス数しかなくても、一度に表示される記事数が少ないほどPVは伸びるという仕組み。

それを計算にいれて、すごくアクセスがあるように見せかける為にわざと１記事しか表示させていない人もいれば、単純にあまり考えずに表示数の設定をしている人もいます。


そう考えますと、１０記事表示の設定にしているのにランキング上位にちゃんと食い込んでいるブログは、逆に実力があるのだなとわかります。


まあ最近はツールをぶん回しているブログも増えてきているので、あまりアクセス数やランキングがどうとか気にしても仕方がないようにも思いますけれど。



ちなみにこのブログは今のところ５記事表示にしています。

別に１０記事でもいいのですが、記事内に画像を使う事が多い為、ブログが表示された時の読み込みに非常に時間がかかり、少し困ったので表示数を減らしました。

かといってさすがに芸能人でもないのに１記事表示を選ぶのは恥ずかしく、３か５かで迷って結局５記事にしているだけという状態。


しかし５記事でも、並べて一覧で見てみると、かなり縦長なブログになってしまいます。
上から下に読み込んでいく時はいいのですが、いざ読み終わってみると記事の左右にサイドバーはすでになく、戻るためにはだいぶ上までスクロールしなおさなくてはなりません。


これが結構面倒なので、クリックするとページの上まで戻るボタンを付けてみる事にしました。


※このボタンはクリックしても何も起きません。

検索してみると、この手のボタンを表示するには結構色んな種類の方法があるようです。その中から今回試してみたのはjQueryを利用するやり方。

ブログのトップから少し下へスクロールすると自動的にボタンが現れ、クリックするとページのトップへヌルヌルっとした動きで戻ります。（このブログの右下あたりに表示されているはず）

とはいうものの、そもそもこういった事は素人なのでjQuery自体の意味もそこまで把握していません。その為、これから書くことに多少の間違いはあるかも知れませんが、なんとなく読みかえておいて下さい。


■ページトップへ戻るボタンを表示する手順

（１）スクリプトの入手

まずは、
Dynamic Drive DHTML scripts- jQuery Scroll to Top Control
のページからscrolltopcontrol.jsというファイルをダウンロードしてきます。


※真ん中あたりにあります。ボタン画像は不必要ならダウンロードしなくてもいいです。

こんなファイルがダウンロード出来ます。




（２）scrolltopcontrol.jsの内容を修正

■画像へのパス（URL）を準備
前もってボタン画像をサーバーへアップロードしておき、そのURLを入手しておきます。通常であればアメブロの画像フォルダにアップで構いません。

※「page top ボタン 画像」などのキーワードで検索すれば、ボタン画像を無料配布してくれているサイトがいくつも見つかります。
こだわるのであればAdobe Photoshop ElementsやGIMPなどで自作するのもあり。無料で簡単にということならButton Makerというサイトが便利です。


■scrolltopcontrol.jsの設定
次にダウンロードしたscrolltopcontrol.jsをエディタで開きます。
※外部ファイル化するのでUTF-8で保存できるエディタで。
何を使っていいかわからない場合はEmEditor Freeあたりを使用して下さい。


エディタで開き１２行目にある

controlHTML: '<img src="up.png" style="width:48px; height:48px" />',

この【up.png】の部分を画像のURLに書き換えておきます。

またその横の【width:48px】と【height:48px】の数字部分もボタン画像のサイズと同じ数値へ変更しておきます。（しなくても構いませんが画像が変な形になってしまいます。）

書き換えが終われば文字コードを【UTF-8】にして保存。


（３）ファイルのアップロード

このままscrolltopcontrol.jsの中に記述されたコードの前後に

<script type="text/javascript"><!--

//--></script>

を追加してフリープラグインに放り込めばそのまま動くようにも思いますが、さすがに3600文字以上ありますので、外部ファイル化することにします。

外部ファイル化の手順はそんなに難しくありません。
サーバーとドメインを持っていればすぐに出来ます。
同業者であれば事務所用のサイトぐらいはあると思いますので、そこのサーバーの余った場所でも使えばいいでしょう。

手順としては
・サーバーに適当に【ameblo】とでも名付けたフォルダを作成
　（ルートにそのままファイルを置くならフォルダは不要）

・そのフォルダへscrolltopcontrol.jsファイルをアップロード。
　（jsファイルの名前は好きに変更してもいいです）
　
これで http://ドメイン名/ameblo/scrolltopcontrol.js というURLでjsファイルにアクセス出来るようになります。

フリープラグインの外部ファイル化はここまで完了。

↑上のURLを<script type="text/javascript" src=""></script >の中に放り込みます。

こんな風になります。

<script type="text/javascript" src="http://ドメイン名/ameblo/scrolltopcontrol.js"></script >

あとはこのコード↑↑をそのままアメブロのフリープラグインへ書き込めばOK。

デフォルトのままだと、ブログの右下あたりに（２）で指定したボタン画像が表示されます。


【カスタマイズ】
ボタンの動きや位置などを変更したいときはscrolltopcontrol.jsファイルをエディタで開き、11行目から14行目までの数値を調整します。

数値の概要

１１行目

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},

startline
ページのトップからどれだけ下にスクロールしたらボタンが表示されるかを設定します。数値が小さくなるほどに、すぐボタンが表示されるようになります。

scrollto
スクロールしてから戻る位置です。初期値の0＝TOP。任意の戻り先についてはidで指定できます。

scrollduration
スクロールして戻っていくスピードです。数字が大きいほどゆっくりになります。

fadeduration
ボタン画像が表示されるのにかかる時間を設定出来ます。，をはさんでそれぞれイン/アウト。数値が大きいほど表示に時間がかかります。


13行目

controlattrs: {offsetx:5, offsety:5}

ボタンが表示される位置を設定出来ます。
offsetxがウインドウの右端からの距離、offsetyがウインドウの下端からの距離を表しています。見る人によってPCのウインドウサイズは変わりますので、そのあたりも意識しながら調整していく必要があります。


ボタン画像についても後からいくらでも変更出来ますので、ブログの色合いや雰囲気に合わせて色々試してみるといいかもしれません。

調べてみると、外部ファイルを使わなくてもフリープラグインとCSSだけでも【上へ戻る】ボタンの固定表示は出来るようなので、その内試して記事にしてみたいと思います。

・アメブロカスタマイズ目次

移動の一日

今日はかなり暖かな一日でした。
というかむしろ暑いぐらい。

ただ今週の大阪はこれからずっと下り坂の天気となりそうなので、唯一の晴れ間だったのかもしれません。

雨が降るとどうしても移動が制限されるので困ります。



そんな訳でいい天気だった今日はあちこちを行ったり来たり。


朝一で堺市のお客さまのところへ書類を受け取りに行き

その足で別件で岸和田の警察署まで直行
車庫証明の受取りです。



戻って業者さんへのファックス送信等の事務仕事

そこから必要書類をまとめて住之江の司法書士さんの事務所へ登記依頼


なんだか一日で相当の距離を移動しました。
気がつくと手が真っ赤に日焼けしています。

アメブロの記事内に枠線・囲み枠を表示する方法

記事内において特定のテキストを目立たせたい時は、文字の色を変える、文字の大きさ・太さを変えるなどの方法があります。

リンクするテキストの色を変える事などがその典型的な例。


それ以外の方法としては、装飾した囲み枠を使用するのも効果的です。

このブログのスキンの場合、元々の仕様として

<blockquote>テキスト</blockquote>

↑このようにタグ編集エディタに打ち込むと

テキスト

↑というように表示されるようになっています。

これはこれで結構重宝しています。

ただこの<blockquote>というタグ自体の意味がそもそも「引用」であり（まあ元々の意味合いなんかはどうでもいいんですけど）、また同じ装飾の囲み枠ばかりだと変化がなくてワンパターンという事もあったので、別途違う形の囲み枠を使ってみる事にしました。


方法としては２つあります。

１つは
スタイルをそのまま記事内のタグに書き込んでしまう方法

参考→netmaniaさん「飾り窓テンプレート」

要するにアメブロで記事を書くときにタグ編集エディタで

<div style="padding:5px;border-color:#999933;border-width:1px;border-style:solid;height:50px;width:80px;background:#F9F9BA;">テキスト<br>テキスト<br>…</div>

↑このように記述すると

テキスト
テキスト
…

↑こういう風に表示されるというやり方。

これでも別に構わないのですが、頻繁に使用する場合に毎回記述するのは少し面倒です。後で装飾を変えたい時なども、個別の記事１つ１つを修正していかなければなりません。




そこでもう１つ
スタイルシートを使う方法

アメブロのCSSに次のように追記して保存

/* ■囲み枠・装飾１■ */
.waku1{
border: 1px solid #990000;
padding: 5px 5px 5px 5px;
background: #F9F9BA;
}

ちなみに
border～が枠線の太さ・形・色
padding～がborderからの余白
background～が背景の色
を表しています。


これでアメブロで記事を書くときにタグ編集エディタで

<div class="waku1">テキスト</div>

↑このように記述すれば

テキスト

↑こう表示されます。
※実際にこのブログで使用するCSSについては、枠線の色・背景色など変更しているので上記のCSSの記述通りには表示されないと思います。ご注意下さい。


このCSSを使用するやり方の場合には、後から変更したい時にもスタイルシートの内容を書き換えれば、一括して囲み枠の装飾を変える事が出来るので便利です。

ということで後者であるCSSに追記する方法を採用する事にしました。

・アメブロカスタマイズ目次

HeartRails Badgeでアメブロにプロフィールバッジ設置

最近よく他の人のアメブロを見に行くと、ブログの端にTwitterやfacebookなどへリンクする付箋のようなバッジをよく見かけるようになりました。

これは「プロフィールバッジ」と呼ばれるもので、HeartRails Badgeというサービスで作成する事が出来ます。


このブログでもTwitterその他へのバナーリンクを張っていましたが、

どうもサイドバーがごちゃごちゃしてくる為（２カラムなので）片付けの意味も含めてプロフィールバッジを導入することにしました。



【手順】
まずはHeartRails Badge のサイトへ行き



①表示したいサービスを選んで必要事項を入力し、「貼り付け用タグを取得を取得する」をクリック

②あとは生成されたタグをアメブロのフリープラグインに貼り付ける。

これで終了です。
バッジが表示される位置や背景・文字色などを自由に変更することも可能です。
twitterやfacebookだけでなくmixiなどの国内の有名なSNSへのリンクはほぼ対応しています。


Twitterへのバッジを作るだけならtwitter Follow Badgeあたりでもいいと思いますが、その他のSNSへのリンクもまとめて作成するならこちらのサービスの方が手軽で便利でしょう。


注意する点としては、このバッジはIE5・IE6では表示されません。
IE7以降でなければダメです。

またflashにて作成されるブログパーツなので、特定のMac環境でも表示されない可能性があります。

・アメブロカスタマイズ目次

天気

昨日までと違ってかなりいい天気です。


お客様のところまで書類を持って行くのも、動きやすくて助かります。