吹き出しとビデオ投稿のテスト
この記事にはプロモーションが含まれています
『Manablog Copy』を買ったときについてくる「ナマケモノ吹き出し」のテストです。本記事でレスポンシブ対応にできます。ぜひどうぞ。
怠け者ブロガー「検索で上位表示されないなぁ。なんでだろうなぁ。」
コードはこちら↓
<div class="talk clearfix">
<div class="col-md-3 col-xs-3 img">
<img src="https://manablog.org/wp-content/uploads/2016/11/animal.jpg" alt="" class=" img-circle">
</div>
<div class="col-md-9 col-xs-9 text">
<p><span class="bold">怠け者ブロガー</span>「検索で上位表示されないなぁ。なんでだろうなぁ。」</p>
</div>
</div>なお、Manablog Copyで使用する場合はクラス名を変更しないと
横スクロールの悪夢
がお出ましになります。ですので、3行目img src="https://~の終わりにあるクラス名
img-circleを
img-responsiveに変更するとレスポンシブ対応にできます。
変更後のコード
<div class="talk clearfix">
<div class="col-md-3 col-xs-3 img">
<img src="https://manablog.org/wp-content/uploads/2016/11/animal.jpg" alt="" class=" img-responsive">
</div>
<div class="col-md-9 col-xs-9 text">
<p><span class="bold">怠け者ブロガー</span>「検索で上位表示されないなぁ。なんでだろうなぁ。」</p>
</div>
</div>ちなみに、spanのタグが付いている太字を画像の下の行に入れることで名前を入れることも可能です。
怠け者ブロガー
「検索で上位表示されないなぁ。なんでだろうなぁ。」
こちらに変更すればヨイ
<div class="talk clearfix">
<div class="col-md-3 col-xs-3 img">
<img src="https://manablog.org/wp-content/uploads/2016/11/animal.jpg" alt="" class=" img-responsive">
<span class="bold">怠け者ブロガー</span>
</div>
<div class="col-md-9 col-xs-9 text">
<p>「検索で上位表示されないなぁ。なんでだろうなぁ。」</p>
</div>
</div>コード中のimg src="https://~の部分は「イラストや」さんなどでダウンロードしたフリー素材を自分が運営するWorpressの「メディアを追加」にアップロードしてから、そのファイルのURLをコピペしてください。
※画像を利用するときはサイトの規約に従ってください
img src="https://~の部分は「イラストや」さんなどでダウンロードしたフリー素材を自分が運営するWorpressの
- 1.「投稿」で「新規投稿」か「新規一覧」で吹き出しを追加したい記事
- 2.左上の「メディアを追加」の「ファイルをアップロード」をクリック
- 3.ドラック&ドロップまたはファイルを選択してアップロード
- 4.その画像をクリック
- 5.右側の「添付ファイルの詳細」をスクロール
- 6.URLをコピペ
してください。
■最後に
コードを例示する黒囲み枠はそのまま入力しても
怠け者ブロガー「検索で上位表示されないなぁ。なんでだろうなぁ。」
となりコードが出ません。コードを表示するためには「<」を「<」にするなど、特殊文字に変換する必要があります。とはいえちまちま打つのは面倒なので、ツールを使って変更します。 » HTML特殊文字変換ツール
使い方は
- 1.特殊文字に変換をクリック
- 2.変換するテキストをコピぺする
- 3.左下の変換するをクリックする
- 4.右側に出た変換されたソースコードをコピー
- 5.テキストに貼り付けて、「黒囲み枠」のコードで囲む
とできます。
■出典
かん．“【Manablog Copy】よくある質問をまとめてみた【随時更新】”[コード] ．かんろぐ．2023-3-21，
https://kanlog.org/manablog-copy-qa/，（参照 2026-02-24）．
具体的な仕様例はこちらからどうぞ。
【プロ仕様】ブログのテンプレート【3000字はいける】
読まれる文章には「型」があります。「結論」→「感想or経験」→「結論」の組み合わせです。からの「まとめ形式」と「主張形式」。です。SNSでも同じです。伸び悩んでいる人にどうぞ。
リンクカードの実験【Manablog Copy限定】
『Sharehtmlを、もっときれいにしたメーカー』、「のような」ブログカードです。ただし、Manablog Copy限定。