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

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

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

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

1つ新しい記事:GIMP2.4 は10月24日にリリース予定(?)
1つ古い記事:最近気になった記事色々

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

忍者ブログ・テンプレート「クローバー」作成

何とな~く、テンプレート作ってしまいました。といっても、随分前に、何度か審査に落ちてしまい、ほったらかしにしていた物をチョコチョコ手直ししただけです。

という事で、今回もGIMPとは関係ない話です。

新しく作ったテンプレートは、3カラムでタブメニュー付きです。クローバーのデザインです。忍者ブログユーザーで、気に入られた方は使ってやってください。

で、今回はタブメニュー付きなので、編集方法について、まとめておきます。

● 08年8月27日追記
テンプレートにトラックバックのリンクに関する不具合がありました。詳しくはお寄せいただいたコメントをご覧下さい。 また、現在テンプレートの修正を申請中です。承認され次第、改めてその旨お知らせいたします。


● 08年8月30日 追記
テンプレートの修正が承認されました。トラックバックのリンクに関する修正を行いました。
08年8月29日以前に「クローバー」をダウンロードした方は改めてダウンロードしなおして頂く必要があります。お手数ですがよろしくお願いします。
とりあえず、完成品はこんな感じ

タブメニューってのはこの部分のことです。


もちろん、「Page 1」の部分は「Home」とか「初めにお読みください」とかにして、別ページへリンクを貼る事が出来ます。カテゴリーのページにリンク貼っても良いと思います。

編集方法はHTMLファイルの該当部分にチョコット書いていますが、ここではもうちょっと詳しく書いておきます。HTMLやCSSを知らない人でも分かるような説明をするつもりですが、分かりづらかったらごめんなさい。コメントで文句垂れてください。可能な限り対処します。

まずはテンプレートダウンロードしてください。ブログ管理画面の「テンプレートの検索」でクローバーで検索すれば見つかると思います。

ダウンロードしたら、「テンプレートの設定/編集」ページに移動。お気に入りテンプレートに「クローバー」が追加されていると思うので、「修正」をクリックします。


簡素版テンプレートを使ってる場合こんな感じ、
(画像はクリックで拡大します)


テンプレートメーカ使っている場合はこんな感じの画面になります。
(画像はクリックで拡大します)


どちらの場合も、画像の①で示したHTML部分を編集します。

タブメニュー部分は以下のように記述されています。36行目から記述されています。
<div id="TopMenu">
    <ul><li><a href="http://">Page 1</a></li>
        <li><a href="http://">Page 2</a></li>
        <li><a href="http://">Page 3</a></li>
        <li><a href="http://">Page 4</a></li>
        <li><a href="http://">Page 5</a></li>
        <li><a href="http://">Page 6</a></li>
    </ul>
</div>

編集するのは、<li> と </li> で囲まれた、
<a href="http://">Page 1</a>
の部分です。
<a href="http://"> は、リンクのアドレスを記入する部分です。http://以下にリンク先のアドレスを記入してください。

「Page 1」って書いてある部分が、普段ブラウザ上に表示されてる部分です。リンク先のページタイトルなど、適宜書き換えて下さい。

例えば、もしこのブログに当てはめれば、こんな感じに出来たりします。
<div  style="background-color:;" padding:5px;>
<blockquote><pre>
<div id="TopMenu">
    <ul><li><a href="http://gimp.blog.shinobi.jp/">HOME</a></li>
        <li><a href="http://gimp.blog.shinobi.jp/Entry/1/">サイトについて</a></li>
        <li><a href="http://gimp.blog.shinobi.jp/Entry/2/">GIMPについて</a></li>
        <li><a href="http://gimp.blog.shinobi.jp/Entry/31/">連絡先</a></li>
    </ul>
</div>

それを表示させるとこんな感じ


上で示したとおり、タブの数は変更可能です。少なくする場合 <li>~</li> を行ごと削除してください。増やす事も可能ですが、ズンズン増やしていくと2段になります。

編集できたら、テンプレートを保存後、使用中のテンプレートに設定すれば完了です。


また、「そんなタブメニューなんて、いらねぇよ」って人はHTMLの
<!--■■ メニュー部分について ■■
・「Page 1」~「Page 6」を任意のタイトルに変更して下さい
・各行、「a href="http://」以下に、タイトルに対応するURLを記入して下さい
・<li>~</li>の一行を増やしたり減らしたりして、メニューの数を変更できます
・<li>の中に「id="current"」を入れると表示色が変わります
・メニュー部分不要の方は「■■ メニュー部分について ■■」の行から、ここから11行下の「メニュー部分 終わり」の行までを削除して下さい
-->
    <div id="TopMenu">
        <ul><li><a href="http://">Page 1</a></li>
            <li><a href="http://">Page 2</a></li>
            <li><a href="http://">Page 3</a></li>
            <li><a href="http://">Page 4</a></li>
            <li><a href="http://">Page 5</a></li>
            <li><a href="http://">Page 6</a></li>
        </ul>
    </div>
<!--メニュー部分 終わり-->

この部分をごっそり削除してください。

それから「タブを右寄せにしたいんだけど」って人は、CSSを編集すれば右寄せに出来ます。テンプレート編集画面の画像(上の方で表示したヤツ)の②で示した部分でCSSを編集します。
ちなみにCSSってのは、ブログのアッチの部分やコッチの部分の色やら配置やらを指定するものです。

さて、CSSの59行目以降にタブメニュー部分の配置やら色を指定する記述があります。「-------」って棒線の後に「メニュー部分の設定」って書いてある部分です。

その中にこんな記述があります
#TopMenu ul {
margin:auto;
padding:20px 20px 0px 20px;
}

上記、「padding:20px 20px 0px 20px;」の行の一番最後の値を下のように「430px」にします。
#TopMenu ul {
margin:auto;
padding:20px 20px 0px 430px;
}

これでプレビュー画面を見れば、ググンと右側に寄ったと思います。タブの数やタイトルの文字数によっては2段になったりして、デザインが崩れてしまいますので、「430px」という値は適宜変更してください。

(ちなみに「padding」とは、各要素(今回の場合、タブメニュー部分)周辺の空間の幅を指定しています。値は、4つ指定していますが、頭から順に「上・右・下・左」の空間の幅を指定しています。
今回は一番最後の値、つまり左側の空間幅を広げたので右側へ移動した事になります。)

とりあえず、こんな所ですが、こんな説明で分ってもらえたでしょうか?
HTMLとか初めて人は、表示が崩れてゴチャゴチャになっても、もう一度ダウンロードすれば何とかなるので、思い切って編集してみてください。

質問があれば受け付けますが、「何をして、どうなったのか」を詳しく書いてください。可能な限り対処します。
PR
1つ新しい記事:GIMP2.4 は10月24日にリリース予定(?)
1つ古い記事:最近気になった記事色々

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

コメント一覧

コメント数:3

No1.タブメニューの飛び先ページの体裁について

こんにちは、お世話になりますikuと申します。

クローバーをダウンロードしてブログを作り始めている者です。
タブメニューで他のページに飛ばす場合に、そのページもTOPページと同様な体裁にする場合には、どこにどのように記述したらよろしいのでしょうか?

HTMLなら多少わかるのですが、CSSってなんだかわからない程度の知識です.....

よろしくお願い致します。

2007年 10月 31日

iku

Re:タブメニューの飛び先ページの体裁について

ikuさん、テンプレート使っていただきありがとうございます。って管理人が特になることは何も無いんですが…。

さて質問についてですが、ikuさんのおっしゃる「他のページ」が同じブログ内(例えばカテゴリーのページとか、過去のエントリー)へのリンクであれば、特にいじくる必要はありません。


また、「他のページ」が同じブログでは無い場合(例えば他のブログ、ホームページなどへのリンク)であれば、以下のようにして下さい。

まず、HTMLについてですが、以下の部分

    <div id="TopMenu">
        <ul><li><a href="http://">Page 1</a></li>
            <li><a href="http://">Page 2</a></li>
            <li><a href="http://">Page 3</a></li>
            <li><a href="http://">Page 4</a></li>
            <li><a href="http://">Page 5</a></li>
            <li><a href="http://">Page 6</a></li>
        </ul>
    </div>

を、「他のページ」のタブメニューを挿入したい部分に記述します。
そして、CSSについては以下の部分

   /*----------------- メニュー部分の設定*/
   #TopMenu {
   margin:0px;
   float:left;
   width:900px;
   background:#d6e9ca;
   font-size:95%;
   font-weight:bold;
   }
   
     ~ 略 ~
   
   #TopMenu a:hover {
   background-position:100% -42px;
   color:#464E42;
   }
   /*
   #TopMenu #current a {
   background-position:100% -42px;
   color:#464E42;
   }
   */
を「他のページ」のCSSのどこか適当なところに記入して下さい。

もし、すでに「TopMenu」をid名で使っている場合は別の名前に置き換えてください。

これで出来るはずですが、質問の意味を履き違えてたり、言ってる事が分からない場合、お手数ですが再びコメントください。
その際、URLなど記述していただくと的確な答えが出来る可能性が上がるので、さしつかえなければお願いします。

2007年 10月 31日

管理人

No2.無題

はじめまして。
"ふう"と申します

クローバーのデザインとタブが気に入って導入させていただきました。
そこで質問なのですが、
記事の内容の横幅を広げるにはどうしたらよろしいのでしょうか?
以前凸凹を使っていたのですがアレぐらいの幅が記事の欄で欲しいのです・・・。
試しにwidや記事ブロック用デザインのpx等ををいじったりしたのですが、
変に横に伸びたり(長さを変えたから当たり前なのですが)、
サイドメニューの下に記事がいってしまったりして上手くできません。
出来ればご教授いただけると助かります。


1月5日 1時50分追記
寝る前に再度比較していじって見たら何とか出来ました。
努力が足りなかったようです。
変なこと書き込んでスミマセンでした。

2008年 01月 04日

ふう

Re:無題

ふうさん、はじめまして。
テンプレート使っていただきありがとうございます。
あと、コメントは、変なことでも何でも、スパムじゃなければ、なんでも歓迎です。あまり気にしないで下さい。

さて、解決したとのことですが、同じ要望を持つ方がいるかもしれないので、幅の変更方法をまとめておきます。

とりあえず状況を簡単にまとめておきます。

クローバーのテンプレートは下の画像のような配置になっています。


トップブロック    : ブログタイトル、タブメニューの部分
エントリーブロック : 記事を書き込む部分
プラグイン左    : プラグインカテゴリー1、2、3
プラグイン右    : プラグインカテゴリー4、5
フッターブロック  : 一番下の広告挿入部分


テンプレート「凸凹」の場合、記事部分の幅はウィンドウの幅に合わせて変化するようになっています。
一方、「クローバー」の方は、全体が900ピクセルで幅を固定しています(記事部分は470ピクセル)。

で、問題の幅の変更ですが「プラグイン左」あるいは「プラグイン右」を削除してエントリー部分を広げる方法を説明します。
(これでエントリー部分の幅は675ピクセルになります。また、プラグイン左を削除する場合とプラグイン右を削除する場合で方法が異なるので注意してください)

①プラグイン左を削除する場合
HTMLとCSSを編集します。

・HTMLの編集 

「<!--メニュー部分 終わり-->」と書かれた二行下の

<div id="WrapBlock">

の一行を削除。さらにそれに対応する

</div><!-- /id="WrapBlock" -->

の一行を削除。(「plugin3」の下辺りにあります)

次に、

<!--plugin1-->
<div class="PluginInnerBlock">
    <div class="PluginTitle <!--$plugin_title_align-->">
        <!--$plugin_title-->
    </div>

        ~ 略 ~

    <div class="PluginExplanation <!--$plugin_explanation_align-->">
        <!--$plugin_footer_explanation-->
    </div>
</div>
<!--/plugin3-->

を切り取って、「<!--plugin4-->」の真上に貼り付けます。こんな感じになるはず↓(太字部分が貼り付けた部分)

<div class="PluginBlockRight">
    <!--plugin1-->
    <div class="PluginInnerBlock">
        <div class="PluginTitle <!--$plugin_title_align-->">
            <!--$plugin_title-->
        </div>

        ~ 略 ~

        <div class="PluginExplanation <!--$plugin_explanation_align-->">
            <!--$plugin_footer_explanation-->
        </div>
    </div>
    <!--/plugin3-->


    <!--plugin4-->
    <div class="PluginInnerBlock">
        <div class="PluginTitle <!--$plugin_title_align-->">
            <!--$plugin_title-->
        </div>

         ・
         ・
         ・

最後に

<div class="PluginBlockLeft">
</div><!--/ class="PluginBlockLeft" -->

の二行を削除してください。


・CSSの編集 

#WrapBlock {
width:675px;
clear:both;
float:left;
}

を削除。記事部分の記述

/*記事繰り返し処理全ての部分の設定*/
#EntryBlock {
width: 470px;
float: right;
text-align: left;
}

を以下のように書き換えてください。

/*記事繰り返し処理全ての部分の設定*/
#EntryBlock {
width:675px;
float: left;
text-align: left;
clear:both;
}

「/*プラグイン表示箇所全体の設定*/」とかかれたスグ下の

.PluginBlockLeft {
width: 205px;
padding:20px 0px 5px;
text-align: left;
float: left;
}

を削除。
これで、上手くいくはずです。


②プラグイン右を削除する場合

・HTMLの編集

まず、プラグイン部分を編集します。

<!--plugin4-->
<div class="PluginInnerBlock">
    <div class="PluginTitle <!--$plugin_title_align-->">
        <!--$plugin_title-->
    </div>

~ 略 ~

    <div class="PluginExplanation <!--$plugin_explanation_align-->">
        <!--$plugin_footer_explanation-->
    </div>
</div>
<!--/plugin5-->

を切り取り、<!--/plugin3-->のすぐ下に貼り付けます。こんな感じに↓(太字が貼り付けた部分です)

        <div class="PluginExplanation <!--$plugin_explanation_align-->">
            <!--$plugin_footer_explanation-->
        </div>
    </div>
    <!--/plugin3-->
    <!--plugin4-->
    <div class="PluginInnerBlock">
        <div class="PluginTitle <!--$plugin_title_align-->">
            <!--$plugin_title-->
        </div>

~ 略 ~

        <div class="PluginExplanation <!--$plugin_explanation_align-->">
            <!--$plugin_footer_explanation-->
        </div>
    </div>
    <!--/plugin5-->


</div><!--/ class="PluginBlockLeft" -->

次に、

<div class="ValueBox">
<div class="PluginBlockRight">

の2行を削除


・CSSの編集

#WrapBlock {
width:675px;
clear:both;
float:left;
}

を以下のように変更

#WrapBlock {
width:900px;
clear:both;
float:left;
}

さらに、以下の部分を

/*記事繰り返し処理全ての部分の設定*/
#EntryBlock {
width: 470px;
float: right;
text-align: left;
}

下のように変更

/*記事繰り返し処理全ての部分の設定*/
#EntryBlock {
width: 675px;
float: right;
text-align: left;
}

最後に、

.PluginBlockRight {
width: 205px;
padding:20px 0px 5px;
text-align: left;
float: right;
}

を削除。で、出来るはずです。

2008年 02月 19日

管理人

No3.できました!

管理人さま。
態々のご返信誠に感謝しております。
結局自分は
#WrapBlock とエントリーブロックのpxの値を様子見しながら、
調整と愚かなことやってました。
でも不安だらけ(現にブログの下のページが固定されて変な表示に)なので、
早速御教授いただいたやり方でやってみました。
下のブロックも綺麗に収まりお陰様で上手くいきました。

このような丁寧に教えていただき誠に感謝しております。
改めて、丁寧に教えていただきありがとうございました!^^

GIMPも以前から興味があったので是非参考にさせてください

2008年 01月 06日

ふう

Re:できました!

ふうさん。

上手く出来たようで良かったです。

GIMPは、こんなブログより参考になるサイトは色々とあります。
とりあえず手始めには「GIMP2を使おう」さんのサイトが参考になると思います。

他にもたくさんあるので探してみて下さい。

2008年 01月 06日

管理人

この記事にコメントする

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

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

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

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

トラックバックURL:

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

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