• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+
イイね!
2011年11月15日

ブログに追加した画像の横にテキストを複数行記述する方法。

ブログに追加した画像の横にテキストを複数行記述する方法。 お友達からご質問を頂いたので、
ちょこっとだけ書いてみたいと思います。
タイトルの通り、ブログフォームの
「タイトル画像」とは別に追加した画像の横に
テキストを複数行記述する方法です。
←の画像は先日のガンダムUCep4記事
左に画像を置いてその右に説明文を
複数行書くというスタイルです。


通常は追加した画像の横には1行しかテキストを書くことができず、
はみ出すと画像の下にテキストの続きが来てしまいます。
それではカッコ悪いですよね(^^;

ブログフォームで投稿した「タイトル画像」の横には
最初からテキストを複数行記述する事ができますが、
それと同じ事を、追加した画像でもやりたい、という事ですね。

具体的には、追加した画像のタグの中に「align="left"」という一文を追加します。
↑の画像の通りですね。
このタグを入れると、その画像の横に書いたテキストは、
画像の隣の上の方から記述されます。
タグを入れないと画像の隣の下の方に1行だけ記述されます。

この方法は、ブログフォームから画像を追加した場合にも、
My掲示板等から画像を追加した場合でも、使えます。
「align="left"」タグは必ずイメージタグに追加します。

基本的にPC閲覧を前提とする場合、テキストは9行まで書けます。
それ以上は画像の下へはみ出してしまいます。
PC(設定による)以外やスマホ等、画面表示のサイズ等によって
表示できる行数は変わります。


注意点として、テキストを書いたら
その後に必ず改行タグ「<br clear="left">」を
入れる必要があります。
※<>は半角で書きます。「<br>」タグではダメです。
このタグを入れないと、
←の画像のように、テキストの下に
次の部分の画像やテキスト等が来てしまい、
それ以降の表示スタイルが狂ってしまいます。
ちなみに「br clear="left"」タグはあくまで
改行ダグなので、これを入れるだけで
1回改行した事になります。
このタグのすぐ後に改行ボタンを押すと
2回改行されてしまいますので、
表示スタイルに気を使う方は注意が必要です。



という感じです。
私はだいぶ昔に少しだけhtmlタグを弄ってた経験があって、
みんカラでブログを書く際も少しタグで表示スタイルに拘ってますが、
なにぶん古くて浅い知識なので、
もしかしたらもっと賢い方法があるかもしれません。
あっても私はこの方法で慣れてるので多分変えないと思います(笑
詳しい方、本職の方、見て笑わないで下さいね(^^;

ちなみにブログに画像を複数投稿する方法は
こちらの方法を主に使っています。
今はブログフォームでもサポートされてますが、
アカウント単位で容量が決められているので、
私のように超大量に画像を貼る場合は
すぐに一杯になってしまうでしょうね。
ブログ一覧 | みんカラの事とか。 | 日記
Posted at 2011/11/15 01:16:09

イイね!0件



タグ

今、あなたにおすすめ

ブログ人気記事

末廣ラーメン本舗 カップ麺
RS_梅千代さん

またまた、いろいろありまして
アンバーシャダイさん

昨日もまたOFF会でした
クロちゃん@ZC33Sさん

本日は……
takeshi.oさん

5/28 水曜日の朝‼️
ミッキーたんさん

M3は効くらしい
きリぎリすさん

この記事へのコメント

2011年11月15日 1:50
なるほど、有難うございます。
ワタシは画像の多さとか面倒なので「リッチ編集」でやっつけてしまいます。
htmlはページスタイルを弄る時にたくさんの片にご迷惑おかけしました。。
やはり「慣れ」なんですよね^^;

さて、やってみるか♪
コメントへの返答
2011年11月15日 19:40
リッチ編集は実は少しでもタグがみんカラウェブの仕様に即していないと、勝手に書き換えてしまう機能があるので、私は絶対に使いません。

htmlタグをある程度知っていると、結構見た目を整えられるので便利ですよね。

私はPCで閲覧する事前提で、見やすさとバランスにこだわってる部分があります。
2011年11月15日 6:51
なるほど…いろんな技があるんですねぇ。
My掲示板からの画像リンクも
幅の設定をしてやるんですね♪

小画像と大画像を作って、小画像を
貼りつけたら、大画像へのリンクを
付けるんだと思ってました…(^_^;)
コメントへの返答
2011年11月15日 19:44
My掲示板からに限らず、画像等を貼り付ける際はサイズ指定をしないと大変な事になります。
指定する場合は幅のみを指定するのが一番楽っていうかそれが基本ですね。

サムネイルを用意する場合、準備する画像が2つになったり、別々の画像のURLを貼ったりで大変なんですよ。
画像そのものをサイズ指定で小さくしておけば、拡大時の読み込みを省略できます。
反面大量に貼り付けると、そのページを読み込む際重くて大変ですが、現代は光等高速ネット接続やスマホが基本ですので、もう全然気にしていません。
2011年11月16日 20:05
なるへそ。
僕も仕事でちょっとだけHTMLタグを使うので、
参考にします。
まあ、わかったつもりでなかなか実践できないのが罠なんですが。
コメントへの返答
2011年11月16日 22:11
おや、htmlを使うようなお仕事されてるんですね~。

便利そうなものでも、普段使わなそうなものだとなかなか使う機会無いですよね。

プロフィール

「ガンダムジークアクス、サイコガンダムのMA形態はサイコロガンダム!?
そしてまさかのハンブラビも登場!?」
何シテル?   05/15 03:20
お仕事はトヨタ、クルマはマツダ。 美しいものとかわいいものに目が無い。 松屋ガチ勢/かつや者。 MAZDA3で道の駅スタンプラリーを走っています♪ ...
みんカラ新規会員登録

ユーザー内検索

<< 2025/5 >>

リンク・クリップ

MAZDA3で駆け抜けた道の駅スタンプラリー旅日記。 
カテゴリ:道の駅スタンプラリー
2011/07/29 23:50:42
 
中部道の駅スタンプラリー完全走破認定証♪ 
カテゴリ:道の駅スタンプラリー
2011/07/29 23:49:15
 
近畿道の駅スタンプラリー完全走破認定証♪ 
カテゴリ:道の駅スタンプラリー
2011/07/29 22:57:52
 

愛車一覧

マツダ MAZDA3 ファストバックハイブリッド ろあの~く魁 - KAI - (マツダ MAZDA3 ファストバックハイブリッド)
初めてのハイブリッド車。 2022年04月18日契約、2022年06月30日生産、 20 ...
マツダ デミオ ろあの~く・デミオDJ改弐♪ (マツダ デミオ)
初めての発表前予約購入車。 2017年10月08日契約、2017年12月02日生産、 2 ...
マツダ デミオ ろあの〜く・デミオDJ♪ (マツダ デミオ)
初めてのディーゼル車。 2014年11月16日契約、2014年12月25日生産、 201 ...
マツダ デミオ ろあの~く・デミオDE♪ (マツダ デミオ)
初めての新車。 2009年1月31日契約、2009年2月5日生産、 2009年2月13日 ...
ヘルプ利用規約サイトマップ

あなたの愛車、今いくら?

複数社の査定額を比較して愛車の最高額を調べよう!

あなたの愛車、今いくら?
メーカー
モデル
年式
走行距離(km)
© LY Corporation