人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: daisuke0510
●カテゴリ:コンピュータ 生活
✍キーワード:CSS はてなダイアリー タイトル フリーソフト 作成
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● tanpa
●15ポイント

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

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

ソースを見ますと、

table {

background-image: url(”

http://kotonoha.main.jp/image/informal.gif

”);

height:90px;

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

}

と書いてありますね。

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

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

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

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

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

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

フリーなら

http://airmail.sakura.ne.jp/~komugi/gimp/gimporgja/

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

◎質問者からの返答

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


2 ● whoever
●15ポイント

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

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

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

table {

background-image: url(”

http://kotonoha.main.jp/image/informal.gif

”);

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 さんのモノを使用する事になりますので、画像のアドレスは変更しておきましょう。画像の色はテーマの色に合わせてください。

◎質問者からの返答

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


3 ● Joker
●15ポイント

http://www.google.co.jp/

Google

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

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

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

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

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

table {

background-image: url(”

http://kotonoha.main.jp/image/informal.gif

”);

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/

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

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

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

◎質問者からの返答

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

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


4 ● aki73ix
●25ポイント

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

ちょっと試してみました

こんな感じでしょうか?

主な変更点は

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=”

http://images-jp.amazon.com/images/P/4001155729.09.MZZZZZZZ.jpg

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

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

http://images-jp.amazon.com/images/P/B00007G0LM.09.MZZZZZZZ.jpg

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

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

<div class=”navibar”>

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

</div>

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

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

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ