気ままに ひるねこ

アクセスカウンタ

zoom RSS 私のブログのサイドバーの作り方 

<<   作成日時 : 2010/12/14 20:59   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 2 / トラックバック 0 / コメント 6

のち
*日々の出来事
寒いです〜〜〜〜ぅ 雨が上がったら 陽がさしてちょっとだけ暖かくなっていたのですが やっぱり冬ですね…

今日は 同じブログの友達から サイドバーについて聞かれたので それについて書きたいと思います・・・
私も良く解んないうちに 何となく作ってるので 大きなことは言えません…
それに これはウェブリブログに限られた事?なので 他のブログを使っている方には つまらない事だと思いますが…
前置きはさておいて…私の記事の画面より説明してみたいと思います
(うまくできるかな?)

図A
画像

ここのブログは 上の図のように 3パターンのレイアウトが出来ます
サイドバーを 上部の灰色の所と 右か左のどちらかの2箇所使うのが2カラム
右 左両方を使うのが3カラムといいます
(*ここのブログの画像は見にくいときは 画像をクリックしてください 別窓が開いて大きくなります)
私は 記事画面(このページ)は 右揃えの2カラムを使っています
画像
右の写真のように 上部は フリースペース3 が入ります
右か左の上部になります (図Aの青い部分)
ここは 文字を入れてもレイアウトが崩れにくいので文字が入れられます

クリックサイト・絶滅危惧動物・ジオグラフィックのブログパーツを貼り付けています
ブログパーツは「ブログパーツ」で検索すると出てきますので そこから貰ってきます
*ブログパーツを貰う(借りる)にはみなさんも画像を出したり リンクしたりする時 おなじみのHTMLで書かれたタグが用意してありますので それをコピペします
(ちょっと貼ってみたんですが ここは そういうのを記入しても タグが発動してしまって埋もれてしまうので 残念ながら載せられなかったです
尚 パーツどうしのタグとタグの間は開けておいても 表には影響しないので たびたび張り替える方は 解りやすいように離しておいた方がいいと思います
私は来て下さった方に 一番見てほしい物を ここに貼っています
間に カレンダー ブログ 新着記事 新着コメントが入ります
ここは順番は変えられますが 自動で配置されます
画像
2枚目の写真
ここは ただ フリースペースサイド用 と書かれた場所です
クリスマスが 近いので かたつむりと クリスマスツリーのブログパーツを貼っています
クリスマスツリーのブログパーツは クリックすると光って音楽が流れます
とっても ステキです  こんな凄いパーツが無料なんて… 雪がブログ中に降ってくるのもあるのですが ちょっと重かった…
 以前貼っていたハロウィン アリスのパーツと同じ作者の しゃくれさんのHPより
  • 週間少年 しゃくれ 〜ブログパーツ〜

  • 「アートメーター」は ご存知の通り 絵画のパーツです(プロアマ区別なしに表示されます)
    最初登録した時は1メートルいくらで販売されて ランクが上がってくると それなりの価格になるそうです
    興味のある絵画が表示されていた時は クリックしてみてください
    その画家さんのほかの絵も見ることができます
    画像
    3枚目の写真
    「お気に入り リンク集」は フリースペース2です
    表題のタグは こういうのを使います
    (<O>が<O >のように 記号の間が開いていますが 開けておかないと 表示されないで勝手に仕事をはじめてしまうからです…実際に使うときには寄せてください) 

    注:ここの部分は HTMLの発動しないコメント欄に詳しく追記しました ご参照ください

    <h2 >お気に入り</h2 > ←1列目 中心の文字は好きなのを入れられます
    <ul > ← 2列目には このタグだけを入れます 他には何も書きません

    クリックしたら リンクするようにするタグを作ります 
    実際には<*/li>のように詰めて使ってください(*は消す)
    <li ><a href="http://OOO/">OOの研究所</li >
    <a href="リンク先のアドレス">リンク先の名前です<*/a>
    (*は消してください HTMLは めんどいです 勝手に発動して消えてしまうから…)      
    フリースペース編集例が 各フリースペースの編集ページにありますので そこからコピペして使ったほうが便利です
    リンクしたい物を載せ終わったら</ul*>タグを一段下げた所に1つだけつけます(閉じる印です これが開いていると表示されなかったり レイアウトが崩れます) 
    </ul >
      
    私はPCのメモ帳に これを簡略化したものを作って ブログを書くときにも利用しています
    ただ ここの編集ページは記事確認ページでは 下線が出ますが そのままブログに載せると消えてしまうので(何故?)いちいち リンク先名に下線表示させなくちゃいけないので とってもめんどくさいですね
    (今日 下線入りのを作っちゃいました これで楽々OKになりました…!)
    画像

    ちなみにフリースペース2の中身は こんな具合になっています 見難いと思うので画像をクリックしてもらえば大きくなり 虫眼鏡ボタンを押してもらうと実物大になります

    3カラムは ブログトップに使っていますが 参考までの写真を載せておきます
    画像

    画像

    ご参考までに サイドバー表示項目設定 
    (「ニコッとタウン」に興味が無い方は アバターのチェックは はずしておいたほうが良いです 変な映像が出ますので・・・ 「ニコッとタウン」は楽しいけど 人によっては中毒になるかも…私がそうでした
    画像

    サイドバーレイアウト設定の順番
    画像


    *ニコタでお世話になったRさん 画像の取り込み方教えてくださってありがとうございました
    今日こうやって 応用が出来たので このブログが作れました
    本当に感謝しています


    追記:質問があったので HTMLのタグがそのまま表示される コメント欄に詳しく書き直しました
    そちらもあわせて 読んでいただけると幸いです



    【緊急 お知らせ】  12月17日
    私よりも ず〜っと 解りやすく書かれたサイトさん 見つけてしまいました!!
    ぜひ ぜひ こちらを参照ください!! 
    ウェブリにも凄い人がいらっしゃるんですね〜 もうビックリちゃんです!!

    mairis様の「きまぐれAWA's Life」より


    ブログ(タグ) リンクをはってみよう♪


    OTTAVA(オッターヴァ) OTTAVA(オッターヴァ)ショッピング

    テーマ

    関連テーマ 一覧


    月別リンク

    ブログ気持玉

    クリックして気持ちを伝えよう!
    ログインしてクリックすれば、自分のブログへのリンクが付きます。
    →ログインへ
    気持玉数 : 2
    なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)

    コメント(6件)

    内 容 ニックネーム/日時
    なんか俺のことですんごい手間かけてしまって申し訳ないです(汗)上の記事を参考に一応明日やってみようと思いますが、そもそもタグの<h2>とかって自分で打つんですか?それともウェブリの設定画面とかにパーツがあるんでしょうか?そもそもそこら辺からわかっていない段階です。
    ロック仙人TF
    2010/12/14 21:57
    ロック仙人TFさん おはようございます
    やっぱりド素人が説明するのは難しいですね…
    おまけに記事画面では HTMLタグを貼ると コメント欄と違って 勝手に仕事を始めてくれちゃうので とても難儀しました…

    以下 フリースペース編集画面下の
    「リンク集をつくる」より
    (これをコピーされて使われたほうが良いと思います)

    <h2>マイリンク集</h2>
    <ul>
    <li><a href="http://uranai.at.webry.info/">占い&お楽しみ</a></li>
    </ul>

    私もコンピュータに詳しいわけじゃないのですが
    (素人の独学ですので…)

    <ul>は ここからはじめますよ
    </ul>は これで終わりますよ
    という意味のタグだと思います

    それから これがリンク先を入れるタグですが
    <li><a href="http://uranai.at.webry.info/">占い&お楽しみ</a></li>
    れの
    2010/12/15 07:41
    つづきです(文字制限があって入りきれなかった…)
    中を抜いてしまうと
    <li><a href="*">**</a></li>
    となります

    *にリンクしたい所のアドレスを入れます
    例えば このページなら
    「http://kima-neko.at.webry.info/201012/article_5.html」になりますが マウスの右クリックで簡単にコピーできます

    **の部分には「私のブログのサイドバーの作り方(ウェブリブログ専用)」これもコピペして張ります

    しかし ほとんどの場合「お気に入り リンク集」など作る時は そのブログのトップページとリンクされることをおすすめします

    *中にはリンクを嫌っているユーザーの方もいらっしゃるので HPなどではトップページなどをじっくり読んでください


    <ul>
    <li><a href="http://OO">OOの音楽部屋</a></li>
    <li><a href="http://XX">ジャズの楽しみ</a></li>
    ……
    </ul>

    と言う風に<ul>と</ul>のタグの間には
    いくつでも好きなだけ入れることが出来ます
    (文字制限はあるけれど 最大100,000文字なので 相当入れても大丈夫だと思います)
    れの
    2010/12/15 07:52
    表題になる
    <h2>マイリンク集</h2>も

    <h2>***</h2> 
    の***に好きな文字を入れれば いくつでも作れますので ジャンルを分けたいときには便利だと思います

    私のところだと「お気に入り番組」がそうです
    以上 で分かり易くなりましたでしょうか…?


    それから ZABADAK などの絵が入ってリンクをするようになっているバナーは
    HTMLタグが用意してあるのは簡単なのですが 自分で画像を持ってきて作るのは結構大変です

    興味があられれば「バナーの張り方」で検索してみてください 
    ただし使いやすいものを紹介してある所と使ってみたら何か変になる…と言うところがあります

    先日 石井光太さんのバナーを張ったときが後者でいろいろ いじくらなくちゃならなくて困りました…

    また お解りにならなければ いつでも聞きに来てください 
    これ以上 あまり難しい事は解りませんが…
    れの
    2010/12/15 07:54
    おかげさまで無事「お気に入りリンク集」を貼り付けることに成功しました。本当にれのさんには感謝感謝です!!パソ音痴を自覚していたので、今まで挑戦しなかったというのも有ったのですが・・・。因みにリンク集一番上にれのさんのところを持ってきました。本当にお手数をおかけしました。これからもよろしく!!
    ロック仙人TF
    2010/12/15 13:05
    ロック仙人TFさん こんばんは
    今日 作られると聞いていたので さっき見に行きましたところ ちゃんと出来てたので 安心して帰ってきました
    以外と簡単な事だったと思いますが…

    こんなことで お役に立てたくらいで リンクの1番上とは恥ずかしいです…
    こちらこそ よろしくお願いいたします

    それから ロック仙人TFさんのサイドバーのプロフのアバター表示は「ニコッとタウン」へ行かれる気が無いのでしたら 非表示にされた方がいいと思います
    (何なら 一緒に遊びますか? 
    いやいや止めといた方がいいですよ…
    私は ハマりすぎてヤバかったので 今年いっぱいのつもりで自粛しています…
    毎日 ずっといたのを止めるのは結構辛いですよ
    れの
    2010/12/15 21:54

    コメントする help

    ニックネーム
    URL(任意)
    本 文
       ↑クリック募金サイトにとびます。 企業名が並んでいますので、そこをクリックしてください。あなたの1クリックで企業がNPOに1円募金します。ご協力お願いします。
    私のブログのサイドバーの作り方  気ままに ひるねこ/BIGLOBEウェブリブログ
    文字サイズ:       閉じる