「CSS3」の「text-shadow」を使って「Blogger」のトップページだけ違うデザインにする

Internet Explorer10 からベンダー プレフィックスが付かない…

標準形式の「text-shadow」がサポートされるようになっているし…

IE10 の CSS3 text-shadow / Internet Explorer ブログ (日本語版)  


Windows8 の RTM(製造工程向け出荷)…も発表されたし…

Blogger でも同一ページでの画像拡大がデフォルト機能として組み込まれたし…

そもそも…検索エンジンからのページ直アクセスが殆どだし…

…で…トップページだけ…7月末から…デザイン変更してみました…

Blogger では全てのページで同じデザインが適用されますので…

Blogger でトップページだけ違うデザインにするには…

1. 複数のブログを作成してトップページ専用のブログだけ違うデザインにする…
2. トップページの読み込み時だけトップページ専用の外部 CSS を読み込む…
3. jQuery でトップページ読み込み時だけオーバーレイ表示してダイアログでナビゲーションなどを表示する…

①の方法が最も簡単でしょうが…わざわざ記事にするまでもありませんし…

オリジナルの記事が存在しない外部リンクだけのサイトになりがちですし…

Google 先生としても好ましくないでしょうから非推奨です…

②の方法は…JavaScript を書くのが手間ですし…

画像拡大機能で… Blogger では…JavaScript Library として…

「jQuery」が使われでいる訳ですから現実的ではありません…なので…

③の方法で実装しています…

ナビゲーションの概要は…

リンクテキストに「text-shadow」を付与して…

テキスト本体は表示させず「影」だけでテキストを表現し…

CSS3「transform」プロパティで…

テキストの「影」を拡大・縮小する…って手法です…

導入すると…こんな感じになります…

当然ながら古いブラウザでは…

何も表示されません…潔いでしょ
(１枚目の画像)

ｴｯﾍﾝ（￣^￣）=3

モダンブラウザでは…

こんな感じに見えます…
(２枚目の画像)

ナビゲーションの…

ぼやけたリンク文字にマウスホバーすると…

他のリンク文字が更にぼやけ…

マウスホバーしたリンク文字だけ…

拡大されクッキリ見えるようになります…
(３枚目の画像)

「tabindex」は「-1」を指定していますが…

一部ブラウザではフォーカスが表示されます…
(４枚目の画像)

以上を勘案して尚…導入したい方のみ以降…読み進んで下さい…

大前提として過去記事…

 「jQuery」と「jQuery UI」で HTML に彩りを添えよう


…シリーズの…第１回「導入」と…第７回「Dialog」も読んでおいて下さい…

尚…記事作成にあたって…より汎用性を高めるために…

第７回「Dialog」の CSS に「position:fixed;」を追記しましたので…

導入済みの方は…ご迷惑をおかけしますが…

確認して修正して下さい…

では早速いってみましょう…

先ずは…オリジナルのトップページ用のカスタムコードです…

トップページ用のカスタムコード　(ボタンクリックで引用記事が開閉)

$(".dialog-home").dialog({modal:true,resizable:false,dialogfocus:false,width:"auto",minHeight:"false",show:"clip",hide:"clip"}).dialog("widget").find(".ui-dialog-titlebar").css({"display":"none"});
$(".ui-widget-overlay").live("click", function(){$(".dialog-home").dialog("close")});

ページ読み込み時にページをオーバーレイ表示で操作出来なくして…

タイトルバー無しのダイアログを表示し…

オーバーレイ部分のクリックで…

オーバーレイとダイアログが閉じられ…

通常のトップページになります…

ブラウザの表示サイズをサイトの横幅より広くした場合…
(当サイトの場合は「1040px」以上で…)

ダイアログが読み込まれた後…

チョットだけ右にダイアログが移動してお茶目です…

続いて…オリジナルのトップページ用のカスタム CSSです…

トップページ用のカスタム CSS　(ボタンクリックで引用記事が開閉)

/* 第７回「Dialog」の変更部分 */
div.ui-widget-overlay{position:fixed;background:#000 url(透過用リピート画像の URL)}
/* 「JavaScript/HTML」ガジェットで読み込む CSS */
<style type="text/css">
.blur{padding:0px;margin:-10px 40px -10px;position:relative;font-family:Times New Roman;}
.blur li{font-size:36px;display: block;}
.blur li a{white-space:nowrap;color:transparent;display:block;text-align:center;text-shadow:0px 0px 6px #af5;letter-spacing:1px;-moz-transform:scale(0.6);-ms-transform:scale(0.6);-o-transform:scale(0.6);-webkit-transform:scale(0.6);transform:scale(0.6);-webkit-transition:all 0.6s linear;-moz-transition:all 0.6s linear;-o-transition:all 0.6s linear;-ms-transition:all 0.6s linear;transition:all 0.6s linear;}
.blur:hover li a{text-shadow:0px 0px 15px #fff;}
.blur li a:hover{text-shadow:0px 0px 1px #fff;-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1); transform:scale(1);}
</style>

黄文字は文字色の設定です…

７列目が読み込み時の文字色…

８列目がマウスホバー時の「更にぼやける」リンク文字色…

９列目がマウスホバー時の拡大されクッキリ見える文字色…です…

オーバーレイ表示の透過具合は…

透過用リピート画像に依存します…

透過用リピート画像は「透過png」などで画像検索すると…

無料でリンク不要のものも多数見つかるでしょうから…

ご自身でホストして下さい…

 Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう

 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Google Drive」

 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Dropbox」

 Google Blogger用のファイル保存場所としてのGoogle sites/Picasa


「JavaScript/HTML」ガジェットで読み込む CSS…は…

文字通りの意味で…下記「HTML マークアップ」と共に…

トップページだけで表示される設定の…

「JavaScript/HTML」ガジェットを…

どこでも良いですが…当サイトでは…

ご挨拶もアコーディオンを使って一緒に表示させていますので…

「main-wrapper」に読み込んで下さい…

 Bloggerで全ての場所にガジェットを追加できるようにする

 Bloggerでガジェットをトップ・ページにだけ表示する記述


最後は…オリジナルのトップページ用の HTML マークアップです…

トップページ用の HTML マークアップ　(ボタンクリックで引用記事が開閉)

<ul class="blur dialog-home">
<li><a tabindex="-1" href="URL">Text</a></li>
</ul>

ナビゲーションリンクに必要なだけ２列目を増やして下さい…

今回は…文字の「影」だけで文字を表現してみましたが…

画像重点のデザイン系のサイトなどでは…

テーブルタグなどでサムネイル画像を配置したり…

イメージギャラリーを作成したりして…

ダイアログで表示させれば…

かなり…独創的なトップページが作れると思いますよ…

デザイン系のサイト運営者の方は…

挑戦してみては如何でしょう…

Tips Header Sidebar Main Footer Current-Label : Universal