ブログの構造は以前のデザインと同様、左にプラグインを置いた2カラムで、本文部分はウィンドウサイズによって変わります。リキッドデザインとか呼ばれているやつです。
リキッドデザインは、読みづらいとかで敬遠されがちの様です。しかし、このブログは一応チュートリアルがメインであるはずのブログなので、GIMPを使いながら閲覧すると考えると、好きな幅に変更が出来るほうが、読みやすいかなと思っています。といってもブログの閲覧方法もパソコンの環境も人ぞれぞれなので正解が見つからない気もしますが。
とりあえず見づらい、読みづらいなどありましたらコメントからご指摘ください。今後の参考にさせていただきます。
また、コメント・トラックバック欄は下のページをボケーと眺めながら色々考えて作ってみました。
30 Must See Comment Designs for Web Designers | Blog design Blog for Blog Designershttp://www.blogdesignblog.com/blog-design/30-comment-designs-for-webdesigners/見てもらえば分かりますが、意味も無く投稿者名から吹き出しが出ている感じになっています。
コメント投稿者の背景が灰色、管理人の返答の背景が白色になっていますが、色は反対の方が良いかなとか、まだ悩んでいたりします。
コメントフォームの送信ボタンに関しては下のページを参考にしました。
JavaScript / CSS 編 - イメージボタンを使ってクリック感を表現する - futomi's CGI Cafehttp://www.futomi.com/lecture/javacss/image_button.htmlそれから、検索で入ってきた人にも便利かと思い、パンくずリストをつけました。ページの右上についている、現在のページ位置を表示しているところです。
パンくずリストの作成に当たっては下の二つの記事を参考にしました。
Customize in Ninja Blog ―パンくずナビをつけるhttp://start.blog.shinobi.jp/Entry/57/忍者ブログ用 パンくずリストのHTMLいろいろ ::忍者ブログ :Design up bloghttp://csstemplate.blog.shinobi.jp/Entry/173/上のページを参考にしつつ、このブログではこんな感じにしました。
・HTML<!--if_not_toppage-->
<ul id="PageNavi">
<li class="Here">現在のページ位置</li>
<li class="Here">：</li>
<li><a href="<!--$g_url-->">ブログトップ</a></li>
<li>≫</li>
<!--if_page-->
<!--if_prev_page-->
<li><a href="<!--$pagelink_prev_link-->">前のページ</a></li>
<li>≫</li>
<!--/if_prev_page-->
<li class="Here">現在のページ</li>
<!--if_next_page-->
<li>≫</li>
<li><a href="<!--$pagelink_next_link-->">次のページ</a></li>
<!--/if_next_page-->
<!--/if_page-->
<!--if_entry-->
<!--entry-->
<li>カテゴリー「<a href="<!--$entry_category_link-->"><!--$entry_category--></a>」</li>
<li>≫</li>
<li class="Here">現在のページ</li>
<!--/entry-->
<!--/if_entry-->
<!--if_category-->
<li class="Here">カテゴリー「<!--$g_page_title-->」の記事</li>
<!--/if_category-->
<!--if_date-->
<li class="Here"><!--$g_page_title-->の記事</li>
<!--/if_date-->
<!--if_search-->
<li class="Here">「<!--$g_search_comment-->」の検索結果</li>
<!--/if_search-->
</ul><!--/class="PageNavi"-->
<!--/if_not_toppage-->
ul#PageNavi {
text-align:right;
font-size:85%;
}
ul#PageNavi li {
display:inline;
padding-left:3px;
}
ul#PageNavi li.Here {
display:inline;
padding-left:3px;
font-weight:bold;
}
だから何だって感じですが、とりあえずそんなところです。
PR
