過去記事更新

2013年3月3日日曜日

※ガチでいくよ!@B:チュートリアル


 今回はこのサイトの見かたについて。
 各種Blogger機能等もあるので、思いついたらいろいろ追記します。

 現在の内容:リンク色、関連記事(検索)、過去記事、拍手ボタン
+2014/3/10:モバイル版、ページ数、スクロールリンクについて追記
+2014/7/12:モバイル版のmax-results対応、拍手ボタンについて追記

◇PC版、モバイル版
 このサイトにはPC版モバイル版の表示があります。
 見分け方はアドレスで、?m=1が付いているのがモバイル版です。

PC版:http://gachi4.blogspot.jp/

モバイル版:http://gachi4.blogspot.jp/?m=1

(※ドメインの.jp部分は環境により.com等になりますが、中身は同じです)

 いずれもBlogger標準のテンプレートがベースですが、レイアウトやウィジェット関連はだいぶいじってあります。
 仕組みとしては、?m=1が無いURLにアクセスすると環境によって自動判定されるので、通常は勝手に切り替わって表示されているかと思います。
  ※User-agentをいじると判定が変わるよ!
 なおモバイル端末からアクセスしている場合は、下部にある「ウェブ バージョンを表示」というリンク(↓のアドレス)を踏むとPC版の表示になります。

強制PC版指定:http://gachi4.blogspot.jp/?m=0

 これは他のBloggerサイトでも(モバイル版を設定してあれば)同じ挙動になるはずです。
 もし自分のブログを作ろうという時にも、知っておくと動作確認に便利かなと思います。


◇リンク色
 現在、HTMLリンク■この配色となっています。
 マウスカーソルを合わせると色が変わり、下線が付きます。
 配色はたまに変わりますが、リンク先頭は基本的にまたはを付けています。
 この2つは別ウィンドウ(別タブ)そのまま開く設定です(ミスはあるかも)。

 また、長めの記事ではを使う場合があります。
 こちらはスクロールリンクで、同ページ内のどこかに移動するものです。
  →環境によってはページごと読み込まれるかも。

 なお、この記事のように見出しに下線リンクを使うことが多々ありますが、これをリンクにすることはほぼありません。
+2014年3月現在、やっぱり分かりにくいのでリンクには下線を表示するようにしました。
 ちなみに過去記事、人気記事の部分は下線が出ない設定にしてあります。


◇関連記事を見る
 記事上下の「ラベル」が、いわゆるタグ、カテゴリの機能になっています。
 だいたいですが、ある話題が増えてきたらラベルを付けるようにしています。
  →◆アフタヌーン◆ガシャポン戦士NEXT◆PS4など。
 さらに詳しく見たい場合はブログ左上の検索欄からサイト内検索ができます(現在モバイル版では外しています)
 なおラベルやサイト内検索の画面では、画面内の記事タイトルが一覧表示されるようになっています。

 また、各記事の一番下には自動生成の関連記事(一応)あります。
 精度はややお察しですが、直近の類似記事が選出されているかと思います。


◇過去記事を見る
 トップページやラベル別ページの末尾にある「前の画面」リンクから過去の記事を表示できます。
 初期設定は8件ずつ(※検索は20件)ですが、URLのmax-results=8「8」「20」などに書き換えて開くこともできます。
 件数を変えた場合、さらに「前の画面」で進んだ先もその件数で表示されます。
  ※あんまり大量に表示しないほうがいいよ!

◇追記@2014/3/10:(→たぶん解決)
 上記のmax-resultsがあるとモバイル版に切り替わらない(スマホでもPC版表示になる?)と分かったので、現在は基本的にPC版記事のヘッダ/フッタのみに設定しています
  →暫定対応。

 そういう理由で、記事内からラベルページにリンクを貼る場合も、ここ数ヶ月はmax-resultsの指定を切るようにしています。
 この指定が無いと、一覧ページの件数が多くなって表示がやや重くなるため、いつか直せるようなら直したいところです。

+◇追記@2014/7/12:
 この件は対応されているようです(特にソースは無い)。
 前提として、上記不具合の原因はURL中にが2つ入るためです。
 問題があるURLは、2つ目以降のにしてみると正常に開けるはず。

 先日PCで実験したところ、Agentをモバイルにして以下……
  http://~/search/label/ラベル名?max-results=8
 ……のようなURLを開くと、以前は?m=1?max-results=8となっていたところが、現在は?m=1&max-results=8のように自動変換されていました(おお……)
 これならモバイル版を想定しているサイトであっても、本文中に~ラベルURL?max-results=10のようなリンクを張っても特に問題なさそうです。
  →まあ実機テストは全くしていないんですが。

 ただし、末尾が?m=1?max-results=8のURLを直接開いた場合、リダイレクト等はされずPC版が表示されてしまうようです(今のところ)。
 具体的には、各記事のヘッダ/フッタにあるラベルリンクが↑これ↑の影響でおかしくなっていました。
 なお当サイトでは末尾のmax-resultsの前をPC版/モバイル版で?/&に出し分けるように設定したため、現在は問題ないはず。
  →詳しくは別記する……かも。
 ちなみに検索やラベルの前/次リンクで移動すると&updated-max=~等も付加されますが、いろいろ見たところが複数入る挙動にはならず安定して動いているようでした。

 なお各ページの右側には、人気の投稿(ランキング)、過去記事(期間別の記事一覧)があります。
 期間ツリーはBlogger純正のもので、をクリックすると年/月で展開できます。
 この2つはモバイル版では表示されませんが、人気の投稿については◆モバイル版トップページの下部に表示されるようにしています。
 こちらは当初、集計期間を30日間としていましたが、現在は変動の激しい7日間に設定しています。


◇苦しいです。評価してください。
 記事の最後に、クリックで数字が増えるだけのボタンを付けています。
 とりあえず気に入ったら「アンバサ」、そうでなかったら「だが断る」をクリックして頂けるととても参考になります。

(旧内容)

 使用しているのはBlogger純正の「リアクション」で、web拍手イイネのような機能です。
  ◇公式ヘルプ:
  http://support.google.com/blogger/bin/answer.py?hl=ja&answer=143413

 この「リアクション」はかなり簡易的な機能で、自分の知る限り記事別クリック数のような統計/管理機能も無いため参考程度のものとなっています(2013年3月現在)。
 そういう意味でも気軽にクリックしていただければと。
 ちなみに「アンバサ」の元ネタはデモンズソウルです。
  →◆Demon's Souls - Wikipedia >10 用語

+この「リアクション」はどうも動作があやしいのか、テンプレートをいじったりしている間に数字がリセットされてしまうことがある(?)ようです。
 これについては、いずれ別サービスからまともな拍手ボタンを導入するかもしれません。

 現在はFC2拍手を導入しています。
  →公式:http://clap.fc2.com/ja/
 Blogger純正「リアクション」に比べて動作が安定しており、URLごとの統計やコメント機能も用意されています。
 こちらはメールアドレスを用意すれば複数の登録もOKとのことだったので2アカウント分設置しています。

 内部的にはこんな感じで工夫してあります。
・海外向けページやモバイル版で拍手した場合でも基準URLでカウントさせる
・題名にとかとかがあっても飛び先でちゃんと表示させる
(このあたりは、また別に詳しく書く予定)




 ひとまず以上です。
 いろいろBloggerテンプレートをカスタマイズした部分もありますが、それらについても個別に書いた時に追記します。

 ではまた。



絶対押すなよ! ラグラン長袖Tシャツ(ホワイト×ロイヤルブルー) M


リアクションの殿堂 [DVD]

0 件のコメント:

コメントを投稿