読者ボタンを変更する

テーマ:

サイドバーにある読者登録用のボタン。

通常は選んだスキンのものがそのまま表示されていますが、CSSをいじることで自分の用意したボタンに変更することが可能です。

ちなみに、今このページの読者ボタンは急ごしらえのへなちょこボタンになってます。
(本来はネコのスキンなので、黒いボタンです)

こんな風に読者ボタンを変えたい場合は、まず画像を用意して、CSSの編集で一番下に以下のtipsを自分用にカスタマイズしてコピペします。


----------ここからtips----------

#readerList dl dt a {  /*--ここは通常編集は必要ありません--*/
display: block;  /*--重要です。絶対に消さないでください--*/
width: 150px;  /*--使用する画像の横幅に--*/
height: 23px;  /*--使用する画像の縦幅に--*/
text-indent: -9999px;  /*--重要です。絶対に消さないでください--*/
text-decoration: none;  /*--重要です。絶対に消さないでください--*/
background: url(使用する画像のURL) no-repeat left top;
}

----------ここまでtips----------

ピンクの文字の部分は画像に合わせて修正する必要がある部分です。

このtipsを挿入したら、プレビューで確認して保存しましょう。


【ちょっと解説】
このCSSで何をしているかと言うと、本来表示されるはずの画像を絶対表示されないほど遥か遠い場所にすっ飛ばして、代わりに用意した画像を背景に指定することで、見た目には画像がさし変わったように見せかけています。

AD

cssはいろいろ出来て楽しいものですが、ブラウザ(インターネットエクスプローラーとか)やOS(WindowsとかMac)の違いで表示に差異が出てくる、ちょっと扱いの難しいものでもあります。

この場合悪いのは主にブラウザで、現在CSSをきちんと正確に理解して表示することができないんです。

一人でも多くの人にキッチリみてもらいたいなぁ、と思ったら、ちょっとこんなことを試してみましょう。


FIrefoxにも対応しよう
Firefoxとは一部では話題の無料のブラウザです。近頃シェアがじわじわ増えてきました。
そのFirefox、基本の表示フォントは明朝体です。別に設定を変えればゴシック体になるんですが・・・変えなくて済むならそのほうがラクです。
そこでFirefoxでも、ゴシック体で表示されるように、cssでフォントを指定しましょう。


body{   /*body以外にhtmlでもOK--*/
font-family: Osaka,'MS Pゴシック',sans-serif;
}


フォントファミリーではフォントの正確な名前さえ記述されていれば、どんなフォントでも指定できます。
前にあるフォントほど優先され、そのフォントがなければ次のフォント、それもなければさらに次、というようになります。
人のパソコンにはどのフォントがあるかわからないので、最後に「sans-serif」といれておきます。
そうすると、ブラウザに設定されているsans-serifフォントが使われます。
これは意図的にいじらなければ、通常ゴシック体のフォントが指定されているので、Firefoxでもゴシックで表示されるようになるわけです。


MacIEに対応しよう
MacIEとは、Macintoshのインターネットエクスプローラーのことです。
同じ名前でもWindowsのそれとはまったく違う挙動を見せます。
cssの中に「Hides from IE-mac」とあるのは、このMacIEには読ませたくない(読むとおかしな表示になる)部分です。
このMacIEの大きな問題は、背景画像の指定です。

通常背景画像は

('----画像のURL----')

このように表記します。
ところが困ったことに、MacIEではこの表記では画像を読み込めなかったりします。
そこで、MacIEでも読めるようにちょっと表記を変えてあげます。

(----画像のURL----)

ちょっとの違いなのでわかりにくいと思いますが、URLを囲んでいた「’」をとっています。
これでMacIEでも背景画像を表示できるようになりました。


別に読むことはできるけど、ちょっとしたことで読みやすくなったり見せたいデザインが見せられたりすると、ちょっとうれしいかなぁ、という書き手ゴコロ・・・。

AD

cssカスタマイズ時に一番悩むのが、この部分はどのセレクタで設定すればいいのか?てことです。

とりあえず前に一度グラフィカルにしてみようと書いたものもあるんですが、それだと今ひとつわかりにくいというか、把握しにくそうだったので、今回は直接htmlで構成してみました。

cssカスタマイズ用アンチョコ

上記のファイルを見ると、どこにどのセレクタがあるかちょっとはわかりやすく・・・なってるかな?

赤の太い線がid、緑の細い線がclassです。

まだ不完全なので、今後バージョンアップしていきます。(idなのに緑の線とかあるし・・・)

というか、実際見てもらうとわかりやすいんですけど、何のために存在してるのかイマイチわからないクラスもありますね・・・

#firstContentsArea とか。

サイドバー飛び出してるし。

ソースレベルでの不備があるような気がします。
検証してないんで、ちょっと不確実ですけどね。

--------------------------------

24時ちょっと前

とりあえず今入ってる要素だけですが整備しました。

背景色がついているところは同じ色同士で同じclassが指定されています。

個別に指定したい場合は、idに指定するか、idとclassを指定します。

AD

なぜかPタグで改行扱いになるリニュ後のアメブロ。

おかげで、空白行をはさむのにあれこれと面倒なことになっています。

そもそもPタグは段落をあらわすタグなので、改行したら次のP(段落)、という考え方は非常に正しいのですが、なぜか本来のPタグなら持つはずの前後の空白行がないので、なんだかややっこしいんですね。

改行をたくさんいれるのも、brならまだ許せるけどPタグで半角スペースを囲むなんてソースとしてヘボすぎる!とか文句を付けてみたりしたくもなります。

そこで、Pタグに1行空白を持たせるようにcssを編集して、無理やりファイルの整合性をとることにします。

cssを見ると、Pタグの前後をつめているらしい記述は見当たらないので、アメブロの神の力で詰められていると解釈し、新しくPタグの記述を付け足すことにしました。

 

****************

p {
margin-bottom: 1em;
}

****************

 

こんなカンジ。

これで1em(emは文字の幅をあらわす単位です。1emは1文字分の幅になります)の空間がPタグの下に入ることになりました。

普通にEnterを押せば自動的に1行分の空白ができ、Shift+Enterなら行間のつまった状態で改行されるようになります。

とはいえ、これをやっちゃうと、投稿前のプレビュー機能がまるで役に立たなくなってしまうので、常に1行空白があるような文章を書いていて、改行2回ずつ押すのは面倒だとか、「私はweb標準にできるだけ準拠したファイルを生成したい!」とかマニアックな目標でもない限り、うっかりやっちゃわないように気をつけてください。

というかこれやっちゃうと不便かも(^^;

MyClipの表示を調整する

テーマ:
とりあえず表示はさせたものの、クリップとクリップの間が詰まりすぎてて見にくいなぁ・・・と思ったので、クリップの間隔を少しあけてみることにしました。

まずMyClipの表示設定(Pro)

***************************

<div class=myclip-main>
<div class=menu_title>気になるニュース</div>
<CLIPS max=5>
<div class=myclip><font color="#ff0000">・</font>{TITLE popup=comment maxchar=50}{NEW second=7200 text=<font color="#0000ff">☆新着</font>}</div>
</CLIPS>
</div>

***************************

オレンジ部分を付け足します。


次にアメブロのcss編集を開いて、適当なところに

***************************

.myclip{
margin-bottom: 8px;
}


***************************

という指定をまるごと追加。

これで各クリップの下に8pxの空間ができました~。


ちなみに、あまりこだわらなければcssを編集しなくても

***************************

<div class=myclip-main>
<div class=menu_title>気になるニュース</div>
<CLIPS max=5>
<div><font color="#ff0000">・</font>{TITLE popup=comment maxchar=50}{NEW second=7200 text=<font color="#0000ff">☆新着</font>}</div><br />
</CLIPS>
</div>

***************************

とするだけで、各クリップの下に1行空白行を入れることができます。

/*本来ならリストタグを使うのが正しいんですけど、どうあってもリストタグがうまく入れられないようだったのでdivタグで代用しました。*/
MyClipの表示も、cssでコントロールすることが可能です。

まずはあめまにゅの説明をみて、MyClipをブログに設置。

次にのサイトへ移り、表示設定を表示。
右上のあたりにある「設定方法をProに変更する」をクリックし、
Proに変更します。

すると「Clipフォーマット」というところに

*****************

<div class=myclip-main>
<CATEGORIES id=*>
<span class=myclip-category>{CATEGORY}</span><br />
<CLIPS max=20>
{TIME} {TITLE popup=comment maxchar=50}({CLIP_COUNT link=on}) {NEW second=7200 text=<font color="#ff0000">new!</font>}<br />
</CLIPS>
<br />
</CATEGORIES></div>

*****************

こんな表示があります。
とりあえず、パラメータの説明はおいといて、
他のプラグインと同じようにするため、タイトルとクラス指定をいれます。

*****************

<div class=myclip-main>
<div class=menu_title>気になるニュース</div>
<CATEGORIES id=*>
<span class=myclip-category>{CATEGORY}</span><br />
<CLIPS max=20>
{TIME} {TITLE popup=comment maxchar=50}({CLIP_COUNT link=on}) {NEW second=7200 text=<font color="#ff0000">new!</font>}<br />
</CLIPS>
<br />
</CATEGORIES></div>

*****************

これだけ。

これだけの作業で他のプラグインと同じようにみせることができちゃいます♪


*ちなみに細かいパラメータ表示はEasyモードで先に設定してから、設定を維持してProに変更するとわかりやすくてラクです。

広告を非表示にできる、ということは「悪のカスタマイズ」(1回目)に書いたとおりですが、「position」というプロパティを使うともうちょっと面白いことができました。


-------------------------------------------------------------
その1:あるセレクタに下記の指定を書き足すだけで広告が画面外に。
-------------------------------------------------------------

position: absolute;
top: -1000px;

広告の長さにもよりますが、これはそのセレクタのいる箱の一番上を起点にさらに1000px上に配置するという指定です。
当然画面から消えてしまいますが、アメブロ側は想定していなかったようで、アメブロ側のcssに邪魔されることもありませんでした。



-------------------------------------------------------------
その2:消すのはかわいそうなので、下に配置する。
-------------------------------------------------------------
position: absolute;
top: 100%;


これはセレクタのいる箱の一番下に配置するという指定で、これをいれるとサイドバーの設定をまるっきり無視して、サイドバーの一番下に配置することができます
同じプロパティなので、これも邪魔されずにできます。



消すのはともかく、下に配置するのは規約違反かどうか微妙な部分がありますが、禁止事項の「5) 本サービスの運営を妨害する行為 」および「6) 本サービスの信用を失墜、毀損させる行為 」あたりに抵触しそうなので、実行する人は自己責任でお願いします。



ちなみにこの記事自体が6に抵触しそうですが。
ユーザーに広告周りの表示をいじらせて消せること自体がすでに抵触してると思うので、アメブロには広告表示について根本的に見直してほしいと思います。

*広告までイメージにあわせたいというユーザー心理に応えてくれるのはうれしいんですが、それならそれで何があろうと絶対動かせないようにしておかないとダメなんじゃないかなぁ。

コメント部分を飾る

テーマ:

以前からコメント部分が読みにくいなぁ、と思っていたので、ちょっと読みやすく改造してみました。

コメントがどこからはじまってどこで終わるかをわかりやすくするため、コメント同士の感覚をあけ、タイトルに色をつけることに。

ついでに、ひとかたまりだとわかりやすくするため、左側に細いラインを引くことにしました。

コメント関係の指定はこんな具合。
太字部分は新規につけたした部分です。

/* ----------------------- footArea ----------------------- */
/* -------------- font-information -------------- */

.each_comment {
margin-bottom: 20px;         ←次のコメントとの間隔
border-left: 1px solid #ffdddd;  ←コメントの左側のライン
}

#comment_module .label {
color: #660000;           ←文字色
font-weight: bold;
background: #ffdddd;       ←背景色
}

.comment_body {          ←このクラスの指定をつけたし
padding-left: 3px;         ←コメント文章の左の余白
padding-right: 3px;        ←コメント文章の右の余白
}

.comment_footer {
margin-top: 5px;
padding-top: 5px;
border-top: 1px dashed  #996666; ←点線の色
text-align: right;         ←右揃いに

}


.comment_footer/*comment_module*/の部分に

#comment_module .comment_footer {
padding-top: 5px;
border-top: 1px solid #666666;
}


と、すでに指定されていますが、これはまるっと削除してしまいます。

最後にいつもどおりプレビューして保存。
*最初の画面ではコメントを見ることができませんが、コメントを見る画面に移動すればプレビューできます。


これでタイトルに色がつき、フッター部分は右寄せになったので、だいぶメリハリがついて読みやすくなりました。


************************
4月13日追記

#comment_module」を追加。
こうしないとトラックバックの部分まで影響が出てしまいました・・・。
こまったクラス定義です。

2種類の背景を使う

テーマ:

左にならんだビーズのラインと、右上の花の壁紙はそれぞれ違うファイルです。

というわけで2種類の背景を使って、デザインの幅を広げてみましょう~。

まず用意するもの。

●ベースにひくための画像
 これは横長・縦長・敷き詰めるタイプなんでもOKです。
 このページだと、左のビーズのがこれです。

●上にのせる画像

 ベースの画像とぶつからない、透過済みの画像、
 もしくは四角形の画像にしましょう。

●外部から呼び出しOKなサーバ
 アメブロの画像アップロードで勝手にリサイズされてしまうときは、
 外部呼出しのできるサーバを借りましょう。

画像が用意できたら、cssを編集します。

今回いじるのは

/* ----------------------- common ----------------------- */

にある、下の3つ。

body#mainIndex {
color: #444444;
font-size: small;
line-height: 130%;
margin: 0;
padding: 0;
background: #ffffff url('ベースになる画像のURL') repeat scroll;
}

#frame {
text-align: center; ←body#mainIndex にあった指定をここにカット&ペースト

background: url('上にのせる画像のURL') no-repeat scroll 100% 0%;
}

#subFrame {
margin-right: 5px;
width: 88%; ←#frameにあった指定をここにカット&ペースト
margin-left: auto; ←#frameにあった指定をここにカット&ペースト
margin-right: auto; ←#frameにあった指定をここにカット&ペースト

text-align: left; ←#frameにあった指定をここにカット&ペースト
}



簡単に背景の指定の説明を。
--------------------------------------------------------
background: #ffffff url('ベースになる画像のURL') repeat scroll;
--------------------------------------------------------
これは
ベースになる画像を繰り返し表示し、スクロールされるのと一緒に動く
という指定です。
もし、スクロールしても画像は常に一定の場所に表示されたままにしておきたければ、「scroll」の部分を「fixed」にしましょう。

--------------------------------------------------------
background: url('上にのせる画像のURL') no-repeat scroll 100% 0%;
--------------------------------------------------------
こっちは
上に載せる画像を繰り返さず、右上に配置してスクロールされるのと一緒に動く
という指定です。
配置する場所を変えたいときは「100% 0%」の数値を変更しましょう。
この数値は「左端からの距離 上端からの距離」の順番で、マイナスの数値も指定できます。
また、単位にはpxなども使えます。


ベースとのせる画像の組み合わせ配置パターンはたくさんあるので、いろいろ試してみてください♪


現在の私のcssはこちら

基本的に背景に画像を使っているところ以外は「background」の指定を全部削除しています。

cssを編集する上で、そのページにいったいどんなセレクタがあるのかというのは重要なポイントです。
というか、これがわからないと大変な苦労をすることに。

まだまだ不完全ですが、
おおまかな構成を画像にかさねてみました。


こちら


多くのセレクタを削っているので、
これでは情報がたりなすぎますが、
主にいじりたくなりそうなポイントはだいたいこのあたりじゃないかと。
役に立つか立たないかは・・・立たなそうだなぁこれは。


でもこうしてみると良くわかりますが、
サイドバーの「contents」と、
メインの「contents」は違う指定ができるのに、
同じ名前がついているという大きな問題
があります。

いかにセレクタ名を練っていないかがバレてしまっているわけですが・・・。

こんなひどい状態じゃなれた人でもcssを把握するのが大変ですよ・・・。