最近絵の記事が全くない御堂です。

てめぇ本当に絵描か?

それはさておき、Chromeの未認証サイトを非推奨にする動きが本格的になりまりましたね。

当サイトにも連絡が来てました。

なのでいい機会ですし近々SSLを導入しようと思います。

ただレンタルサーバーの方がHTTP/2に未対応なのでそこの恩恵はまだ無いです(対応予定のアナウンスはあるのでそのうちなると思いますが)

とりあえずはChromeにて『保護されていません』となる対策に収まりますね。

ついでにPHPも7に切り替える予定なのでそちらの面では多少サイトの表示が速くなるかもしれません。

まぁ、この記事を書いてる時点ではまだ作業してないので近々するよという報告だけです。

 

Ps.最近ブログ書かなすぎて文章構成おかしい。……おかしいのは前からか

今までの記事を統合しました。以後はこちらに追記していきます。

MENU

floatの親要素の高さが消失する対処

<div class="hoge">
	<div class="left">左にfloatさせるよー</div>
</div>
.hoge {
	overflow:auto;
}

.left {
	float: left;
}

floatの親要素にoverflow: auto(or hidden);でもふっかける。

ブロック要素での縦に中央表示

要素を縦に中央表示させたくて下記のようにさせると思いますが、実はこれdivやpなどのブロック要素には機能しませんのでその対処。

hoge { vertical-align: middle; }
vertical-align: middleを強制的に機能させる

sample

sample

hoge {
	height: 100px;
	vertical-align: middle;
	display: table-cell;
}

display: table-cellを追加するとvertical-align: middleが機能します。

ただこれには下記のようなデメリットも存在します。

  • すでにdisplay属性を使用してしまっているのでtable-cell以外の値を使用することができない
  • margin属性が機能しないため余白を開けることができない(paddingは内側に余白を設けるため代替にはならない)

まぁどちらも更に一つ階層増やせば対応出来ますが、ソースに無駄が……

 height要素と同じ値のline-heightを設ける

sample

 hoge {
	height: 100px;
	line-height: 100px;
}

heightとline-heightに同じ値をふっかけてやると縦に中央表示されます。

ただしこちらにもデメリットが存在します。

  • 必然的に1行でなければならない

まぁ2行にしたら2つにline-heightがかかってしまいますからね……

※sampleでは元々のCSSファイルの関係上少し別のコードになっています。

heightを指定せずに上下に余白を設ける

sample

sample

hoge {
	padding: 36px 0;
}

上下のpaddingで高さを調整する……というやり方なのですが、marginも機能するし複数行も機能する。中身が動的でない限り最適な気がしなくもないのですがなにせ調整がめんどくさい……

上記のサンプルを見ても分かる通り、中身のフォントサイズやboaderがあるときのその数値を考慮してpaddingの値を入れないといけないので非常にめんどくさいです。

中央寄せで字間を調整している際の注意点

letter-spacingで字間を調整する際に中央寄せや右寄せをしている場合は注意が必要です。

実際にやってみればわかると思いますがletter-spacingのみを指定していると正常には表示されません。

その場合は同様の値をtext-indentに入れてやれば解決します。

ダメな例:左にずれている

ABC

<div style="width: 150px; border: 1px solid #000;">
    <p style="letter-spacing: 1em; text-align: center;">ABC</p>
</div>

良い例:ぴったり真ん中に

ABC

<div style="width: 150px; border: 1px solid #000;">
    <p style="letter-spacing: 1em; text-indent: 1em; text-align: center;">ABC</p>
</div>

要はletter-spacingで字の"後"に余白を入れているので最後の字の後にも余白が入っているため、中央表示させようとするとその余白も幅として認識されるため位置がずれるです。なので文字列の最初にも同じだけの余白を入れて文字列の前後の余白を同じにし位置がずれないようにしているのです。

ページ内リンクでヘッダーに隠れる対処

ヘッダーなどが固定化されている場合、ページ内リンクでリンク先に飛ぶと上部がヘッダーで隠れます。

対処法としてはリンク先のID(css_hoge)に下記のCSSを適用させることで位置をずらすことができます。

[id^="css_"] {
	padding: ヘッダーの縦幅px 0 0;
	margin: -ヘッダーの縦幅px 0 0;
}

freoのページ送りナビゲーションって初期だと前のページと次のページのみなんですよね。

なので自分のところで使っているのを公開しようかと思います。

ちなみに自分の他にも数名の方々が同様にページ送りナビゲーションのテンプレート等を公開しているのでそちらも探してみるといいかもしれませんよ。

表示形式

このブログと同じ形式です。

ダウンロード

DL:page_navi_1.1.2.zip

設置方法

1.page_navi.htmlをheader.html等がある箇所にアップロードする。

2.各htmlのページ送りナビゲーションがある部分を{include file='page_navi.html'}に置き換える。

CSSの一例

/*IEは未対応です*/
.page_number {
	padding: 5px 10px;
	margin: 0;
	text-align: center;
	display: -webkit-box;
	display: -moz-box;
	display: box;
}

.page_number li {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
}

謝辞

freoの作者さん(ないとさん)

素敵なプラグラムを作っていただきありがとうございます。この場を借りて改めて感謝します。

Notes

2014/01/04
ver.1.1.2 カテゴリーページで正常に送れない現象を修正
2013/06/18
ver.1.1.1 管理者権限時に管理画面以外でも管理用ページ送りが機能してしまう現象を修正
2013/01/23
ver.1.1.0 管理画面でも動作するように調整
2013/01/02
ver.1.0.0 webで掲載していたものをテンプレートとして使いやすいように修正して配布形式に変更

ちまたで人気の肝これ……なんか違う。そう艦これ。一発変換で肝がでるってどういうことよ(´・ω・`)

実は自分も横鎮提督なのですが、放置しまくっていたおかげで未だにLv20付近という……

そして未だに轟沈が怖くて中破で夜戦行けないでいるヘタレ提督である。

そもそも中破で轟沈説って進撃と夜戦どっちのことをいっているのだろうか…… 中破で進撃では轟沈した証拠は今のところ無いようではあるけど、夜戦に関してはどうなん?

まぁ、それは置いておいて、艦これって地味に操作しない時間多いですよね。戦闘とか入渠とか入渠とか入渠とか。

入渠中とかはいいんですけど、戦闘中だと他のタブでwiki見たりしてるとどうしてもプロセスが低下するんですよね……(Chromiumブラウザ以外は知りませんけど)

なら画面分割で艦これとwiki等を表示させればいいじゃないかとやってみたところ……

2013102201.png

お、おう……無駄がやべーです。とてつもなくやべーです。

なのでユーザースタイルシート(これの正式名称って結局なんなの?)でこうしました(`・ω・´)

2013102202.png

画面がすごく……うるさいです。

実際は艦これ下部のウィンドウはいらないかもしれないですね(´・ω・`)

ちなみにこれ、サブモニターなのでメインモニターで3DCGのモデリングしたり、絵を描いたりしながらできます(`・ω・´)

コード

URL:http://www.dmm.com/netgame/social/-/gadgets/=/app_id=854854/
body { margin: 0 !important; min-width: 100% !important; } #w { width: auto !important; } #game_frame { height: 480px !important; width: 800px !important; } #dmm_ntgnavi,.mg-t20.pd-t12.center,.area-naviapp.mg-t20,.naviapp,#ntg-recommend,#foot, body > img, body > div > img { display: none !important; } #main-ntg #area-game { text-align: start !important; }
次から始まるURL:http://osapi.dmm.com/gadgets/ifr?synd=dmm&container=dmm&owner=10106058&viewer=10106058&aid=854854
#sectionWrap, #spacing_top { display: none !important; }

ユーザースタイルシートのやり方に関しては自身でお調べください。

あと艦これもといDMMの規約とかやべー可能性は否定出来ないので自己責任で(´・ω・`)

追記

艦これウィジェットでいいんじゃないかな

【もしかして13/08/22】

うまく動作していない可能性が出てきました。現在調査中です(´・ω・`)(もともとなんでこれでできるのか理解できていなかったんですけどね。明らかにこれじゃできないとは思っていましたし

はじめに

まず、当記事で想定しているspanが勝手に挿入される状況というのは、TinyMCEでCSSを読み込ませている場合、特定条件下でリスト化(メニューのボタン)した際に<span style="hoge">foo</span>というspanタグが挿入されることを指します。

この方法はやや強引なやり方かもしれませんし、もっといい方法があるかもしれません(そもそもCSSにコードが影響されないような設定があるのかもしれません。というかあって欲しい)

そしてこの現象がバグなのか仕様なのかはわかりません。

CSSの読み込ませ方法

.js内の設定記述にcontent_css : "main.css"

content.css内に@import "main.css"

どちらの読み込ませても発生。

CSSの内容

p {hoge} or body {hoge}

CSSにp{ line-height: 2;}がある場合、<p>いい天気</p>を<ul><li>いい天気</li></ul>に変換しようとすると、<ul><li><span style="line-height: 2;">いい天気</span></li></ul>になる。

回避方法

TinyMCEの設定記述に下記を追記。

extended_valid_elements : "span[!class]",

これを追記することにより、<span class="hogehoge">以外のspanタグは削除される。

弊害

メニューから文字の色を変更しようとすると<span style="color: #333333">のようにstyleで挿入されるため、上記の記述により削除される。

色を変更したい場合はclassを振る必要がある。ということはあらかじめ必要な色はCSSに登録しておくことが必要となる。

他にもstyleで指定するものは下記のように各所classを振る必要が発生する。

CSS内
.font_blue {color: #3366ff;}
.font_red {color: #ff0000;}
TinyMCE設定記述
theme_advanced_buttons1: 'styleselect',
style_formats : [ {title : '文字_青', inline : 'span', classes : 'font_blue'}, {title : '文字_赤', inline : 'span', classes : 'font_red'}, ],

archive


×

ログイン