ブラウザ間

GoogleChromeを標準で使用しているため

1_20140828233047824.jpg
このように見えている
しかし「Internet Explorer」で見てみると……

0_20140828233045e7a.jpg
なんとも残念な表示に

そういえば、動作確認すっかり忘れていたなあ、と
早速CSSハック(ブラウザ毎に特定の指定したスタイル云々)を書…ああ…
htmlで毎回css読み込みに行かせているため、修正がなかなか頻繁にできず

と、いうことで今回応急処置で使用したのはこちら

2_20140828233048b8f.jpg
IE8から実装された非常に便利な「ドキュメントモード」
今回はIE9版でレンダリングという形に

難しい事は抜きで
とりあえずheadのすぐ後ろにmeta~~~と記述すると
とりあえずぐっちゃぐちゃなあれこれも見れるようになる
あくまで「とりあえず」

根本的な解決には全くなっていない

ColorBoxの設定_番外

画像ポップアップにColorbox を使用

健気わんこ。2のほうでも「健気わんこ。」と同様の動作が行えるように設定
が、思った動作をしない

とりあえずHTMLを確認

1_20140816200133ec4.jpg
記述は間違えていない様子

0_20140816200131528.jpg
jsも読み込んでいるし……うーむ

ようは赤枠のClassが突っ込まれないといけないのがなぜか入らない
試しにタグに直接突っ込むもやはりポップアップしない
うううううううむ

健気わんこ。
クラスがある

3_2014081620013463c.jpg
健気わんこ。2
クラスがない

4_20140816200136a5b.jpg
理由がさっっっぱり分からず何度も何度も試行錯誤し
ふと目に止まった部分

7_20140816200147fbc.jpg
リンクタグ画像タグサーバーのアドレスが違う

いやいやいや
まさか、と思いながら

5_20140816200137292.jpg
6_2014081620014628f.jpg

これ

根本的にはおそらくスクリプトの読み込み順なのだろうけど
そっちをいじるのはまた今度にするとして

※リンク修正前(アルバムページにリンク)
0_201406241955457c7.jpg

※リンク修正後(元画像にリンク)
0_201406241955457c7.jpg

分かってしまえば本当に簡単なこと
こんなことに何時間費やしたのか

編集方法。

参考サイト:ハカセの研究室

実際の記述は以下。

00_201406221250158cf.jpg
<div>~</div>で全体の範囲
1_20140622125016883.jpg
<p>~</p>で吹出し
2_20140622125018a70.jpg

CSS(※原文ママ)

.gin {
  padding-left:100px;
  background:url(http://blog-imgs-66-origin.fc2.com/x/w/a/xwancox/1.png) no-repeat left top; /*銀行アイコン位置*/
}

.van {
  background:url(http://blog-imgs-66-origin.fc2.com/x/w/a/xwancox/0.png) no-repeat right top; /*ヴァンアイコン位置*/
}
.gin , .van { width:auto; margin-bottom:5px;}

.gin p , .van p {
  position: relative;
  background: #fff;
  display: table-cell;
  vertical-align: middle;
  height: 50px; /*吹出し高さ*/
  /****文字を上下中心に置きたかったため"min"設定無し****/
  border: 1px solid #404040;
  padding:10px;
  width:285px; /*吹出し幅、auto不明*/
  border-radius: 5px; /*吹出し丸み*/
}
.gin p:after, .gin p:before {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.van p:after, .van p:before {
  left: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.gin p:after {
  border-color: rgba(255, 255, 255, 0); /*吹出□*/
  border-right-color: #fff;
  border-width: 10px;
  top: 20px;
  margin-top: -10px;
}
.gin p:before {
  border-color: rgba(64, 64, 64, 0); /*吹出▽*/
  border-right-color: #404040;
  border-width: 11px; /*太さ*/
  top: 20px;
  margin-top: -11px; /*太さ*/
}
.van p:after {
  border-color: rgba(255, 255, 255, 0); /*吹出□*/
  border-left-color: #fff;
  border-width: 10px;
  top: 20px;
  margin-top: -10px;
}
.van p:before {
  border-color: rgba(64, 64, 64, 0); /*吹出▽*/
  border-left-color: #404040;
  border-width: 11px;
  top: 20px;
  margin-top: -11px;
}


実際いじるとしたら赤文字部分くらい。
もし全てのアイコンを右・吹出しを左にしたい場合は以下。

00_20140622214212817.jpg


.gin {
padding-left:100px;
background:url(http://blog-imgs-66.fc2.com/x/w/a/xwancox/1.png) no-repeat left top;
}
.van {
padding-left:100px;
background:url(http://blog-imgs-66.fc2.com/x/w/a/xwancox/0.png) no-repeat left top;
}
.gin , .van { width:auto; margin-bottom:5px;}
.gin p , .van p {
position: relative;
  background: #fff;
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid #404040;
padding:10px;
width:285px;
border-radius: 5px;
}

.gin p:after, .gin p:before, .van p:after, .van p:before{
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.gin p:after, .van p:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 10px;
top: 20px;
margin-top: -10px;
}
.gin p:before , .van p:before{
border-color: rgba(64, 64, 64, 0);
border-right-color: #404040;
border-width: 11px;
top: 20px;
margin-top: -11px;
}

アイコン以外は全て共用で使えるためこれで。
pで割り振らずとも"a"でも"b"でも被らないものであればお好きなもので。

対話式CSS

ブログの更新


http://xwancox.blog.fc2.com/

若干いじりテンプレートに組み込み。

00_20140615181647782.jpg

1.レイアウト

半年前
CSSやHTMLの知識が一切なく、1から組み立てる力はありませんでした
そこで共通テンプレートからいくつか試着させ"nude"をダウンロード

ここから少しずつ編集をしていきます

[2] 左右のカラムを反転させたスタイルが用意されています。
反転させたものを使う場合は、

<body class="fixed-on shift-on">

と変更してください。


以上のように記述されていたため、どちらがいいだろうと考えました
もちろんこのままでも十分シンプルで見やすいデザインです
[ 続きを読む ]

参照サイト1:FC2テンプレート用 変数一覧

00_20131121104340746.jpg
一部の投稿者に対応した背景画像がつくようになりました。
投稿者名(<%comment_name>)をクラス名に設定するだけの安易な方法です。

一方で。
投稿者名を使った「なりすまし」が安易に行えてしまうという欠点があります。
周知できるのであればトリップ(<%comment_trip>)をオススメします。

04_20131121102619d8d.jpg
[ 続きを読む ]

コメント-プラグイン-

参照サイト1:FC2公式プラグイン概要
参照サイト2:FC2テンプレート用 変数一覧

コメントを新しい順に表示してくれるもの。
最初に入っている公式プラグインは本当に必要最低限のもののみ。

さて、そこでHTML/CSSを少しだけいじります。
中身と外見を変えてみましょう。

[ 続きを読む ]

簡易メニューの固定。

参考サイト:「グラフィックデザイナーのためのCSSレイアウトメモ」

リンクしているブログのRSSを追加したんです。
これで気になるあの子やこの子の更新がすぐに見えちゃう。

0_201311071611426c7.jpg
が。
プロフィール、カテゴリ、アーカイブ、コメントと。
非常に長くなってしまいRSS(下の方)に行くのが少し手間。

そこで実装したのが、右に出ているいわゆる「フローティングメニュー」と呼ばれるもの。
[ 続きを読む ]

タブメニュー。

プロフィールチャンネル用に。
しかし、クリックの必要があるため微妙な面も。


12345

1
2
3
4
5



参照サイト:All About(ページ移動せずに内容を変更するタブを作る方法)
CSSのみ変更。

おなじみ「position」を使用してペコペコ動きます
背景「#fff」のため手抜き部分が多く、色有りの場合はもう少し記述が必要。
[ 続きを読む ]

使用テンプレート:nude
使用ブラウザ:Google Chrome

よく見かけるのがこちら。

0_20130925095408dd0.jpg

(赤)画像が大きすぎてきちんと表示されてないもの。
毎回サムネイルで書く、で対応することも可能です。

が。
今回は自動縮小・中央寄せ・飾り等入れてみましょう。

※FC2ブログのサムネイルについて※
初期は横縦Max170になっており、変更する事が可能。
[環境設定の変更]→[ブログの設定]→[投稿設定]→[サムネイル作成のサイズ]

以下CSSの変更。
[ 続きを読む ]

Q.なぜ色がついているの。
A.加工しているから。仕様ソフト:SAI

1.SSを用意。
 この際可能な範囲で背景が暗い部分を選ぶ。

0_2013092220280733d.jpg

[ 続きを読む ]



最新記事