2006年09月26日

コメントプレビュー通りに、コメントを投稿させる。

 ここのSeesaaブログには、コメントプレビューが標準装備されています。絵文字の確認にはちょうどいいのですが、プレビューのレイアウト通りにコメントが投稿されないのが残念ですよね。
 そこで今回はコメント投稿してくださるみなさんへの細かい配慮なのですが、コメントプレビュー通りにコメントが投稿されるようにCSSを編集してみましょう。
.comments-body{〜}の内容をすぐ下にコピーして貼り付けて.comments-preview{〜}とします。
それから、テスト用に実際投稿されたコメントと同じ内容のコメントをプレビューさせて、marginやpaddingの調節をしてください。
参考までに、marginやpaddingの設定のしかたは下の通りです。
  • margin:10px; 上下左右がすべて10px
  • margin:10px 20px; 上下に10px、左右に20px
  • margin:10px 20px 15px; 上10px、左右に20px、下15px
  • margin:10px 20px 15px 30px;
     上10px、右20px、下15px、左30px

.comments-body {
margin: 15px 10px 15px;
padding: 5px 15px 5px 10px;
color: #36414d;
background: #ffffff;
font-size: 12px;
line-height:150%;
word-break: break-all;
border-style: solid;
border-width: 1px;
border-color: #ffeebf;
}
.comments-preview {
margin: 15px 15px 15px;
padding: 5px 15px 5px;

color: #36414d;
background: #ffffff;
font-size: 12px;
line-height:150%;
word-break: break-all;
border-style: solid;
border-width: 1px;
border-color: #ffeebf;
}

yozoからのお願い


 この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておくようにしてくださいね♪
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
posted by yozo家 at 21:49 | Comment(2) | TrackBack(0) | カスタマイズ | edit

2006年09月06日

小粋空間様のテンプレートに変更

 2006/08/02のここの記事BlogPet俳句を求めて三千里〜マルコyozo&うさみちゃん編〜@後姿ラブリー同盟で、画像は見えるのですが、回りこんでいる文字が表示されたりされなかったり、というエラーが発生しました。(ちなみにyozoの環境はWinXP Pro+IE6.0です)


 Seesaaブログのサポートとメッセージのやり取りをして、<img>のalign属性がエラーの原因とのこと。CSSのfloatを使用して回り込みを設定していましたが、それでもXHTMLに準拠した記述をすると、回り込みしたはずの文字が表示されたりされなかったり・・・ というわけで、2006/09/04に、メインブログのyozoの気が向いたと記2.0で使い慣れている小粋空間yujiroさんがSeesaaブログテンプレートという記事で配布されているテンプレートに変更しました。以下はその作業のメモです。


 文字の回り込みの表示エラーは、解消されています。yujiroさんのテンプレートに救われました。この場にて、心よりお礼申し上げます。m(_ _)m


ここのテンプレートは、小粋空間yujiroさんの記事Seesaaブログテンプレートからお借りしました。yujiroさん、どうもありがとうございました m(_ _)m

今回のカスタマイズで参考にした記事の一覧です。
記事名だけのものはすべてyozoの気が向いたと記2.0yozoの記事です。参考にしてくださいね。m(_ _)m


  1. 小粋空間yujiroさんの記事Seesaaブログテンプレート
    一つテンプレートをダウンロードして、そのテンプレート名をつけて、こちらの記事のHTMLファイル及びCSSファイルをコピペしました。
  2. 小粋空間のテンプレート使用しました。
    右サイドバーのみの2カラムに変更しました。
  3. 左の余白を持たせる。
    <ol>の表示の修正をしました。
  4. ブログタイトルの文字色・背景色を変更
    ブログタイトルの文字色・背景色を変更して、カラフルにしてみました。
  5. 記事とサイドバーのマージンを設定する。
    記事のはじめの日付部分とサイドバーのタイトルを同じ表示に変更しました。
    2列カラムでエントリー部分のマージンを設定して読みやすくしてみました。
    コメント、トラックバックの表示部分のマージンを設定して読みやすくしてみました。
    エントリー部分と右サイドバーの幅を調整しました。
     コメント入力欄の幅については、ここの記事コメント投稿欄を大きくしたよ♪(yozoblog)を参考にして、下のコードをCSSに追加して、コメント投稿欄の横幅を大きくしました。
    /*コメント投稿欄*/
    #comments textarea{width:450px;}
  6. ブログの壁紙(背景)を設置する
    ブログの壁紙(背景)を設置しました。
    今回使用させていただいた壁紙は、柚莉湖♪風と樹と空と♪Yurikoさんの記事秋の背景素材−柿・林檎・赤とんぼ・ススキと秋の虫 よりダウンロードさせていただきました。この壁紙はGIF形式です。
  7. 記事タイトルにワンポイント画像を設定する♪
    yozoうさを、エントリータイトル(記事のタイトル)をワンポイント画像に設定しました。
    画像は24×24のサイズなので、文字の位置をpaddingで調整しました。
    /* エントリータイトル*/
    h3.title {
    margin: 15px 0 10px;
    font-size: 12px;
    font-weight: bold;
    background-image: url(画像URL);
    background-repeat:no-repeat; 画像を1つだけ表示
    padding-left:30px; 文字の書き始めの左端からの位置
    padding-top:5px;
    padding-bottom:5px;
    }
    ※padding-top、padding-bottomで画像と文字の高さを調整しました。
  8. リンクにカーソルをあてるとリンクが動きま〜す♪
    下のようにCSSを追加して、リンクを「プニュ♪プニュ♪」にしました。v(*'-^*)bぶいっ♪
    a:hover
    {
    position:relative; top:1px; left:1px;
    }

yozoからのお願い

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければCommentやTrackbackしていただけたら、幸いです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
posted by yozo家 at 16:50 | Comment(18) | TrackBack(2) | カスタマイズ | edit

2006年08月09日

BlogPet背景変更ボタンの作成と留守番背景の設置

06/12/29 お知らせ
 06/12/28のBlogPetのリニューアルによって、この記事のように、iframeタグを使った更新ボタンを使用すると、一部の機能に不具合が発生することがわかりました。BlogPetの仕様変更に準拠するため、新しく更新ボタンの設定の方法を記事にしてあります。この記事を参考にされたみなさんにはお手数かけますが、更新ボタンを変更していただけますようにお願いします。記事はコチラ→BlogPet更新ボタンを簡単に設置しましょう。
iframeを利用しての更新ボタンはおすすめできません。
posted by yozo家 at 17:24 | Comment(12) | TrackBack(5) | カスタマイズ | edit

2006年06月15日

サイドバーのタイトルの前後に間をあけたよ♪(yozo)

おーい♪うさも♪
サイドバーのタイトルとコンテンツがぴったりで窮屈だったので、ちょっと間をあけるようにしたよ♪

  1. [デザイン]−[スタイルシート]−[適用しているタイトル]をクリックして「スタイルシート」の欄の中でクリックします。(「スタイルシート」の中であればどこでも構いません。)


  2. [Ctrl]+[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにsidetitleと入力して、検索してください。


  3. .sidetitleの{〜}の中にmargin:15px 0px 10px;のコードを追加しましょう。
    同様にして、#contentの{〜}の中にmargin-top:15px;のコードを追加しましょう。
    そして.sidetitle#contentのmargin-topはそろえるようにしましょう!

    必ずバックアップしましょう!
    いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪

    .sidetitle {
    background-image:url(http://blog.seesaa.jp/img/bg/beige/side_title.gif);
    background-repeat:no-repeat;
    color:#9CA06F;
    font-size:12px;
    font-weight:bolder;
    padding:10px 10px 8px 25px;
    text-align:left;
    margin:15px 0px 10px;
    }

    #content {
    float:left;
    width:532px;
    color:#FFF;
    text-align:center;
    margin-top:15px;
    }

    参考までに、marginの設定のしかたは下の通りです。
    margin:10px; 上下左右がすべて10px
    margin:10px 20px; 上下に10px、左右に20px
    margin:10px 20px 15px; 上10px、左右に20px、下15px
    margin:10px 20px 15px 30px;
      上10px、右20px、下15px、左30px


  4. [スタイルシートを変更する]をクリックします。『設定を変更し、CSSをビルドしました。』と表示されます。


  5. [再構築]をクリックして「CSS(スタイルシート)」を選択して、[再構築を実行する]をクリックしましょう


<yozoからのお願い>

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「テンプレートの改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければコメントやトラックバックしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
posted by yozo家 at 22:40 | Comment(17) | TrackBack(1) | カスタマイズ | edit

2006年05月31日

自由形式にタイトルを表示させたよ♪(yozo)

おーい♪うさも♪
ほんのちょっとだけカスタマイズの投稿ですよー♪

次女うさのうさみちゃんに俳句集を設置して、今までのうさもの俳句集にも区別するためにタイトルを表示させたよ♪
(seesaaの[自由形式]には、デフォルトでタイトルは表示されないからね。)

  1. [デザイン]−[コンテンツ]−[自由形式]をクリックします。


  2. 自由形式の設定の画面で、「タイトル」の欄に表示させたいタイトルを入力して[保存]をクリックします。


  3. 再度[タイトルを表示させたい自由形式]をクリックして、自由形式の設定の画面で、右の[コンテンツHTML編集]をクリックして
    、下の1行のコードを一番最初の行に追加するだけです。

    ↓この行を追加します。
    <div class="sidetitle"><% content.title %></div>
    <% content.header -%>
    <% content.free.text %>
    <% content.footer -%>


  4. 一番下の[保存]をクリックして、再構築する範囲を「全ページ」として[再構築を実施する]をクリックしてください。

<yozoからのお願い>

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければCommentやTrackbackしていただけたら、幸いです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
posted by yozo家 at 10:42 | Comment(10) | TrackBack(1) | カスタマイズ | edit

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。