その他メモ書き

画像のリンクはtarget_blank指定がない(画像挿入時に指定できない)ので指定したい場合は都度手動にて指定する必要がある

メイリオだとemで文字が傾かない(英数はメイリオではなくなるのでそれは傾く)結果英数だけ傾いてる変な文に

(アメブロ関係ないけどｗ)

ニコニコから動画を貼るときに、アメブロ用のボタンからタグを取得するとwidth=320となる

汎用のタグだと490

タグ編集エディタだと閉じタグが自動補完されないのでタグ閉じ忘れになることがある

(標準エディッタであればタグの非表示タブにしたときに自動補完されるので閉じ忘れは起きにくい、ソースがバグることはあるにせよ)

絵文字の記事にも書いたがimgにclass="m"をつければ携帯内蔵絵文字に変更されます、しかし該当するものがない場合は跡形もなく消えてしまうので場合によってはclass="m"をあえて付けずに画像で表示という選択もアリ。
パソコンで記事に内蔵絵文字に対応する絵文字を入れると→携帯でみても内蔵絵文字には変換されません。
携帯で記事に内蔵絵文字を入れると→携帯で見たときは内蔵絵文字で、パソコンで見たときは画像で表示されます。 (携帯から書いたときに画像に class="m"が付加されて変換)

画像は最大で横800px(縦は不明 938まではそのまま上げられた)

[ユーザー名]さんの投稿したなう

本文 (↓時刻はブログの自動投稿日時ではなくなうの投稿日時)

9/22 2:01

>>もっと見る

携帯でアメーバブログを見た時、文字装飾はこうなる

記載の通りに装飾してあります。携帯で見ると、何が反映されて何が反映されないのかがわかります。ちなみにこの文章はタグなし。

P

Pもう一つ　↓にhr

---

h1

h2

h3

h4

h5

h6

blockquote

Pスタイル付

h1スタイル付

h2スタイル付

h3スタイル付

h4スタイル付

h5スタイル付

h6スタイル付

blockquoteスタイル付

color:ff0000
color:blue
background-color:red
background-image:uri
background-image:uri;background-repeat:no-repeat
font-size:xx-small日語あむ
font-size:x-small日語あむ
font-size:smaller日語あむ
font-size:small日語あむ
font-size:xx-large日語あむ
font-size:x-large日語あむ
font-size:larger日語あむ
font-size:large日語あむ
font-weight:bold
font-weight:bolder
font-weight:900
x-large+bold日語あむ
x-large+strong 日語あむ
big1
big2
big3
big4
big5
big6
font-stretch:ultra-expanded
letter-spacing:10px
line-height:30px
text-decoration:underline
text-decoration:line-through
text-decoration:blink
text-shadow:10px
以降はブロックライン

text-indent:20px

text-align:center

margin:10px;padding:20px;border:blue solid 5px

list

• li
• あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

dtあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

ddああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

あああああああああ

TEST

---

『日語あむ』というのは日本語サンプル文です、特に意味はありません

PC、AU、ドコモ、全て文字が大きく見えて、大きすぎないのはのはx-large
x-largeの文字を太くするとなぜかPCで見たときに文字が小さく太くなるのでそれが一番いいかも。
ドコモ携帯ではborder、padding margin関連が全く効かない。文字の色、大きさ、背景色、文字点滅、alignはできる、さらにP、H[1-6] blockquoteへのスタイル設定は無視されるためdivやspanで設定を行うのが良い。
アメブロのサーバから出る時点でtableもliもliタグも何事もなかったかのように消されている様子、ドコモだとmarginプロパティーは効かないので、字下げをしたい時に唯一使えるのはblocquoteなのだが、、、引用でもないのに使いたくはない、、、。
liは使うが携帯での字下げは諦めるしかないか。

background-colorについてですが、なぜか普通に自分のwebスペースにこのソースをアップして見てもdocomoだとbackground-color効かないんだよな、、何故だろう、、。

携帯でアメーバブログを見た時の文字装飾について

アメーバブログ、携帯でも見られる、投稿できるようになっていますが
PCで書いた記事において、文字装飾(文字の色を変えたり大きさを変えたり)を行っている場合、パソコンで見た場合はもちろん反映されますが、携帯電話で見た場合全く反映されません。
ところが、携帯で書いた記事において文字装飾を行った場合、携帯でもパソコンでも反映されます。
一覧にすると下記のようになります、◯が文字装飾が反映され、×が反映されません。

まとめると
1.携帯で見たときにはfontタグをはじめほとんどのタグは削除される？一切反映されない
2.img span p br などのタグは削除されないようだ。
3.上記タグにstyle要素で文字装飾を施した場合は携帯で見た時も反映される
4.携帯から投稿した時は、Span style=　で文字装飾が施される

まあ、実際には1.のタグ削除はもちろんですが、　3.と4. についてもアメブロのサーバーでソースを変換してると思われます。
単なるタグ削除で収めなかったのは、携帯でデコメを投稿させたかった、というのが大きな理由なんでしょうね。。
携帯でデコメ送ったのにテキストとだけだったら泣くわ。
それで苦肉の策として、携帯から送信されてきた文字装飾タグに関してはspan style=に置換しましょうと、
んでspan style=とかdiv stile=で指定された文字装飾については、そのまま携帯に送信しましょうと。
そういうことなんでしょうかね、、
いや、そもそも携帯で見たときに文字装飾タグの削除をしないことにすればこんなややこしいことにはならないはずなんだが、、、。
昔っからワケ分からんよな、アメーバは、、。

---

---

デコメをメール投稿するとこうなりました↓
普通にPCに送ってソースを確認したのですが、style属性は一切使わない、幅の指定もありませんでした。
アメブロが勝手にソースを変更しているのではないかと、。

あかでか

あおちいさきいろでか

---

---

左

中

アメーバブログの裏技？記事の中に横線を入れる

こんな横線が簡単に入れられます。

---

連続で入れるとさらに効果的

---

---

---

間の行ににもじをいれてもいいですね

---

文章を書く前に、書くところの右下にある
HTMLタグを表示　をクリックしてください。
詳しくは下の図を見てみてください。(これは書いた後のものですが、書く前はほとんど何も書かれていないはず)

それから <hr> とかいてください　<HR>でもいいです、大文字小文字は関係ありません、四文字です、
書いたらもう一度、タグの非表示 をクリックしてください。
そうすると線が一本でてると思います。たったこれだけのことです。

後はこれの下に文章をかいていって、横線を入れたいところにきたら線をコピーして貼り付けすればいくらでも同じものが作れます。

でてこないで＜ｈｒ＞のままになっている、等の場合、全角で書いている可能性があります。日本語入力をOFFにして入力しなおしてください。

---

ちなみに書きかけのところで　HTMLタグの表示をおして、文章の途中に<hr>を入れると、最悪の場合書いた文字が消えたりするので、やめましょう、
もし書いてる途中に入れるのであれば、一番最後に入れてからコピー＆ペーストすることをお勧めします(ドラッグでも動きます)

2005-08-23 22:47:04投稿、2010/9現在でもいまだにボタンで簡単挿入ができるようにならないので修正の上日付を変更します、なぜ実装されないのか不思議ですね。

横線っていうか正式名称は水平線なんですけどｗ

簡単に文字の大きさを変える方法(こっちのほうが簡単)

なぞらなくてもいいので、大きくしたいところをクリックして

[CTRLキー]+[数字キー]

を押してください(右側のテンキーの数字ではなくて、ひらがなとか書いてある方のキーです)

これで文字の大きさが変わります。

---

[CTRL]+[1]

[CTRL]+[2]

[CTRL]+[3]

[CTRL]+[4]

[CTRL]+[5]

[CTRL]+[6]

---

[CTRL]+[1]が一番大きくて、[CTRL]+[6]が一番小さくなります。
携帯でも文字の大きさ変わります(携帯会社や端末メーカにより異なります)

ただしこれだと、段落の途中で文字の大きさを変えるというのはできません。そのため意図したことろ以外が大きくなってしまうことがありますのでご注意下さい、改行を多めに入れてから実行するとうまくいくと思います。(後で改行は消してもOK)

ちなみにプレビュー画面だと文字大きくなってないかもしれないですが、そのまま保存して公開をおせば、ちゃんと大きくなってるのできにしないでね。

ただ、ひとつだけ注意点があります↓

間違えてWのキー→[CTRL]+[W]を押してしまうとウインドウが消えてしまいます。
消えていいですか？とか聞かれることなくいきなり一瞬で消えます。押し間違いにはくれぐれもご注意下さい。

(2005-08-20 23:27:35投稿、2006/12/16一部修正、2010/9現在でも使えるので日付を変更します。)

アメブロ絵文字一覧(新絵文字版)

アメブロ絵文字一覧(旧絵文字版)
アメブロ絵文字一覧(新絵文字版)★いまココ★
アメブロ絵文字一覧(新絵文字版)別パターン
アメブロ絵文字一覧(ドコモケータイ⇔パソコン)

---

原寸は16×16です、パソコンでの表示は横2倍×高さ2倍で4倍拡大となっているためぼやけてます。
そのまま記事にドラッグすれば表示されている大きさで使えますよ。

2010/9追記
携帯で見たときは携帯の内蔵絵文字で表示されるようにしました(該当のないものはナシになる、変換も何もされない、絵文字の存在自体がなかったことになるのでご注意を)
imgタグに class="m"が付いていれば携帯内蔵絵文字に変換されます。
携帯で見た時も強制的に全ての絵文字を画像として表示させるには→アメブロ絵文字一覧(新絵文字版)別パターン (見たままの画像が確実に表示されますが時間とパケ代が余分にかかります)

001
011
021
031
041
051
061
071
081
091
101
111
121
131
141
151
161
171
181
191
201
211
221
231
241
251
261
271
281
291
301
311
321
331
341
351

351でおわりのようです。
2006-12-17 21:52:57 投稿
2010/9 どういうわけか216番目以降がなかったので最後まで。数字を減らして一行を5個→10個に変更し可視性の向上。携帯で見たときは携帯の内蔵絵文字で表示されるように変更。
imgタグに class="m"が付いていれば携帯内蔵絵文字に変換されます。
携帯で見た時も強制的に全ての絵文字を画像として表示させるには→アメブロ絵文字一覧(新絵文字版)別パターン (見たままの画像が確実に表示されますが時間とパケ代が余分にかかります)

アメブロ絵文字一覧(旧絵文字版)

アメブロ絵文字一覧(旧絵文字版)★いまココ★
アメブロ絵文字一覧(新絵文字版)
アメブロ絵文字一覧(新絵文字版)別パターン
アメブロ絵文字一覧(ドコモケータイ⇔パソコン)

---

原寸は15×15です、パソコンでの表示は横2倍×高さ2倍で4倍拡大となっているためぼやけてます。
そのまま記事にドラッグすれば表示されている大きさで使えますよ。

2010/9追記
携帯で見たときは旧版の絵文字は全てみられません
(変換も何もされない、絵文字の存在自体がなかったことになる)
携帯での閲覧を考慮するならば新絵文字版 を利用下さい。

001
011
021
031
041
051
061
071
081
091
101
111
121
131
141
151
161
171

2006-02-18 00:34:47 投稿
2010/9 数字を減らして一行を5個→10個に変更し可視性の向上。
今この絵文字普通にブログ書いてたら出てこないからなぁ、ちょっとレアなのかもしれません。
ちなみに私はこちらの絵文字の方が好きです

アメブロ原稿用HTML自動作成秀丸マクロ

アメブロのHTML自動作成機能が役に立たなくてお嘆きのあなた。
秀丸で編集した文章で、改行を<br>改行にすると、
ctrl+[1-6]で文字を大きくしたとき、全部大きくなってしまうとお嘆きのあなた。
どういうわけか<p>などの前後で行間があかないのでスタイルシートをいじろうかとも思ったがめんどくさいしなぁ、とお嘆きのあなた
2連続改行で</p><p>になるんだけど、三連続改行だと</p><br><p>じゃなくて</p><p><br>になることが多いんだよな…なんか気持ち悪い。とお嘆きのあなた。

作りましたよー、HTML自動作成秀丸マクロを。

このマクロの説明

1.一番先頭に<p>を挿入。
2.改行を<br>に
3.2連続改行は段落の区切りとみなして</p><br><p> に
4.同様に3連続改行は</p><br><br><p>に

つまり

一行目
二行目

三行目
四行目

↓

<p>一行目<BR>
二行目</p>
<br>
<p>三行目<BR>
四行目<BR>

となります。
(最後のp終了タグなんてシラン)

disabledraw;
gofiletop;
insert "<p>";
replaceallfast "\\n\\n\\n","糜2鋤",regular;
replaceallfast "\\n\\n","糜鋤",regular;
replaceallfast "\\n","<BR>\\n",regular ;
replaceallfast "糜鋤","</p>\\n<br>\\n<p>",regular;
replaceallfast "糜2鋤","</p>\\n<br>\\n<br>\\n<p>",regular;

上の範囲だけコピーして、.mac拡張子に変更して登録してください。

ちなみに「糜鋤」という漢字が出てきますが、二重改行を一旦「糜鋤」に、同様に3重改行を一旦「糜2鋤」に変換してるだけなので、この漢字にはまったく意味はありません。絶対使う人がいない漢字の組み合わせを使ってみただけです。

ちなみにマクロを実行すると全部変換されます、選択した範囲のみなんて高度なことはできません。
あと、改行が4つ続くと</p><br><br><p><br>となってしまい、思った動作をしません。見た目同じですが私は嫌ですねぇ。
変換後全選択なんてやり方もわからないので手動で改めて全選択してください。

お約束ですが、このマクロを使って何かとんでもないことが起こっても私は責任負えません。

ご了承ください。

著作権とかってのは(放棄できない部分を除いて)放棄しますので煮るなり焼くなり勝手にどうぞ。

多分同じの作って公開してる方もいるかと思いますが、パクリではありません。
私の検索能力が低いので(つくったほうが手っ取り早そうだったので)見つけられなかっただけです。

3/22 02:30追記
なんかソースが勝手にリンクになったり、変な空白が入ったりしてしまう…直しました。
いないと思うけどここからコピペして使ってる方いましたら直してください。

このブログで使ってるスキンの作り方を説明(いじりまくりCSS)

さて、オリジナルスキンに関する質問をいただいたので、
ちょっといじり方を書いてみようかと思います。
アメブロの話になるのでほかに書くところもないので…。

このスキンの一番のポイントは、記事本文の書いてあるブロックごと色がついているのではなくて、透明になっていて壁紙が透けている、そして記事題名と記事本文のところだけ四角で囲ってあって色がついているという点です。これはCSSをいじらないとできません、テクニックがいるのでこれをやっている人は以外と少ないと思います。
(苦労する割に目立ちにくいところではありますが)

まずは右側一番上「スキンの選択」で、スキンをを「グリーン ブルー　ピーチ グレイ」のどれかにします

そうすると　カスタマイズがクリックできるようになるので、それをクリック
ここでサイドバーとかタイトル部分の色などを先に選んでしまいます

そしてCSS編集画面に。

/* ------------------- background-color-control ------------------- */

と書いてあるところが上から30%くらいのところにあります

body {
ここが画面全体(カスタマイズ画面の「バックグラウンド」にて配色変更可能)
}
#frame {
ここが記事のところ(カスタマイズ画面の「メインコラム」にて配色変更可能)
}
#sub_a{
ここが右側サイドバーのところ(カスタマイズ画面の「サイドコラム」にて配色変更可能)}
}
#sub_b{
ここが左側サイドバーのところ(カスタマイズ画面の「サイドコラム」にて配色変更可能)}
}

たとえばこんな感じ

/* ------------------- background-color-control ------------------- */
body {
background-color:#FFFFFF;
}
#frame {
background-color:#F0E0D1;
}
#sub_a{
background-color:#CDDAA5;
}
#sub_b{
background-color:#9CD6E9;
}

になってます。これを変更すればいいのです

まずはbodyのところですが

body {
background-color: #FFFFFF;
background-image: url('http://www.xxxxxx.net/kabegami.gif')
}

といった感じで背景画像を指定します。これで(カスタマイズ画面の「バックグラウンド」にて配色変更可能)の箇所に指定した背景画像が並びます。

次に、(カスタマイズ画面の「メインコラム」)のところを透明にします

#frame {
}

としてください、{}のあいだに書いてあるものを消すだけです

一度ここで保存して、変化を確認してみてください。

こんなふうになってると思います。

これでは字が読めません(これは極端な例ですが、背景画像がある以上無地の状態よりは見にくくなっているはずです)

---

ここから先は、このブログにおけるスキンカスタマイズ(CSS編集方法)を具体的に説明します。
各自アレンジしてお使いください。

CSS編集画面をひらいて、一番下にこれをコピペで追加してください。
(一番上とか途中ではダメです、必ず一番下に)

.entry .date{
width:25%;
background-color: #FF9999;
color: #FFFFFF;
text-align:center;
}
.entry .title{
background-color:#ccffee;
padding: 5px;
border: 4px ridge #66cc66;
font-size:x-large;
font-weight:bolder;
color:#FF3333;
text-align:center;
}
.entry .contents{
background-color:#Fefbf5;
padding: 12px;
border: 1px dashed #99cc99;
letter-spacing:1px
}

これで記事題名と記事本文の箇所に関しては背景画像が消えて見やすくなります。ほとんどこのブログと同じになるはずです。

しかし、これだとコメントやトラックバックがまだ背景画像にうもれたままです
書き込まれたコメントもみやすくするには、コメントに対しても背景色等を指定してあげる必要があります。
ちなみに私の場合は

.each_comment{
width:70%;
align:center;
background-color:#ffeeee;
padding:5px;
}

となってます。コメントエリア全体に背景色等を指定するためには
.each_commentではなくて#comment_moduleに指定してあげるとうまくいくかもしれません。

gooブログとかだと、このclassはこの領域　とかヘルプにしっかり書いてあるので非常にカスタマイズしやすいのですがね…。

http://blog.goo.ne.jp/info/blog_css_kozo.html

こういうのアメブロにもほしいです、はい。

CTRL+Eで align=center CTRL+Rで align=right

CTRL+[1-6]

で<P>が<h[1-6]>になるのはこのブログで記事にした のででご存知かもしれません

例：
こんにちは
今日はいい天気ですね
↓CTRL+3

こんにちは
今日はいい天気ですね

これの応用で

CTRL+Eで
<P>が<p align="center">

CTRL+Rで
<P>が<p align="right">

になります、しかしこれを使うときは注意が必要、なぜなら
CTRL+Wでウインドウが閉じられてしまうから

真ん中寄せしようとおもって間違って隣を押すと警告無しに書きかけのものを全て失ってしまいます。

(ちなみに<P>だけでなく<h1>～<ｈ6>でも同様)

ちなみにCTRL+Kでリンク作成。

CTRL+Sで<S>

でもなぜかUとかBとかはきかない
多分もともとのIEのショートカットで割り当て済なのかもしれないですが。

ちなみに<p align="left">は

CTRL+L

わかりにくいので表にしました。

行にある→文字選択してなくても点滅してるカーソルがある行に効果がある

文字選択中→文字選択してる範囲にのみ効果あり、文字選択状態でないときには何もおこらない。

	Ctrl+	行にある	文字選択中
右寄せ	R	○	○
真ん中寄せ	E	○	○
左寄せ	L	○	○
太字	B	×	○
斜め字	I	×	○
下線字	U	×	○
取り消し線	S	×	○
リンク	K	×	○

ちなみにctrl+Jで　p align="justify"

p align="justify" なんてあったっけ…それにあったとしても日本語フォントじゃ効き目なさそうだ…