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

[PR]

2024年11月22日
カテゴリー：

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

1つ新しい記事	:	燃え上がるテキストの描き方（GIMPチュートリアル）
1つ古い記事	:	「Inkscape（インクスケープ）」のインストールと簡単な操作方法

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

忍者ブログの共有テンプレート作成

2007年06月20日
カテゴリー：忍者ブログテンプレート

● 08年2月5日追記
Firefoxで閲覧した際に表示が崩れる場合があったため、08年2月5日にテンプレートの修正を行いました。詳しくは「テンプレート「凸凹」を修正しました」をご覧下さい。

またGIMP（ギンプ）とは関係ない話が続きますが、忍者ブログのテンプレートについて。

忍者ブログってのは、このブログスペースをお借りしているブログサービスです。で、その忍者ブログの共有テンプレートを作ったんですが、今日審査に通っていたので、このテンプレートについてまとめておこうかと思います。

改造したい場合など参考にしてみてください（参考になればですが）。

作ったのはこんなのです（クリックするとページが開きます）↓

黒ベースで暗い感じです。記事部分やプラグインは額縁のようなボコッとした雰囲気を出してみました。
プラグインは固定幅ですが、記事部分はウィンドウにあわせてサイズが変わります。
画像は一切使っていません。

このテンプレート、改造等自由にやってもらって構いません。

ちなみに、ボコッとなった縁取り部分のソースは基本的に、こんな感じ↓

・HTML

<div id="OuterBlock">
    <div id="InnerBlock">
        <br />
        <br />
        <br />
    </div>
</div>

・CSS

#OuterBlock {
border-top :solid 4px #696969;
border-right :solid 4px #222222;
border-left :solid 4px #696969;
border-bottom:solid 4px #222222;
background-color:#888888;
}

#InnerBlock {
border-top :solid 4px #222222;
border-right :solid 4px #696969;
border-left :solid 4px #222222;
border-bottom:solid 4px #696969;
}

結局、二重に囲ってボーダーの色を入れ替えているだけです。で表示すると、こんな感じになります↓

どうでも良いかもしれないですが、記事部分を先に読み込むようになっているので、多少プラグイン部分が重くても、記事は先に表示するようになってます。記事部分が重けりゃ意味ないですが…。

ということで、改造したい方はご自由にどうぞ（もちろん忍者ブログの規約の範囲内で）。

今度は画像付きのテンプレートでも作ってみようかなぁ、なんて思案中。でもGIMPについてもやらないと…。

1つ新しい記事	:	燃え上がるテキストの描き方（GIMPチュートリアル）
1つ古い記事	:	「Inkscape（インクスケープ）」のインストールと簡単な操作方法

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

コメント一覧

コメント数：1

No1．お世話になっています

このテンプレートをお借りいたしております。
ありがとうございます。

firefoxで見た時なのですが…
プレビューでは画面いっぱいに表示されるのですが
いざ、このテンプレートを使ってみると
何故か画面いっぱいにではなく…
記事部分が幅が小さく表示されてしまいます。

どこをどのようにすればfirefoxでも他のブラウザで見た時のように
画面いっぱいに表示してもらえるようになるのでしょうか？

とてもステキなテンプレートなので是非使わせていただきたいので
御指導お願いいたします。

2008年 02月 04日

借り人

Re:お世話になっています

借り人さん、テンプレートのご利用ありがとうございます。
そして、ご指摘くださり、ありがとうございました。

確かに、Firefoxの場合、本文の幅がウィンドウの幅に比べて短い場合、小さく表示されます。
全く気づいておりませんで、ご迷惑おかけしました。

以下、対処法をまとめておきますが、後日テンプレートの修正を申請します。申請が通り次第、新しい記事でお知らせしますので、お急ぎでなければ、改めてテンプレートをダウンロードすることも出来ます。

● 2月5日 16時40分　追記
テンプレートを修正しました。修正したテンプレートをダウンロードできます。テンプレート検索のキーワードで「凸凹」で探してみてください。

さて、修正方法についてです。丁寧に説明したつもりですが、逆に煩雑になっていたらごめんなさい。

HTMLとCSSを編集します。ブログ管理画面の「テンプレート設定／編集」ページで「修正」をクリックします。

テンプレートメーカ使っている場合はこんな感じ
（画像はクリックで拡大します）

簡素版テンプレートを使ってる場合こんな感じの画面になります。
（画像はクリックで拡大します）

①で示したところでHTMLを、
②で示したところでCSSを
それぞれ編集します。

具体的には以下の通り。

・HTMLの編集

以下の部分（31～346行）

に　<div id="mainBlock">　とそれに対応する　</div>　を追加します。こんな感じに↓

<div id="mainBlock">
    <div id="EntryBlock">
    
        <div class="CommentBlock">

～　略　～

        <div id="FooterBlock">
            <br />
        </div>
    </div>
    </div>

HTMLはコレだけです。次にCSSの編集です。

・CSSの編集

何故か

/*全体の設定*/
#mainBlock {
}

を残してしまっていたので、これを以下のように書き換え

/*全体の設定*/
#mainBlock {
width:100%;
margin-right:-240px;
float:left;
}

さらに、

/*記事繰り返し処理全ての部分の設定*/
#EntryBlock {
position:absolute;
top:130px;
right:260px;
margin-left:20px;
text-align: left;
}

を以下のように書き換え

/*記事繰り返し処理全ての部分の設定*/
#EntryBlock {
margin:0 260px 0 20px;
text-align: left;
}

また、

/*プラグイン表示箇所全体の設定*/
.PluginBlock {
position:absolute;
top:130px;
right:20px;
width: 220px;
text-align:left;
}

を以下のように書き換えます。

/*プラグイン表示箇所全体の設定*/
.PluginBlock {
float:right;
margin-right:20px;
width: 220px;
text-align:left;
}