はてなダイアリーでタイトルが表示される部分を画像にするにはどうすればいいのでしょうか?

例えばhttp://d.hatena.ne.jp/matsunaga/のようにしたいのです。
具体的にCSSを記載して解説してください。
また、こういう画像を作成するのに便利なフリーソフト等も紹介してくれると助かります。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/08/24 18:27:19
  • 終了:--

回答(4件)

id:tanpa No.1

tanpa回答回数72ベストアンサー獲得回数02004/08/24 18:56:05

ポイント15pt

http://yokohama.cool.ne.jp/alisato/hatena/index.shtml

はてなダイアリー用CSS作成支援

ソースを見ますと、

table {

background-image: url(”

”);

height:90px;

/*border-bottom:5px solid #eee;*/

}

と書いてありますね。

同時にタイトルの高さを90pxに設定してあります。

タイトル部分が整形のためにテーブルで構成されているのを利用しているようです。

他の部分でテーブルを利用すると、同じようにこの画像が出てしまいます(^^;

それを解決するにはclassを定義すれば良いわけですが、タグ自身に定義されたものを打ち消す方法はあったかわかりません。

テーブルを使わないなら問題ないです。

画像作りに便利なソフトですか・・・。

フリーなら

このあたりはどうでしょうか?

id:daisuke0510

結局はどうすればいいのでしょう…

2004/08/24 21:16:19
id:whoever No.2

whoever回答回数15ベストアンサー獲得回数02004/08/24 19:08:52

ポイント15pt

http://d.hatena.ne.jp/matsunaga/

備忘録ことのはインフォーマル

スタイルシートに以下の表記を入れてください。

table {

background-image: url(”

”);

height:90px;

/*border-bottom:5px solid #eee;*/

}

table td{

padding:0;

background: transparent;

vertical-align:top;

}

table table {

background:transparent;

margin:0;

padding:0;

height:12px;

border-bottom:none;

}

このままですと画像もmatsunaga さんのモノを使用する事になりますので、画像のアドレスは変更しておきましょう。画像の色はテーマの色に合わせてください。

id:daisuke0510

一応、画像を表示することはできましたが、これだとtableタグの部分が全てこの画像になってしまいますね。この問題はどう解決すればいいのでしょう?

2004/08/24 21:47:44
id:Joker No.3

Joker回答回数2ベストアンサー獲得回数02004/08/24 22:01:06

ポイント15pt

できませんでしたか?それは悔しいですね。

では、失礼ですがCSSをまったく知らないものとして手順を一から書いてみます。

まずご自分の日記から右上の「設定」を押して設定画面に入ります。その際に「詳細設定」にしておいてください。

画面を下の方へスクロールしていくと、「ページのヘッダ(HTMLタグ利用可)」「ページのフッタ(HTMLタグ利用可)」「スタイルシート」と3個の窓があると思います。

そこの「スタイルシート」の中に

table {

background-image: url(”

”);

height:90px;

/*border-bottom:5px solid #eee;*/

}

table td{

padding:0;

background: transparent;

vertical-align:top;

}

table table {

background:transparent;

margin:0;

padding:0;

height:12px;

border-bottom:none;

}

をコピーペーストしてみてください。

そして「この内容に変更する」のボタンをクリックする。

これで出来る筈なのですが。・・・確かに2の回答からコピーペーストするとできませんね(汗)改行コードとかが変わってしまうのでしょうか?

その場合は、

http://d.hatena.ne.jp/matsunaga/

備忘録ことのはインフォーマル

のソースを表示して、該当の場所をコピーしましょう。そしてそれを張り付ける。これなら出来る筈です。

二度目ですし回答とは言えなくなってしまったので、ポイントは結構です。

id:daisuke0510

すいません画像を表示することはできました(^^;

tableタグの部分が全てこの画像になってしまう問題はどう解決すればいいのでしょう?

2004/08/24 22:05:10
id:aki73ix No.4

aki73ix回答回数5224ベストアンサー獲得回数272004/08/24 22:03:03

ポイント25pt

ちょっと試してみました

こんな感じでしょうか?

主な変更点は

h1をスタイルシートで無効化してタイトルを表示しない

h1{

display:none;

}

body と imgの marginを 0にする

body {

margin:0;

padding: 0;

word-break:break-all;

}

img {

vertical-align:middle;

border :0;

margin :0 2px 0 0;

}

ヘッダのところにIMG を埋め込む

<a href=”/asin/4001155729”><img src=”

” alt=”ゲド戦記外伝” title=”ゲド戦記外伝” class=”asin”></a>

<a href=”/asin/B00007G0LM”><img src=”

” alt=”マトリックス” title=”マトリックス” class=”asin”></a>

<font size=”5”>最近のおすすめ</font>

<div class=”navibar”>

<font color=#ffffff size=6><b>aki73ixのうにうにっき<b></font><HR>

</div>

★ ”が全角になってるので注意

DIVをもう一つ居れてやれば画像の背景を自由に変更も出来ます

id:daisuke0510

なるほど。なるほど。ありがとうございます。できました。

皆様、回答ありがとうございましたm(_ _)m

2004/08/24 22:23:08

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません