Google Code Prettify

このサイトに掲載しているソースコードを色分けしてみた。Web制作などでいろんなサイトを参考にしてるとソースコードが読みやすく色分けされてるので、どうやってるのかな?と調べてみたら Google Code Prettify というものがあった。

見やすくなる!

こうだったのが…

.header, .content, .footer, .sidebar {
  border: 2px solid #000;
}
@media screen and (min-width : 501px) { /* 500px以下だったら無効 */
  .wrapper {
    display: table;
    width: 100%;
  }
  .wrapper .content {
    display: table-cell;
    vertical-align: top; /* 縦位置を揃える */
  }
  .wrapper .sidebar {
    width: 200px; /* サイドバーのサイズ */
  }
}

 

こうなる!

.header, .content, .footer, .sidebar {
  border: 2px solid #000;
}
@media screen and (min-width : 501px) { /* 500px以下だったら無効 */
  .wrapper {
    display: table;
    width: 100%;
  }
  .wrapper .content {
    display: table-cell;
    vertical-align: top; /* 縦位置を揃える */
  }
  .wrapper .sidebar {
    width: 200px; /* サイドバーのサイズ */
  }
}

自分のやった方法

またもやGoogleさんの力を借りることになる。ソースコードの表示のされ方を調整したいので必要物を自サイトに置く方式にした。

ソースコードの表示のされ方は「prettify.css」で決まるが、skinsフォルダに入っているCSSを使うこともできる。こちらに、各CSSがどのように見えるかサンプルがある。

Gallery of themes for code prettify

自分は「Sunburst」を使うことにした。その場合、prettify.css は使わず、sunburst.css を使う。

そして、このサイトではCSSの記述を掲載することが多いので、lang-css.js を入れた。

  • htmlのheadへ以下のように記述する

<link rel="stylesheet" href="prettify/skins/sunburst.css">
  • htmlのbodyの最後付近へ以下のように記述する

<script src="prettify/prettify.js"></script>
<script src="prettify/lang-css.js"></script>
<script>
  window.addEventListener("load", function() {
    PR.prettyPrint();
  });
</script>

ソースコードの表示部分

  • 記事のコード表記部分を <pre> か <code> で囲み、classに prettyprint を記述する
    コードがCSSであれば、 lang-css も記述する

<pre class="prettyprint lang-css">
body  {
  font-family:'Noto Sans JP', sans-serif;  /* Webフォント */
  color:#2F2F2F;
}
</pre>
  • 以下のように表示される

body  {
  font-family:'Noto Sans JP', sans-serif;  /* Webフォント */
  color:#2F2F2F;
}
  • 行番号を表示するには、linenums を記述する

<pre class="prettyprint lang-css linenums">
body  {
  font-family:'Noto Sans JP', sans-serif;  /* Webフォント */
  color:#2F2F2F;
}
</pre>
  • 行番号を1行ごとに表示するには、CSSへ以下のように記述しておく必要がある

.prettyprint ol.linenums > li {
  list-style-type: decimal;
}

こうしてみた

sunburst.css を開くと、そのままでは改行が詰められて見にくいので、以下のように改行した後、各所を調整した。

code .str,pre .str{
color:#65B042
}
code .kwd,pre .kwd{
color:#E28964
}
code .com,pre .com{
color:#AEAEAE;
font-style:italic
}
code .typ,pre .typ{
color:#89bdff
}
code .lit,pre .lit{
color:#3387CC
}
code .pln,code .pun,pre .pln,pre .pun{
color:#fff
}
code .tag,pre .tag{
color:#89bdff
}
code .atn,pre .atn{
color:#bdb76b
}
code .atv,pre .atv{
color:#65B042
}
code .dec,pre .dec{
color:#3387CC
}
code.prettyprint,pre.prettyprint{
background-color:#000;
border-radius:8px
}
pre.prettyprint{
width:95%;
margin:1em auto;
padding:1em;
white-space:pre-wrap
}
ol.linenums{
margin-top:0;
margin-bottom:0;
color:#AEAEAE
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{
list-style-type:none
}

/* 追記 1行ごとに行番号を表示 */
.prettyprint ol.linenums > li{
list-style-type: decimal;
}

@media print{
code .str,pre .str{
color:#060
}
code .kwd,pre .kwd{
color:#006;
font-weight:700
}
code .com,pre .com{
color:#600;
font-style:italic
}
code .typ,pre .typ{
color:#404;
font-weight:700
}
code .lit,pre .lit{
color:#044
}
code .pun,pre .pun{
color:#440
}
code .pln,pre .pln{
color:#000
}
code .tag,pre .tag{
color:#006;
font-weight:700
}
code .atn,pre .atn{
color:#404
}
code .atv,pre .atv{
color:#060
}
}

ちなみに、htmlをコード表示するとこうなった。htmlの場合は、classに lang-css を記述しない。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="./ColumnChange.css" type="text/css" />
<title>レスポンシブ</title>
</head>
<body>
<div class="header">
  <p>ヘッダー</p>
  <!-- ここにサイトタイトルなどを書く -->
</div>
<div class="wrapper">
  <div class="content">
    <p>コンテンツ</p>
    <!-- ここに記事などを書く -->
  </div>
  <div class="content sidebar">
    <p>サイドバー</p>
    <!-- ここにメニューを置く -->
  </div>
</div>
<div class="footer">
  <p>フッター</p>
  <!--ここにライセンスなどを置く-->
</div>
</body>
</heml>

結果!!

ソースコードが、すごく見やすくなった!


コメント(1)

 

 

 

 

サイトの表示幅を広げよう

このサイトはMTのテーマ「Rainier」をベースにしているのだけど、メインカラムの幅が初期値の640pxでは、狭く感じるようになってきたので広げた。

具体的には、mt/mt-static/support/theme_static/rainier/css/base.css の以下選択部分の数値に160を足した。

  @media (min-width: 930px) { /* ←ここがレスポンシブで折りたたまれる数値 */
    #container #container-inner,
    #container #header-inner,
    #container #content-inner,
    #container #footer-inner {
      width: 940px; /* ←ここが上部と全体のカラム幅 */
      margin-right: auto;
      margin-left: auto; } }

[role="banner"] {
  margin: 0; }
  @media (min-width: 930px) {
    [role="banner"] {
      margin: 0 auto; }
      [role="banner"] h1 {
        margin: 0; } }
  [role="banner"] [role="navigation"] {
    padding: 0 1em; }
    [role="banner"] [role="navigation"] ul {
      display: none; }
    @media (min-width: 930px) {
      [role="banner"] [role="navigation"] ul {
        display: block; }
      [role="banner"] [role="navigation"] select {
        display: none; } }

[role="navigation"] ul {
  padding-left: 0; }
  [role="navigation"] ul li {
    padding-right: 1.618em; }

#content {
  margin: 1.618em 1em 0; }
  #content .related {
    margin-top: 4.854em; }
  @media (min-width: 930px) {
    #content {
      margin-right: auto;
      margin-left: auto; }
      #content [role="main"],
      #content .related {
        float: left;
        min-height: 1px; }
      #content [role="main"] {
        width: 640px; /* ←ここがメインのカラム幅 */
        padding-left: 15px; }
      #content .related {
        width: 235px; /* ←ここは右メニューのカラム幅(変更せず) */
        padding-left: 50px;
        margin-top: 0; } }

[role="contentinfo"] {
  margin: 0; }
  @media (min-width: 930px) {
    [role="contentinfo"] {
      margin: 0 auto; } }

なぜ160pxにしたの?

なぜ、足す数値を160にしたかというと、640+160で800、800の幅で4:3にすると 800x600、16:9で 800x450、と数値のキリが良かったから。掲載する画像をこの数値を基準にすると作りやすい。

昨今のWebサイト幅は

こちらによると、多くの企業のWebサイトは、幅1000px~1050pxが多いそうな。

WebサイトのWidth(横幅)について ~業界毎の主要webサイト調査結果~ (SERENDEC BLOG)

今回の変更で、このサイトは940px→1100pxになったので、まぁ、トレンドな幅。サイトの幅はどんどん広くなっていて、1920x1080のフルHDモニタではWebブラウザを最大化しないと見にくいサイトも出てきましたね。

結果!!

大改造になると思って覚悟して取り組んだら、base.css をちょっと触るだけで済んだので、拍子抜け。

とっても簡単でした!


コメント(0)

 

 

 

 

Webフォント

こないだこのサイトに導入してみた、Webフォント「Noto Sans JP」。なかなか可読性が良くていい感じ。ただ、文章としてはいいのだけど、サイトタイトルのフォントは文字詰めができて、遊び心のあるものにしたい…

しかし「らっぱ王子」この5文字だけのために、容量の多い日本語フォントを読み込むのは気が引ける。調べて見ると、必要な文字だけ抜き出したフォントファイルを作って、Webフォントとして使うことができるらしい…!

そしたら、軽快にWebフォントが使えるぞ!

Wordでこんなことできるんだ…!

  • 使用したいフォントをPCにインストールし、Wordを開きます

え? Word?

  • Wordで必要な文字を打ち込み、適用したいフォントにします

え? と、とりあえず文字は「らっぱ王子」で、フォントは「源暎ラテミン 詰 v2」にしたいです。

 

  • 「名前を付けて保存」で、ファイルの種類を「XPS 文書」で保存します

なんだ、XPSって。

Word:XPSファイルとは? (教えて!Helpdesk)

WordやExcelといったファイルをXPSファイルに変換すると、環境に依存せず様々なコンピュータでファイルを表示できます。また編集不可能な為、改ざんされたくない文書を配布する場合にも便利です。

そういうのがあるのか。しかし、どうしてXPSを?

  • 保存したXPSファイルの拡張子を「xps」から「zip」に変更します

え? zip? なんで?

 

  • zipファイルの Resources の中にある「~文字列.odttf」のファイルを取り出します

うわ、開いた。あー、フォントがXPSファイルに内包されるのだね!これが抜き出されたフォント?

OD2TTF 変換ソフト

  • OD2TTF」というフリーソフトを使います

 

  • OD2TTFを起動して「ファイル パス」の項目に「~文字列.odttf」ファイルをドラッグ&ドロップします

 

  • GUIDが自動で記入されます 「Export」し、任意の名前をつけます

これで、難読化とやらが直るらしい。

CSSを編集

  • 任意の名前.ttfをサーバーにアップし、CSSへ以下のように指定します

サイトタイトルは「h1」で囲んでるので、こうしてみる。

@font-face {
    font-family: '任意の名前', sans-serif;
    src: url('~/任意の名前.ttf');
}

h1 {
    font-family    :'任意の名前';
}

うまく行くか?

で?どうなる?お? 変わった!

…いや、これ変わったけど違うぞ。
たぶん、保険で入れといた「sans-serif」が表示されてる。

このへん違うよね。これ、どうしたらいいんですか?

  • 知りません

もうー!

@font-face ってホントにできるの?

どうやってもCSSで「@font-face」が効かない。フォントが変わらない。CSSの記述よりも前に記述しないといけないらしいので、一番最初に入れてるんだけど。

…で、いろいろ調べて見たら、この ttf は腐っているらしい。
また、ttf より、woff の方が、ブラウザでの互換性が高いらしいぞ。

Convertio

で、たどり着いたのがこちらのサイト。「Convertio
ファイルを選ぶで「任意の名前.ttf」を選び…

 

「に[SVG]」となっているところを「フォント」の「WOFF」にして「変換」する。

 

変換されたら「ダウンロード」する。ダウンロードした「任意の名前.woff」をサーバーにアップする。

 

CSSの記述を修正する。問題切り分けのため、一旦、保険のフォントは指定しないことにした。

@font-face {
    font-family: '任意の名前';
    src: url('~/任意の名前.woff');
}

h1 {
    font-family    :'任意の名前';
}

いい感じ

おっ!源暎ラテミンで表示された!

とても軽い

5文字だけのフォントなので、容量は92KB。軽くて読み込みのラグは感じない。試しに「源暎ラテミン 詰 v2」を丸ごとWoffに変換すると、5,170KB。光回線のPCで読み込んでみたら表示されるまで6秒ほどかかった。スマホの4Gだと、もっとかかるんじゃないだろうか。

結論!!

必要な文字だけ抜き出したWebフォントは軽快!

参照
WEBフォントで必要な文字だけ抽出する方法 (WEB担当者の備忘録)
CSSでの@font-face,つまりweb fontが使えない事でハマった件。 (WisdomTrees)


コメント(0)