Chrome……というかChromiumのDeveloper Toolsってありますよね。web開発している人にとっては当たり前のものだと思いますが、自分はその設定項目がいまいちわかりませんでした。

ですのでこの際きちんと訳そうかと思い、個人的なメモとしてここに記しておきます。

ちなみにGeneralの内容のみです。OverrideやShortcutsは気が向いたら追記します。

そもそもこんくらいの英語いちいち訳さずとも分かれよと言われそうですが、自分はちゃんと訳そうとして見ないと読めないほどの英語苦手。まぁ翻訳しなくてもわかりますが、ぱっと見では分かりません。そんくらいの学力(´・ω・`)

Chromium系列 ver.24現在の項目

Generalタブ

Disable cache:キャッシュを無効化するか

Disable JavaScript:JavaScriptを無効化するか

Elements

Color format:色の指定方法

├As authored

├HEX: #DAC0DE

├RGB: rgb(128, 255, 255)

└HSL: hsl(300, 80%, 90%)

Show user agent styles:ブラウザのデフォルトスタイルを表示する

Word wrap:横幅以上に文字が出たら改行して表示する

Show Shadow DOM:Shadow DOMを表示する

Show rulers:目盛りを表示

Rendering

Show paint rectangles:再描画した部品に枠を表示

Sources

Show folders:フォルダを表示する

Search in content scripts:検索にcontent scriptsを含める

Enable source maps:source mapsを有効にする

Indentation:タブの文字数

├2spaces

├4spaces

├8spaces

└Tab character

Profiler

Show objects' hidden properties:objects' hidden propertiesを表示する※1

 

Console

Log XMLHttpRequests:XMLHttpRequestのログを表示する

Preserve log upon navigation:ログを維持する

※1自分はこれを使用したことがないので正しいことかわかりませんが、ご了承ください。

サイトの制作手順

唐突にサイトの制作手順でも晒してみます。

まず道具やサーバーなどを揃えます。

自分の場合はテキストエディタにTerapad、FTPにFFFTP、サーバーにさくらインターネット(スタンダードプラン)、CMSにfreoを使用しています。

え、Dreamweaver? 触ったことすら無いですけどおすし。よくあるホームページビルダーとかも使いづらくて結局テキストエディタに落ち着いてしまった(´・ω・`) 本当ならDreamweaverなどの制作ソフト使うほうがいいとは思いますけどね。

次にサイトのイメージを紙か画像に書き出します。その際に簡単な説明があるとあとで楽だと思います。デザイン自体は大雑把でもいいかと。どうせあとで細かいところ変わると思いますし。

2013020301.png

そしてCMSのHTMLを調整し、CSSは自前のCSSリセットを使用。CMSに初期から付属しているCSSはどっかに置いておきます(確認にのみ使用)

あとはデザインイメージを参考にしながらCSSを記述していくだけの作業。この際にデザインが変更になったりしますがしょうがないね。

ね、簡単でしょ(

ちなみにこのイメージ画像は看板娘のサイトに使用しようかと思っているものです(本当はあるサークルのサイト用だったんですが、サークル活動が死んだので再利用)

改行対応しないクライアント

Twitterのクライアントで改行に対応していないものって結構ありますよね。

実はWEBクライアントの場合、CSSのみで改行に対応できたりします。

改行方法

white-space: pre-wrap!important;

上記のCSSを各WEBクライアントの適当な箇所に差し込めば完了です。

公式Twitter

.js-tweet-text

※2013/03/14に公式で指定されているのを確認。UserStyleで指定する必要がなくなった。

TweetDeck

.tweet-text

新ついっぷる

(未対応)

触ったことがないので不明。

改行しているツイート本文のソースコードが改行表示になっていれば、そこに上記のCSS追加で行けると思います。またソースコードの時点で改行されていなかった場合は未対応となります。

今回の調整でほぼこれ以降はメインサイトの調整をする必要がなくなるまでになったと思います。

スマホの方もたぶんまともに見れるはず(フォントサイズが未だにどうしようか悩んではいるけど)

ガラケーのほうは……ここ最近触ってすらいないので以前のままです。

たぶんこれ以降も触りません。

ただもう一つのcss(右下にあるcss変更から変更できます)のほうはまったくもって未調整すぎるので、しばらくはそっちと看板娘のサイトを作ることにwebのほうでは専念しようかなと。

※長くなりそうなので改ページに

freoの特定ユーザーのプロフィールを参照する文字列

名前

{$freo.refer.users.ユーザーID.name}

エンティティ化してメールアドレス

{$freo.refer.users.ユーザーID.mail|escape:hexentity}

URL

{$freo.refer.users.ユーザーID.url}

紹介文

{$freo.refer.users.ユーザーID.text|nl2p}

UAによって適用されるテンプレートフォルダ(ある場合)

iPad

/templates/ipads

iPod

/templates/ipods

iPhone & iPod touch

/templates/iphones

Android

/templates/androids

ガラケー

/templates/mobiles

また、iPhoneとAndroid等共に同じtemplateを読みこませる場合は

/freo/lib/freo/common.php

内の153行目付近にある

//接続環境取得

部分の

} elseif (preg_match('/Android/', $_SERVER['HTTP_USER_AGENT'])) {
$freo->agent['type'] = 'android';

} elseif (preg_match('/Android/', $_SERVER['HTTP_USER_AGENT'])) {
$freo->agent['type'] = 'iphone';

のように変更すれば

iphonesフォルダの中身がandroidでもおそらく適用されます(android実機では未確認です)

archive


×

ログイン