2023/03/12 (更新日: 2024/07/03)

吹き出しとビデオ投稿のテスト

その他テンプレート

この記事にはプロモーションが含まれています

怠け者ブロガー「検索で上位表示されないなぁ。なんでだろうなぁ。」

コードはこちらです。

<div class="talk clearfix">
<div class="col-md-3 col-xs-3 img">
         <img src="" alt="" class=" img-circle">
</div>
<div class="col-md-9 col-xs-9 text">
        <p><span class="bold">怠け者ブロガー</span>「検索で上位表示されないなぁ。なんでだろうなぁ。」</p>
</div>
</div>

コード中のimg src="https://~の部分は「イラストや」さんなどでダウンロードしたフリー素材を自分が運営するWorpressの「メディアを追加」にアップロードしてから、そのファイルのURLをコピペしてください。

※利用するときはサイトの規約に従ってください

ここから、

img srcの行にあるalt""の次のクラス名である、

class=" img-circle"

を、

class=" img-responsive"

に書き換えるとレスポンシブ対応ができるようになります(manablog copyの場合)。

ちなみに、コードの位置を入れ替えることによって、太文字の位置を変えることが可能です。

怠け者ブロガー「検索で上位表示されないなぁ。なんでだろうなぁ。」

この場合のコードはこうなります。

<div class="talk clearfix">
<div class="col-md-3 col-xs-3 img">
         <img src="" alt="" class=" img-circle">
</div>
<div class="col-md-9 col-xs-9 text">
        <p>怠け者ブロガー<span class="bold">「検索で上位表示されないなぁ。なんでだろうなぁ。」</span></p>
</div>
</div>

太字にしたい部分を

<span class="bold">太字の部分</span>

みたくするとできます。

コード変更差分

<p><span class="bold">怠け者ブロガー</span>「検索で上位表示されないなぁ。なんでだろうなぁ。」</p>

また、

怠け者ブロガー

「検索で上位表示されないなぁ。なんでだろうなぁ。」

とすることも可能です。コードはこちら。

<div class="talk clearfix">
<div class="col-md-3 col-xs-3 img">
         <img src="" alt="" class=" img-circle">
</div>
<span class="bold">怠け者ブロガー</span>
<div class="col-md-9 col-xs-9 text">
        <p>「検索で上位表示されないなぁ。なんでだろうなぁ。」</p>
</div>
</div>

絵がある入れ物、div要素の下にテキストを配置するイメージですね。

img src="https://~の部分は「イラストや」さんなどでダウンロードしたフリー素材を自分が運営するWorpressの

「投稿」で「新規投稿」か「新規一覧」で吹き出しを追加したい記事→
左上の「メディアを追加」の「ファイルをアップロード」をクリック→
ドラック&ドロップまたはファイルを選択してアップロード→
その画像をクリック→
右側の「添付ファイルの詳細」をスクロール→
URLをコピペ

してください。

※利用するときはサイトの規約に従ってください

» イラストや

参考サイト

» 【必需品】吹き出しの編集方法を解説！【Manablog Copy】

具体的な仕様例はこちらからどうぞ。

テンプレート