はてなのプログについての質問です。

長期戦でゆっくり開けますので、ゆっくり回答してください。
 
現在、はてなでプログを書いているのですが、デザインを改良したいと感じています。
 
1、はてなプログのかんたん設定からデザインを選択したのですが、両側の畦道が太すぎて、本文の幅が狭くて違和感があります。
両側の畦道の幅が比較的狭いデザインで、お勧めの物を教えてください。
明るい、朗らかなイメージにしたいと思っています。
なお、当方素人に近いので、複雑な設定の場合はきちんと並べて下さると助かります。
 
2、次に、写真やパーツなどの貼り付けですが、畦道にも貼り付けたいのですが、やり方が分かりません。
お勧めの手口を教えてください。
できればワンパターンのダイアログなんかだと助かります。
 
3、さらに、贅沢を言うようですが、当局のヘルプはそれなりなのですが、全てを解説しなければならない関係上あまりにも分かりにくい。
そこで、ある程度本道に沿って解説された板があれば教えてください。
パターン別にハウトゥーが解説されているタイプの板があればベターです。
 
以上、よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:2008/12/17 00:02:12
  • 終了:2008/12/24 00:05:02

回答(4件)

id:mulloo No.1

mulloo回答回数151ベストアンサー獲得回数22008/12/17 01:16:53

いみわかんないですね。urlをはりなさい。

id:Marnier No.2

Marnier回答回数32ベストアンサー獲得回数12008/12/17 08:59:12

ポイント30pt

1、私はhatena_light-orangeを使ってます。light-blueとlight-greenもあります。

http://d.hatena.ne.jp/themesample?hatena_light-orange


2、そして、自分のブログにはタイトルと畦道の背景に画像を入れてます。

http://d.hatena.ne.jp/Marnier/ (恥ずかしい///) 

管理ツールトップ > 詳細デザイン設定からスタイルシートの欄に

body { background-image : url(貼りたい背景画像のURL) } 

を記入すればO.K !

あと、過去の人力検索に

http://q.hatena.ne.jp/1101889512

http://q.hatena.ne.jp/1069043068

なんてのもありました。


3、は、私も欲しいです。そういうの。はてなダイアリーのデザインはCSSでいじれるので、Googleで「CSS 背景」など検索しながら、なんとか形にしました。

id:miharaseihyou

やはり、ダイアログからの選択性の設定では難しいようですね。

基本的には壁紙の幅まで固定されるようなので、明るいお洒落なデザインの壁紙で幅の狭い物が無いかと思っています。

ただ、そういうのだと幅が広い物が多い。なかなか良いのが無くって・・・。

http://um-factory.com/

こんなページも見つけたのですが、なにぶん素人なので使い方が分からない。

そこで、はてなの設定にあるものの中からお勧めを推薦してもらえると助かります。

私の好みについてはコメント欄に現在のプログのurlを貼り付けましたので、覗いてみてもらえれば分かると思います。

 

画像を貼り付けるにしてもスタイルシートに貼り付ければ同じページに表示されている日記に画像が表示できるようですね。

スタイルシートではなくて、日記を書くの商品画像の挿入から写真を入れて見たのですが、その日の日記の下側に表示されました。

これをサイドの壁紙の任意の場所に割り込ませるようにして表示したいと思っています。

2008/12/17 18:39:41
id:Marnier No.3

Marnier回答回数32ベストアンサー獲得回数12008/12/17 19:54:12

ポイント30pt

ちょっと今は探している時間と私のセンスに自信がないので、膨大な公開デザインのURLを出しておきます。

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

2~3日かけてゆっくり探して見るつもりです。miharaseihyouさんも良かったらどうぞ。

画像を貼り付けるにしてもスタイルシートに貼り付ければ同じページに表示されている日記に画像が表示できるようですね。

スタイルシートではなくて、日記を書くの商品画像の挿入から写真を入れて見たのですが、その日の日記の下側に表示されました。

これをサイドの壁紙の任意の場所に割り込ませるようにして表示したいと思っています。

「サイドの壁紙の任意の場所」という表現が、私にはちょっとイメージできませんでした。サイドバーのことかしら?

こんなのも見つけたんだけどお役に立てるでしょうか...

http://q.hatena.ne.jp/1147874489

あと2ちゃんねるから

http://pc11.2ch.net/test/read.cgi/blog/1093444156/l50



私もまだまだ自分のブログのデザインをカスタマイズ中で、分からないことだらけです。また色々探してみます。

id:miharaseihyou

え~~、実は、この公開デザインのあまりの多さに後退りしていまして、もう少しパターン別とかに分類されていれば探す気にもなるのですが。

例えばヘッダが無いタイプ(要するに壁紙だけ)とか、模様のパターンでも連結系(アラベスクなど)か連続系(水玉やチェックとか)か?

暗色系とか中間色、濁色、無地などなど。

本文の幅の設定などもありそうだし、境界線に細工したりなどなど。

パターンとして確立されていないのかもしれませんが、あまりにも乱立状態なので芋を引きました。

 

http://q.hatena.ne.jp/1147874489

については、その物ズバリだと思います。

たぶんCSSがこういった種類のプログの事だと思うので、本文の幅を広くする具体的な方法として使ってみる心算です。

たぶん総枠がwidth:900pxあるものを分割するのに

div.main {

width:680px;

}

div.sidebar {

width:210px;

}

の割合で分割する。設定だと思います。

ただ、私の日記の何処にスタイルシートの本文が埋まっているのかが分かりません。

たぶん設定のデザインの何処かだとは思うのですが、現在の壁紙の模様は気に入っているので幅の割合を変える事ができれば半分は問題解決です。

 

また、パーツや写真などの貼り付けはサイドバーにも本文にはみ出してでも、大きさを指定して、任意の場所にということですが、サイドバーだけにでも貼り付けたいと思っています。大きさが問題になりますが、簡単設定とはいかないでしょうね。

2008/12/17 23:15:18
id:rouge_2008 No.4

rouge_2008回答回数594ベストアンサー獲得回数3512008/12/17 21:13:28

ポイント30pt

1.正しくは何と言えば良いのか分かりませんが、本文やサイドバーなどのメインボックスの表示幅が広く、背景部分が比較的狭いデザインになっているのは、「coloredleaves-green」や「coffeetime」「garashic-green」だと思います。

http://d.hatena.ne.jp/themesample?coloredleaves-green

http://d.hatena.ne.jp/themesample?coffeetime

http://d.hatena.ne.jp/themesample?garashic-green

上記のデザインでも幅が狭いという場合は、スタイルシートを変更すると、本文等のメインのボックスの表示幅をさらに広くすることができます。

具体的には、

1. かんたんデザイン設定で好みのデザインを適用する

2.自分の日記(ブログ)を表示して、ページのソースを確認する

3.<link rel="stylesheet" href="/theme/デザインのテーマ名/デザインのテーマ名.css" type="text/css" media="all">

という行があるので、この行からCSSの場所とファイル名を確認する

4.上記で確認したCSSファイルにアクセスしてダウンロードする

http://d.hatena.ne.jp/theme/デザインのテーマ名/デザインのテーマ名.css

CSSファイルののURLはという形式になっています。

※例えば「hatena_kimono-korinkiri」の場合は以下のようになります。

http://d.hatena.ne.jp/theme/hatena_kimono-korinkiri/hatena_kimon...

※IEでアクセスするよりFirefoxでアクセスして「ファイル」→「名前を付けてページを保存」を実行する方が簡単です。

(IE7では勝手に一時フォルダに保存されてメモ帳で展開されましたが、改行コードを認識できないため表示が・・・

サクラエディタやTeraPad、あるいは秀丸などメモ帳以外のテキストエディタに変更している場合は問題ないと思います。)

5.テキストエディタでダウンロードしたCSSファイルを編集する

「検索」機能を使用して先頭から「width」を検索し、見つかったら適宜変更します。

div.adminmenu

#simple-header

h1

.hatena-body

.main

.calendar

.day

.comment

.commentform textarea

上記の「width」および「_width」「*width」の値に、幅を広げたい分だけ足した数値を指定します。

※300pxプラスしたら、すべて同じく300pxを追加します。一つを300pxプラスして、他の一つは150pxプラスするということはしないでください。

「.day img」「div.section img.hatena-fotolife」は、記事表示部の画像の最大サイズを変更したい場合のみ変更します。

上記以外のサイドバーやモジュールに関する数値はそのままにします。


6.次に「background」を検索して、背景画像が指定されていたらパスを変更します。

※ファイル名の前に上記で確認した「http://d.hatena.ne.jp/theme/デザインのテーマ名/」を追加すると良いです。

※元から絶対パス(http://~)で指定されている箇所は変更しないでください。

ただし、ブログのタイトル背景や本文の背景などに画像を使用している場合、画像を修正する必要があります。

※試しに「hatena_kimono-korinkiri」の表示幅を少し広くしてみましたが、このタイトルの背景画像が550pxですので、画像を修正(高さはそのまま幅だけ長く変更)する必要がありました。

以下のアドレスにアクセスして画像を保存後、長さを変更して保存してください。

(キャンパスのリサイズ等で縦横(アスペクト)比のチェックを外さないと間延びした画像になります。

キャンパスサイズ変更後、コピーしたい画像の範囲を選択してコピーし、上手く繋がるように横に貼り付けてから保存します。)

http://d.hatena.ne.jp/theme/hatena_kimono-korinkiri/h1_backgroun...

次に長さ1200px×高さ5px程度の充分な長さの真っ白な画像を一つ作成します。

※「simple-header-background.gif」と「hatena-body-background.gif」に代えて使用する画像です。

画像を修正・作成した後で、フォトライフなど自分の領域にアップして、スタイルシートの該当する箇所の記述を変更します。

今回はタイトルの背景画像なので、

「h1」の「background: url("h1_background.gif.gif") no-repeat top left;」

の部分を、修正してアップしたタイトル背景用の画像のパスに変更し、

「div.adminmenu」「#simple-header」「.hatena-body」の背景画像指定のパスを、作成してアップした白い画像のパスに変更します。


7.編集が終わったら、すべて選択してからコピーします。

8.管理ページにログインしてデザインの「詳細」タブを選択します。

9.コピーした内容をスタイルシートの欄に貼り付け、「この内容に変更する」を押します。

※既に何か記述されている場合は、欄内で右クリックして「すべて選択」してから貼り付けます。



同じ方法で、本文等のメインボックスの表示部分が狭いデザインを好みの表示幅にすることが出来ます。

※公開デザインを選択した場合は、1~4の手順は必要ありません。

スタイルシート欄の記述をコピーして、テキストエディタに貼り付けてから編集すると作業しやすいと思います。

(編集が完了してから、スタイルシートの欄に貼り付けます。)


2.上記1の方法で、表示幅を広くすると今まで背景部分だった所にサイドバーがあると思いますので、以下のページで解説されている方法で普通にサイドバーにモジュールを追加すると良いです。

http://mahoro-ba.net/e830.html

ブログパーツの場合も「ページのフッタ」の欄内の好きな位置に取得したソースを記述します。

対応しているブログパーツの場合は、これで問題なく表示されます。

「対応ブログパーツ一覧」

http://hatenadiary.g.hatena.ne.jp/keyword/%e5%af%be%e5%bf%9c%e3%...


3.公式のヘルプ以外で、はてなダイアリーの使い方(手順)の解説があるページということですよね?

あまりないようですが・・・

はてなダイアリーガイド

http://d.hatena.ne.jp/keyword/%a4%cf%a4%c6%a4%ca%a5%c0%a5%a4%a5%...


不足分があれば言ってください。

コメント欄にて補足します。

id:miharaseihyou

管理ツールトップから簡単デザイン設定まで行って、

自分の採用しているのがhatena_kimono-korinkiriだとは分かったのですが、詳細タブからヘッダ/フッタのスタイルシートまでは分かっても、その下のスタイルシートには何も表示されていない状態です。

つまり「2.自分の日記(ブログ)を表示して、ページのソースを確認する」をどうやるのかが分かりません。

従って6の「※ファイル名の前に上記で確認した「http://d.hatena.ne.jp/theme/デザインのテーマ名/」を追加すると良いです。」の部分もやり方が分かりません。

一応、最初の部分は答えが書いてあるので

http://d.hatena.ne.jp/theme/hatena_kimono-korinkiri/hatena_kimon...

にアクセスしたら、やっぱりメモ帳で展開されました。

やっぱFF導入すべきかなぁ。

OSのアップデート(ちなみにまだXPで頑張ってます)がFFではできないので、FF自体、私が使う限りではIE7より重いし、IE7もタブブラウザになってから、こっちの方が軽くなったし、切り替えが面倒くさいので捨ててたんですが、

サブにインストールして、カスタマイズするのも時間が・・・。

ここはテキストエディタを変更するべきかもしれません。

たしか、インストールしてからコンポーネントの追加と削除でチェックマークを切り替えるのだったかな?

 

背景画像の変更はペイントではpxでの設定はできなかった。

Corel Painterがあるので、これで新規作成して白紙の1200px×5pxの何も書かない画像を作成して(初期の500px×500pxの画像で977kbあるそうだけど大丈夫かな?)Myはてなのフォトライフにアップする。

同じく

http://d.hatena.ne.jp/theme/hatena_kimono-korinkiri/h1_backgroun...

を建て横比を一定に横幅を1200pxに大きくした物を作って、これもフォトライフにアップする。

もうコメント欄にある

http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20081217/...

をコピーしてフォトライフにアップした方が早いですね。

この二つのアドレスをコピーして、それぞれbackground.gif.gifを消去してフォトライフの画像付きの方のアドレスを入れる。

同じように「div.adminmenu」「#simple-header」「.hatena-body」の後に続く「url("」の後の部分を作成した白紙をアップしたフォトライフのアドレスに変える。・・・ぐらいかな?

 

サイドバーへのカテゴリー、最新タイトル、最新コメントの表示は上手くいきました。

あとは、フォトライフの選択した写真をサイドバーに貼り付けたいのですがどうやるのか?

現在は本文中への貼り付けになっている。

 

はてなダイアリーガイド

http://d.hatena.ne.jp/keyword/%a4%cf%a4%c6%a4%ca%a5%c0%a5%a4%a5%...

は物凄い分量でくらくら来ました。

ゆっくりと取り組む事にします。


 

2008/12/18 00:52:14
  • id:miharaseihyou
    id:mullooさんの回答は残念ながら、私が登録した「不適切な回答」の第一号にならざるを得ませんでした。
    とても残念です。
  • id:rouge_2008
    畦道というのはどの部分のことでしょうか?
    右側または左側にあるサイドバーのことでしょうか?

  • id:miharaseihyou
    畦道と言えば分かってもらえると思ったのが間違いだったかもしれません。
    id:mullooさんはコメント欄にそれなりのコメントを書いてもらえれば「不適切な回答」を解除いたします。
     
    要するに、はてなのプログだけではありませんが、本人が書きこんだ本文の両側の壁紙の事です。
    私のプログを出すのは本意ではありませんが、説明上出します。
    http://d.hatena.ne.jp/miharaseihyou/
    黄緑の水玉模様が両側に広がっていますが「この部分を細くしたい。」
    それに「この部分にも写真やパーツを貼り付けたい。」
    という意味です。
  • id:goldwell
    現在、「不適切な回答」にチェック入れても不具合により適用されないようです。
    はてなアイデアが出ていますが、いまだ対応されていません。
    http://i.hatena.ne.jp/idea/22350

    回答内容によりポイント配分するには、手動で終了させた方が良いです。
  • id:miharaseihyou
    id:goldwellさんへ
    いつもお世話になっています。
    新機能のトラブルは知りませんでしたが、問題のある機能なので無くても問題ないでしょう。
    もちろん私は手動で終了させます。
    それに、id:mullooさんはこのままでは私の拒否リストに載るでしょう。
  • id:rouge_2008
    回答を少し補足します。

    「hatena_kimono-korinkiri」の修正後のタイトル背景用の画像です。
    良かったら使用してください。
    http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20081217/20081217203739.gif

    素材屋さんからダウンロードした背景画像を使用する場合は、
    background: url("h1_background.gif.gif") no-repeat top left;
    の記述を
    background: url("http://画像をアップしたサーバー/フォルダ名/ファイル名.gif");
    のように変更します。
    ※大抵100px×100pxなど、繰り返し表示用の背景画像になっていると思いますので・・・。

    参考ページ
    http://www.htmq.com/style/background-repeat.shtml
    「no-repeat」「repeat-x」等の指定は必要ありませんし、「top」「left」等の表示位置の指定も必要ありません。
    指定しなくても初期状態で「repeat」が指定されています。
  • id:rouge_2008
    背景画像について一部訂正します。
    「hatena-body-background.gif」に代わる画像は、「simple-header-background.gif」とは別に作成する必要がありました。

    「.main」の「width」に指定した値と同じ幅(長さ)で白い画像を作成してください。
    高さは5px程度で大丈夫です。
    CSSの変更箇所は以下です。画像のパスを自分でアップした場所の画像のパスに変更します。

    .hatena-body {
    background: url("hatena-body-background.gif.gif") repeat-y;
    }


    「simple-header-background.gif」の代わりに使用する1200px程度の長い画像は、次の2箇所に指定します。
    1200pxで足りない(「#simple-header」等の幅に長い値を指定した)場合、その値より幅が長い画像を作成すると良いです。

    div.adminmenu {
    background: transparent url("simple-header-background.gif") repeat-y;
    }

    #simple-header {
    background: transparent url("simple-header-background.gif") repeat-y;
    }



    なお、回答内の手順5に記載した「div.adminmenu」「#simple-header」等のセレクタは、「hatena_kimono-korinkiri」の場合ですので、他のデザインテーマでは若干違う場合もあります。



    モジュールやブログパーツの追加は、かんたん設定からの方法が良ければ、そちらの方法でも追加可能です。
    ただし、事前にスタイルシート欄の記述を「すべて選択」してコピーして控えておき、ブログパーツ等の追加が終わってから、再度「詳細」タブのスタイルシート欄に貼り付けて「この内容に変更する」を実行する必要があります。
    少しだけ面倒かもしれませんが、こちらの方が簡単で良いかもしれません。
  • id:miharaseihyou
    id:rounge_2008さんへ
    白い1200px×5pxの画像をフォトライフに二つ登録してそれぞれ別のアドレスでの
    「hatena-body-background.gif」と「simple-header-background.gif」のパスを書き換えれば良いのですね。
    了解です。
    後はテキストエディタのダウンロードとインストールだけど、テキストエディタ自体ほとんど使用しない生活なので、今回の件に向いてるのを一つ推薦していただけると助かります。できるだけシンプルなのが良い。
  • id:rouge_2008
    少し間違いが・・・
    作成するのは、1200px×5pxと「.main」の「width」に指定した値×5pxの画像の2つです。


    テキストエディタで、シンプルなのは「TeraPad」です。
    http://www5f.biglobe.ne.jp/~t-susumu/

    IEのソース表示のエディタを変更する方法は、以下のページを参考にしてください。
    http://www.atmarkit.co.jp/fwin2k/win2ktips/286iesourceview/iesourceview.html
    レジストリを編集しますが、詳細な手順が載っているので大丈夫だと思います。
    IE7では、プログラム(TeraPad)のパスを書くだけで大丈夫でした。("で囲んだり、"%1"をつけるとエラーになります。)


    フォトライフの選択した写真をサイドバーに貼り付ける方法はまた後ほど・・・
    ちょっと調べてから書き込みます。


    ちなみに・・・
    「2.自分の日記(ブログ)を表示して、ページのソースを確認する」方法
    1.自分のブログにアクセス
    2.「表示」→「ソース」
    3.<head>タグ内に
    <link rel="stylesheet" href="/theme/デザインのテーマ名/デザインのテーマ名.css" type="text/css" media="all">
    上記の形式で指定されているスタイルシート読み込みの記述を探します。
    「hatena_kimono-korinkiri」の場合、次の記述が該当します。
    <link rel="stylesheet" href="/theme/hatena_kimono-korinkiri/hatena_kimono-korinkiri.css" type="text/css" media="all">

    この記述の「/theme/hatena_kimono-korinkiri/hatena_kimono-korinkiri.css」の部分を、はてなダイアリーのアカウント名を除いたアドレス「http://d.hatena.ne.jp」の後ろに続けてアクセスします。

  • id:rouge_2008
    お待たせしました。
    フォトライフの任意の写真をサイドバーに貼り付ける方法です。
    選択しておいた画像を自動で貼り付けて表示する機能はないようですので、管理画面から手動で表示領域を作成して、その都度手動で画像を貼り付けることになります。

    まずは表示領域を作成します。

    http://d.hatena.ne.jp/RPM/20080413/1208082800
    1.上記のページを確認して、「-書き込むHTMLはここから-」「-ここまで-」の内側にあるタグをコピーします。

    2.はてなダイアリーの管理画面にログインして、デザインの「詳細」タブを表示します。

    3.ページのフッタ欄の<div class="sidebar"> ~ 一番最後の</div>内の任意の箇所に先ほどコピーしたタグを貼り付けます。

    4.貼り付けたタグの「ここに貼り付けたいブログパーツのコードを貼り付ける」の位置に画像表示用のタグを直接記述します。
    (1)はてなフォトライフにログインして、表示したい画像が入っているフォルダを選択してから、「フォルダを編集」をクリックします。
    (2)任意の画像のチェックボックスにチェックを入れてから、「ブログに貼り付ける」をクリックします。
    (3)小さなウインドウが開きますので、表示されているHTMLタグの方をコピーします。
    ※画像を1枚ずつ選択してHTMLタグをコピーする方が作業しやすいと思います。
    (4)ダイアリーの管理画面に戻って、ページのフッタ欄に貼り付けます。(はてな記法では表示されませんでした。)

    ※定義リスト用のタグを使用するとデザイン的にちょうど良いように思います。
    <dl><dt>ここに画像のタイトルを記述する</dt>
    <dd>ここにコピーした<a>および<img>タグを貼り付ける</dd>
    </dl>

    ※2枚以上表示する時・・・
    <dl><dt>画像のタイトル</dt>
    <dd>コピーした画像表示のタグ</dd>
    <dt>画像のタイトル</dt>
    <dd>コピーした画像表示のタグ</dd>
    ...以降、必要なだけここに<dt></dt><dd></dd>を追加します。
    </dl>

    5.次の記述をスタイルシート欄に追加します。一番最後でもどこでも大丈夫です。

    img.hatena-fotolife {
    max-width: 150px;
    }

    ※画像がはみ出さないように最大サイズ(幅)を指定します。任意のサイズを指定してください。

    6.最後に「この内容に変更する」を押して完了です。


    画像を追加する時は、その都度手順4~6を繰り返します。
    別々のタブに、ダイアリーとフォトライフの管理画面をそれぞれ表示して作業すると楽だと思います。
  • id:miharaseihyou
    id:rouge_2008さんへ
    途中で躓いています。
    「TeraPad」のver 0.93をインストールして
    レジストリエディターで「Internet Explorer¥View souce Editor¥Editor Name
    で、「種類=REG_SZ」のデータを「 C:\Program Files\TeraPad\TeraPad.exe "%1"」にしたのですが、どうしてもメモ帳でソースの表示が行われる状態です。
    それに何故かここで記述しようとすると「¥」が「\」と表示される。
    read meには「"%1"」を付けるように指示があったのですが、外しても変わりません。
     
    もう限界なので寝ます。
    レジストリの編集なので長期戦になりそうです。



  • id:rouge_2008
    何かエラーは表示されますか?

    C:\Program Files\TeraPad\TeraPad.exe "%1"

    「Readme.txt」にある上記の記述は、フォルダオプションで関連付けの設定を変更する場合に指定します。
    レジストリの以下のキーの既定の値のデータには、「"」で囲まず「 "%1"」もつけずにTeraPadのパスだけ記述します。
    HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\View Source Editor\Editor Name

    標準の場所にインストールした場合には、

    C:\Program Files\TeraPad\TeraPad.exe


    実際に「TeraPad.exe」がある位置を指定しますので、例えば、Dドライブの「Freesoft」というフォルダの中の「tpad093」というフォルダ内に「TeraPad.exe」があるという場合は、

    D:\Freesoft\tpad093\TeraPad.exe

    ・・・と指定します。


    前後や途中に余分なスペース等が含まれていないか、もう一度確認してみてください。



    はてなの回答(質問も?)やコメントでは、半角の「¥」が\と表示される仕様みたいです。
    コピーした文字列はきちんと半角の「¥」になっているので大丈夫です。
  • id:miharaseihyou
    ようやくTeraPadでソースの表示が開きました。
    原因はスペルのミス。
    「View Source Editor」が正しいのですが、「Source」と綴るべきところを「Souce」と記述していました。
    これでようやく「hatena_kimono-korinkiri/hatena_kimono-korinkiri」をTeraPadで「ソースの表示」を行いました。
    後は検索で「width」を一つ一つ当たっていって、
    div.adminmenu

    #simple-header

    h1

    .hatena-body

    .main

    .calendar

    .day

    .comment

    .commentform textarea
    の各項目のwidthの値を増やして、編集し、画像を二つ1200pxのを登録して、スタイルシートに編集したテキストをコピーすれば幅を変えた画面に切り替わる・・・んですね?
    「「.main」の「width」に指定した値」をどれくらいにするべきか、「hatena-body-background.gif」と「simple-header-background.gif」を検索してみたらエラーが出た。
    hatena-bodyで検索したら一つだけ出て、少し下の方に
    id:hatenapr:20070327071337j:image:w350" title="f:id:hatenapr:20070327071337j:image:w350" class="hatena-fotolife" width="350">などとあるので、元々のwidthは350ということですね。
    simple-headerで検索したら、
    Hatena::" title="Hatena::" id="logo-hatena" width="65" height="17"></a><a href="/"><img src="/images/diary-simple_wh.gif" alt="Diary" title="Diary" id="logo-diary" width="43" height="17"></a>
    とあるので、width65とhight17にlogo-diary" width="43" height="17"の部分が何ナノか?
    たぶん縦横の比率を変えない方が無難な気がします。
    分かる人には簡単な事ですし、私でもある程度見当も付くのですが、やはり難解です。本文の幅を二割ぐらい拡げたいのですが、どちらをどれだけ変えれば良いのか?
    おそらく全体の幅が350に設定されていると思うので、この範囲内で割合を変えてやるのだと思います。
    今晩はもう遅いのでこれくらいにしますね。

  • id:rouge_2008
    スペルミスだったのですね。
    原因が分かって良かったです。


    はい、提示した各項目を広げたい分追加した値に変更します。
    それともう一つ追加です。
    以下のセレクタの値も変更する必要がありました。

    .refererlist

    ※各項目に「_width」や「*width」がある場合は、これらの値も同じように変更します。


    1200px程度の幅の画像ともう一つ(550px+追加分)の幅の画像を登録して、この分のスタイルシートの画像のパスを編集・・・の他に、その他の画像のパスの変更もあります。
    詳しい方法は、回答の手順6を参考にしてください。
    ※「hatena-body-background.gif」と「simple-header-background.gif」を指定してある箇所については、コメントでも補足したとおり、自分で作成した画像を指定します。



    「diary-simple_wh.gif」はダイアリー(表記は英語)のロゴのようですね。
    日記のヘッダー部分(左上)に表示されています。
    はてなダイアリーでは、HTMLソースの方は編集することができません。
    管理画面から、ページのヘッダやページのフッタなど、一部だけが変更可能になっています。


    「hatena-body-background.gif」と「simple-header-background.gif」は、CSSで背景画像として指定されていますので、HTMLソースを検索しても見つかりません。
    「.main」の「width」に指定した値を確認するには、HTMLソースではなく「hatena_kimono-korinkiri.css」を検索してみると良いです。
    ちなみに標準では550pxが指定されています。
    現在の本文「.main」の幅を目安に2割程度広げたい場合は110px、画面全体の幅を目安に2割程度広げたい場合は、それぞれPCの画面解像度に合わせて次のピクセル数分だけ追加すると良さそうです。

    画面解像度が1280×***など横幅が1280の場合・・・250px
    画面解像度が1024×768など横幅が1024の場合・・・200px

    ※単純に目安とする幅のピクセル数に0.2(2割)掛けて算出しました。
    目安となる幅が上記のどれでもない場合は、計算してみてください。
  • id:miharaseihyou
    画像をフォトライフにアップする段階でトラブルが発生しました。
    白紙の画像をそれぞれ1200px×5pxと800px(全部プラス250pxで統一するつもりです)×5pxの画像を一つづつ作ってマイピクチャーに登録してはてなのフォトライフにアップロードしようとしたのですが、アップできませんでした。
    提供していただいたタイトル背景用の画像は無事にアップできたのですが、Corel Painterで作ったファイルはフォトライフの方で認識してもらえないようです。
    Jtrimをダウンロードして画像を作り直してアップするつもりです。
    これだとbmpなので、いくらなんでも認識してもらえると思う。
  • id:miharaseihyou
    画像のアップは上手くいきましたが、今度は編集でトラブルです。
    先ず最初は
    「http://d.hatena.ne.jp/themesample?hatena_kimono-korinkiri」でソースの表示を行いましたが、これはTeraPadで出た。
    しかし、「hatena-body 」で検索したのですが、何も出てこない。
    それと
    「http://d.hatena.ne.jp/theme/hatena_kimono-korinkiri/hatena_kimono-korinkiri.css」にアクセスしたら、なぜかメモ帳で開きました。
    このまま、メモ帳で編集するのは怖い気がする。

    これぐらいで今晩はもう寝ます。
  • id:rouge_2008
    たしかにメモ帳で開いてしまいますね。
    確認不足で失礼しました。

    CSSファイルをTeraPadで開くように、関連付けを変更してみてください。
    方法が分からない場合は次のページを参考にして、リスト一覧から拡張子「CSS」の「CSSファイル」を探して、「詳細設定」からプログラムを変更してください。
    http://homepage3.nifty.com/nanahoshi/filetype/filetype.html
    ※「(その三) フォルダオプションの「詳細設定(C)...」から関連付ける。(アイコンの変更も可能です)」を参照してください。

    ※今度は「 "%1"」が必要になると思います。「参照」を押して「TeraPad.exe」を選択後、パスの後ろに手動で付加してください。

  • id:miharaseihyou
    何処まで続く泥濘ぞ。
    質問の期限切れ寸前で悩み多き状態です。
     
    先ず、CSSファイルをTeraPadで開くようにはできました。
    .cssでファイルを検索して、ファイルのプロパティーから変更⇒参照⇒TeraPadを選択する手で上手くいきました。
     
    前回、半分変更した状態でスタイルシートをコピーしたのですが、途中からの変更手順が不明瞭だったために一旦全部削除しました。
    しかし、その時の設定が部分的に残っているらしく、結果的に本文の幅が程よく広がっています。
    ただし、一番上のタイトル背景用の画像の幅だけが狭いままになっている。
    まあ、このタイトル背景用の画像に関しては何処を変更していいのかハッキリ分からなかったのですが、・・・。
    どの部分を削除してフォトライフの背景用画像を加工したファイルにアドレスを変更するのか確定できなかった。
     
    一度、試作したスタイルシートを使って見たのですが、なぜかサイドの水玉模様が消えてしまった。
    あわてて全削除して元に戻しました。
     
    それにしても、不安です。
    全体の幅は1200pxだと思うのですが、設定のmainは800、ヘッダーやh1は250px足すと1050pxになるみたいですから。
    なんか、二度目を追加して足しているような気がしてきた。
    .hatena-body {・・以下略・・には800pxの白紙の画像のurl。

    div.adminmenu {
    background: transparent url("simple-header-background.gif") repeat-y;
    }

    #simple-header {
    background: transparent url("simple-header-background.gif") repeat-y;
    }
    の二つには1200pxの白紙のフォトライフのurlですよね。

     
    あした、最初から、もう一度頑張って見ます。
    ダイアリーのカスタマイズ用のアプリをはてな当局が作ってくれるとか・・・たぶん無理だろうなあ。
  • id:rouge_2008
    きっともう少しで出来ますから大丈夫です。(^-^)


    タイトル背景用の画像は「h1」の次の部分を変更します。

    h1 {
    background: url("h1_background.gif") no-repeat top left;
    }

    白紙の画像の変更については、それぞれその通りで間違いありません。
    フォトライフにアップした画像のURLに変更します。


    大丈夫です。
    画像の幅と全体の幅が違うのは、画像の幅が足りなくならないように、1200pxと少しだけ長めに作ってもらったからです。
    タイトルの背景画像も1200pxありますが、スタイルシートに従って1050px分だけ表示されます。

    ※「.hatena-body」も変更後はwidthが1050pxになっているはずです。
    この状態で幅が長い画像を使用すると、サイドバーの背景部分にまで及んでしまうので、「.main」の幅と同じ長さの画像を使用することになっています。


    「_width」や「*width」の部分は、「width」とは違う値が指定されています。
    これらにも同じくそれぞれ250px追加したのですよね?
    変更後の値も「width」とは異なる数値になります。
    間違いがなければ、問題なく表示されるはずです。


    アプリが出来たら使う人がたくさんいそうですね・・・
    詳細なカスタマイズがもっと簡単にできるようになるといいですね。
  • id:taka-jun
    誰も指摘してないが、プログじゃなくてブログだよ。

    メモ帳で編集→保存しても何も問題ありません。

    画像はbmpだとアップできないんじゃないでしょうか?
    jpegやgifにすれば大丈夫だと思います。
  • id:miharaseihyou
    id:taka-junさんへ
    プログではなくて「ブログ」なんですかぁ~~~!!?
    知らなかった。と言うより、どっちか分からなくて両方使っていた。
    比較的新しい言葉で、文字でだけ見てる事が多かったから。
    思い込むと細かく見なくなるんです。
    デフォルトの刷り込みは「プログ」の方だった。
     
    イメージもプログラミングからプログですんなり納得だったけど、違ってたんだ。
    頭の中で、概念と発音が遊離した言葉が、また一つ増えるところだった。
    他にもあるんですよ。
    「ランテック」と「ライテック」、これは某有名家電器具のメーカーの社名の一部ですが、最近までイメージ先行で間違えていた。
     
    JTrimですが、いまさっきまでJtrimだと思っていたんですが、それは置いといて、こいつでファイルを保存するとデフォルトでbmpにでの保存が指定されました。
    本来はお絵かきソフトかレタッチソフトみたいだし、そうでなければpxでの画面指定はできない。
    COREL PAINTERで作ったら認識されなかった。
    でも、bmpではXPのビュワーでも問題なかったし、良く聞くファイル名だし、現実にアップできたので問題無いと思っていました。
    jpegで保存しようとすると、何だか色々設定してくれとダイアログに言われるので、素直に納得していたのですが、実は普通はjpegを使ってるので違和感がありました。
    やっぱりjpegで作り直してアップしてみます。
    まあ、ネットの世界の標準は違うのだろう・・・とぐらいに思っていた。
     
    こうなると、保存するファイル形式も気になって来ました。
    でも、確実に設定できるフォトショップは重いんだよなあ。
    実はアンインストールしたばかりだったりする。
     
    メモ帳での画面は、あまりにも分かりにくいので、私はTeraPadでの編集の方が安心できます。
    折り返しで工夫しても、切れ目無しに表示されるので何を表示しているのかが分かりにくい。
    widthを変更する項目など、意味は分からなくても確認できるだけでも安心できます。
    正確に設定できれば、テキストファイルでさえあれば問題無いのは理解しました。
  • id:miharaseihyou
    フォトライフへのアップした画像ですが、確認したところでは幅が800px以上にはならないようです。
    少なくとも編集画面ではそうです。jpegでアップしたからかもしれません。
  • id:miharaseihyou
    明日の午前二時(今から約25時間後)には自動終了になるので、それまで、精々頑張ります。
    少し予定を変更して.mainの数値をプラス150pxつまり700pxにすることにしました。
    その方がバランスがいい・・・と私が感じただけですけど。
    ちょうどファイル形式の事があったのでやり直してみます。
     
    http://d.hatena.ne.jp/miharaseihyou/
    のソースを表示してみたのですが、やはり昨日の中途半端な設定が残っている。
    削除してしまった写真すらあるんですけどね。
    今日はもう寝ます。
  • id:rouge_2008
    フォトライフにアップロードするサイズは、「設定」で変更できます。
    画像サイズに「1200」ピクセル(長辺)以上を指定してみてください。
    ※一応、「オリジナルサイズの画像を保存」にもチェックを入れておきます。


    jpgでアップできなければbmpでも仕方ないと思いますが、jpg、gif、pngが良く使われているのでその方が良いですね。
    ※bmpはサイズが大きくなるので嫌われています。

    ちなみに私はGIMP2で作成した画像をアップしました。
    元々のファイルが高さ1pxでしたので、1200px×1pxと800px×1pxで作成しましたが、なぜかフォトライフへのアップに失敗・・・
    高さ5pxで作成したのをアップしたら成功しています。
    miharaseihyouさんの場合は、高さ5pxでもアップできなかったんですね・・・。
    どうしてもアップに失敗する場合は、10pxなど高さをもう少し大きくしてみてください。
  • id:miharaseihyou
    いえ、bmpでもアップできたのですが、どうも相性が悪いような気がして。
    それに、現在消去したはずの設定が適用された状態で私の日記の表示がされています。
    http://d.hatena.ne.jp/miharaseihyou/
    ソースを表示したら消したはずのフォトライフのアドレスが青い文字で表示されました。
    それを見て、少し本文の幅が広すぎる気がして、プラス250pxからプラス150pxの700pxに予定変更です。

    どちらにせよ最大幅の設定は、アップしてから編集で変更するしかないようです。
    アップしておけば後からでも足切りされた部分が復活するかどうかが心配です。
    最初に700pxの白紙をアップしておいて、編集で1200pxにして(それでもオリジナルの700pxの画像は残るとは思いますが、)それから、その設定に乗っかるような形で1200pxの画像をアップすればいいかも?
  • id:rouge_2008
    余計なお世話かと思いましたが、画像を作成してアップしましたので、良かったら使ってください。
    ※私の方だけかもしれませんが、フォトライフの編集では、なぜか画像サイズが変更されませんでした。

    hatena-body用(700×5)
    http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20081223/20081223172320.gif

    adminmenuとsimple-header用(1200×5)
    http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20081217/20081217204106.gif


    サイドバーの表示についてですが、なぜか下に表示されているサイドバーもありますし、中には2つ表示されているサイドバーもあります。
    ページのフッタの欄内で右クリックして、「すべて選択」→「コピー」で現在の設定を保存して置いてから、次の部分・・・

    <div class="hatena-module hatena-module-photo">
    <div class="hatena-moduletitle">最新の画像</div>

    <div class="hatena-modulebody">
    <ul class="hatena-photo">
    </ul>
    </div>
    </div>

    上記の下に続く以下の3行を削除してみてください。

    </div>
    </div>
    <div class="sidebar">


    それからページのヘッダ欄にも余分な記述があるようです。
    「hatena_kimono-korinkiri」の場合、デフォルトでは以下のようになりますので、一旦このように変更してみてください。

    <div class="hatena-body">

    <div class="headermenu">
    <ul class="clearfix">
    <li><a href="http://d.hatena.ne.jp/***/about">about</a></li>
    <li><a href="http://a.hatena.ne.jp/***/">antenna</a></li>
    <li><a href="http://b.hatena.ne.jp/***/">bookmark</a></li>
    </ul>
    </div>

    <div class="main">


    ※ヘッダメニューが必要ない場合は、以下のようにしても大丈夫です。

    <div class="hatena-body">

    <div class="main">



    上記の操作(テーマの再適用)が完了したら、自分の日記を表示して一旦表示確認をします。
    サイドバーの表示など問題なければそのままで大丈夫ですが、表示順の変更をしたい場合は、ページのフッタ欄でモジュール等の表示順の変更を行ってみてください。

    ※上記の操作が良く分からない場合は、「かんたん」タブで再度テーマを適用し直してみてください。
    テーマの適用を行っても、それでも余分な記述がついている場合もあります。
    この場合は、どれが余分な記述か調べて削除する必要があります。(後でHTMLソースを確認しますので、表示がおかしい場合は教えてください。)
  • id:rouge_2008
    今さらですが、少し勘違いしていたようです。

    タイトルの背景画像の幅も「.main」の幅に合わせた方が良いかもしれません。
    作成し直してアップしましたので、良かったら使ってください。
    http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20081223/20081223192011.gif

    adminmenuとsimple-headerにもhatena-body用(700×5)の画像を指定してください。
    これらはすべて「.main」の幅に合わせた背景画像を使用するのが正しいのかもしれません。
    ※結果的に1200ピクセルの幅の画像は使用しなくて良いようです。

    手間を掛けさせてごめんなさい。失礼しました・・・。m(_ _;)m


  • id:miharaseihyou
    一生懸命作業したのですが、力及ばず中途半端な変更しかできませんでした。
    もう少し時間があると勘違いしていたのですが、情け容赦なく終了になってしまい申しわけありませんでした。
    できればid:rouge_2008さんにはいるかマークとポイントを余分に送りたかったのですが、ポイントだけ別にお送りしますね。
    現在、改造途中だと思いながら、スタイルシートの変更をアップしてみたのですが、やはりトップの画像と両側の水玉模様が消えたままです。
    後日もう少し勉強しなおしてチャレンジしてみたいと思います。
    とりあえずオリジナルに直して使います。
    一週間お付き合いいただき本当にありがとうございました。
  • id:miharaseihyou
    とりあえず現時点では新しく作ってもらった画像をマイピクチャーに取り込む方法を忘れてしまった。
    フォトライフの設定変更まではできたのですが、結果的に不必要だったようですね。
    少し休んで、新しく作ってもらった画像なども組み込んで、再チャレンジしようと思います。
    今日はもう限界なので日記の設定をデフォルトに直してから眠ります。
  • id:rouge_2008
    水玉模様の壁紙は「body」の背景画像として指定されています。
    以下の部分の画像のパスを

    body {
    background: #e8e9f2 url("background.gif");
    }

    以下のように変更します。

    body {
    background: #e8e9f2 url("http://d.hatena.ne.jp/theme/hatena_kimono-korinkiri/background.gif");
    }


    トップの画像とは、タイトルの背景画像のことでしょうか?
    こちらは、「h1」の背景画像のパス指定を見直してみてください。


    それでは、時間が出来たらまたいつでもどうぞ。
    しばらくは、毎日確認する予定ですので・・・
    ※現在、一時的に「hatena_kimono-korinkiri」に変更して、本文等の幅を700pxにしています。(タイトル背景は別の画像に変更しています。)
    完成後の参考イメージとして、良かったら確認してみてください。

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

トラックバック

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

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

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