記事の編集方法 - MT-t サポート

但し、最初に記事の文字入力と画像のアップロードを終えて下さい（※理由はこちら）。入力が終わりましたら、ブログ記事の編集画面で、本文の入力フォーマットを「改行を変換」から「リッチテキスト」に変更します。

メッセージが表示されますので「OK」をクリック。

本文がブラウザで表示されるイメージで表示されます。HTMLタグで入力されていた画像挿入部分などは、実際のブラウザ表示と同じように見えるようになります。また、本文の上にはリッチテキスト用の編集ツールが表示されます。

編集ツールは色々と表示されますが、主に使うのは「スタイル」ボタンになります。この「スタイル」ボタンの中には、よく使う「文字のカラー」「文字のサイズ」「文字の背景色」その他にも文字修飾を設定しています。

編集方法

本文の中で編集したい文字をマウスでドラッグしてから、「スタイル」ボタンから編集したい種類を選びます。

例：本文中の「吾輩は猫」の文字を赤文字にする。

例：「記憶して居る」の部分をオレンジの文字で、さらに文字サイズを大きくする。

このように、フォーマットを「リッチテキスト」に変更すればHTMLタグを覚えることなく文字の装飾が行えます。

装飾を取り消す

装飾したが、装飾無しのもとに戻したいという場合は該当部分を選んだまま、「消しゴムボタン」をクリックします。

もとの状態に戻ります。

リッチテキストに切り替える前に文字の入力と画像のアップロードを終える理由

※注意！！リッチテキストは便利なのですが、キーボードの「Enter」キーで改行をしようとすると行の間に隙間が空いてしまいます。

本当は↓このように改行したい

そういう場合は、HTMLソースレベルで修正します。

HTMLソースがわかる方は編集できますが、わからない場合は修正が困難になります。なので、フォーマットを「リッチテキスト」に切り替える前に、文章の入力と画像のアップロードは終える理由はこれです。勿論、リッチテキストに切り替えたら文字入力や画像のアップロードもできます。

通常のフォーマットが「改行を変換」のときは、キーボードの「Enter」で改行しても、Wordやメールと同じく、隙間が開きません。先にフォーマットを「改行を変換」のまま文字入力と画像のアップロードを終え記事を整えてから、リッチテキストモードにすると言ったのはこれが理由です。

HTMLタグがわかる方は本文入力エリアの右上「</>」ボタンをクリックするとHTML編集モードになってソースが見えますので、HTMLソースレベルで編集することができます。

HTML編集モードになります。再度右上の「</>」ボタンをクリックするとリッチテキストのモードに戻ります。

ちなみに、改行に隙間が空いてしまう理由は、フォーマット「リッチテキスト」でキーボードの「Enter」キーを押すと</p>タグになるので、改行ではなく、1パラグラフの終了を意味して、隙間が空いてしまいます。改行に修正する場合は</p>タグを改行タグの<br />にて入力で修正します。

ウェブページやブログ記事の作成画面では、本文のフォーマットを「改行を変換」にしておきます（初期設定では「改行を変換」になっていますのでこのままで）。本文での改行がそのまま活きます。連続する行はひとつの文章としてマークアップされ、空白行で区切られます。

本文にはWordのように、テキストを入力していきます。

「続き」タブをクリックして「続き」にもテキストを入力していきます。

テキストのまま公開すると下記のようなページになります。テキストの入力のみですので、文字に修飾がありません。

テキストだけでは単調になりますので、文字装飾をしていきます。本文の装飾したいテキストを　<span class="装飾する内容">装飾するテキスト</span>　のように装飾したいテキストを<span>~</span>で囲みます。下記の赤文字部分がテキストを装飾しているタグです。タグは全て半角の英数字で入力します。

このように、本文のテキストをタグで修飾していきます。

本文中にリンクを挿入

リンクを付けたいテキストをマウスでドラッグし、「リンクの挿入」ボタンをクリックします。

『リンクの挿入や編集』画面が開きますので、「リンクのURL」にリンク先のURLを入力し「挿入」ボタンをクリックします。

本文中にリンクのソース（HTMLタグ）が挿入されました。このソースを少しだけ修正していきます。

リンクが挿入されただけの状態

ソースを下記のように修正します。下記の赤文字部分を追加します。

【参考】通常のHTMLでは「target="_blank"」として別ウインドウを開きますが、 XHTML 1.0 Strict では推奨されていません。XHTML記述の中でも、XHTML 1.0 Transitional であれば、target="_blank" は許可されていますが、より高度な Strict で記述するため、「class="popup"」 とクラスを入れることにより処理をして別ウインドウでページを開かせるようにしています。

リンク挿入箇所のソースの修正が出来ました。

ブラウザで見るとリンク箇所は文字の色が変わり下線が入ります。マウスでクリックするとリンク先は別のウインドウで開かれます。

別ウインドウが開くサンプルはこちら

画像を調度良いサイズに変更する

画像はデジカメで撮影したモノをそのまま利用すると、とてもとても大きな画像です。パソコンのモニターよりも大きいでしょう。また、データ容量も非常に大きいので、無駄にサーバーのスペースをとってしまいます。

本文に画像を挿入する場合は、画像のサイズを調整してから、サーバーにアップロードすることをおすすめします。ここれはその方法をご紹介します。

画像のサイズを修正するためのツール「縮小専用+拡大専用ダウンロード」を利用しますのでこちらの「縮小専用+拡大専用ダウンロード」ページを参照下さい。

画像のタグの基礎知識

画像を表示するためのタグについて、まずは基礎知識を知ってください。

HTML文章（ソース）には、テキストデータ以外のデータを含めることはできません。
画像を表示する場合には、<img>タグを使用して、画像のファイルの情報を記述します。<img>タグの必須属性は、src属性と、alt属性です。

src属性には、画像ファイルのパス（サーバーのどこにあるのか場所）を記述します。

alt属性には「画像に代わって表示される文字列」を記述します。画像が表示できなかった場合、ブラウザが画像の読み込みに失敗した場合に、画像の代わりにalt属性で指定した文字列が下記のように表示されます。

画像の大きさは、width属性とheight属性を記述します。width属性には幅を、height属性には高さを単位をピクセルで指定します。

あとは、画像をどこに配置するかレイアウトになります。配置については次の項目でご説明いたします。

本文中に画像を挿入

サイズを調整した画像が用意できましたら、MT-tの管理画面での作業に入ります。

本文中で画像を挿入する箇所をクリックしてから「画像の挿入」ボタンをクリックします。

『画像の挿入』画面になりますので、「新しい画像をアップロード」をクリックします。

パソコン内にあるアップロードしたい画像を指定し「開く」をクリックします。

選択した画像のファイル名が表示されます。アップロード先を「img」と入力して（すべて半角）「アップロード」をクリックします。

『ファイルオプション』画面になります。
名前：画像に名前を付けます（altタグに当たりますので半角英数字ではなくてもOKです。）
画像を記事/ページに表示：チェックを入れます。
位置：「なし」にチェックを入れます。
その後、「完了」をクリックします。

本文中に画像部分のソース（HTMLタグ）が挿入されました。このソースを少しだけ修正していきます。

画像が挿入されただけの状態

上記の青文字部分を削除します。

画像をどこに配置するかで、ソースを下記の赤文字部分を追加します。

■画像を左に配置する場合の追加タグ

■画像を右に配置する場合の追加タグ

■画像を中央に配置する場合の追加タグ

画像挿入箇所のソースの修正が出来ました。

ブラウザで見ると・・・

画像配置に関するタグ

画像の回り込み

指定された画像を左または右に寄せて配置し、その後に続くテキストは、その反対側に回り込みます。回し込みをフロートといいますが、このフロート系のレイアウトは、ブラウザごとのレイアウト崩れを起こしやすいので注意が必要です。

上記のように、回り込んだテキストの量が多く、画像より下にもテキストが回りこんでいれば良いのですが、画像の高さより、テキストが少ない場合は、この後に続くテキストや画像も回りこみが続きますので、回り込みはここまでという回り込みの解除（クリアー）をする必要があります。

例：回り込み（フロート）の解除が無い場合

回り込みを解除する場合は、その箇所に＜br class="clear" /＞を入れて、回り込みを解除します。

■フロート解除を指定（次の画像からは右に回り込まないように指定）

<img src="画像URL" alt="サンプル画像" width="152" height="202" class="flo-l" />画像を左寄せでテキストが右に回り込み指定したままです。この後に続くテキストや画像も右に余白がある限り、どんどん右に回り込んでしまいます。
<br class="clear" />
<img src="画像URL" width="200" height="150" alt="サンプル画像" />

上記のように、<br class="clear" />以降は回り込みが解除されます。

文字の大きさを変える

文字の見た目を変える

文字の色を変える

文章の位置を変える

見出し

見出しはご利用のテンプレートによってデザイン表示は異なります

リスト表示

▲category-none
には初期値で
dummy
という文字列が入っています。

この文字を削除し、代わりに
カテゴリ名
を入れて保存・再構築します。

ここで指定したカテゴリ名がサイドバーから非表示となります。

カテゴリ名を変更した場合は、再度設定してください。

複数のカテゴリを非表示にしたい場合

カテゴリA|カテゴリB|カテゴリC
のように「|」で区切ることで複数選択が可能です。

注意：うまく動かないには下記をチェックしてください。

▲category-noneの本文内にカテゴリ名を入れますが、改行があるとうまく動きません。
最後の文字列の後、改行が入っていないかチェックしてください。

▲category-noneの本文内に何も文字が入っていない場合は、全選択となり
全てのカテゴリが非表示となります。
初期値で「dummy」と入れているのはこれを回避するためです。
本機能を使わない場合は、
どんな文言でも良いので、現存しないカテゴリ名を入れて　全選択を回避する必要があります。

指定するのは、カテゴリの名前です。
フォルダ名ではありません。

設定方法（１）異なる画像に変化

画像（.jpg .gif .png）のファイル名に対して、「_o」を付けた同じサイズの画像を用意してください。

例１：
aaa.jpg
aaa_o.jpg

例２：
bbb.gif
bbb_o.gif

例３：
ccc.png
ccc_o.png

通常のファイル名に対して、
カーソルオン時に表示される画像は　末尾に「_o」がついたものになります。

画像の準備が出来ましたら、
２つの画像を同じ領域にアップロードし、
以下のように記述します。

class="img_o"　により、カーソルオン時に　aaa_o.jpg　に変化するようになります。

↓（仕様変更しました。2015-05-06）

上記のように
onmouseout="this.src='button01'" onmouseover="this.src='button01_o'"
と記述を加えてください。

設定方法（２）半透明にする

以下のように DIV ボックスに　class="img-o" を入れると、
ボックス内の画像が全て　カーソルオン時に透明度 70％になります。

単純に画像を変化させるだけであれば（２）の方法が簡単です。
（１）の方法は、凝ったデザインにできますが２つの画像を用意する必要があります。

どちらの方法も、
以下のように imgタグにリンクを貼ってクリックボタンを変化させる使い方が一般的です。

対象のコード部分を pre コードで囲むことで、
その中のコードがタグとして動作せずに文字列として出力されます。

例：
（下記例ではコードとして動作させないようにするため、<>を全角の＜＞で記述しています。実際には半角文字で使用してください。）

＜pre class="brush: html;"＞
HTMLコードの場合
＜/pre＞

＜pre class="brush: css;"＞
CSSコードの場合
＜/pre＞

＜pre class="brush: javascript;"＞
javascriptコードの場合
＜/pre＞

初期の行数を決める場合は、下記のように記述追加します。（例：５行目を開始とする場合）
＜pre class="brush: html; first-line: 5;"＞

指定の行をハイライトにする場合はこのように記述します。（例：3,4行目をハイライト）
＜pre class="brush: css; highlight:[3,4];"＞

[http://] に自動リンクされるのを解除したい場合は下記のように追記してください。
＜pre class="brush: html; auto-links: false;"＞

/* ____ テキスト設定 ____ */
em {
font-style: normal;
font-weight: bold;
}
.b {
font-weight: bold;
}
.s {
text-decoration: line-through;
}
.u {
text-decoration: underline;
}
.f11 {
font-size: 11px;
line-height:130%;
}
.f12 {
font-size: 12px;
line-height:140%;
}
.f14 {
font-size: 14px;
line-height:140%;
}
.f16 {
font-size: 16px;
line-height:140%;
}
.f18 {
font-size: 18px;
line-height:140%;
}
.f24 {
font-size: 24px;
line-height:140%;
}
.f28 {
font-size: 28px;
line-height:140%;
}
.txt-r {
text-align: right;
}
.txt-l {
text-align: left;
}
.center {
text-align: center;
}

考え方（列）：
赤いラインは列、赤い数字は列のサイズ（px）となります。
例えば、masonry5 の場合の３列のサイズは 540px です。

考え方（レンガサイズ）：
黒いbox がレンガと考えます。box1 が１レンガ分、box2 が２レンガ（２列）という考えです。
様々なサイズのレンガを並べた場合に、隙間がなくなるように自動整列します。
レンガの左右には 10px の余白、上下にも余白を設定しています。

全体構造

masonry5 は、540px コンテンツで使いやすいよう設計されています。
wideレイアウト３カラムのコンテンツ部分が 540px になります。

masonry6 は、640px コンテンツで使いやすいよう設計されています。
stdレイアウトのコンテンツ部分が 640px になります。

masonry7 は、740px コンテンツで使いやすいよう設計されています。
wideレイアウト２カラムのコンテンツ部分が 740px になります。
基本的に masonry5 と同じ設計を持っていますが、全体の左に 10px を持っています。
masonry5 と同じ構造なのは、wideレイアウト３カラムの場合でもshopブログは２カラムに変化するため、同様の記述で双方のレイアウトに対応するためです。
全体の左の余白（10px）は、コンテンツ幅740pxに対して完全なセンター寄を実現するためです。

masonry8 は、stdレイアウト時の１カラムページ（トップページやランディングページなど）で使用するための設計です。
全体の左の余白（5px）を持たせています。

masonry9 は、wideレイアウト時の１カラム（トップページやランディングページなど）で使用するための設計です。
全体の左の余白（15px）を持たせています。

コード記述例

レンガサイズ
レンガサイズ
レンガサイズ
レンガサイズ

実際に、上記のコードの「*」の部分に数値を入れてみます。
本ページはコンテンツ幅 640pxですので、masonry6 としていくつかレンガを並べてみます。
内部の boxには class="box box1" class="box box2" class="box box3" を混在させてみます。（便宜上、青色にして見やすくしています。）

↓（ここから）

※カテゴリ一覧ページ「続き」から見た場合に、ブラウザサイズによって正しく表示されないことがあります。その場合、ブラウザサイズを変更してご覧ください（最大化←→縮小）。

使い方：
masonry* のボックス内に
div を入れ、box というクラスを設定するとレンガレイアウトになります。
合わせて、box1,2,3,4 とサイズを指定して使います。

大きい画像を入れるとはみ出してしまいますのご注意ください。
画像のサイズの指定が面倒なときは、 width="100%" として height属性を削除すれば、ボックス枠に合わせて画像がリサイズされます。height属性を削除するのは、画像の本来持っている縦横比率を維持するためです。
※ブラウザによっては、画像のリサイズにより画質が著しく低下する場合があります。