忍者ブログ
GIMP思い込みチュートリアルGIMPの使い方

画像編集ソフトGIMPの使い方(チュートリアル)を中心に、GIMPに関する事を書いています。
思い込みで書いている部分もあると思いますので、コメントでのご指摘、随時募集中です。

ブログ内検索
カテゴリー
月別記事一覧
ツイート

サイトのデザインを変えてみた

GIMPで何かを作ろうと思っても、良いのが出来上がらないので、ブログのデザインをガラリと変えてみました。

まぁ、見ての通り相変らずセンスは良くありません。
それに、更新が停滞気味なのに見てくれ変えてもねぇって気もしますが、そういう事は気にしない方向で…。

という事で、デザイン変更に関してどうでもいいことを以下グダグダ書いて行きます。
ブログの構造は以前のデザインと同様、左にプラグインを置いた2カラムで、本文部分はウィンドウサイズによって変わります。リキッドデザインとか呼ばれているやつです。
リキッドデザインは、読みづらいとかで敬遠されがちの様です。しかし、このブログは一応チュートリアルがメインであるはずのブログなので、GIMPを使いながら閲覧すると考えると、好きな幅に変更が出来るほうが、読みやすいかなと思っています。といってもブログの閲覧方法もパソコンの環境も人ぞれぞれなので正解が見つからない気もしますが。
とりあえず見づらい、読みづらいなどありましたらコメントからご指摘ください。今後の参考にさせていただきます。



また、コメント・トラックバック欄は下のページをボケーと眺めながら色々考えて作ってみました。

30 Must See Comment Designs for Web Designers | Blog design Blog for Blog Designers
http://www.blogdesignblog.com/blog-design/30-comment-designs-for-webdesigners/


見てもらえば分かりますが、意味も無く投稿者名から吹き出しが出ている感じになっています。
コメント投稿者の背景が灰色、管理人の返答の背景が白色になっていますが、色は反対の方が良いかなとか、まだ悩んでいたりします。

コメントフォームの送信ボタンに関しては下のページを参考にしました。

JavaScript / CSS 編 - イメージボタンを使ってクリック感を表現する - futomi's CGI Cafe
http://www.futomi.com/lecture/javacss/image_button.html


それから、検索で入ってきた人にも便利かと思い、パンくずリストをつけました。ページの右上についている、現在のページ位置を表示しているところです。
パンくずリストの作成に当たっては下の二つの記事を参考にしました。

Customize in Ninja Blog ―パンくずナビをつける
http://start.blog.shinobi.jp/Entry/57/

忍者ブログ用 パンくずリストのHTMLいろいろ ::忍者ブログ :Design up blog
http://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-->


・CSS


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
1つ新しい記事:GIMPで雪だるまのクリスマスカードを作る方法
1つ古い記事:GIMP Portable2.6.3リリース

▲ このページの1番上へ ▲

コメント一覧

コメント数:2

No1.ご紹介ありがとうございました。

ご紹介ありがとうございました。Design up blogの管理人のCSS*TEMPです。

今気づいたのですが、IE7でコメントを記入するとコメントのフォームの横幅がどばっと大きくなりますね。

またGIMPを使用しながら閲覧することを考えてのリキッドタイプとのことですが、ウィンドウを小さくするとものすごい型崩れが起きています。

CSSはあまり詳しく見ていないのですが、min-widthで調整してみてはいかがでしょうか。

2008年 11月 30日

CSS*TEMP

Re:ご紹介ありがとうございました。

CSS*TEMPさん、コメントありがとうございます。

コメントフォームについて調べてみたらバグとして報告されているようですね。

[CSS]気をつけたいIE 7のバグ -CSS-Discuss | コリス
http://coliss.com/articles/build-websites/operation/css/577.html


対策も載っていたので後ほど修正したいと思います。


ページの型崩れは、読めないわけじゃないし良いかと思っていたんですが、やっぱりきちんとした方が良いですかね。
ご意見を参考にmin-width使ってみるとか、プラグインをエントリーの下に配置するとか、色々試してみたいと思います。


ご指摘ありがとうございました。

2008年 11月 30日

管理人

No2.蛇足ですが、気になったので

返信どうもありがとうございました。

そのほかに、metaタグのkeywordsが半角スペース区切りになっていますが、これは半角コンマ区切りの間違いかと思います。
(忍者ブログのデフォルトテンプレートは半角スペース区切りになっていますが;^^)

metaタグのdescriptionにすべてのページで同じテキストを入れていますが、これはあまりよろしくないそうで、トップページ以外は記述しないか、記事ページでは記事の要約文(entry_description)を表示するかなどをするといいかもしれません。h1タグの部分を工夫するとなおいいかもしれませんね。

>プラグインをエントリーの下に配置するとか、色々試してみたいと思います。

小粋空間さんはサイドバーを折りたたみできたりしますよね。ああいうのもいいかもしれません。

2008年 11月 30日

CSS*TEMP

Re:蛇足ですが、気になったので

有益な情報ありがとうございます。
ご意見を参考に手を加えたいと思います。

先のコメントでご指摘いただいた、コメントフォームの幅が変わってしまう問題ですが、とりあえず解決しました。
ただし、幅が変わらないようにするとFirefoxで背景画像がずれてしまい、あちらを立てればこちらがたたずな状態蜷で、「あーめんどくせぇ」ってことで背景画像をなくしてしまいましたが。

2008年 11月 30日

管理人

この記事にコメントする

申し訳ありませんが、現在コメントは受け付けておりません。

▲ このページの1番上へ ▲

この記事へのトラックバック

この記事と関係ないトラックバックは削除させていただきます。

トラックバックURL:

最近の記事
最近のチュートリアル
GIMPで凹凸感のあるシンプルなボタンを作る方法 GIMPで氷のテキストを作成する方法 【GIMP】下から飛び出す感じの虹色のテキスト GIMPで虫メガネを描く方法 GIMPでカラフルなモザイクのテキストを作成する方法 GIMPを使ってインフォメーション・アイコンを作る方法 GIMPで回転する地球のgifアニメーションを作成する方法 GIMPでサイコロ(角丸な直方体)を描く方法 GIMPで雪だるまのクリスマスカードを作る方法 GIMPを使って消しゴムを描く方法 GIMPを使って鉛筆を描く方法 リング式メモ帳の描き方

画像をクリックするとチュートリアルのページを開きます