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

はてなのプログについての質問です。
長期戦でゆっくり開けますので、ゆっくり回答してください。

現在、はてなでプログを書いているのですが、デザインを改良したいと感じています。

1、はてなプログのかんたん設定からデザインを選択したのですが、両側の畦道が太すぎて、本文の幅が狭くて違和感があります。
両側の畦道の幅が比較的狭いデザインで、お勧めの物を教えてください。
明るい、朗らかなイメージにしたいと思っています。
なお、当方素人に近いので、複雑な設定の場合はきちんと並べて下さると助かります。

2、次に、写真やパーツなどの貼り付けですが、畦道にも貼り付けたいのですが、やり方が分かりません。
お勧めの手口を教えてください。
できればワンパターンのダイアログなんかだと助かります。

3、さらに、贅沢を言うようですが、当局のヘルプはそれなりなのですが、全てを解説しなければならない関係上あまりにも分かりにくい。
そこで、ある程度本道に沿って解説された板があれば教えてください。
パターン別にハウトゥーが解説されているタイプの板があればベターです。

以上、よろしくお願いします。

●質問者: miharaseihyou
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:お勧め はてな ゆっくり イメージ タイプ
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● mulloo
●0ポイント

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


2 ● Marnier
●30ポイント

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 背景」など検索しながら、なんとか形にしました。

◎質問者からの返答

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

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

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

http://um-factory.com/

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

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

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

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

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

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


3 ● Marnier
●30ポイント

ちょっと今は探している時間と私のセンスに自信がないので、膨大な公開デザインの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



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

◎質問者からの返答

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

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

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

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

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

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

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

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

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

div.main {

width:680px;

}

div.sidebar {

width:210px;

}

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

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

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

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


4 ● rouge_2008
●30ポイント

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%...


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

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

◎質問者からの返答

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

自分の採用しているのが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%...

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

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


関連質問


●質問をもっと探す●



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