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の規約とかやべー可能性は否定出来ないので自己責任で(´・ω・`)

追記

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

追記

どうやらtinymceのバグらしいですが、今現在(2018年頭)も直っていません。

そして影響が出るのはChromeだけとか。

なんかChromeさんいろんなところで地味にバグ影響起こしてますね……

これを機に火狐さんに戻ろうかしら……

はじめに

まず、当記事で想定している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'}, ],

サイトバージョンなんて付けていませんが……

とりあえず更新しました。

ところでちゃんとサイトバージョンとか付けてたほうがいいのかな。……管理的な意味で

更新箇所
  • webフォント対応
  • 上記に伴いページ遷移時の挙動を変更
  • スマートフォンへのレスポンシブ化
  • 一部jsを削除
  • 複数のfreoの共通(基部)部分を少し修正
まだ手が回っていない更新予定箇所
  • 404ページ
  • RSSリーダーの新調
  • CSSのバグフィックス
  • 管理画面のスマートフォン対応
  • 記事投稿時のspan抑制が機能していない
  • 日本語webフォントのサブセット化

 本日はレスポンシブデザインのお話でもしようかなと思います。

べ、別に記事のネタがなかったわけじゃないんだからね!

※この記事には若干の間違いもあるかもしれませんがご了承ください。

レスポンシブwebデザインとは?

まずwebデザインをある程度やっている人なら聞いたことはあると思いますが、自分のHPを少しいじっているだけという方には聞き慣れない単語かもしれません。

このレスポンシブWebデザインとは単一の(X)HTMLソースからデバイスなどによって表現を変更するウェブデザインのことを指します。ちなみにレスポンシブルではありませんのでご注意を。

方法としては横幅を検知して適用するCSSを変更するという感じです。

具体的にどういうの? という方は当サイトをPCやスマートフォンなどで見比べてみてください。PCしかないよ! というかたはブラウザの横幅を下げていけばわかります。

※例でデバイス別に表示を変更と言いましたがPCの解像度によって表示を変更したい(低解像度のPCではより最適化したい)といった理由で使用するのでもいいと思います。

類似用途

デバイス毎に表示を切り替えたいのならデバイスごとにサブドメインや階層を変えてリクエストしたり、CMSなどでなどでデバイスごとにテンプレートを作ればいいというものもあります。

たしかにこちらのほうが単一ソースという制限がなくなるので表現の幅は広がりますが、その代わりに少しの更新でも複数のソースを修正しないといけなくなるというメンテナンス性が下がります。しかし、特に理由がない限りデバイス毎のデザインががらっと変わると同じサイトと認識するのが難しくなるので表現の幅が広がってもあまりメリットは無いと思います。

ならば単一ソースでCSSのみの切り替え・一部適用にしたほうがメンテナンス性はいいです。

幸い近年のブラウザはレスポンスwebデザインに必要なCSS3に対応していますし古いブラウザも対応させる……などということをしなければ問題ないと思います(スマートフォンであれば意図的にしない限り古いブラウザを使う人は少ないでしょうし)

具体的にどうするの?

CSS3側の設定方法

まず方法としてCSS3のMedia Queries(メディアクエリ)というものを使用します。

これはウィンドウ幅の数値によって適用させるCSSを変更するというものです。

例えばウィンドウの横幅が481px以上ならばPC用、480px以下ならばスマートフォン用としたいのであれば下記のようにするとそれぞれ適用されます。

/*PC用*/
@media screen and (min-width: 481px){
適用するCSSの中身
}

/*スマートフォン用*/ @media screen and (max-width: 480px){ 適用するCSSの中身 }

このウィンドウ幅というのはPCではブラウザの幅、スマートフォンではデバイスの横幅となります。スマホの場合は縦向き(ポートレイト)と横向き(ランドスケープ)によってこの数値が変わります。またAndroidとiPhoneではもちろん変わりますが、Android機種同士でも機種が違えば当然横幅等も変わります。

さらに言えば機種のスペック表に書いてある解像度はあくまで標準解像度であり、ブラウザでの標準サイズは標準解像度÷1~3付近(機種によって異なる)となるため実際はポートレイト時で横幅が320pxなんてこともざらじゃありません。

なかにはブラウザが違うだけで横幅が違っていたり、表示倍率の設定によってもまた変わります。

とりあえず面倒なので各デバイスの標準ブラウザの標準倍率で調整するといいと思います。
ちなみに記述するCSSファイルは読み込まれているファイルであればどれでも平気です。一つのCSSにPC用とスマホ用を記述してもいいですし、PC用とスマホ用で別けても構いません。

追記(13/05/06)

ちなみにスマートフォンなどのみに適用させたくPCでブラウザの横幅をいじっても適用させたくない場合は、max-device-widthを使用すればPCではデスクトップの解像度がそれ以下の場合を除いてブラウザをいじっても変更されません。

ただ、このmax-device-widthにはAndroid4以上でバグが有るらしく、高解像度機種(XperiaZ)などでは上記の標準解像度で計算されるそうですので使う際にはご注意を。

HTML側の設定方法

基本は上記のCSS内で設定を調整・変更しますが、それとは別にHTMLのheader内にも必ず記述しないといけないものがあります。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />

この記述がないとスマートフォンで正しく機能しません。

ちなみに各項目は以下のようになっています。

width=device-width デバイスの幅
initial-scale 初期の拡大値
minimum-scale 最小の拡大値
maximum-scale 最大の拡大値
user-scalable 拡大の可否

切り替える横幅の境目は?

さて、ここまでやって一つ疑問に思ったことがあると思います。そう、一体何pxでCSSを切り替えればいいのかということです。

この切替ポイントのことをブレイクポイントと言いますが、これは正確な数値は存在しません。それもそうですよね。上述していますがスマートフォンの機種によってサイズも違いますし、最近ではiPadなどのタブレットも出て来ましたから。

ただ、大体の指針程度にはなるものはあります。

スマートフォンだと320pxもしくは480px。大型の機種も対応させると640pxあたりでもいいかもしれません。面倒でなければこれら全てで切り替えてもいいです。

iPadなどのタブレットでは768pxあたりでしょうか。

それ以上はPC用サイトと言った具合に。

画像がはみ出るんだけど……

単純に横幅が320pxのレイアウトでPC用の横幅800pxの画像を表示しようとしてももちろんはみだしますよね。

対処法は単純でCSSに以下を追記して大きさを自動調整してやればいいんです。

img {
	max-width: (適用横幅以下)px !important;
	height: auto !important;
}

ここで!important扱いにしている理由は横幅関係なく適用させているCSSでimgに同様の属性を設定していた場合強制的に上記の数値を上書きするためにこのようにしています。

これはレスポンシブwebデザインではなくCMSなどでテンプレートとしてデバイス変更している際にも有効な対処法ですね。

 

余談

ここまでざっと適当に書いてみましたがやはり説明下手で必要な情報が抜けている可能性が高いです。

なにかわからない点などありましたらコメントにでもいただけると応答すると思います。

にしてもやっぱりテンプレート型とくらべてメンテナンス性が高いのはいいですねぇ。

スマートフォンでもPCと同一のソースを使用しているから読み込む容量も同じというデメリットはありますが。

ちなみに当サイトでもfreoが1.18.0を機にテンプレート方式からレスポンスwebデザインに変更したようなので前々から実装しようと思っていたのでレスポンシブ化しました。

archive


×

ログイン