スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

難関!コメント欄、枠を画像にする!画像を設置!★アホでもカスタム!

五感のどこが優れてる?
ブログネタ:五感のどこが優れてる?


 みんなは五感のどこが優れてまスカ!?

五感っていうのは、触覚、視覚、聴覚、嗅覚、味覚のことだよビックリマーク

ほぅほう。。どれかな。どれかな。視覚だけは優れている。

カンニングするために特化されています。

ただしニュータイプ的な第6感が弱いのですぐ見つかります。

そんな私は罰として前期の単位を全て落とされ掲示板に晒されました。

ヾ(;゚曲゚)ノキィィィ この恨み、晴らさでおくべきか



難関!コメント欄、枠を画像にする!



これはきつかった。。何時間かかったんや。。

もしあなたが私レベルのアホなら3時間かかります!

この作った画像を設置するであります!

ハルの量産型テポドン夢日記
ハルの量産型テポドン夢日記
ハルの量産型テポドン夢日記

※アメブロ向上様の丸コピペです。


こちらがコメントに背景画像をつけるCSSです


各サイズがどの部分なのかは下の画像と比べて


自分で画像を作った際の参考にして下さい






/*ゲストコメント背景 */

#comment_module .each_comment{/*コメントタイトル部分*/

margin: 0;

padding-bottom:30px;/*コメントとコメントの間*/ ←注1

background: url(上画像のURL);/*上画像のURL*/

background-repeat : no-repeat;

background-position: center top;

color:#333333;/*←ゲストコメント文字色変更の場合*/

}

#comment_module .comment_body{/*コメント文章部分*/

margin: 0;

padding:5px 30px 10px;/*コメント分の上と左右と下の余裕*/ ← 1、

background: url(中画像のURL);/*中画像のURL*/

background-repeat : repeat-y;

background-position: center top;

}

#comment_module .comment_footer{/*コメントフッター部分*/

margin:0;

padding: 5px 0 15px;      ← 4、

background: url(下画像のURL);/*下画像のURL*/

background-repeat : no-repeat;

background-position: center bottom;

}

#comment_module .label{/* コメントタイトル */

font-weight: bold;

font-size:12px;

padding:15px 0 10px 50px;   ← A、

}

.comment_footer span.comment_author{/*名前*/

padding-left:40px;        ← D

}

.comment_footer span.comment_date{/*日付*/

padding-left:20px;        ← E


}

#comment_module .comment_footer{/*フッター上の点線を消す*/

border-top:none;

}

.comment_gotoform{/*[コメント記入欄を表示]を消す*/

display:none;

}




※後日、画像の素材と一緒にその画像に合ったCSSも紹介しますので今回は参考程度で・・・・





わかりやすくするため反転させてあります・・・・






注1 コメントとコメントの間隔






注2 のコメントの文章と文章のスキマは・・・・・・


    .entry .contents{

    line-height:1.5;

    }


    と、CSSの最初の方で行間設定がされています


    line-height: は行間の値(フォントサイズとスキマの合計)のことで


 line-height:1.5;  という事は スキマは 0.5


    このコメント部分の場合、フォントサイズが 12px ですので スキマは 6px になります




ついでに

名前の前後に ワンポイントの画像をつける!




↓これが設定をしていない状態です






/* 名前の右にアイコン */

#comment_module .comment_author a {

padding-right : 20px;

background-image : url(画像のURL); /* ゲストのアイコン */

background-position : right center ;

background-repeat : no-repeat ;

}


padding-right : 20px; で、名前の右に20pxのスキマを作ります(サンプル画像の横幅16px)


background-position : right center ; 右端に背景画像(アイコン)を配置することで


そのスキマにアイコンが表示されます


※画像の横幅以上のサイズをあけてください・・・









/* 名前の左にアイコン */


#comment_module .comment_author a {

padding-left : 20px;

background-image : url(画像のURL); /* ゲストのアイコン */


background-position : left center ;

background-repeat : no-repeat ;

}



padding-left : 20px; で、名前の左に20pxのスキマを作ります


background-position : left center ; 左端に背景画像(アイコン)を配置することで


そのスキマにアイコンが表示されます










今度は全体を右に移動します




#comment_module .admin_comment .comment_author a {/* 管理人のアイコン */

padding-left : 160px;

background-image : url(画像のURL) ; /* アイコン画像のURL */

background-position : 140px center ;

background-repeat : no-repeat ;

}




padding-left : 160px; で、名前の位置を160px右に移動します※見ながら調整してください


background-position : 140px center ; で左から140pxの位置に背景画像を配置します


※160px-140px が画像の横幅以上になるようにしてください




※全体を右に移動させる方法は名前の文字数が固定されている管理人のコメントでしか使えません


 名前の長い方がコメントされますと表示が2行になり、中と下の間に隙間が出来てしまいます


  ・・・・ text-align:right; を使えば ゲストさもでも可能ではあるのですが




※アイコン画像と名前のずれが気になる場合は center ではなく pxで上からの位置を指定して下さい





うぁああコレはキツカッタ。。何とか形になりました。

私は名前の右にマッピーのピンク猫を付けましたよ

ハルの量産型テポドン夢日記
ピンクねこ音譜

誰かコメントしてみておくれ?

(・ε・)/ 人気ブログランキング


スポンサーサイト

comment

管理者にだけ表示を許可する

07 | 2017/08 | 09
Su Mo Tu We Th Fr Sa
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
プロフィール

ハル

Author:ハル
プリプリの保育士です。
アメブロで「量産型テポドン」という保育園の可愛い子ども達と心暖まる健全な日記を書いてますが、もうすぐ恐怖のメンテナンスがあり、アカウントごと削除されそうな予感がしてきますたので疎開してきますた。
ギブミーチョコレート
( ☣ฺ_ゝ☣ฺ)キラーン♡

カテゴリ
最新記事
最新コメント
最新トラックバック
月別アーカイブ
カウンター
カウンター
見てる
見てる
現在の閲覧者数:
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。