アメンバー限定記事を書いたら今まで一般記事に適用されていたCSSがまったく効かないことが判明しました。
詳しくはアメンバー限定記事のデザイン（CSS設定）をどうするか？の記事をご参考にしてください。
初期状態ではしばらくこうは見えていたということなんですが…
あれこれ手をつくした今となっては汚く見えてとても耐えられません。
アメンバー限定記事を読むためにアメンバーになってくださる読者の方もいて今更アメンバー限定記事を止めるという訳にもいきません。
ここはエンジニアの端くれらしく技術で解決したいところ…
とりあえずこんな手でPC版だけはCSSが働くようにしてみました。
styleタグは普通はhead内に記述すると思いますが、これをbodyの中に記述します。
そしてCSSを解さないエージェントのためにCSS部分をコメントアウトしておきます。
<style><---
ここにCSSを記述する。
-->
</style>という感じですね。
styleタグはアメブロの禁止タグに指定されていませんので、今のところこれでCSSを効かせることができます。
アメブロの禁止タグ一覧についてはアメブロの禁止タグに気をつけて！を参照ください。
これでアメンバー限定記事：クリックされやすいリンクの張り方は？も他の記事と同じようなデザインで読むことが可能になりました！
どうぞ安心してアメンバーになってくださいね！
ただこの方法でも問題がまったく無くなったわけではありません。
-
あいかわらずスマホではCSSが効かない
-
記事ごとにCSSを設定しているので一括でデザインを修正できない
という問題が残っています。
スマホにもCSSが設定できる日がそのうち来るのではないかと思っていますが、いつになるかは分かりません。
ここを何とかするためにアメブロでビジネスでやっている人は、もうHTMLのタグひとつひとつにstyleを埋め込むという信じられない方法を取っている人が多いです。
HTML/CSSという構造/見栄え分離の大方針に真っ向から対決しているという感じですね。はるなぴももう降参してしまおうかなぁ…
記事ごとにCSSを設定している、というのはもっと問題です。将来アメブロがclass名を変更したりしたら…全記事のCSSを変更しなくてはいけません。
これを避けるには…
CSS部分を外部ファイルとして読み込むという手があります。
<style><!--@import url(CSSファイルのURL);--></style>というふうにするわけですね。
でも、これも大変ですよ。技術を勉強するという意味では面白いかもしれませんが…
お金は…
Amazon S3を使えばほとんどかからない筈。
独自ドメインとレンタルサーバーのセットだと結構お金がかかってしまいます。
HTMLタグに全部styleを埋め込む方式なら将来アメブロがどのようにclass名を変えてきても少なくとも表示が乱れるようなことはないでしょう。
最も低レベルなところで見栄えを指定していくわけですからね。
それを考えるともう降参した方が賢いような気もしてきました。
ビジネスでアメーバブログを使っている人たちも結局そういう道筋を辿ってHTMLタグにstyle埋め込み方式を採用しているのかもしれません。
しかしもしそれを実行するならとても手打ちではやってられません。
秀丸マクロを利用していくことになるでしょう。
最後に今回HTMLに埋め込んだstyleタグとその中身を表示しておきます。
今までに織り込んだ主要なCSSを入れ込んでいます。
ご参考にしていただければ幸いです。
<style type="text/css">
<!--
html {
font-size: 62.5%;
}
body {
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
background: #f1f1f1;
color: #1f1f1f;
font-size: 1.6em;
}
.skin-blogHeaderNav {
background: #f1f1f1;
color: #1f1f1f
}
.skin-blogBody, .skin-blogBodyInner {
background: #f1f1f1;
color: #1f1f1f
}
.skin-bgMain {
background-color: #fafafa;
color: #1f1f1f
}
.skin-entryBody p {
margin: 0 0 20px;
display: block;
box-sizing: border-box
}
.skin-entryBody > h2 {
margin: 0 0 15px;
display: block;
box-sizing: border-box;
font-size: 2.4rem
}
.skin-entryBody > h3 {
margin: 0 0 12px;
display: block;
box-sizing: border-box;
font-size: 2.0rem
}
.skin-entryBody ul {
margin: 0;
display: block;
box-sizing: border-box;
padding: 0 5px;
list-style: disc inside
}
.skin-entryBody ol {
margin: 0;
display: block;
box-sizing: border-box;
padding: 0 5px;
counter-reset: section;
list-style-type: none
}
.skin-entryBody li {
font-size: 1.4rem;
margin: 10px 0;
box-sizing: border-box;
padding: 0 0 0 10px;
text-indent: -10px
}
.skin-entryBody ol li:before {
counter-increment: section;
content: counters(section, ".") " "
}
.toc {
background: #ffffe0;
border: outset thin #ccc;
font-size: 1.5rem;
padding: 20px;
margin: 0 0 20px;
display: block;
box-sizing: border-box
}
.skin-entryBody em {
color: #f00
}
.skin-entryBody strong {
font-weight: 700
}
.skin-entryBody mark {
font-weight: 700;
color: #000;
background: #ffff99
}
.et-content p {
margin: 0 0 20px;
display: block;
box-sizing: border-box
}
.et-content > h2 {
margin: 0 0 15px;
display: block;
box-sizing: border-box;
font-size: 2.4rem
}
.et-content > h3 {
margin: 0 0 12px;
display: block;
box-sizing: border-box;
font-size: 2.0rem
}
.et-content ul {
margin: 0;
display: block;
box-sizing: border-box;
padding: 0 5px;
list-style: disc inside
}
.et-content ol {
margin: 0;
display: block;
box-sizing: border-box;
padding: 0 5px;
padding-left: 5px;
counter-reset: section;
list-style-type: none
}
.et-content li {
display: block;
font-size: 1.4rem;
margin: 10px 0;
box-sizing: border-box;
padding: 0 0 0 10px;
text-indent: -10px
}
.et-content ol li:before {
counter-increment: section;
content: counters(section, ".") " "
}
.toc {
background: #ffffe0;
border: outset thin #ccc;
font-size: 1.5rem;
padding: 20px;
margin: 0 0 20px;
display: block;
box-sizing: border-box
}
.et-content em {
color: #f00
}
.et-content strong {
font-weight: 700
}
.et-content mark {
font-weight: 700;
color: #000;
background: #ffff99
}
-->
</style>