ブロマガ基本編集テクニック・画像編
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

ブロマガ基本編集テクニック・画像編

2013-02-12 05:29
  • 8
  • 31
この記事はブロマガの編集の仕方について書いたものです
「見たまま編集」「HTML編集」の双方のやり方で書いています。

背景画像を設定する

背景画像を設定するには、出来る限り画面一杯に画像を表示させるか、一部に表示されても違和感がないようにすると綺麗に見えます。

画面一杯に一枚絵を表示させる場合

画面一杯に画像を表示する場合は、ブロマガの背景画像の上限が横1920 × 縦5000なので、横1920 × 縦1080以上を基準に選ぶと良いです。大きめの画像をフリーで配布しているサイトをリンクしておきます。

「繰り返しなし」「追従する」にします。追従しないにする場合は記事が縦に長くスクロールした時に背景画像の表示が終わっても違和感がないケースです。よく分からない場合は追従するが無難です。表示位置は画像によって適度な位置を設定します。

背景色は画像を表示させていると特に見えませんが、背景画像に近い色やイメージに沿う色を設定すると良いです。

小さい画像を繰り返し表示させる場合


上記のようなチェック柄を繰り返しに設定して画面を覆い尽くすように設定します。定番の使い方で小さな画像で可能です。位置や追従は特に気にしなくても平気です。チェック柄は以下のサイトからお借りしました。

画像のサイズを変更する

アップロードしたままのサイズだと記事内に収まらない場合があります。その場合には適度なサイズに調節する必要があります。
見たまま編集
  • 画像のサイズを変更する
    1. 右のアイコンをクリックしてアップロードした画像を選ぶ。
    2. 画像をクリックしてバウンディングボックスを表示させる。
    3. 大・中・小から好きなサイズを選ぶ。
    4. またはバウンディングボックス上で矢印マークにして自由に調整する。
HTML編集

HTML編集の場合は画像を表示させるimg タグの中に数値を指定して調節します。


ソース
<img src="#" width="250px" height="170px">
ソース
<img style="width:250px;height:170px;" src="#">

width が横幅、height が高さになります。上記のどちらの書き方でも平気です。

画像を横に並べる

画像は横に並べることができます。見たまま編集、HTML編集どちらでも可能です。

見たまま編集
  • 画像を横に並べる
    1. 画像を2つ以上画面に配置する。
    2. 1つ目の画像をクリックして、回り込みのメニューを表示させる。
    3. 回り込みの「左」か「右」をクリックする。
    • 上記の場合、記事の横幅内に2つの画像の横幅が収まらない場合は、回り込みの左や右を指定しても画像が横には並びません。横に並ばせるためには、記事の横幅内に画像サイズが収まるように調整します。
HTML編集

応用の内容になります。

img タグに float の left や rigth を指定して画像を回りこませます。記事の横幅内のサイズに収める必要があります。

ソース
<img style="float:left;" src="#"><img style="float:left;" src="#">

また回りこませた後に、その後のコンテンツは回り込みをもうしないという指定をする必要があります。floatした要素の親要素に overflow の hidden の設定。または、その後コンテンツで clearプロパティに both の設定をしたりします。難しく感じる場合は見たまま編集で並べるのをお勧めします。

ソース
<div style="overflow:hidden;"><img style="float:left;" src="#"><img style="float:left;" src="#"></div>
ソース
<img style="float:left;" src="#"><img style="float:left;" src="#">

<div style="clear:both;">後のコンテンツ</div>

画像に枠線をつける

見たまま編集
※見たまま編集では出来ません(2013/02/12調べ)。
HTML編集
ソース
<img style="border:1px solid #333333;" src="#">

青字の1pxの部分で線の太さを指定します。solid と書かれた緑字の部分で枠線の種類を指定できます。水色の字の部分で枠線の色を指定します。


solid

double

dotted

dashed

groove

ridge

inset

outset

リンクの色を変える

おまけでリンクについてちょっとだけ書きます。

ブロマガのリンクはデフォルトでは普通の文字に下線が引かれるだけなので、普通の文字なのかリンクなのかはっきりと分かりにくい表示になっています。

これをはっきりと区別させると、閲覧者には分かりやすく見やすい記事になります。

見たまま編集
  • リンクを作成する
    1. リンクにしたい文字列を書きます。
    2. その文字列全体を選択状態にする。
    3. 上部のツールの鎖のアイコンをクリックする。
    4. リンク先となるURLを記入します。
  • リンクの色を変える

    1. リンクした文字列全体を選択する。
    2. 上部のツールのAのアイコンで好きな色を選ぶ。
    3. Uのアイコンをクリックすると下線の色も変わります。
HTML編集

ソースの中で赤字になっている部分を付け足すと色が変化します。

デフォルト状態のリンク
ソース
<a href="#">デフォルト状態のリンク</a>
青色に変えたリンク
ソース
<a style="color:#4169e1;" href="#">青色に変えたリンク</a>
赤色に変えたリンク
ソース
<a style="color:#ff0000;" href="#">赤色に変えたリンク</a>
緑色に変えたリンク
ソース
<a style="color:#008000;" href="#">緑色に変えたリンク</a>
広告
×
更新お疲れさまです!
いつもテンプレ大事に使わせていただいております。
本当に助かってます(*゚▽゚*)
58ヶ月前
×
>>1 あやりるさん

こちらにもコメントありがとうございます♪
いつも使って下さって感謝ですm(_ _)m
また時間が合えば放送に遊びに行きます^^
58ヶ月前
×
ニコニコ大百科の作り方とかもブロマガで配信していただくとありがたいです
58ヶ月前
×
>>3 三河屋さん

大百科ですか~。作成のプロセスはニコニコ大百科の方で
既に記事が出来上がってるので、それで良いかな~と
思ったりしますがどうでしょうか。特に出る幕はないかと思いましてw
58ヶ月前
×
懐かしいなぁ・・HTML系は辞書に今でも登録してるなぁ。久しぶりに弄くって見たくなるじゃないか。
48ヶ月前
×
>>5 スラリンさん

見たまま編集でブロマガいじる人は多いとは思いますが、
HTMLで編集する方が思い通りにできて楽しいですね。
色々とやってみるのも良いかと思いますよ。
48ヶ月前
×
はじめまして。
いつもテンプレお世話になっております。
わたしも 画像(イラストを TOPページのお二人のように)取り込みたいのですが
全くうまくいきません。
チルノちゃんが いつでも使えるようになっただけでも うれしいです。
今後とも どうぞよろしくおねがいします。
http://com.nicovideo.jp/community/co1926213
43ヶ月前
×
>>7 SHOUKOさん

はじめまして。
コメントありがとうございます。
コミュニティの掲示板と合わせて返信します。

画像の取り込みがうまくいかない所を詳しく
教えていただければ何かアドバイスできると思います。
作業されているのが、コミュトップの事か、ブロマガの事か
分からなかったのでその辺教えて下さればと思います。
43ヶ月前
コメントを書く
コメントをするには、
ログインして下さい。