スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
公開: --年--月--日, カテゴリ: スポンサー広告

ブログ改装メモ(2) トップページの固定

前回の記事では計画の立案として、今後の方針を何件か掲示したので今回はその中の一つである「トップページの固定」についてメモ。なお、これはこの記事を書いている段階でそれなりにできあがりの状態にある。

目的

私がトップページに求めるもの

私はトップページ(このブログであれば http://silentminority.blog52.fc2.com/ になる)とはひとつのウェブサイトにおける基点となるページであるというイメージを持っていて、そこに求めるものはそのウェブサイトの更新情報とナビゲーション、このくらいでそれ以外の要素は特に必要ないかなと思っている。また、トップページ = ホームという、戻ってくる場所のようなイメージも持っている。個々のページにはヘッダー部分にパンくずナビゲーションを用意しているので現在どの階層に位置するのか把握できるし(全然深くないけど)、どこからでもホームに戻ってこられるので迷う事はない(と期待している)。

従来の、と言うよりブログ全般がそういうものだけどトップページにアクセスすると新着記事が5件ほど(これは個々の設定により違う)表示される。表示されるのは記事全文のものもあればタイトルとイントロ部分だけ表示されて『続きを読む』などの本文へリンクされているものものもある。それはそれで別にどうでもいいけど、私の求めているものとは程遠いので思い切り変更してしまうことにした(幸いFC2はその辺り自由度が高いようなので)。

具体案

ではトップページにおいてどのような情報を参照できるようにしたいかについて以下に示してみる。

最低限欲しいのは以上で、以下はあると便利かと思い追加したもの。

(そう言えば質問と意見受付の記事を追加するのをすっかり忘れてたので追加しておいた。あっ、でもあれってほとんど機能してないからもう要らないんじゃないか?)

変更

FC2ブログ専用のテンプレート変数を利用する

FC2ブログ独自で用意されている変数で、以下に示すエリア変数を利用すればトップページと記事ページを分離できる。

<!--index_area--><!--/index_area-->
トップページのみで表示されるブロック
<!--index_area--><!--/index_area-->
トップページ以外で表示されるブロック

これら2種類の変数でトップページで表示・非表示させたい内容を囲うだけで完全に分離できる。注意点として、広告表示の変数である <%ad><%ad2><!--index_area-->及び<!--not_index_area--> のどちらにも含めないように注意すること。含める場合はどちらにも含めること。

次にトップページに最新記事やカテゴリ一覧を表示させる。今回私が利用した変数を以下に示す。

最新記事一覧
エリア変数 <!--recent--> ~ <!--/recent--> を用いる。このエリア内で有効になる単変数を以下に示す。
<%recent_title>
記事タイトルを表示
<%recent_link>
記事の固定リンクURLを表示
<%recent_year>
投稿年を表示
<%recent_month>
投稿月を表示
<%recent_day>
投稿日を表示
最新コメント一覧
エリア変数 <!--rcomment--> ~ <!--/rcomment--> を用いる。このエリア内で有効になる単変数を以下に示す。
<%rcomment_etitle>
親記事のタイトルを表示
<%rcomment_link>
親記事の固定リンクURLを表示
<%rcomment_name>
コメント投稿者の名前を表示
<%rcomment_body>
コメントの冒頭要約を表示
<%rcomment_year>
投稿年を表示
<%rcomment_month>
投稿月を表示
<%rcomment_day>
投稿日を表示
カテゴリ一覧
エリア変数 <!--category--> ~ <!--/category--> を用いる。このエリア内で有効になる単変数を以下に示す。
<%category_no>
カテゴリ番号を表示
<%category_link>
カテゴリページのURLを表示
<%category_name>
カテゴリ名を表示
<%category_count>
各カテゴリに投稿された記事数を表示
月別アーカイブ一覧
エリア変数 <!--archive--> ~ <!--/archive--> を用いる。このエリア内で有効になる単変数を以下に示す。
<%archive_link>
月別ページのURLを表示
<%archive_count>
各月のエントリ数を表示
<%archive_year>
年を表示
<%archive_month>
月を表示

変更例

各グループの一覧は順不同リストのul要素で表示させるようにした。以下にこのブログでの変更例としての記述を示す(一部簡略化)。


<body>
<!--index_area-->
<div class="header">
<h1>藍色通信</h1>
</div>
<div class="home">
<h2>最新記事一覧</h2>
<ul>
    <!--recent-->
    <li><%recent_year>-<%recent_month>-<%recent_day> : <a href="<%recent_link>"><%recent_title></a></li>
    <!--/recent-->
</ul>
</div>
<!--/index_area-->

<!--not_index_area-->

トップページ以外の内容

<!--/not_index_area-->

<%ad><%ad2>
</body>

繰り返し表示させるのはli要素のみでいいのでエリア変数の記述位置に注意すること(ul要素ごと括らないこと)。また、最新記事、コメントの表示件数は管理画面の『記事の設定』で希望の件数に設定しておく。

課題、その他

マルチカラム化について

横幅の制限を無くしたのでディスプレイサイズが大きい場合にマルチカラム化して表示させたい。これにはCSS3の草案にて提案されているcolumnsプロパティを利用してみようかと考えていて、現状ではFirefoxのみ一部分がマルチカラムレイアウトになるはず(スクリーンショット)。webkitにも指定していたけどこちらはSafariにて2段目以降のカラムでリンクが参照できなくなる不具合があり、原因不明のため元に戻している。floatプロパティでの段組みは特に考えていない。どちらにしてもまだまだ勉強不足なので今は手に負えない

ヘッダーを削除するか否か

現在ヘッダー部分はCSSで背景を設定したdiv要素と子要素のh1要素のみの構成になっている。div要素を削除してh1要素のみにすれば更に表示領域が確保できてすっきりしそうだけど、それだと味気なさ過ぎるような気がしてまだやってない。そのうち削除してみてどう感じるのか試すつもり。

追記: 2010-11-25
早速実行してみたけど、見通しがよくなったな、悪くない。暫くはこのままにしておこう。

公開: 2010年11月24日, カテゴリ: ぶろぐいじり

現在の書き込みは、-件です。

現在の書き込みは、6件です。

531 :SONY5614:2010/11/26(金) 22:07:41 ID:-
SONY5614です
このたびブログを移転することにしました
(記事の内容と無関係のコメントをしてしまい申し訳ございません)

Ubuntu 作成&作品紹介
タイトルはそのままですがURLが
http://blog.sony5614.com/
に変更しました。

お手数おかけしますがお暇な時間がありましたら相互リンクの修正の方、よろしくお願いします
532 :FUGA:2010/11/26(金) 22:43:03 ID:-
いつもお疲れ様です。私個人の環境での意見として聞いて頂ければ
と思うのですが、私の場合1920*1200のワイドモニターを使用しています。
この場合横幅いっぱいに表示されるため文字を端から端まで目で追うのが
若干疲れるときがあります。ただ見やすいかと言えば見やすいのだとは
思うのですが、あくまで私の主観ですので参考までに^^
533 :藍色:2010/11/27(土) 01:20:37 ID:aV/dabIU
@SONY5614さん
了解です、リンク集に追加しておきました。独自ドメイン取得されたんですね、自由度が上がって面白そうです。

@FUGAさん
ご意見有難うございます。やっぱりこの意見出ちゃいましたか。width指定をしないことで閲覧者環境に依存することになりウィンドウサイズによって見え方が大きく変わるんですよね。実は私もどうしようか悩んでる項目でして、せめて最大幅の指定だけでもしておくべきかどうかと。この件についてはそのうち記事にするかもです(必ずしもFUGAさんにとって改善となるかどうかはなんとも言えませんけど)。
534 :藍色:2010/11/28(日) 01:36:53 ID:aV/dabIU
http://silentminority.blog52.fc2.com/blog-entry-60.html
上記のアドレスの記事を実験的にマルチカラム化してみました。CSS3のMulti-columnに対応しているブラウザなら閲覧者のウィンドウサイズに合わせてカラム数が増えて表示されるはずなので、興味あればご覧下さい。ブラウザはFirefoxとSafariで表示を確認しています。あとはChromeも適用されるはず。Internet Explorer, Operaは対応してないので変化無しです。
535 :FUGA:2010/11/29(月) 01:07:54 ID:-
地道な編集お疲れさまです。早速ですが感想を。
Firefoxで確認しましたがかなり読みやすくなったと感じました。
2つのカラムに分かれて表示されるので下のほうまでスクロールさせる
こともないですし、あたかも本を読んでいるような。
こういうものはあまり見たことがないです^^

あと飛ばされた記事のほうを読んだのですが
色々と考えさせられるところがありますね
人によってスタイルって違うと思うんですけど
私の場合は自分が楽しんで作れたらそれが最高かなと
そんな風に思ってますね^^趣味ですから。
カスタマイズ要素の少ないPTFでも、この人きっと
すごく楽しんで作ったんだな~って雰囲気が伝わってくる
作品って見ていて結構あったりするのですが、
そういうものはとても魅力的に見えるんですよね^^
私はそこに絵画を鑑賞する感覚と似たものを感じたりしてます。
技術だけが全てじゃないんだなって。
今のデジタル化されたディズニーアニメよりも昔の職人達が
手で一枚一枚描いたセル画のディズニーアニメのほうが
美しく見えるというか・・・いやw余計に分かりづらいですよね^^;

私もそんな風に感じてもらえるような作品が作れるように
なれたらいいな~って思います^^
なんか分かりづらい上に長くなってすみませんでした~
536 :藍色:2010/11/30(火) 00:51:36 ID:aV/dabIU
@FUGA さん
そちらの環境でも2カラムで表示されましたか、一応最大で3カラムまでの制限にはしています。やりすぎると横に伸びすぎてまた違う意味で可読性が低下する心配がありましたから。それはそうと、「本を読んでいる」とはいい喩えですね、何だかしっくりきます。この件についてはまだまだ勉強が必要(問題点も多いので)で全ての記事に実装することはできませんので気長に見守ってやって下さい。

確かに、「楽しんで」やることって重要なんですよね。それを忘れてしまうといつしか楽しみが負荷にすり替わってしまってつらくなるだけでしょうから。私の場合、最初は楽しくて仕方が無いのにだんだん自分に対するハードルを上げてしまう癖があるので、これが達成できなくなってその状態が続くとモチベーションが下がってしまいます。でもだからこそ、他の人のテーマを見たときにより一層の魅力を感じてしまうのかもしれませんね。