スタッフブログ

2011/06/27

ブログ記事でHTMLソースやスタイルシートを説明する際に、奇麗に見やすく表示することが意外と難しいです。

そんな時は、【SyntaxHighlighter】を利用するとブログの記事でソースコードのを紹介する際に、キレイに分かりやすく表示すること出来ます。

ソースを別ウィンドウで表示したり、印刷やクリップボードへの保存も可能です。多くの方が利用されているので、一度は目にしたことがあるかと思います。

▼こんな感じでhead部分に記述を追加します。

<script type="text/javascript" src="/blog/scripts/shCore.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="/blog/scripts/shBrushXml.js"></script>
<link href="/blog/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="/blog/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/blog/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

続きを読む



2011/05/26

ロールオーバーをさせる際に、通常表示用とロールオーバー用の2枚の画像を用意するのは面倒ですよね。

画像の透過度をjQueryで操作することで、ロールオーバー的な表現が可能かなと思い検索したところ、「Fine×3」さんのサイトで分かりやすく紹介されていました。

方法は、特定のファイル名がついた画像をhoverイベントでマウスオーバー時とマウスアウト時の透過度を変更する形です。

以下、覚え書きです。

続きを読む



2011/02/24

「Feature List」は、画像のフェードイン、フェードアウトをなめらかに表現できるjQueryプラグインです。HTMLソースもULタグがLIタグでシンプルに記述されているので、カスタマイズや更新を行いやすいので、かなり広範囲に渡り使用できるかと思います。弊社では、「Feature List」カスタマイズしトップページのメインビジュアルに採用しています。

jQueryプラグイン「Featu List」

続きを読む



2010/05/21

ホームページ制作時にJavaScriptでグローバルメニューなどのボタン画像を切り替えるロールオーバーは、必ず使いますよね。当たり前に使いすぎていて何とも思っていなかったのですが、良く考えるとHTMLソースはかなり長いです。

onmouseover=”MM_swapImage〜 とか onmouseout=”MM_swapImgRestore〜とか。

先日仕事で知り合ったクリエイターの方に便利なJavaScriptを紹介いただきました。
「smartRollover.js」です。ソースがかなり短縮されますし、主要なブラウザでも動作に問題なさそうです。
今後はこちらを利用していくことに決定ですかね。当たり前と思っていることにこそ改善点て多いのかもしれませんね。
以下、覚え書きです。

続きを読む



ホームページでお困りのことはございませんか?

ホームページのリニューアルや新規WEBサイト制作など、あなたのアイディアをお聞かせください。
そのアイディアを当社の技術で形にします。ホームページ制作をご依頼されるのが、初めての方でも丁寧に対応いたしますのでご安心ください。
お見積もり・ご相談は無料ですので、お気軽にご相談ください。

お問い合わせはこちら

PAGE TOP