res さやか様

response

message

parody01は掲示板にも使用できるか

response

はじめまして、お返事遅くなりまして申し訳ありません。メールありがとうございます。

掲示板でもHEAD内、上部下部レイアウトをそれぞれコピペし、一覧部分に吹き出しのコピー用レイアウトの、名前を#name#、文章を#text#などの独自タグと置き換え使用可能です。

ただ、あくまで見せかけのレイアウトなので掲示板で使用した際自動で左寄せ右寄せに振り分け等は不可能です。

また、掲示板機能だと投稿画像URLの独自タグがない為、アイコン部分は素材機能に投稿した画像固定になるかと思います。

もしアイコン部分に投稿された画像を設定したい場合は変更点を以下にまとめましたのでよろしければ参考にどうぞ。

アイコンを投稿画像に差し替える方法

HEAD内

/* ■以下変更非推奨■ */-</style>間を以下と置き換え

CSS


      
        body{
         margin: 0 ;
        }
        
        /* pc余白指定 */
        
#layout{
         width: 500px ;
         margin: 10px auto ;
        }
        </pc_only>
        
        /* スマートフォン余白指定 */<smartphone>
        #layout{
         margin: 10px ;
        }
        </smartphone>
        
        /* ガラパゴス携帯余白指定 */<nopc>
        #layout{
         margin: 5px 0 ;
        }
        </nopc>
        
        #layout{
         font-size: x-small ;
         line-height: 130% ;
         text-align: center ;
        }
        
        
        #left,#right{
         position: relative ;
         margin-top: 10px ;
        }
        
        #left{
         text-align: left ;
        }
        
        #right{
         text-align: right ;
        }
        
        
        /* アイコン設定 */
        .icon{
         display: inline-block ;
        /*幅*/
         width: 40px ;
        /*高さ*/
         height: 40px ;
         -webkit-background-size: 40px 40px ;
        }
        
        span.icon img{
        /*幅*/
         width: 40px ;
        /*高さ*/
         height: 40px ;
        }
        
        
        .name{
         font-weight: bold ;
         margin: 0 5px 5px ;
        }
        
        .text{
         position: relative ;
         height: auto ;
         min-height: 1.3em ;
         padding: 1em ;
         text-align: left ;
        }
        
        
        .date{
         display: inline-block ;
         background-color: rgba(0,0,0,0.2) ;
         width : auto ;
         margin: 15px auto 5px ;
         padding: 5px 10px ;
         color: #ffffff ;
         border-radius: 10px ;
        }
        
        <nopc>
        #left .text{
         margin-right: 40px ;
        }
        
        #right .text{
         margin-left: 40px ;
        }
        </nopc>
        
        <pc>
        #left span.icon{
         float: left ;
        }
        
        #right span.icon{
         float: right ;
        }
        
        
        .text{
         display: inline-block ;
         max-width: 65% ;
         border-radius: 10px ;
          -webkit-border-radius: 10px ;
          -moz-border-radius: 10px ;
        }
        
        .text:after{
         content: '';
         position: absolute ;
         height: 4px ;
         width: 20px ;
          -webkit-border-bottom-left-radius: 50px ;
          -webkit-border-bottom-right-radius: 50px ;
          -moz-border-radius-bottomleft: 50px ;
          -moz-border-radius-bottomright: 50px ;
         z-index: -1 ;
         top: 0 ;
        }
        
        .text:before{
         content: '' ;
         position: absolute ;
         height: 14px ;
         width: 20px ;
          -webkit-border-bottom-left-radius: 15px ;
          -webkit-border-bottom-right-radius: 15px ;
          -moz-border-radius-bottomleft: 15px ;
          -moz-border-radius-bottomright: 15px ;
         z-index: -1 ;
         top: 0 ;
        }
        
        #left .text{
         left: 10px ;
         background-position: -4px 0 ;
        }
        
        #left .text:after{
        left: -4px ;
        }
        
        #left .text:before{
         left: -4px ;
         background-position: 0 0 ;
        }
        
        #right .text{
         right:10px ;
        
         background-position: -webkit-calc(100% + 4px) 0% ;
         background-position: -moz-calc(100% + 4px) 0% ;
         background-position: calc(100% + 4px) 0% ;
        }
        
        #right .text:after{
         right: -4px ;
        }
        
        #right .text:before{
         right: -4px ;
         background-position: 100% 0 ;
        }
        
        </pc>

レイアウト内

下記赤字部分を<span class="icon">#img#</span>と置き換え

HTML


        
          <div id="left"><img src="【アイコン用画像URL】" class="icon" /><span class="name">【名前】</span><br /><div class="text">【文章】</div><br clear="all" /></div>

(例は左寄せ吹き出しですが、右寄せでも赤字部分と同様の部分があります。そこも置き換えて下さい)