引き続き Blogのリニューアル中(module)

こんにちは。引き続き Blogのリニューアルを続ける岩崎です。

記述するHTMLはもちろんですが、サーバサイドの設定や デザイン等などを勉強し直しています。
Webの業界にいるので ある程度は分かっているつもりで居るものの、やはり実際に進めてみると発見が多いです。

右側に回り込む画像。サイズは自由。※概要に画像を入れるのは基本はNG。

金曜日の夜はレスポンシブイメージのネイティブサポートに関して、3時間くらい夢中になっていました。具体的には<picture>タグ関連ですが、まだまだ対応しているブラウザが少ないとは言え、レスポンシブ&高解像度端末の普及を考えれば、考慮しておく必要はありそうです。

そこから土日も Blog尽くし。...というコトで、この記事の後半はデザイン作成中のモジュール一覧。
本来は内部的に持っているページですが、今回は日記を書きながらリニューアルしていく予定なので、このまま公開してお事にします。

引き続き Blogのリニューアル中(module)のメインビジュアル

h2 中見出し

ダミー用テキストです。せっかくなので過去の日記から文章を引用しちゃいます。

画像サイズは調整中なものの、比率は16:9を採用予定。

先日 MacBook Airを購入し、あれこれワイヤレス化をしています。そこでネックになったのが 無線LANの遅さ。せっかく高速な NASを購入こうにゅうしたものの実力を活かしきれず、ますます低速さが目につくようになりました。

利用していた無線LANルーターは 11n 300Mbpsに対応していますが、実際の速度は 70Mbpsにも及ばない低速さ。いったい何が悪いのか。数日にわたる試行錯誤の結果、ようやく改善するコトができました。どうやら 11nなら 300Mbpsというほど簡単なモノではないようです。

複雑な 11nの仕様と MacOSの落とし穴 h2

IEEE 802.11n 各種オプション利用時の通信速度 h3

figcaptionタグで説明を入れてもスッキリできた!
Image Text. Image Text. Image Text. Image Text. Image Text. Image Text. Image Text. Image Text. Image Text.

2カラムのdivも用意してみた。幅が狭いときは 1カラム。

今後の制作工程 h2

今後の大きな流れとしては、以下のような予定です。
  1. 骨組みの完成
  2. 関連記事などの補足情報の設計
  3. メニューの追加
  4. 構造化・OGタグ等の設計
  5. デザイン入れ始める
  6. TOPページ、カテゴリ一覧などのページの作成
  7. デザイン微調整
  8. 本公開!

定義リスト h2

CSSや JavaScriptの Minify
まずは無駄なスペースやコメントの削除のみですが、Minifierプラグインで実現。PageSpeed Insightsでエラーになったので、ファイルも1つにまとめました。2015/5/7
ユニバーサル アナリティクスに変更
Google Analyticsもユニバーサルに変更。Tag Manager悩んだものの そんなにタグを埋め込む予定がないので直書きで。2015/5/6
名前
岩崎 仁
住んでるところ
東京
長めのテキスト
長めのテキスト 長めのテキスト 長めのテキスト 長めのテキスト 長めのテキスト

その他 タグのスタイル定義 h2

HTML abbr
サイトリンク dfn

入力値kbdは、キーボードの入力はもちろん選択するメニューとかでも利用予定。コード類はcodeだけど、常にpreの中、単独では利用しない。タグの説明<picture>などでも利用予定。target_blankのリンク例。
preは複数行のコードなどで利用。基本的に半角の英数字ペース。
ソースコードは preの中に codepre {  padding-left: 1em;  overflow-x: scroll;}


重要は、strong。強調はemを使うらしい。
smallは文字が小さくなるわけじゃない。補足情報
既に正確ではない情報は s

  • リスト
  • リスト

ブロック引用 blockquote
ブロック引用 blockquote
citeプロパティは利用しない

引用元:サイト名やページ名
citeタグは利用しない引用 q(カッコはブラウザ側で追加)との記載があります。

※補足はこんな感じで追記予定。
補足なので smallタグを利用。補足なので smallタグを利用。

NASへのアクセス速度比較 class=nothing
Xbench旧親機20→40MHz
Write 4K1.48 MB/s1.65 MB/s
Write 256K5.19 MB/s7.75 MB/s
Read 4K1.57 MB/s1.53 MB/s
Read 256K7.78 MB/s8.32 MB/s
Write 4K1.41 MB/s1.67 MB/s
Write 256K6.39 MB/s7.95 MB/s
Read 4K1.43 MB/s1.69 MB/s
Read 256K7.75 MB/s8.41 MB/s
NASへのアクセス速度比較 class=table-transpose
Xbench旧親機20→40MHz2.4→5GHz暗号化変更改善率
Write 4K1.48 MB/s1.65 MB/s1.60 MB/s1.98 MB/s134 %
Write 256K5.19 MB/s7.75 MB/s7.84 MB/s11.45 MB/s221 %
Read 4K1.57 MB/s1.53 MB/s1.91 MB/s2.24 MB/s143 %
Read 256K7.78 MB/s8.32 MB/s12.11 MB/s16.15 MB/s208 %
Write 4K1.41 MB/s1.67 MB/s1.56 MB/s1.82 MB/s130 %
Write 256K6.39 MB/s7.95 MB/s8.60 MB/s12.30 MB/s193 %
Read 4K1.43 MB/s1.69 MB/s1.71 MB/s2.16 MB/s151 %
Read 256K7.75 MB/s8.41 MB/s11.58 MB/s16.14 MB/s208 %


それでは、本日はこの辺で...。^-^/~

関連記事:

schema.org ファイルサイズを考慮しても 選択すべきは JSON-LD

schema.org ファイルサイズを考慮しても 選択すべきは JSON-LDのメインビジュアル
とりあえず手を動かす事にした!
新サイトで改善している点まとめ