トリビア・リンク

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

カレンダー

カテゴリ

人気記事

プロフィール

クーア

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

カウンター

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • 動画人気ランキング

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

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

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




  • スポンサーサイト
    • 画像枠に影をつける方法

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

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

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


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

    通常,ウェブページを制作する場合,デザインファイル(psdやpngなどの画像)をスライスし,HTMLのimg要素として埋め込んだり,CSSの背景画像として指定していることと思います。

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

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

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

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

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

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

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

    • 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 導入手順

    前のBlogでも使用していたSyntaxHighlighterでCode表示が綺麗に見えるので最新Version(2012/8/21時点)を適用してみました。
    以下、導入手順を簡単にまとめました。

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

    2. 必須ファイルを抽出

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

    3. 必要な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」

    4. 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 等) */
    }
    
    ※あとは、お好みで文字色やハイライト行の色を変更します。

    5. ファイルをアップロード

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

    6. 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 -->
    

    基本的な導入は以上ですが、カスタマイズなどいろいろ試してみてください。
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。