トリビア・リンク

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

カレンダー

カテゴリ

リンク

人気記事

RSSリンクの表示

プロフィール

クーア

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

カウンター

  • 09月 02 2012

  • 動画人気ランキング

  • 掲載カテゴリ : ノウハウ集
ブログ転載フリーの動画人気ランキングサイトを発見♪
自分のブログに掲載する場合はもちろん転載することでアクセス数が増えますし、自分が投稿した動画以外でもブログネタとして利用出来るのでいいですね。

無料ですしある程度ポイントが貯まると換金出来るのでコツコツとブログのネタ探しを兼ねて動画を視聴するといいかも。投稿されている動画を視聴して、「Good（良い）」「Normal（普通）」「Bat（悪い）」の3種類の評価から選びコメントを入れてクリックするだけです。

動画を投稿、視聴、投票するコミニティサイト！「みんなにオススメ動画ランキング」




    • スポンサーサイト



    • 08月 31 2012

    • 画像枠に影をつける方法

    • 掲載カテゴリ : ノウハウ集
    Facebookでは写真アップロードと文章でちょっとした日記代わりに使えます。ブログでも画像があった方がやはり見栄えはいいですよね。そんなわけで今日は画像に写真のような枠をつけて更に影をつけたサムネイルのスタイルシートを作成しました。⇒ ランキング

    画像枠に影をつける方法の続きを読む

    • 08月 28 2012

    • FC2 画像が上書きできない場合の対処方法

    • 掲載カテゴリ : ノウハウ集
    ブログテンプレート作成の際にファイルをアップロードしても上書きされないことがあります。
    単純に画像が最新になっていないのかと思いブラウザを更新してみても更新がされず、どうやらサーバ側にファイルのキャッシュが残っているようです。

    調べてみましたがどのようなタイミングで更新されるのかわからなかったのですが、対処方法だけはわかりました。
    正しいやり方かどうかはわかりませんが、サーバのアドレスを「-origin.fc2.com/」に書き換えればよいようです。

    修正前
    「http://blog-imgs-53.fc2.com/t/r/i/trivialink/trivia_img.png」

    修正後
    「http://blog-imgs-53-origin.fc2.com/t/r/i/trivialink/trivia_img.png」

    今のところは、この方法でファイルアップロードで上書き後ブラウザを更新するとすぐ反映されています。⇒ ランキング


    • 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月 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 -->

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