トリビア・リンク

トリビア記録記　～移ろいゆく時の流れとともに～

カレンダー

カテゴリ

リンク

人気記事

RSSリンクの表示

プロフィール

クーア

インターネットで氾濫している情報の中で、一つ一つの情報を吟味・厳選してその時の感動を記事にしたいと思います。

カウンター

  • 08月 27 2012

  • CSS Sprites作成

  • 掲載カテゴリ : 作成記
Photoshopと格闘すること3時間

本サイトのメニュー、アイコンをデザインしてCSS Spriteの画像を作成しました。
（作成画像）

メニュー画像は、基本的にメニュー画像の大きさ内でテキストを配置するので比較的CSS Spriteの配置に苦労はしません。しかし、アイコン画像は基本的にアイコンの右側にテキストを配置するので右側を空白にしておく必要があります。

また、テキスト枠の高さもあるのでその高さ分の空白が必要になるのです。dot単位で計算して微調整しながら作成したので、結局かなりの時間がかかってしまいました。⇒ ランキング
  • 08月 26 2012

  • 読込む画像ファイルを少なくするCSS Sprites

  • 掲載カテゴリ : ノウハウ集
通常，ウェブページを制作する場合，デザインファイル（psdやpngなどの画像）をスライスし，HTMLのimg要素として埋め込んだり，CSSの背景画像として指定していることと思います。

それらの画像を一つにまとめ，１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。

このテクニックは，以前からマウスオーバーメニューを実現する際にも使われていたものでもありますが，YouTubeのプレーヤーやGoogleなど，大手サイトでもこのテクニックが使われるようになり，CSS Spritesの名前と共に注目を集めるようになりました。⇒ ランキング

読込む画像ファイルを少なくするCSS Spritesの続きを読む

  • 08月 25 2012

  • Yahoo UI Library（YUI） Fontsの利用

  • 掲載カテゴリ : ノウハウ集
FireFoxやInternet Exploereといったブラウザを使用していたり、FireFoxでレンダリングエンジン切り替えを行った時にフォントサイズや行間のサイズ違いで異なって見えることがあります。

レンダリングエンジンの違いといってしまえば、それまでなのですがある程度同じように見えて欲しいというのが作成側の希望だと思います。Yahoo UI Library（通称：YUI）を使うことである程度解消できるので紹介します。⇒ ランキング

Yahoo UI Library（YUI） Fontsの利用の続きを読む

  • 08月 24 2012

  • レイアウトの外枠に「影」をつける

  • 掲載カテゴリ : ノウハウ集
ブログのレイアウトの外枠の両端に「影」をつける方法です。
若干立体的になる位の効果ですが、ブログのテーマ作成はこういった細かいことの積み重ねですね。

まず、外枠の両端の影の画像を作成します。
横幅：ブログの横幅＋左端の影(pixcel)+右端の影(pixcel)
縦幅：1 pixcel
でPhotoshopなりで加工して作成します。⇒ ランキング

レイアウトの外枠に「影」をつけるの続きを読む

  • 08月 23 2012

  • ブログのテーマは「空」

  • 掲載カテゴリ : 作成記
ブログ作成にあたってテーマを決めました。

前回（2年前）の別のブログ作成の時には夜空をイメージしましたが、今回は「空」をテーマにイメージしようと思います。
ぼんやりとしたイメージでは「空」をイメージしていたこともあり、SyntaxHighlighterでもブルー系を基調としたデザインにしていました。⇒ ランキング

ブログのテーマは「空」の続きを読む

  • 08月 22 2012

  • SyntaxHighlighter 3.0.83 使い方

  • 掲載カテゴリ : ノウハウ集
ブログにコードを張り付ける方法です。

<span style="color:#FF0000"><b>SyntaxHighlighter</b></span>

を張り付ける場合は、

&lt;span style=&quot;color:#FF0000&quot;&gt;&lt;b&gt;SyntaxHighlighter&lt;/b&gt;&lt;/span&gt;
のようにHTML特殊文字を変換して記載します。

HTML特殊文字変換はHTMLタグ変換ツールを使って変換します。
HTML内のタグ(［ < ］ ［ > ］ )や ［ & ］ [ " ]などを記号のままページに表記したい場合、［ &lt; ］ ［ &gt; ］ ［ &amp; ］といった文字実体参照へ変換する必要があります。これは、その変換ツールです。

変換した内容の前後を
<pre class="brush: html;">&lt;span style=&quot;color:#FF0000&quot;&gt;&lt;b&gt;SyntaxHighlighter&lt;/b&gt;&lt;/span&gt;</pre>
のように<pre>タグで囲います。基本的な使い方はこのように<pre>タグで囲うことです。

実際の表示は、
<span style="color:#FF0000"><b>SyntaxHighlighter</b></span>


SyntaxHighlighter 3.0.83 使い方の続きを読む

  • 08月 21 2012

  • SyntaxHighlighter 3.0.83 導入手順

  • 掲載カテゴリ : ノウハウ集
前のBlogでも使用していたSyntaxHighlighterでCode表示が綺麗に見えるので最新Version（2012/8/21時点）を適用してみました。
以下、導入手順を簡単にまとめました。

１． SyntaxHighlighterのダウンロード
SyntaxHighlighter (http://alexgorbatchev.com/SyntaxHighlighter/)から3.0.83をダウンロード

２． 必須ファイルを抽出

「shAutoloader.js」
「shBrushXml.js」
「shCore.js」
「shLegacy.js」
「shCore.css」
「shCoreDefault.css」

３． 必要なCodeに対応したファイルを抽出

"shAutoloader.js"が必要に応じて読みだしてくれるようなので「scripts」フォルダにあるjsファイルを全部アップしてもよいようですが、(自分が)使いそうなファイルを抽出しました。

<参考>私は下記のファイルを抽出しました。
「shAutoloader.js」
「shBrushCss.js」
「shBrushJava.js」
「shBrushJScript.js」
「shBrushPlain.js」
「shBrushXml.js」
「shCore.js」
「shLegacy.js」
「shCore.css」
「shCoreDefault.css」

４． cssファイル修正
(1) IE、Google Chromeで縦スクロールバーが常に表示される場合の対処
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important;  /* 追加 */
}


(2) IEで表示すると最後の1行が表示されない場合の対処
.syntaxhighlighter table {
  width: 100% !important;
  margin-bottom: 1em !important;  /* 追加 */
}

(3) お好みで色修正
.syntaxhighlighter .line.alt1 {
  background-color: white !important;  /* first lineを好みの色にします (white -> #fdfdfd 等) */
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;  /* second lineを好みの色にします (white -> #f7f7f7 等) */
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important; /* highlight lineを好みの色にします (#e0e0e0 -> #f8f9d1 等) */
}
※あとは、お好みで文字色やハイライト行の色を変更します。

５． ファイルをアップロード

４で修正したファイル含めて３のファイル全てブログサイトにアップロード

６． HTMLファイル修正

(1) <body>の前に下記の2行を追加
<link type="text/css" rel="stylesheet" href="http://blog-imgs-53.fc2.com/t/r/i/trivialink/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://blog-imgs-53.fc2.com/t/r/i/trivialink/shCoreDefault.css"/>

(2) </body>の前に下記の行を追加
<!-- begin:SyntaxHighlighter -->
<script type="text/javascript" src="http://blog-imgs-53.fc2.com/t/r/i/trivialink/shCore.js" charset="utf-8"></script>
<script type="text/javascript" src="http://blog-imgs-53.fc2.com/t/r/i/trivialink/shAutoloader.js" charset="utf-8"></script>
<script type="text/javascript" src="http://blog-imgs-53.fc2.com/t/r/i/trivialink/shLegacy.js" charset="utf-8"></script>
<script type="text/javascript" src="http://blog-imgs-53.fc2.com/t/r/i/trivialink/shBrushXml.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
SyntaxHighlighter.autoloader
(
"css                    http://blog-imgs-53.fc2.com/t/r/i/trivialink/shBrushCss.js",
"java                   http://blog-imgs-53.fc2.com/t/r/i/trivialink/shBrushJava.js",
"js jscript javascript  http://blog-imgs-53.fc2.com/t/r/i/trivialink/shBrushJScript.js",
"text plain             http://blog-imgs-53.fc2.com/t/r/i/trivialink/shBrushPlain.js",
"xml xhtml xslt html    http://blog-imgs-53.fc2.com/t/r/i/trivialink/shBrushXml.js"
);
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>
<!-- end:SyntaxHighlighter -->

基本的な導入は以上ですが、カスタマイズなどいろいろ試してみてください。
  • 08月 20 2012

  • ローマは一日にして成らず

  • 掲載カテゴリ : 作成記
ブログ更新が滞って2年、心機一転ブログを始めようと思い再びfc2ブログ作成です。
初心を大事にという意味を込めて、初ブログのタイトルを

「ローマは一日にして成らず」

としました。

1日に膨大なニュースが流れるインターネットの中で気に入ったトリビアを集めて、記録していこうと思います。
まずは、作り方を忘れたブログのHTML, CSSを思い出しながらテンプレートを作成しようと思います。⇒ ランキング