[↑PageTop]
ブログ検索 タグ検索
検索タグ:「css」を含む記事は見つかりませんでした。
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2011/02/09 19時頃

AutoPatchWork に対応してみる

AutoPatchWorkを使い始めて、随分経つのですが、自分のブログをちゃんと対応させました。
これで、AutoPatchWorkを使用していても、読みやすくなったと思います。

実際のところ、「AutoPatchWork」は、「AutoPagerize」のクローンで、「AutoPagerize」が持っているページ毎の設定を利用できます。
FC2ブログの設定もその中に書かれているので、対応とかしなくても、使える場合も多々あります。

自分のブログの場合は、次のページのプラグインの領域まで読み込まれて観にくいとか、表紙の下に記事が読み込まれて観にくいとか、個別記事のページでは次が読み込まれないとか、色々とおかしな点があったので、ブログのテンプレートを修正して、「AutoPagerize」側の、現在のFC2ブログ対応の定義で、気持ちよく動くようにタグを追加したり、IDを変更したりして、対応してみました。

記事の部分だけが、ちゃんと読み込まれるようになって、スッキリです。


AutoPagerizeクローンのツールを使っていない人には、なんの変化もない変更ですが、使っている人は読みやすくなったはずです。

AutoPatchWorkでは、ページ境界に挿入されるページの区切りにも、各要素にちゃんとクラス名が与えられていたので、cssで装飾も出来ますね。
<div class="autopagerize_page_separator_blocks">
<hr class="autopagerize_page_separator"/>
<p class="autopagerize_page_info">
<a class="autopagerize_link" href="--URL--" number="--No.--"/>
</p>
</div>

名前を見る限り、「AutoPagerize」から受け継いでいるっぽいから、他のクローンでも対応出来るのかな?

試していないので、その辺りは不明。
2010/09/27 20時頃

Next Page Link

ページナビを導入して、移動しやすくなった気がする。

そうなると、更にさわりたくなる悪い癖が出る。(こうして、さんざん触って結局もとに戻す事が何度有った事か・・・

今回は、[前ページ] と、[次ページ]へのリンクを、ブログの表示範囲外に常に固定位置で表示してやろう!という変更。

ページの上部へ移動する [↑PageTop] を表示しているから簡単さ!と思っていたが、それが甘かった・・・。

実は以前の[↑PageTop]は、画面の左下の位置からの絶対位置指定で表示されていた。
要するに、画面の幅がブログの幅より狭くなった場合、ブログの中にめり込んで表示されていたのだ。
再下段だったため、あまり気にならなかったので、そのまま採用となった。

しかし、今回は、画面の中央。画面の幅が狭いとブログにめり込み見づらい。
幅が広すぎると、画面の端っこに行ってしまって使いづらく意味がない。

画面の左上からの絶対位置では困るのだ。
しかし、位置を固定して表示するための css 設定 position : fixedでは、親となるブロックのpositionが問題となってくる。

今回は、ブログ全体を覆っているブロック要素のからの相対位置指定をしたいから、ブログ全体を覆っているブロック要素が親となるのが一番都合がよい。
しかし、その要素は、センタリングをしたい関係で、positionは、staticとして、要素の幅(width)を指定して、左右のマージン(margin)をAutoとして、常に表示領域の中央になるように指定している。

この条件では、画面の左上が基準となり、親BOXの左上からの相対位置でオブジェクトを指定出来ない。

これをなんとか、騙したいというのが今回の目標。
第1案:position : fixed の 画面幅一杯の子BOXを作り、その中に、ブログの幅より幅広い孫BOXをセンタリング配置して、孫BOXの左右にリンクを置く BOXを配置。
 これは、名案だと思った。
 しかし、一番上に表示してしまうと、透明のBOXに隠された部分は、見えるけどクリックできない領域となってしまう。

それならば!と、上記のBOX全体を z-index : -1 で、後ろに沈めた。
 これは、名案だと思った。
 ブログの操作不能領域も無くなった!やった!
 しかし、肝心の左右に配置したリンクが操作できない。背景の後ろに沈んでしまって操作不能らしい。

それならば、全てのBOXを、z-index 2 に持ち上げて、上記のBOX全体を z-index : 1 に配置したらどうなのだろうか?
 これは・・・、面倒なのでパス。

この案は、ダメだ!


あれこれ試しているときに気が付いた。
topだけ指定して、leftを指定せず、margin-leftだけ指定したら、どこに配置されるの?
なんと、親要素の左側からの相対位置指定をしたように表示された。
とりあえず、普段使っている、Opera10.xx と、IE 7 で、正しく表示されているのを確認した。
自分用だからこれでいいや。

cssの規定上は、どんな解釈が正しいのかな?
詳しく知りたいところです。
2009/02/07 20時頃

cssで外部リンクにマークをつける

外部linkマーク外部へのリンクにこんなマークが付いているのを時々見かけます。
確かに、マークが付いていてクリック前から外部リンクだ!って解ればちょっとうれしいですよね。

でも、リンク全てではなく、外部リンクのみという判断をcssのみで実現できるのでしょうか?
外部リンクに、いちいち手動でタグ付けするとか、そんな愚かな事はしたくないんです。

調べてみると、CSS3では、[att*=val] [att^=val] [att$=val] という、属性セレクタが追加されてました。
CSS 3のセレクタ解説:属性セレクタ
属性「att」に、値「val」を含むタグを、指定出来るようです。
CSS 3 で使えるようになる属性セレクタですが、IE 7, Firefox, Safari, Opera などは、既に実装済みのようです。うん、IE6ユーザーごめん。今回はIE6は無視します。

さて、では、外部リンクはどのように表現したらいいのか?
まず、確実に解る場合。
相対アドレス指定 = 内部リンクですね。

しかし、絶対アドレス指定だからと言って外部リンクで有るわけでは有りません。
内部のアドレスを絶対アドレス指定すれば、絶対アドレス指定でも内部リンクです。

つまり、
絶対アドレス指定 かつ 内部のアドレスではない = 外部リンク
と言う事です。

これを、属性セレクタで表現すると[href^="http:"] と言う事ですね。
リンクアドレスを示す 「href」属性が「http」で始まっていれば絶対アドレス指定と言う事ですね。
論理演算は表現出来ないようなので、「href」属性が「http://内部アドレス/」で始まっている物は、設定した値を消す事で表現します。
FC2ブログの場合は、ブログのアドレス + ファイルサーバーのアドレスの二つを内部アドレスと言う事にします。

あとは、:after疑似要素を使って、画像を後ろにくっつけてやれば、OKでしょう。
リンクが青色なので、わかりやすいように、赤い色のマーク「外部linkマーク」を使ってみました。

a[href^="http"]:after {
content: url("http://blog-imgs-24.fc2.com/f/e/r/ferio68k/link.gif");
}
a[href*=".fc2.com/f/e/r/ferio68k/"]:after,
a[href="http://ferio68k.blog71.fc2.com/"]:after {
content: '';
}

■テスト
外部リンク:ダレット:MHF公式サイト
内部リンク(ブログ):ブログTOPページ
内部リンク(ファイルサーバー):外部リンクマーク(画像ファイル)
画像リンク(ズーム)モンスターハンターフロンティアオンライン ロゴ

うん、出来てるみたいだな。

今回は、ブログの記事の中に< style >タグを書き込んで実現してますので、 デザインなどを無視した強引な画像&タグ指定ですが、ちゃんと考えればそれなりの効果が出るはずです。 背景は bodyタグで、全体に固定して貼り付ける。
body{
background-image: url(http://blog-imgs-24.fc2.com/f/e/r/ferio68k/bg1.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}

その中に、少し加工した画像を、同じ位置に固定して貼り付けたBOX要素を指定して、その中にコンテンツを書いてやれば、のぞき窓の出来上がり。
今回は、磨りガラス越しにみたような画像にしてみました。半透明っぽく見えるはず。

div#menu,           左のメニュー
div#secondary-column,   上のメニュー
div#main{             右のメインコンテンツ 各タグが、それぞれの部分を覆っている
background-image: url(http://blog-imgs-24.fc2.com/f/e/r/ferio68k/bg2.jpg); ←違うのはこの一行のみ
background-repeat: no-repeat;
background-attachment: fixed;
}

・・・

bg1.jpg
http://blog-imgs-24.fc2.com/f/e/r/ferio68k/bg1.jpg

bg2.jpg
http://blog-imgs-24.fc2.com/f/e/r/ferio68k/bg2.jpg

この記事を含んで、記事が表示されると、有無を言わさず背景が変わっちゃいます。
強引なサンプルで、見にくいかと思います。ごめんw
日記に付けているタグの種類も増えてきて、HP上部のメニューに組み込んであるタグ一覧も行数が増えたりして見にくくなってきました。

そこで、少し変更しました。
・タグの使用回数順でソート表示されていたタグの順番を、最終使用日順に変更しました。
・タグの使用回数が1回の物は、上部のメニューには表示されなくしました。
・Topページや、画面左メニュー内のタグ一覧は、全て表示されています。

2008/01/01 00時頃

css 自分用メモ

追加スタイル


■引用
<blockquote>~</blockquote>
blockquote テスト



■アスキーアート
class="aa"
※下のAAのズレない環境が標準です。
|.     |\|/ |     |.   |
|.∧∧ |/⌒ヽ、| ∧_∧. | ∧∧ |
|(,,゚Д゚)||,,゚ Θ゚)|(; ´Д`)|(=゚ω゚)|

<div class="aa">~</div>指定無し
※下のAAのズレない環境が標準です。
|.     |\|/ |     |.   |
|.∧∧ |/⌒ヽ、| ∧_∧. | ∧∧ |
|(,,゚Д゚)||,,゚ Θ゚)|(; ´Д`)|(=゚ω゚)|



■枠付き領域
class="box_blue"
<div class="box_blue">~</div>



■複数のクラスを同時に指定する。
例)アスキーアート + 枠付き領域
<div class="aa box_blue">
複数のクラスを適応するには、class="クラス名1 クラス名2" の様に、半角スペースで区切って、複数記述する。
※下のAAのズレない環境が標準です。
|.     |\|/ |     |.   |
|.∧∧ |/⌒ヽ、| ∧_∧. | ∧∧ |
|(,,゚Д゚)||,,゚ Θ゚)|(; ´Д`)|(=゚ω゚)|



■複数列 div
<div class="float">
<div class="box4">1列目</div>
<div class="box4">2列目</div>
<div class="box4">3列目</div>
<div class="box4">4列目</div>
</div>

box2(260px)2分割用
box2
box2

box3(173px)3分割用
box3
box3
box3

box3_2(346px)1:2分割用
box3
box3_2

box4(130px)4分割用
box4
box4
box4
box4

box4_3(390px)1:3分割用 が有ります。
box4
box4_2


表示例では解りやすいように、box_blueも同時に指定しています。



■フォントサイズ
class="SS"
SSサイズのフォント

class="S"
Sサイズのフォント

class="L"
Lサイズのフォント

class="LL"
LLサイズのフォント





■画像回り込み指定領域
<div class="image_float">~</div>
<img src="http://blog-imgs-24.fc2.com/f/e/r/ferio68k/MHFSS_LO_000s.jpg" border="0" />
モンスターハンターのロゴ<br>
&lt;br&gt;は改行のみ<p>

&lt;p&gt;で回り込みを解除

<div class="image_float">~</div>内では

モンスターハンターフロンティアオンライン ロゴ
モンスターハンターのロゴ
<br>は改行のみ

<p>で回り込みを解除




■css ではないけど、このテンプレートで使える Javascript

【非表示に出来る Box】
<a href="javascript:IDdisp('ID_1')">【非表示に出来る Box】</a>
<div class="box_blue" id="ID_1(重複させてはならない)">表示内容</div>



【最初から非表示 Box】
<a href="javascript:IDdisp('ID_2')">【最初から非表示 Box】</a>
<div class="box_blue" id="ID_2(重複させてはならない)">表示内容</div>
<script type="text/javascript">IDdisp("ID_2");</script>



HOME : TOP

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。