リンクの貼り方
リクエスト記事ですのでわかっている方はスルー下さい
後で加工とかしますので標準エディタを使います
リンクの仕方はわかっていると思いますが文字を選択してから [URL] ボタン ↓
2008/12 ・・・画像を貼る、リンクボタンが変更されています
↑ 新しいエディタのボタン
ちなみにリンク先のURLをコピーしていない場合は・・・・・・
画面のどれでもかまいませんのでリンクの上で右クリック・・・・
新しいウィンドウで開く
※同一画面で開くようになっているリンクをクリックしてしまうと記事が消えてしまいます
そのようなリンクでも右クリック→新しい・・・ でＯＫ
↓新しいウィンドウが開いたら・・・・
↓検索等を使ってリンクしようとしているページを表示してから アドレスをコピーします
↓再び文字を選択して [URL]
↓リンクの追加画面が立ち上がりますので URL に貼り付けます
新しいウィンドウで開く・同じウィンドウで開くを選択して リンク
では、画像 バナーからリンクする方法
↓こんな画像、バナーを用意して自分の画像フォルダーにアップします
※リンク先で直リンするように指示が無い限りはダウンロードしてから使ってください
↓記事中に画像、バナーを貼り付けます
↓リンクを貼る画像をクリックしてから [URL] ボタン
これで画像からリンクが貼れました・・・・・
・・・・・記事からは貼れるんです！！フリースペースとかに使いたいんです！！！
↑な、場合は HTMLタグを表示
↑リンク部分のHTMLをコピーしちゃいます・・・・
↓それをフリースペースに貼り付けます
※文字からのリンクはフリースペースでも可能ですが画像を使う場合はこれの方が楽？
↑プレビュを見ると間隔があきすぎなので改行タグ<br />を削除してみます
↑改行がなくなり間隔が詰まりました・・・・・↓
↑左に寄っていますので中央揃えにしてみます・・・
中央揃えのタグ <center> を最初に 最後に </center> で閉じるのを忘れないで下さい
↑中央に揃いました・・・・・・
この場合はフリースペースに貼り付けるタグがほしかっただけなので記事を保存する必要はありません
で、・・・・・
たとえば・・・・・・
リンクタグとかを記事に書きたい場合がありますよね
そのまま貼り付けると
↑アメブロのおせっかいエディタが勝手にリンクを貼ってしまいます
気にならない方は・・・・このままでいいんですが
気になる方は・・・・・
↑HTMLタグを表示してから <a>タグを削除します
↑該当部分の<a>タグ 2ヶ所 赤マーカーの部分を削除します
↑削除すると・・・・・・ ↓へんなリンクがなくなっています
この方法はココのページのように記事に貼り付けた画像をクリックできないようにする場合も使います
※クリックできてもかまいませんが、オリジナルで貼り付けていますからクリックしても同じサイズの画像が立ち上がります・・・・意味ないのでクリックできないように<a>タグを削除します
コメント欄をなんとかしちゃおう 応用2
ココのサイトのコメント欄の説明はまだしていませんが・・・
ココの場合は２カラムでスペースに余裕がないと出来ません
ので・・・・
３カラムでも可能なこんなのはいかがでしょう？
なんで・・・・
もっと早く・・・・・
教えなかったんだ！！！！ ＼(*｀∧´)／ ってみなさまの声が聞こえてきそうですが・・・・
これが種明かしです・・・・
ＣＳＳは基本は変わりません
後ろの画像に合わせてコメントをずらしているだけです
画像の上にコメントがかぶってもよければＣＳＳはそのまま使えます
ようは・・・・
上の画像の下に枠の中に表示される画像も組み込んでしまいます
そして大事なのは中の画像を透過させるということです
透過させないと中の画像で枠内に表示させたい画像が隠れてしまいます
ですので枠内を色で埋める場合は使用できません
ココのブログのコメント欄もノートのような画像を使っていますのでこのようには出来ません
その場合は別の方法で・・・・ 次回に説明します （って、もったいつけるほどのことではありませんが）
※３カラムのスキン main（３カラムの真ん中）の幅が 400px の場合の例です ↑
ゲストさまのコメントを左に寄せる場合は
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:0 25px 10px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
こうなっているのを↓右側のスキマを空けて右側まで文章が来ないようにします
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:0 120px 10px 25px;/*コメント分の上と右と下と左の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
復 習 ： ********************************************
padding:が１個の場合（上下左右）
padding:10px; 上下左右全部10pxあける
padding:が２個の場合（上下・左右）
padding:10px 0; 上下に10pxあける、左右は0
padding:が３個の場合（上・左右・下）
padding:10px 0 5px; 上に10pxあける、左右は0 下は5pxあける
padding:が４個の場合（上・右・下・左）
padding:0 100px 10px 30px; 上は0 右は100px 下は10px 左は30pxあける
0 の場合は単位pxをつけなくてもOKです
******************************************************
管理人コメントを右に寄せる
#comment_module .admin_comment .comment_body{
margin: 0;
padding:0 25px 10px;/*コメント分の上と左右と下の余裕 ゲストと同じに*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
こうなっているのを↓左側のスキマを空けて左側まで文章が来ないようにします
#comment_module .admin_comment .comment_body{
margin: 0;
padding:0 25px 10px 100px;/*コメント分の上と右と下と左の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
管理人コメントを右寄せにするためには 応用1 と同様に
管理人のコメントタイトルの位置もずらす必要があります
#comment_module .admin_comment .label{/*コメントタイトル*/
color:#1919b3;/*←管理人コメントタイトル文字色変更の場合*/
}
これに位置を変更するためにpaddingを指定します
#comment_module .admin_comment .label{/*コメントタイトル*/
color:#1919b3;/*←管理人コメントタイトル文字色変更の場合*/
padding:15px 0 10px 100px;
}
※枠内の画像を大きくするとコメントが短い場合、下にはみ出てしまいます
コメントが１行でも表示できるよう画像サイズを小さくするか
上のＣＳＳのピンク色の部分の上、下の余裕を大きくして画像が表示できるようにします
※中の画像を透過しないと下の画像が見えなくなります
この方法のデメリット・・・・
・ 画像を透過させる必要があるので背景色を設定できない
・ 枠内の画像が上部に限定されてしまう
ＣＳＳ コメント欄をなんとかしちゃおう 15のつづき～
ＣＳＳ コメント欄をなんとかしちゃおう 15のつづき・・・じゃないけど
四角くなっただけだから・・・・・
下の画像（上・中・下に分かれています）をダウンロードして自分の画像フォルダーにアップしてから
青字のＣＳＳをＣＳＳの編集で一番最後に貼り付けてください
/* ゲストコメント */
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:15px;/*コメントとコメントの間*/
background: url(画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#1919b3;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:0 30px 10px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 5px 0 20px;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:25px 0 10px 40px;
color:#1919b3;/*←コメントタイトル文字色変更の場合*/
}
.comment_footer span.comment_author{/*名前*/
padding-left:40px;
}
.comment_footer span.comment_date{/*日付*/
padding-left:20px;
}
#comment_module .comment_footer{/*フッタ上の点線を消す*/
border-top:none;
}
.comment_gotoform{/*[コメント記入欄を表示]を消す*/
display:none;
}
#comment_module .comment_author {/* 名前の右にアイコン */
padding-right : 20px;
background-image : url(画像のURL); /* ゲストのアイコン */
background-position : right center ;
background-repeat : no-repeat ;
}
/* 管理人コメント*/
#comment_module .admin_comment{
margin: 0;
padding-bottom:15px;/*コメントとコメントの間・・ゲストと同じに*/
background: url(画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#1919b3;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{
margin: 0;
padding:0 30px 10px;/*コメント分の上と左右と下の余裕 ゲストと同じに*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .admin_comment .comment_footer{
margin:0;
padding: 5px 0 20px;
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
.admin_comment .comment_footer span.comment_date{
padding-left:0;
}
#comment_module .admin_comment .label{/*コメントタイトル*/
color:#1919b3;/*←管理人コメントタイトル文字色変更の場合*/
}
#comment_module .admin_comment .comment_author {
padding-left : 130px;
background-image : url(画像のURL);/* 管理人のアイコン */
background-position : 110px center ;
background-repeat : no-repeat ;
}
※管理人のコメントを分けるには「自分のコメントを ”もっと” わかりやすく 」が必要です
※ＣＳＳの編集が出来ないスキンの方は「CSSの編集が出来ないスキンでCSSを使う
」を参考に
※吹き出しタイプは「オリジナルスキンCSSの編集 コメント欄 」を参考にして下さい
画像はダウンロード後、自分のブログの画像フォルダーにアップしてから使ってください
画像の加工は自由にどうぞ
注意・・・画像のＵＲＬを入れるときサムネイル画像を指定しないようご注意ください
（サムネイル画像は _s が付きます _Sを削除すればオリジナル画像になります
画像のお持ち帰りかた、画像のURLを知るには 画像のＵＲＬって・・・･･･