アメブロでHTMLは使えない？

久しぶりのアメブロログインでとまどった、HTML編集、私の過去記事では、タグ編集用エディタは使ってはいけないと書いてあります。忘れてたんですね。

けれども、chromeでは、標準エディタ設定でも、勝手にタグ編集用エディタになってしまうんですよね。これ、昔から？

IE編集してるので、これが最終結論です。

さて、事実上、アメブロでHTMLは使えるのでしょうか？　いまIEで、、標準エディタを使って書いています。

最初、HTMLタグを表示タブをonにしてなかったので失敗したのですが、いま同モードでソースコードを書きなおしてます。

うまくいってほしいですが、うまくいったとしても、chrome でHTMLが使えないというのは、相変わらずの大きな欠陥と言わざるを得ないですね。

最終結論

編集後、サイドこの記事を開くと、タグの非表示になっていますが、そのままHTMLタグを表示にすれば、新エディタの挙動と違って、ソースコードはそのまま維持できているようです。

細い道が残されているようで、ちょっと安心しました。

アメブロ超改悪か！？

この記事は、タグ編集用エディタを使って書いています。

久しぶりにアメブロを開いて編集作業を行なってみると、タグ編集用エディタ内での改行が、<br />に変換されるようになっているようです。

新エディタのHTML編集で、過去記事の修正は事なきを得ましたが、サイド編集画面を開くと、HTML編集画面ではなくなっていました。

つまりこれは、何を意味するかといいますと、事実上、HTML編集はできなくなったということです。

調査不足であればいいが

少ししかまだいじっていませんが、記事執筆時に入力したHTMLコードを維持する方法はまだみつかっていません。

もし、方法がないのであれば、超改悪といっても過言ではないでしょう。

勝手にソースを追加するような仕様は、HTML入力を可能にするものとはいえません。私の調査不足であればいいのですが、アメブロの運営さんは、何を考えているのでしょう？　まったくもって不愉快であり、意味不明です。

全講座一覧

当ブログのレベルの違う3講座。

『超入門』
やってみよう！カスタマイズ
ちょっと難しいカスタマイズ

各講座ごとに色分けして講座難易度を★の数で表記しています。私独自の判断ですので、★より難しく感じたり簡単に思ったりすることもあるかも知れませんが、ご了承くださいませ。

アメブロのインターフェース変更により、記事中の各編集メニューへのアクセス方法等について、現在の状況と異なっている記述があります。過去執筆記事については、そうした記述は変更する予定はございませんのでご了承ください。

（2012-02-24 16:55更新）

まいりました

ピグで毎日数時間遊ぶ、小3の娘にまかせていたアメブロ…

ブラインドタッチはできないけれど、書くよりも早くタイピングもできるようになったし、親バカ満足も、ありゃりゃのりゃ（瀑）

デザイン設定まで変えられるとは。「納涼スイカ」になってました。

デザインを元に戻す方法は？

データとして変更されてしまうのは、CSSとサイドバーの設定。それを元に戻せば、無事一件落着。

しんちゃん大人気！☆

→アメーバピグで遊ぶ

しんちゃんの頭に人間がのってしんちゃんはバランスをとっています。

なんでうっほほーいなんでしょう？

なぜか口がちっこい！

（娘著）

東京スカイツリー☆

→アメーバピグで遊ぶ

すごい！

高い！

（娘著）

はじめての大休止

ブログ開設以来のはじめての大休止となってしまいましたm(__)m

記事を書く気持ちの余裕ができないほど忙しい＾＾；

いいことです！（パチパチ）

きっと少し落ち着いて考えられるようになったら、いっぱいいい記事のアイデアが浮かんでいるものと思います（期待）。

HTMLで記事を書く（素材付き／その2）

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

難易度表示付き記事一覧はこちらです

さて、「HTMLで記事を書く」第二回目は、見出しについて扱ってみたいと思います。

ブログで文章を書くとき、とくに長い文章だとメリハリをつけるのに苦労したことはありませんか？

そんなときに役立つのが『見出し』です。HTMLではヘディングタグといって<hx>～</hx>という形で使用できます。大きな見出しから順番に、h1、h2、h3…h6　と続きます。

ヘディングタグの簡単な理解

アメブロでは、記事タイトルに大親分のh1タグが使われています。本でいえば、章変わりのときに1ページ丸々「第○章　○○○○○○○」というタイトルだけが書かれているの区切りのページ。次に続く本文中でも適宜、見出しが使われています。そのおかげで文章の流れが分かりやすくなり、読みやすくなっていますよね。

HTML（HTML5）も一緒で、アメブロの記事なら1つの記事にh1タグが使えるのは1回のみ。次の見出しはh2、そのまとまりの中でさらに小さい見出しをつけたければh3…　と、階層的に見出しがつけられていきます。

デフォルトの状態の場合、見出しタグで括れば、WinXP＋IE9では以下のように表示されます。

ちょっとそっけないですよね。

当ブログでは、この文章の上の「ヘディングタグの簡単な理解」の部分は、
<h2>ヘディングタグの簡単な理解</h2>
というふうに書くことで、ご覧のように表示されるようにCSSを設定してカスタマイズしています。

h3くらいまでしか使わないと思いますので、すぐ使えるh2、h3のカスタマイズ例をこれからご説明いたします。

ただアメブロの場合、デフォルトの設定では記事タイトル部分、つまりh1設定が少し弱いので、そちらも同時にカスタマイズしたほうがよいかも知れません。

h1タグのカスタマイズは、「アメブロ記事タイトルのカスタマイズ」で書いていますので、あわせてご参照ください。

h2、h3タグのカスタマイズ例

先のデフォルト状態の設定を見ていただくと分かるように、文字の大きさや太さで違いを出して、大きい見出しから小さい見出しにかけてアクセントの付け方が弱くなっているのが分かると思います。それに準じて、h3よりh2のほうが少し目立つように設定すると、直感的にも分かりやすくなります。

カスタマイズの方法を、ここでは強調具合の弱いものから順に、次のように分類して説明してゆきたいと思います。

色を変えることで見出しっぽく見せる
さらにボーダー（線）を引くことで見出しっぽく見せる
背景画像を使うことで見出しっぽく見せる
背景色をつけることで、見出しっぽく見せる

ちなみに、下の見出しは、h3タグで囲まれています。

色を変えることで見出しっぽく見せる

このやり方は、h3設定の時などには結構有効です。ブログの本文は、articleTextという名前のついたボックスのなかに収まっていますので、たとえば次のように指定します。

.articleText h3 {
	margin: 20px 10px 10px 0; /* 周囲のマージン指定は順番に、上 右 下 左 の順 */
	font-size: 100%; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	color: #993300; /* 文字の色 */
}

これで、ブラウザのデフォルトフォントと同じ大きさで、茶色っぽい太字になります。

この設定をすると、<h3>上のサンプルの見出しの見え方</h3>と書けば、

上のサンプルの見出しの見え方

のように見えます。

見出しタグがある前と後では内容に変化があるのが普通なので、それを直感的に分かりやすいように、上のマージンを20pxにして、下の10pxより広めに取っています。

さらにボーダー（線）を引くことで見出しっぽく見せる

見出しっぽく見せるのに、いちばん簡単で効果的な方法といえます。ボーダーの引き方や太さで、h2にもh3にも利用できるので便利です。

では、左に太め、下に点線のラインを引く例を見てみましょう。

.articleText h2 {
	margin: 30px 10px 20px 0; /* 周囲のマージン指定は順番に、上 右 下 左 の順 */
	padding: 3px 5px 3px 5px; /* 文字周囲のパディング指定は順番に、上 右 下 左 の順 */
	border-top: none; /* 上のボーダーはなし */
	border-right: none; /* 右側のボーダーはなし */
	border-bottom: 1px dotted #7dd2e7; /* 下側のボーダー */
	border-left: 5px solid #7dd2e7; /* 左側のボーダー */
	font-size: 120%; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	color: #e93c00; /* 文字の色 */
}

この設定を呼び出すと、次のように見えます。

ボーダーで強調した見出し

ボーターは他に数種類ありますが、dashed（破線）とdouble（二重線）を憶えておけばよいでしょう。

背景画像を使うことで見出しっぽく見せる

次に背景画像を使う方法です。先のボーダーの例の左側のボーダーを設定せずに、その位置に背景画像を置いてみます。

.articleText h2 {
	margin: 30px 10px 20px 0; /* 周囲のマージン指定は順番に、上 右 下 左 の順 */
	padding: 5px 5px 2px 28px; /* 文字周囲のパディング指定は順番に、上 右 下 左 の順 */
	background-image: url('使いたい画像のURL'); /* 背景画像 */
	background-position: 0 3px; /* 左上を起点に、横方向、縦方向の順番で指定 */
	background-repeat: no-repeat; /* 繰り返し。repeat-x、 repeat-y も指定可能 */
	border-top: none; /* 上のボーダーはなし */
	border-right: none; /* 右側のボーダーはなし */
	border-bottom: 1px dotted #7dd2e7; /* 下側のボーダー */
	border-left: none; /* 左側のボーダーなし */
	font-size: 120%; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	color: #e93c00; /* 文字の色 */
}

この設定により、

アイコン付き見出しの例

とこんな感じに見えるようになりました。

もう一例、グラデーションのある背景画像を設定した例です。やり方は同じ。画像をx軸方向に繰り返すところが違っています。グラデーション背景を効果的に見せるために、下だけでなく、上にも同じボーダーを設定してみます。

.articleText h2 {
	margin: 30px 10px 20px 0; /* 周囲のマージン指定は順番に、上 右 下 左 の順 */
	padding: 5px 5px 5px 5px; /* 文字周囲のパディング指定は順番に、上 右 下 左 の順 */
	background-image: url('http://stat.ameba.jp/user_images/20120224/15/jalan2-net/f1/1c/g/o0010005011813410009.gif'); /* 背景画像 */
	background-position: left middle; /* 左上を起点に、横方向、縦方向の順番で指定 */
	background-repeat: repeat-x; /* 繰り返し */
	border-top: 1px dotted #7dd2e7; /* 上のボーダーはなし */
	border-right: none; /* 右側のボーダーはなし */
	border-bottom: 1px dotted #7dd2e7; /* 下側のボーダー */
	border-left: none; /* 左側のボーダーなし */
	font-size: 120%; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	color: #e93c00; /* 文字の色 */
}

すると、

サンプル背景画像を下に貼り付けておきます

というふうに見えます。

サンプル素材をいくつか用意しました。よろしければご自由にご利用ください。

先頭に置くマーク素材: (1) 　／　(2) 　／　(3) 　／　(4) 　／　(5)
背景グラデーション素材: (1) 　／　(2) 　／　(3) 　／　(4) 　／　(5)

背景色をつけることで、見出しっぽく見せる

最後の方法は、「アメブロ記事タイトルのカスタマイズ」で書いておりますので、そちらをあわせてご参照ください。

いかがでしょうか？　設定さえしていれば、使いたい時にいつでも使えるようになりますので、練習のためにも一度設定してみませんか？

もし記事が気に入ったら、クリックいただければうれしいです
またのご訪問、お待ちしております

HTMLで記事を書く（素材付き／その1）

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

難易度表示付き記事一覧はこちらです

みなさんは、アメブロの記事を書くとき、どのエディタを使っていますか？

古くからのアメブロユーザーさんは「標準エディタ」ですかね？　あるいは、「新エディタ」に移行された方も多いでしょうか？

ブログ記事を書くときに大切なのは、いかに分かりやすく自分の思いを伝えるかということだと思います。文章のうまいへたより、読んでくれる人のことを考えて、自分の思いを精一杯表現することです。

ですので、そのうえでストレスになるであろう「よく知らないHTMLを使う」ということについて、考えてみたこともない人も多いものと思います。

けれども、アメブロを自由にカスタマイズしようと思えば、避けられないのがHTMLの習得であることも事実。

そこで今回はタイトル通り「アメブロの記事をHTMLで書いてみよう」という、少し難しいかも知れないお題です。3回に分けて解説してゆきたいと思います。

HTMLを習得することによるメリット

そのためにはまず最初に、HTMLを習得することによるメリットを説明したいと思います。

SE0対策に有利になる
ビジュアル的に「お！」と思ってもらえるような記事が手間なく書けるようになる
表現の幅が広がることになるので、ブログで記事を書く楽しみや可能性がどんどん広がる

ということがまずあげられます。

そもそもHTMLというものは、検索エンジンのクローラーをはじめとするロボットが文章の構造を分析しやすいようにルール付けされたことがその起源ですので、すごく単純なものなんです。ほんと、笑えるくらいに。

全部を理解しようとするからハードルが上がるのであって、ブログを書くのに覚えておいたほうがよいタグは限られています。慣れてくれば、ひとつのタグを覚えるのは、漢字を一文字覚えるのと大差ありません！

3回にわたる記事で、

HTMLを覚えることによるメリットを知る
ブログ記事でのHTMLの使い方について
基本タグの習得とタグ表示のカスタマイズ方法

について説明してゆきます。

チェックボックス付きリストを書く

メリットを感じていただくためのその一は、上の文章にあるチェックボックス付きリストを簡単に作成する方法です。

上記リストのHTMLは下記のようになっています。

<ul>
<li>（文章）</li>
</ul>

チェックボックの画像が先頭につくようにCSSをカスタマイズしていれば、上記のようにHTMLを書けば勝手にチェックボックス付きのリストを作成してくれます。<li>（文章）</li>の（文章）をコピー＆ペーストして（文章）の部分を変えてあげれば数がどんだけあろうと先頭にチェック画像が表示されます。

カスタマイズしていない場合、上のように書くと次のように表示されます。

これはこれで使いたい時もありそうですね。そこで、チェックボックス付きのリストを作成したい時だけそうするためにulというタグに名前を付けることにします。たとえば、<ul clas="check">～</ul>という具合です。これをクラス指定といいます。CSSで「check」というクラスに対して「こうしなさい」という指定をすることでチェック付き画像が表示されるようになります。

コピー＆ペースト用CSS

まず、CSSの編集で、その最後に次の指定コードをを貼りつけます。

.articleText ul.check { /* チェックマーク付きリスト */
	list-style-type: none;
}
.articleText ul.check li {
	padding-left: 17px;
	background-image: url('（アップロードした画像のパス）');
	background-position: 0 3px;
	background-repeat: no-repeat;
}

そうすると、以下のように書くことで、

<ul class="check">
<li>（文章）</li>
</ul>

チェックボックス付きリストが作成できるようになります。

黄色い文字の部分（class="check"）は必須ですので忘れないようにしてください。黄色い文字を書かずに冒頭部分を単純に<ul>とすれば、頭に「・」のついた通常のリストが表示されます。

チェックボックス画像については6種類下に貼り付けておきますので自由にご使用ください。どの画像を使うかと、ブログの文字の大きさによって、貼り付けるCSSコードの黄色い文字の部分の微調整が必要です。

最初の17pxは、チェックボックと（文章）との間のスペース。詰まりすぎているようであれば大きくしてください。

次の3pxは、画像の表示位置。下すぎれば値を小さくし、上すぎれば値を増やしてください。

いずれともマイナスの値も指定できます。大きな画像を使用した場合、ブログ本文の文字の大きさが小さいと画像がすべて表示できないことがあります。そのときは他の画像に変えるか、リストの文字を大きくすると解決します。リストの文字を大きくするためには、

.articleText ul.check { /* チェックマーク付きリスト */
	list-style-type: none;
}
.articleText ul.check li {
	padding-left: 17px;
	background-image: url('（アップロードした画像のパス）');
	background-position: 0 3px;
	background-repeat: no-repeat;
	font-size: 110%;
}

上のCSSを使用して、110%の部分を調整すればOKです。

チェックボックス付き画像

自由にご使用ください

緑大：　／　緑中：　／　緑小：

赤大：　／　赤中：　／　赤小：

（続く）

もし記事が気に入ったら、クリックいただければうれしいです
またのご訪問、お待ちしております

アメブロ記事タイトルのカスタマイズ

当『超入門』コーナーでは、アメブロデザインカスタマイズのいろはのいについて解説したいと思います。初級・中級・上級者へとステップアップしてゆくための基礎の基礎固めに役立つ記事になるように努力します！

難易度表示付き記事一覧はこちらです

デフォルトのままではそっけないCSS編集用デザインの記事タイトル。今回はこのタイトルカスタマイズについて、やってみよう！

ちょっと頑張ってHTMLを見る

まず、タイトル部分のHTMLをご紹介したいと思います。

え！？　よくわからない？　・・・いいんです！

もしこの講座を読み終えて、ちょっとでも分かったら素敵だと思いません？　それでは…

<div class="skinArticleHeader"> /* 一番外の箱 */
<div class="skinArticleHeader2"> /* 真ん中の箱 */
<h1> /* 一番内の箱 */
<a href="http://ameblo.jp/jala2/entry-11140104144.html" class="skinArticleTitle" rel="bookmark">幅の広いバナーも掲載できるサイドメニュー</a>
</h1>
</div>
</div>

分かりやすくするために、不要なHTMLは省略してコメンとを加えています。え、それでもややこしい？　いいんです！　ちょっとは分かるようになりますから！　いや、分からなくてもいいです。黄色い文字の部分に着目しておいてください。これからがこの記事の本題です。

カスタマイズの基本は現在のCSS設定

まず記事タイトル部分に対する、CSS編集可能デザインの元のCSS設定を見てみましょう。

.skinArticleHeader {
margin: 0 29px 0 29px;
padding: 2px 10px 2px 10px;
border-left: 5px solid #E4E4E4;
}
.skinArticleHeader h1 {
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 1em;
font-weight: normal;
}
.skinArticleTitle, /*タイトル文字 */
.skinArticleTitle:hover, / *タイトルのリンク文字（マウスオン時） */
.skinArticleTitle:focus, / *タイトルのリンク文字（フォーカス時） */
.skinArticleTitle:visited { / *タイトルのリンク文字（訪問済み） */
font-size: 1.31em;
font-weight: bold;
color: #0066CC;
}

なるほど、非常に単純です。この設定で、表示は下の図のようになっています。

最初のソースコードで「真ん中の箱」と書かれている部分に関する記述がなく、「一番外の箱と」、「一番内の箱」についての記述がされているということが何となくでもお分かりでしょうか？　解説しますと、以下のような設定になっているということです。

一番外の箱（div.skinArticleHeader）: 箱の外側（margin）には上から時計回りに右、下、左の順で、0、29px、0、29pxの間隔を空ける。
⇒タイトル左のグレーの太い線の左側。細いグレーの線までの間隔が見て分かります。29ピクセルです。; 箱の内側（padding）には、同様に上から時計回りで、2px、10px、2px、10pxの間隔を空ける。つまり、それだけの間隔があってその中に内側の箱が入ります。
⇒タイトル文字の左側の太い罫線までの間隔が見て分かります。10ピクセルです。; 箱の外の左側（left）に太さ5pxの線（border）を実線（solid）で引く。太さは5px、色はグレー（#E4E4E4）。
⇒破線は（dashed）、点線は（dotted）と指定します。
一番内の箱（.skinArticleHeader h1）: 箱の外側（maigin）も内側（padding）も間隔は全部ゼロ。; 文字の大きさ（font-size）は、元々の設定の1倍（1em）; 文字の太さ（font-weight）は普通の太さは普通（normal）。
⇒太くしたい時は（bold）を指定します。
各リンクの文字設定: 文字の大きさ（font-size）は、1.31倍（em）にする。; 文字の太さ（font-weight）は太字（bold）にする。; 文字の色（color）は#0066CC（青）にする。

色の設定については、何度も「やってみよう！」の講座で解説してきてますから、ここまで分かれば結構カスタマイズができますね。

赤い色を使って目立たせる

タイトル左の罫線を赤く（#FF3300）、タイトル文字も同じ色にして目立たせてみます。

.skinArticleHeader {
margin: 0 29px 0 29px;
padding: 2px 10px 2px 10px;
border-left: 5px solid #FF3300;
}
.skinArticleHeader h1 {
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 1em;
font-weight: normal;
}
.skinArticleTitle, /*タイトル文字 */
.skinArticleTitle:hover, /* タイトルのリンク文字（マウスオン時） */
.skinArticleTitle:focus, /* タイトルのリンク文字（フォーカス時） */
.skinArticleTitle:visited { /* タイトルのリンク文字（訪問済み） */
font-size: 1.31em;
font-weight: bold;
color: #FF3300;
}

これでOK。下のようになります。

背景を黒くして、白抜き文字にする

では今度は、左側の線を消して（none）、背景色の設定（background-color）を使って背景を黒（#000000）くして、白抜き文字（#FFFFFF）にしてみます。その際、箱の内側の（文字までの）間隔は、5px、10px、5px、10pxに設定変更することにします。

.skinArticleHeader {
margin: 0 29px 0 29px;
padding: 5px 10px 2px 10px;
border-left: none;
background-color: #000000;
}
.skinArticleHeader h1 {
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 1em;
font-weight: normal;
}
.skinArticleTitle, /*タイトル文字 */
.skinArticleTitle:hover, /* タイトルのリンク文字（マウスオン時） */
.skinArticleTitle:focus, /* タイトルのリンク文字（フォーカス時） */
.skinArticleTitle:visited { /* タイトルのリンク文字（訪問済み） */
font-size: 1.31em;
font-weight: bold;
color: #FFFFFF;

今度は、下の画像のようになります

このように、ボーダーや背景、文字色の設定だけで、ブログタイトルもかなり自由にデザインカスタマイズできます。

みなさんもいろいろアイデアを練って、トライしてみてはいかがでしょうか？

もし記事が気に入ったら、クリックいただければうれしいです
またのご訪問、お待ちしております

「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座

「HTMLなんて分からないけど、アメブロを好きなデザインにしたい！」そんな方の思いにも答えられるサイトを目指しています

よく読まれている「カスタマイズ記事」ランキング

アメブロでHTMLは使えない？

最終結論

アメブロ超改悪か！？

調査不足であればいいが

全講座一覧

まいりました

デザインを元に戻す方法は？

しんちゃん大人気！☆

東京スカイツリー☆

はじめての大休止

HTMLで記事を書く（素材付き／その2）

ヘディングタグの簡単な理解

h2、h3タグのカスタマイズ例

色を変えることで見出しっぽく見せる

さらにボーダー（線）を引くことで見出しっぽく見せる

背景画像を使うことで見出しっぽく見せる

背景色をつけることで、見出しっぽく見せる

HTMLで記事を書く（素材付き／その1）

HTMLを習得することによるメリット

チェックボックス付きリストを書く

コピー＆ペースト用CSS

チェックボックス付き画像

アメブロ記事タイトルのカスタマイズ

ちょっと頑張ってHTMLを見る

カスタマイズの基本は現在のCSS設定

赤い色を使って目立たせる

背景を黒くして、白抜き文字にする

よく読まれている「カスタマイズ記事」ランキング

カスタマイズに役立つオススメ！記事

最終結論

調査不足であればいいが

<img alt="『超入門』" src="https://stat.ameba.jp/user_images/20120115/15/jalan2-net/83/59/g/o0567002811736258686.gif?caw=800" width="567" height="28" class="PhotoSwipeImage" data-entry-id="11286387389" data-image-id="11736258686" data-image-order="2" data-amb-layout="fill-width">

デザインを元に戻す方法は？

ヘディングタグの簡単な理解

h2、h3タグのカスタマイズ例

色を変えることで見出しっぽく見せる

さらにボーダー（線）を引くことで見出しっぽく見せる

背景画像を使うことで見出しっぽく見せる

背景色をつけることで、見出しっぽく見せる

HTMLを習得することによるメリット

チェックボックス付きリストを書く

コピー＆ペースト用CSS

チェックボックス付き画像

ちょっと頑張ってHTMLを見る

カスタマイズの基本は現在のCSS設定

赤い色を使って目立たせる

背景を黒くして、白抜き文字にする