date
050428
category:
tips
author:
ユヅ

INFOをつける

質問の多かった、サイドバーにINFOを作るカスタマイズ。
ブログの説明やご挨拶、WEB拍手や別サイトへのリンク、あるいはプロフィールなど自分の好きに書けるフリースペースの作り方。 ▼ベースHTMLを編集する
ベースHTMLに下記を追記します。
何処に表示したいか＆使用テンプレートで入れる場所は異なります。
<dl class="info">
<dt id="infoname">INFO</dt>
<dd id="infolist">★INFOの中身★</dd>
</dl>

▽blog*citronのテンプレで、ナビバーの一番上に置きたい場合
<div id="navi"><!-- start_navi -->
<div class="navimenu">
という２行の下に入れると良いでしょう。

▼CSSを編集する
blog*citronのテンプレートを使っている場合は、ベースHTMLの書換えだけでもCSSが反映されていると思うので、更にカスタマイズされたい場合のみ追加して下さい。
この色の部分は説明書きなのでコピペする時は削除して下さい。
/* INFOタイトル部分 */
#infoname {
padding:5px 5px 5px 5px; // 余白（上,右,下,左の順）
color:#CD6090; // タイトルの文字色
font-size:10px; // タイトルの文字サイズ
font-weight:bold; // 文字を太字にする
border-bottom:1px dashed #8B475D; // 点線の下線を引く
}
/* INFOの内容部分 */
#infolist {
padding:5px 5px 5px 5px; // 余白（上,右,下,左の順）
color:#555; // 文字色
font-size:10px; // 文字サイズ
line-height:1.6em; // 行間
}

ここに書いたCSSは一例なので、デザインにあわせて変更して下さい。

▼応用編
▽ブログの説明を、タイトル部分ではなくINFOに書く
<dl class="info">
<dt id="infoname">INFO</dt>
<dd id="infolist">{blog_description}</dd>
</dl>
環境設定で設定したブログの説明がINFOに表示されるようになります。

▽更にウェブ拍手をつけてみる。
<dl class="info">
<dt id="infoname">INFO</dt>
<dd id="infolist">{blog_description}<br />
<a href="拍手CGIのURL"><img src="拍手アイコンのURL" border="0" alt="CLAP!" /></a>
</dd>
</dl>

▽更に更にプロフィールを足してみる。
<dl class="info">
<dt id="infoname">INFO</dt>
<dd id="infolist">{blog_description}<br />
→<a href="プロフィールのURL">PROFILE</a><br />
<a href="拍手CGIのURL"><img src="拍手アイコンのURL" border="0" alt="CLAP!" /></a>
</dd>
</dl>

ul,liなどを使ってリスト風にしても良いし、ブログリストへのListMeボタンをつけてもよし。常に上に表示しておきたいものを絞ってコンパクトにまとめるのがおすすめ。
Related Archive

Comments

コメントエリアをスクロールする / スクロールを解除する

こんばんは。
またもや痒いところに手が届くカスタマイズで小躍りしてます。^^
早速infoコーナー設置してみました。
ありがとうございます。
リンクやらプロフに散らばってたものがすっきりして気持ちいいです。

  • 050428
  • ちゃい

リクエストさせていただいてた者です
早速のエントリありがとうございました～
今日にでもカスタマイズしてみます！
体調の方はもう大丈夫ですか？

●ny*mamaさん
こんばんは＾＾
貴方のマゴの手blog*citronです。（キャッチコピー風
自分であちこちに付け足していたものも、一箇所にまとめられると編集もしやすいかなと思います＾＾
●ちゃいさん
リクエストにお答えしました(´▽｀)/
カスタマイズ頑張ってくださいね。
咳以外は元気です！
胸からこみ上げる咳だけがどーにも直りません；；（病院いけ）

こんばんは。いつもいつもかなりお世話になっています。
早速、infoと悩んで挑戦できなかった折り畳みにチャレンジしました。すごく初心者ですが、ユヅさんの丁寧な説明文ですんなりできました。
これからも応援してます！
事後報告ですがリンクさせて頂きましたｏ(゜∇^☆)／

初めまして<(_ _)>
初めてのｓｂに挑戦です^^
カスタマイズさせていただきましたが、
はりねずみのベースです^^
素敵なテンプレートをありがとうございました<(_ _)>

いつもお世話になります。
INFOのつけかたとても参考になりました！
感謝感激ですＯ(≧▽≦)Ｏ

  • 050509
  • 翔子

ブログ初挑戦の翔子です。
試行錯誤しながら頑張ってる毎日ですが肩凝りが・・・（涙
とても質問しにくいのですが教えていただけると嬉しいです。
ＩＮＦＯにＰＲＯＦＩＬＥの文字がありますよね？そこにリンクが貼ってありますよね。そのＰＲＯＦＩＬＥのページは自分で作ってリンクを貼るんでしょうか？
自分でページを作るとしたらメモ帳とかで作るのですか？
質問だらけで申し訳ありません！

試してもいないのに聞くのはおこがましいんですが・・・これお借りしている1カラムの、プルダウンメニューとその下のエントリ表示（メイン部分）との間に設置って可能ですか？
あちこちでindexつけてるのは見かけるのですが、infoをつけたいんです！

●ましろさん・あゆむさん・高梨さん
こんにちは。
カスタマイズ楽しんでおられるようですね～＾＾
うちのテンプレが色々なデザインに変わっていくのを見ているのも面白いです(*´ー`*）

●翔子さん
こんにちは。
管理画面のユーザー管理で、自分が登録しているユーザーの編集ができます。編集で「ユーザーの説明」を書くとそれがプロフィールページになります。
sbだと最初にユーザーを１つ作ってあるので、それを使うなり新しく増やすなりするといいでしょう。ヘルプに説明が書いてありますのでそちらも参考にして下さい。
別にページを作ってそれにリンクを貼ることも出来ますが、いずれにしてもメモ帳はおすすめしません。フリーソフトでよいものがたくさんありますので、メモ帳ははやめに卒業してテキストエディタを使いましょう＾＾

●hateさん
できますよー。
<!-- start_main -->と
<!-- BEGIN entry -->の間にタグを書いて下さい。
サイズなどはCSSで調整するといいでしょう。
<!-- BEGIN entry -->などのコメントタグを消さないように注意して下さいね。

何度もすみません。早速チャレンジしてみてるんですが、枠を作ろうとしたら、
infonameの方は枠作れたんですが、infolistの方は何やら下のメインエントリの背景と
くっついたかのように同じ色で変わってしまい、そのとき境目がないように見えました。
テーブル枠をうまく作れなくて困っているので、ご教授くださいませんか。
今はとりあえずinfonameにテキスト入れてあります。infolistの方いじってもinfonameと同じ文字先頭にならないんです、、勉強不足ですみませんです。

●hateさん
とりあえず</dl>がぬけてます。
ちゃんとタグをとじれてない状態ですので、閉じてあげて下さい。

たびたびすみません。ご指摘ありがとうございます！とりあえず現在のようになりましたが、
色もtext-alignがないと指定した色にならなかったり、指定通りのフォントサイズ8pxに
ならなかったり四苦八苦しています。ボンミス連発してるんですねきっと。
CSS弱くて申し訳ありませんです・・・。

●hateさん
>この色の部分は説明書きなのでコピペする時は削除して下さい。
と書いてあるように、CSSの//以降の説明部分をちゃんと削除して下さいね。
また、infonameの方の上にmarginをつけるとIE以外のブラウザでは隙間があきますので、paddingで上の余白をとるようにしてください。

早々にお返事、ありがとうございました！昨夜あのまま続けて作業して、
フォントも無事小さく変更されて、とりあえず今のようなカタチに収まりました。
ボンミス連発で大変ご迷惑おかけしました、またお世話になるかもしれませんが、
よろしくお願いいたしますm(_ _)m

ユズさん、初めまして・・・
ずーっと前からチョコチョコ拝見していて、いつかは自分で設置できたらいいなあと思っていましたw氓ｻして、今日無事設置・ユズさんの可愛いテンプレートもお借りしましたw氓ﾜだ使っているwﾒwﾊwﾝwﾙwｶwﾜからの記事の移行をしていないのでこれからゆっくりして7月にはリニュして公開したいと思いますw毆ｴwｻwｾwﾍwｰwｻwﾜ方法も最初は『分からない！』と悩んでいましたが、やっとできましたw氓ｱれからもよろしくお願いしますw・>

●yuriyamaさん
はじめまして、こんにちは。
コメント有難うございます。
sb設置成功、おめでとうございまーす！！
カスタマイズは慣れるとかなり自由がききますので、マスターして楽しんでくださいね。
ちなみに半角のカタカナは文字化けしやすいのでご注意くださいませ＞＜

ユヅさん、度々スイマセン…実はですね、サイドバーにINFOとブログリストを設置しようとしているのですが、メインには反映されるのですが、なぜか個別記事のページに行くと2つとも無くなってしまいますw沚冾ｩらそれで参ってしまっていますw气xースのHTMLを変更したのですが全く反映されませんw汢ｽが原因なのかサッパリわかりません。
どうか教えてください！

●yuriyamaさん
個別記事のページは個別エントリのHTMLを編集する必要があります。
CSSの編集の↓にありますので、そちらでもベースと同じように編集してあげてください。

ユヅさん、こんにちは～！
INFOのカスタマイズ利用させていただきました。
質問なんですが、このINFOの内容部分にも、コメントやリンクなどの部分のように点線の罫線をつけたいのですが、どのようにしたらつけられますか？？

ユヅさん、何度も本当に申し訳ありません…CSSにも書き込みましたが何故かダメですw｣w｣w｣。記述しなおしてUPしなおし、次に新規の記事をUPすると元に戻ってしまったり、アップロードしなおすと新しい記事やコメントが反映されていなかったりw・n初めからやり直したほうがいいんでしょうか？

●nonpuさん
２つ方法があります。
１．#infolistにノートの壁紙を設定して、上下のpaddingを0、文字を10px、行間を17pxで設定する。
２．infoの項目を<ul>と<li>のリストタグ形式で書く。

CSSやタグはこちら（link）を参考にしてください。
ただし罫線を使う場合はサイズが合わないとその後の文章が罫線からずれますのでご注意くださいね。

●yurimamaさん
むむ、何をアップロードされてるんでしょう。
テンプレートの編集は管理画面の「テンプレート」から行うもので、最初にテンプレートを読み込んでからはアップロードするものは何もないのですが。

また、テンプレートの編集時は、HTMLを書き換えたらHTMLをいったん保存。CSSを書き換えたらいったん保存、と1度に保存できるのはその部分だけです。HTMLとCSSを同時にまとめて保存はできません。
あとは再構築も忘れないで下さい。

テンプレートの編集の際は、ヘルプをよく読むようにして下さい。

ユヅさん・・・何回もスイマセンでした！ようやく分かりましたw汪ｨ違いしていて、全く違う方法でやってしまっていましたw・n出来るわけがないですね・・・(;´д｀)トホホ
でも全部解決ですw・nゆっくり落ち着いてやります！笑
ほんとうに何回も申し訳ありませんでした！
BLOGとHPのほうでLINKさせていただきますね。本当にありがとうございました！

はじめまして。
ハリネズミをお借りしましたv

質問なのですが、ブログペットを設置したいのです。index.htmlのページに編集画面で
↓
<dl class="pet">
<dt id="petname">blog pet</dt>
<dd id="petlist">ブログペットのソース</dd>
</dl>

↑を入れると表示はされるのですが、新規コメントを登録すると消えてしまいます…入力ページが間違っているのでしょうか？タグが間違っているのでしょうか…？

教えてください。

すみません。解決しました…！

●アリスさん
「すべてを再構築」すると幸せになれるかもしれません。

ここに書かれたタグ自体はとくにおかしいことはないように思いますが「新規コメントを登録すると」ではなく「個別エントリのページに飛ぶと」表示されていないということではないでしょうか。
既存のページについては既にHTMLとして出来てしまっているものですから（アーカイブを作らない設定にしていない限り）、テンプレートの編集を過去のページに反映させるにはそちらも再構築してあげる必要があります。

ユズさん、ハジメマシテ♪
Ｂｌｏｇをはじめて間もなくこちらを知り、今回のＩＮＦＯをはじめ色々と利用させていただいています。事後報告で申し訳ないのですが、ありがとうございます!!

それと、カスタマイズとは関係ないのですが、ユズさんのノリツッコミ的な文章がすごくツボに入ってお気に入りです・笑　これからもチョコチョコ覗かせて楽しませていただきます。
ありがとうございました!!

●さとさん
はじめまして、こんにちはー。
事後報告で結構ですよー♪事前に承諾を得るようなことはあまりないですし（笑）

ノリツッコミ！バレてる！(wﾝーwﾝ)
ノリも文章も勢いが大事です。…嘘つきました。
文章は推敲が大事です。
楽しんでいただけているのなら報われます（笑）

ユヅさんこんばんは。
infoのカスタマイズ参考にさせて頂きました。ありがとうございました。

●saiさん
こんにちは。
ご報告有難うございました。
カスタマイズ頑張ってください＾＾

blog始めたばかりでカスタマイズの方法を探してました
やっと見つけましたって感じです
たいへん参考になりました

Comment Form

[icon]


Trackback

Trackback URI
このエントリーへのリンクを作成
050508
何でもカタチから入りたがる私 | GOOD BOY !!
なもんで、せっせとカスタマイズに励んでおります。どうだろ、少しはサマになったかな？って自己満の世界？（笑）それにしても、前にも書いたけどブログって色んな事ができるのね♪本日のカスタマイズ内容を記載し...
050510
INFOをつける | [D*L] Diamond Lesson
アフィリエイトにチャレンジしようと思ったんですが、1カラムじゃどこに置けばいいのか・・・と。途方に暮れていたところ、いつもお世話になっているblog*citronさんのINFOをつけるを発見っ！ここにテキスト置けるん...
050513
Set up後のカスタマイズ | タビゴコロ‐鉄道で行く、日本一周の旅
カスタマイズw｣メモ
050529
カスタマイズやってみよう | ココロモヨウ。
カスタマイズでお世話になりました。弄りすぎですなw
050611
サイドバーを軽く。 | ガリレオFM
サイドバーはいちおう折り畳みにしているんですが、タイトルバックを#000000（黒）にしたら、色のバランス的にもファイルサイズ的にも重くなったので、BPとTBPを別ページで表示するようにしてみました。ついでにPROF...
050623
サイドバーにINFOを表示 | Nachures
ブログの説明文をタイトル部分に表示させずにINFOの部分に表示させたかったので、ベースHTMLに直接書かない違う方法にしてみました。設定メニューの環境設定で設定したブログの説明が、INFOに表示されるという仕組み...
050627
やっとINFOとMｙBlogList設置完了 | +blog+ my favorite things
昨日からずっと悩んでいたカスタマイズw气・dさんにアドバイスいただきながらも、なかなかできず諦めかけていましたw氓ｪ！ユヅさんのブログでまた確認しました。「何が間違っている？」と。なんと初歩的なところで...
050701
四苦八苦 | over the r@dio
前々からやりたかった「サイドバーにABOUT（説明書き）をつける」参考（というか完全パクリ）にしたのはblog*citron | INFOをつけるいつもながら丁寧な説明で感謝カンゲキ雨嵐・・・がしかし、NEW ENTRIES等に表示さ...
050726
blog カスタマイズメモ 2 | white*drops
sbのカスタマイズメモ その2。[blog*citron] さまには集中的にお世話になりました。今後もまた参考にさせて頂きたいと思いますのでよろしくお願いします。以下、参照させて頂いたエントリーです。
050830
蜂蜜ドロップ　カスタマイズ | まあちゃ．な時間
テンプレのカスタマイズにいろいろとプラグインを入れてみました。
060502
コメント欄をスクロール表示＋α | どらの戯言【本館】
コメントを見ながらお返事をしたい時、このカスタマイズは非常に良いですね♪お友達のサイトでも採用されていたので、探していたらありました。「blog*citron」様の「コメント表示部をスクロールさせる」このサイ...