広告

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

カテゴリー別アーカイブ  :  

スマホとPCでレイアウトを切り替える - レスポンシブデザイン

これからのブログはスマートフォンで見やすくする必要がある

最近はスマホアクセスが増加

最近はスマートフォンでのアクセスが増えています。特に一時的なアクセス急増の場合は、Twitterでツイートされたりした時なので、尚更モバイルからのアクセスの割合が増えます。

このキャプチャは実際に、このブログの記事がツイートされた時のアクセスログですが、71%が携帯電話からのアクセスでした。

IE6が消えたと思ったら、スマホなんて面倒なもの作りやがって!と怒っても仕方ありません。頑張って対応したいと思います。

レスポンシブデザイン

先にお断りしておきますが、私はレスポンシブデザインの勉強はまったくしていないので、この記事の内容は自己流です。一般的な流儀に判している可能性もありますことを、ご承知おきください。

最近、こんなコメントを頂きました。

TOMさんのブログをスマホ(iphone)で拝見すると、両サイドがメインの記事の下に来るようになっていますが、裏技でしょうか?
私のブログはそのようにならないのですが・・・

このブログはパソコンで見たときとスマートフォンで見た時はルックスが変わるようにしてあります。下は左がパソコンで見た場合、右がスマホで見た場合の表示のされ方です。ただし、Tomさんはスマホを持っていないので、右はエミュレーションで表示させたものです。実際にスマホで見た時は、もっと崩れていると思います。

PCレイアウト    スマホレイアウト

パソコンの方は、ブラウザのサイズによっても見え方が、変わります。下はヘッダの部分だけを切り取った画像ですが、画面が広い時と、狭い時で横に並ぶ個数が変わっています。

画面が広い時のヘッダ    画面が狭い時のヘッダ

こういう風に状況によってレイアウトが変わるものをレスポンシブデザインと呼ぶそうです。

レスポンシブデザインを実現する方法は、いろいろあると思います。このブログの場合は、主にスタイルシートで作り、スタイルシートだけでやるのが難しいところにJavaScriptを使いました。ただし、何も見ないで作ったので自己流です。一般的な流儀に反しているかもしれません。

3カラムの構造

下は、このブログを書いているファンブログの3カラムスキンの構造です。ファンブログ以外でも、ほぼこれに近い形が多いと思います。

下のスキンは、記事部分が500px(500ピクセル)、左サイドバーが200px、右サイドバーが160pxです。

このブログのスキンは完全オリジナルなので、下のとは違います。

id="container"
ヘッダ
id="header"
id="main"
id="wrapper"
700px
左サイドバー
id="sidebarLeft"
200px
記事部分
id="content"
500px

右サイドバー
id="sidebarRight"
160px

フッタ
id="footer"

これをスマホの時だけ、下の構造にします。こうすれば両サイドがメインの記事の下に来ます。下の図は見やすくするために左右に余白がついていますが、この余白をなくせば、スマホの横幅いっぱいで表示されます。

これはスタイルシートを切り替えるだけで実現できます。

id="container"
ヘッダ
id="header"
id="main"
id="wrapper"
記事部分
id="content"
左サイドバー
id="sidebarLeft"
右サイドバー
id="sidebarRight"
フッタ
id="footer"

サイドバーを下に落とす

右のサイドバーを下にするには、どうしたらいいでしょうか。それには、パソコンで見る時は700pxあるwrapperの横幅を100%にすればいいです。wrapperの横幅が左右いっぱいに広がれば、右サイドバーは収まりきらないので、下に落ちます。

次に左サイドバーを、記事の下に落とします。これも同じように、記事の部分、idがcontentの部分の横幅を100%に変更します。これで、収まりきらない左サイドバーは記事の下に落ちます。

最後は下に落ちた左右サイドバーの横幅も100%に変更します。そうすれば、スマホで見たときは、上から記事、左サイドバー、右サイドバーの順に横幅いっぱいで表示されます。

つまり、wrapper、content、sidebarLeft、sidebarRightの横幅を、すべて100%にすればいいということです。

ただし、それをやるにはmainの中のHTMLが、下のようになっている必要があります。最初に記事、次に左サイドバー、その次に右サイドバーの順番です。

<div id="main">
	<div id="wrapper">
		<div id="content"></div>
		<div id="sidebarLeft"></div>
	</div>
	<div id="sidebarRight"></div>
</div>

先にある記事が横幅100%になったことで、残りは入りきらずに下に落ちますが、先にサイドバーがあれば、記事が下に落ちます。

どうやってスタイルシートを切り替えるか

スタイルシートを切り替える方法ですが、このブログではbodyタグのidを変更しています。パソコンで見たときにはidなし、スマホで見たときにはidが"sp"となるようにしています。

その実現方法として、JavaScriptを使っています。ユーザーエージェントを見て、スマホブラウザの時に、idをつけるという方法です。ソースコードは下の通りです。

<script type="text/javascript"><!--
(function(){
	if(0<=navigator.userAgent.indexOf('Android')){
		document.body.id='sp';
	}else if(0<=navigator.userAgent.indexOf('iPhone')){
		if(-1==navigator.userAgent.indexOf('iPad')){
			document.body.id='sp';
		}
	}else if(0<=navigator.userAgent.indexOf('iPod')){
		document.body.id='sp';
	}
})();//-->
</script>

このブログで使っているスクリプトから、該当箇所だけ抜き出しました。もし正しく動作しなければご連絡ください。

このスクリプトをコピーして、bodyの開始タグ(<body>)の直後に張り付ければ、スマホの時はidが切り替わるようになります。貼り付ける場所は必ず<body>の直後にしてください。

後は、body#spに対応したスタイルシートを、下のように追加すれば、スマホ用レイアウトで表示されます。

body#sp wrapper,body#sp content,
body#sp sidebarLeft,body#sp sidebarRight{
  width:100%;
}

スマホでだけ表示させたいもの、あるいはスマホでだけ表示させたくないものは、スタイルシートの display で切り替えます。

このブログのヘッダのカテゴリーメニューのように横幅で並ぶ個数を切り替えたいなら、別の記事「横幅に合わせ並ぶ個数を自動調整するスタイルシート」をご覧ください。

画像の大きさを自動調整したいときの参考記事は「絶対はみ出さない画像!自動でサイズ調節するスタイルシート」です。そちらを参考にしてください。


このブログでは、スキンのheadに次のmetaタグを書き込んでいますが、説明は省略します。これを書かなくても、サイドバーを下に落とす目的は達成できます。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

新ブログ「Big Bang」で続きを読む

headのタイトルにページ番号とカテゴリー名を追加する

先日の記事「ブログ移転で rel="canonical" は有効か?」で、このブログではヘッダのタイトルに「ページ番号」や「カテゴリー名」を追加していると書きました。よく考えたら、その方法を知りたい方がいるかもしれないと思いますので、この記事にまとめます。

先日の記事に書いた通り、このスクリプトを適用したら、ほんの数日でGoogleの検索結果に反映されるようになりました。この記事は、このブログを書いているファンブログを例にしていますが、他のブログでも充分応用が効く内容だと思います。

現在、このブログのスキンは下の構成になっています。(2013年3月16日時点)

このスキンは独自仕様なので、ファンブログの物とは違います

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS" />
<meta name="description" content="{$BlogDescription$}" />
<meta name="keywords" content="HTML,css,JavaScript,スタイルシート" />
<meta name="author" content="Tom" />
<meta name="copyright" content="Copyright {$BlogName$}" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="start" href="{$BlogUrl$}" title="{$BlogName$}" />
<link rel="stylesheet" type="text/css" href="{$BlogUrl$}style.css" charset="Shift_JIS" media="all" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{$BlogUrl$}index1_0.rdf" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<title>{$BlogEntryTitle$} | {$BlogName$}</title>
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="" media="all" />
<script type="text/javascript" src=""></script>
<![endif]-->
<script type="text/javascript" src=""></script>
</head>
<body>
(省略)
</body>
</html>

この中のtitleタグの中身{$BlogEntryTitle$} | {$BlogName$}です。

{$BlogEntryTitle$}は、記事のタイトルに、
{$BlogName$}ブログのタイトルに自動で変換されて表示されます。

ファンブログのスキンの初期状態

ただし、ファンブログのスキンの初期設定は
{$BlogName$} だけが書き込まれていて、{$BlogEntryTitle$}はありません。このままだと「ブログ名」だけが表示され、「記事のタイトル」は表示されません。これは検索結果にも同じように反映されます。

たとえば次のキーワードで検索してみます。

キーワード

その結果、今現在このブログの記事が1位に表示されています(2013年3月17日時点)。下のどちらかが実際の表示結果、もう片方は画像を加工した物ですが、この2つを比べてみてクリックされやすいと思うタイトルはどちらでしょう?

実際の検索結果表示画面 ブログタイトルのみの場合

左が実際の表示。右がファンブログのスキンのままだと表示される状態を再現したものです。検索した人の入力した2つのキーワード。これがタイトルに含まれる方がクリックされやすいと思います。ブログ名だけで、キーワードのない右は、せっかく1位にあってもそのままスルーされそうな気はしませんか?

ファンブログのスキンに「記事のタイトル」を追加する方法

ボタン

まず、ファンブログの管理画面左の「スタイルの編集」をクリック。
画面が変わったら「フリースキンの編集」と言う項目から「1記事」を選択。
「フリースキンの編集」は画面左にあり、次の一覧になっています。

  • スタイルシート
  • メイン
  • ポータル
  • アーカイブ
  • 1記事
  • プロフィール

この中の「1記事」をクリックします。「1記事」の画面になったら画面右のタイトルが「1記事テンプレートの編集」になります。この右側の枠の中を編集します。

1記事テンプレートの編集で一番上から見ていくと、途中で下のように書かれた行があります。

<title>{$BlogName$}</title>

これを、次のように変更します。

<title>{$BlogEntryTitle$} | {$BlogName$}</title>

これで保存すれば、「記事のタイトル | ブログの名前」という風に表示されます。

タイトルに「ページ番号」を追加するスクリプト

ようやくここからが、今回の本題です。今回やるのは「ページ番号」の追加と、「カテゴリー名」の追加です。「ページ番号」を追加するスクリプトは「メイン」スキンに書き加えます。まず、上の要領で「フリースキンの編集」から「メイン」を選択して開きます。ちなみに、このブログのメインスキンはtitleタグを下のように書き直してあります。

<title>{$BlogName$} | ブログ インデックス</title>

メインスキンのheadに、次のコードを書き加えます。ソースの中の「ayzfqir5」はこのブログの場合です。各自、自分のブログのURLに変更してください。

自分のブログのURLから、赤字の部分を抜き出して、下のコードの「ayzfqir5」を書きかえます。
http://fanblogs.jp/ayzfqir5/
<script type="text/javascript"><!--
url=window.location.href.match(/^https?:\/\/fanblogs\.jp\/ayzfqir5(\/(([0-9]+)\/?)?)?$/);

if(url){
	var number=url[3]?url[3]:1;

	if(document.title){
		document.title+=' page'+number;
	}else{
		document.querySelector('title').innerHTML+=' page'+number;
	}
}
//-->
</script>

新ブログ「Big Bang」で続きを読む

記事の先頭にアイコンを挿入する方法

このブログでは、下のキャプチャのように記事のカテゴリーごとに違うアイコンを表示しています。その実現方法です。このブログはファンブログというサービスに書いているので、ファンブログを例にとりますが、他のブログでも応用できます。

記事ごとにアイコンを配置したindexページ

アイコンを入手する

先に結論を書くと、このブログで使っているアイコンはFree Icon set - Icon Edenからダウンロードした無料アイコンセット「iCandies」です。

インターネットを探すと、無料で使えるアイコンは沢山見つかります。今回、自分はGIGAZINEの記事「フリーでハイクオリティな「IconEden」による商用利用可能な無料アイコンセットいろいろ」で、このアイコンを見つけました。GIGAZINEを見ると関連記事で、まだまだたくさん色々なアイコンを紹介してくれています。

他にもPhotoshop VIPの「RESOURCE/Icon まとめ記事/アイコンまとめ」など、アイコンを画像付で紹介してくれているサイトは沢山見つかるので、そういうところで探すと、お気に入りのものが見つかると思います。

アイコン画像をサーバーにアップロードする

自分の使うアイコンを入手できたら、それをサーバーにアップロードします。ファンブログの場合、記事の中にアップロードするしかないのですが、ひとつの記事にアップロードできる画像は5個までです。何十個もアップロードする場合は、とても大変な作業になります。

なので、私は自分の契約している別サーバーにFTPでアップロードしました。私は使ったことがないので、わかりませんが無料で使えるファイルサーバーはいくつかあるようです。

カテゴリーとアイコンを紐付ける

今回は、カテゴリーごとに違うアイコンを表示させるため、まずその設定をします。つまり、どのカテゴリーでどのアイコンを表示させるかの設定です。具体的にはJavaScriptのオブジェクトを使って連想配列で処理します。このブログの場合は次のようになります。

var categories={
	"category_5":"37_64x64.png",
	"category_28":"43_64x64.png",
	"category_6":"41_64x64.png",
	"category_7":"51_64x64.png",
	"category_27":"50_64x64.png",
	"category_30":"45_64x64.png",
	"category_34":"40_64x64.png",
	"category_35":"36_64x64.png",
	"category_33":"44_64x64.png",
	"category_20":"42_64x64.png",
	"category_13":"2_64x64.png",
	"category_32":"55_64x64.png",
	"category_24":"34_64x64.png",
	"category_18":"25_64x64.png",
	"category_15":"26_64x64.png",
	"category_26":"9_64x64.png",
	"category_16":"56_64x64.png",
	"category_19":"48_64x64.png",
	"category_25":"54_64x64.png",
	"category_29":"5_64x64.png",
	"category_31":"19_64x64.png"
};

左側の "category_xx" がキーで、右の "xx_64x64.png" が、呼び出すファイル名です。

キーは、カテゴリーごとのURL「http://fanblogs.jp/ユーザー名/category_xx/」の最後「category_xx」を記入します。たとえば、カテゴリー「超初心者HTML入門」のURLは「http://fanblogs.jp/ayzfqir5/category_28/」なので「category_28」になります。

私はアイコンを、すべて同じディレクトリにアップロードしたので右側はファイル名だけですが、ファンブログにアップロードした場合は、ファイル5個ごとにディレクトリ構成が違うので、フルパスで記入する必要があります。

挿入スクリプトの本体

今、このブログのスキンは完全自作でファンブログのものとは違う構成なのですが、ファンブログのスキンなら下のようになっていると思います。

<BlogEntries>
<div class="entry">
<div class="entryDate">{$BlogEntryDateformat="%Y年%m月%d日" language="jp"$}</div>
<h2 class="entryTitle"><a href="{$BlogEntryPermalinkUrl$}">{$BlogEntryTitle$}</a></h2>

<div class="entryBody clr">{$BlogEntryBody$}</div>
<BlogEntryIfExtended>
	<div class="entryContinue"><a href="{$BlogEntryPermalinkUrl$}#BlogEntryExtend">続きを読む...</a></div>
</BlogEntryIfExtended>
<div class="entryInfo">
	投稿者:<a href="{$BlogEntryWriterUrl$}" target="_blank">{$BlogEntryWriterName$}</a>|{$BlogEntryDate format="%H:%M"$}
	<BlogEntryIfCategory>|<a href="{$BlogEntryCategoryLink$}">{$BlogEntryCategory$}</a></BlogEntryIfCategory>
	<BlogEntryIfAllowComments>|<a href="{$BlogEntryPermalinkUrl$}#comments">コメント({$BlogEntryCommentCount$})</a></BlogEntryIfAllowComments>
	<BlogEntryIfAllowPings>|<a href="{$BlogEntryPermalinkUrl$}#Trackback">トラックバック({$BlogEntryTrackbackCount$})</a>	 </BlogEntryIfAllowPings>
 </div>
</div><!-- entry -->
</BlogEntries>

この最後の「</BlogEntries>」の直後に次のコードを追加します。それがスクリプトの本体です。書き換えるスキンは「メイン」「アーカイブ」「1記事」の3つです。

<script type="text/javascript"><!--
(function(){
	var categories={
		"category_5":"37_64x64.png",
		"category_28":"43_64x64.png",
		"category_6":"41_64x64.png",
		"category_7":"51_64x64.png",
		"category_27":"50_64x64.png",
		"category_30":"45_64x64.png",
		"category_34":"40_64x64.png",
		"category_35":"36_64x64.png",
		"category_33":"44_64x64.png",
		"category_20":"42_64x64.png",
		"category_13":"2_64x64.png",
		"category_32":"55_64x64.png",
		"category_24":"34_64x64.png",
		"category_18":"25_64x64.png",
		"category_15":"26_64x64.png",
		"category_26":"9_64x64.png",
		"category_16":"56_64x64.png",
		"category_19":"48_64x64.png",
		"category_25":"54_64x64.png",
		"category_29":"5_64x64.png",
		"category_31":"19_64x64.png"
	};

	var icon_url='ここにアイコンのディレクトリへのPATHを記入';
	var entries=document.querySelectorAll('div#entries div.entry');

	for(var i=0;i<entries.length;i++){
		var a=entries[i].querySelectorAll('div.entryInfo a');
		var icon=categories[a[1].href.replace(/^.+?\/(category_[0-9]+).*$/,'$1')];
		var img='string'==typeof icon?'<img src="'+icon_url+icon+'" alt="" class="category_icon" />':'';
		var body=entries[i].querySelector('div.entryBody');

		body.innerHTML=img+body.innerHTML;
	}
})();//-->
</script>

var categories の中身は自分のブログに合わせてください。

「ここにアイコンのディレクトリへのPATHを記入」と書いてある場所には、アイコンセットをアップロードしたサーバーのディレクトリへのPATHを記入します。ファンブログにアップロードしている場合は、アイコンのファイル名にPATHも含まれているので、空文字列にします。

a[1]の部分は、スキンがデフォルトの場合です。スキンを改造している場合は、添字の1を適切なものに訂正してください。

表示されるアイコンには、すべて「category_icon」というクラス名がつけられています。間隔などの調整はスタイルシートで行なってください。

本文を指定文字数で切り詰める

ここまでで、スキンは完成しています。ただ、うちのブログの様に、本文を切り詰めて、最後に「この記事を読む」と付ける場合は、上のスクリプトを一部変更します。

この行を削除して、下のソースに差し替えます。

body.innerHTML=img+body.innerHTML;

差し替えるソース

var str=body.innerHTML.replace(/\<script.*?\>.*?(\<\/script\>)|\<style.*?>.*?(\<\/style\>)|\<.+?\>/g,'');
body.innerHTML=img+(str.length>150?str.slice(0,149)+'…':str)+'<p class="read_more"><a href="{$BlogEntryPermalinkUrl$}">この記事を読む</a></p>';

上は、文字数を150字にする場合です。150字より長ければ、149文字で切って、150文字目に「...」を入れます。文字数は自分の都合に合うように調整してください。

もちろん、この最後の処理は「1記事」には適用しません。1記事の場合、アイコンを先頭に挿入することで、表示のバランスが狂うことがあります。それはレイアウト的な問題ですので、各自で修正してください。このブログでは「1記事」のみ、アイコンを記事本文でない場所に配置して解決しました。

新ブログ「Big Bang」で続きを読む

ファンブログでの404ページ表示法

この記事はファンブログ専用情報です。2013年3月10日、記事を大幅に書き換えました。

今ご覧いただいている、このブログで実際に使っている方法は下のやり方とは違います。このブログではappendChildという方法で「404の時だけ文章を追加」しています。下の説明は、元々書き込まれている文章の「表示・非表示の切替え」をしています。SEO的には、不要な文章がない方が望ましいですが、説明が難しくなるので簡単な方法を書いています。

今回は、ファンブログ純正のスキンを使っているブログ「八百屋勘太のおもしろ体験談」のキャプチャを使わせていただきました。
ページがある時

ファンブログのページはarchive/1から始まるので、archive/0というページは存在しません。

 <- このページは存在しない。

ファンブログだと、何も設定しない場合、存在しないページは次のように表示されます。

記事がないページ

記事がないので、その下の「HOMEへ行くナビ」や、「トラックバック」「コメント」が上に上がって表示されています。これだと、記事がないのがわかりづらいので、「記事が見つからない」というメッセージを表示するように変更します。

設定方法

まず、サイドバーに1項目追加して、次のソースをそのまま貼り付けてください。サイドバーに項目を追加する方法がわからなければ、別記事「モジュールの設置方法」を参照してください。

<div id="message404" style="display:none;">
<h2 class="entryTitle">ご指定のページが見つかりません</h2>
<div class="entryBody">
ここに好きなメッセージを書いてください
</div>
</div>

<script type="text/javascript"><!--
if(-1==window.location.href.indexOf('profile')&&
	-1==window.location.href.indexOf('portal')&&
	!document.querySelector('.entryTitle a').innerHTML.length){

	var message=document.querySelector('#message404');
	var entries=document.querySelector('#entries');

	entries.parentNode.insertBefore(message,entries);
	entries.parentNode.removeChild(entries);

	message.id='entries';
	message.style.display='block';
}//-->
</script>

このソースの赤字と青字を好きな文章に書き換えてください。赤字がタイトル、青字が説明文です。今回はタイトルは変更せず、説明文のところで画像を使って説明しました。

完成したのは下のソースです。青字部分の場所だけ書き換えています。

<div id="message404" style="display:none;">
<h2 class="entryTitle">ご指定のページが見つかりません</h2>
<div class="entryBody">
<p style="text-align:center;">
<img alt="ページが存在しません" src="画像のURL" width="400" height="126" />
</p>
</div>
</div>

<script type="text/javascript"><!--
if(-1==window.location.href.indexOf('profile')&&
	-1==window.location.href.indexOf('portal')&&
	!document.querySelector('.entryTitle a').innerHTML.length){

	var message=document.querySelector('#message404');
	var entries=document.querySelector('#entries');

	entries.parentNode.insertBefore(message,entries);
	entries.parentNode.removeChild(entries);

	message.id='entries';
	message.style.display='block';
}
//-->
</script>

これを保存すれば、記事がないURLを指定された時に下のように表示されます。

ページがない時の表示

スクリプトの説明

初期状態では、追加したメッセージは非表示になっています。

<div id="message404" style="display:none;">
<h2 class="entryTitle">ご指定のページが見つかりません</h2>
<div class="entryBody">
<p style="text-align:center;">
<img alt="ページが存在しません" src="画像のURL" width="400" height="126" />
</p>
</div>
</div>

<script type="text/javascript"><!--

//開いているページがプロフィールでもポータルでもない場合、
//タイトルをクラス名entryTitleで探し、a タグの中身があるかを調べる
//なければ記事はない。その場合は括弧の中を実行
if(-1==window.location.href.indexOf('profile')&&
	-1==window.location.href.indexOf('portal')&&
	!document.querySelector('.entryTitle a').innerHTML.length){

	//非表示になっているメッセージを探す
	var message=document.querySelector('#message404');

	//記事の表示場所を探す
	var entries=document.querySelector('#entries');


	//本来記事が表示される場所の直前にメッセージを移動
	entries.parentNode.insertBefore(message,entries);

	//記事表示領域を削除(トラックバックやコメント欄も削除される)
	entries.parentNode.removeChild(entries);

	//メッセージのidをentriesに変更(スタイルシートを適用するため)
	message.id='entries';

	//メッセージを表示
	message.style.display='block';

}
//-->
</script>

このスクリプトを使うのは1記事ページだけなので、サイドバーではなく、1記事のスキンに書き込んでもかまいません。その場合は、スキンの最後に書いてください。entryTitleやentriesの前に書くと、それを見つけられないので正しく動きません。

今回のinsertBeforeの使い方は、少し特殊ですが、それに関しては別記事「appendChildやinsertBeforeでノードを移動させる」で詳しく説明しています。

余談ですが本来ペーがないときにはステータス404を返すのが決まりです。しかしファンブログは404ではなく200を返してきます。200というのは問題なしOKのコードです。確かに、記事がない空のページですが、ページそのものは表示されています。しかし、この場合200でいいのでしょうか?私は別のスクリプトで404が返って来れば、それ用の処理、200なら通常の処理という内容のものを書いたのですが、どうしてもうまく行かないので調べた結果404が返っていないことに気がつきました。

新ブログ「Big Bang」で続きを読む

最新記事だけ日付を消す新スクリプト -お知らせ枠の設置-

先ほど「querySelectorとquerySelectorAll」という記事を書きましたが、実はあれ、この記事の前フリです。

楽して稼ぎたい」のマスクドライダー17号さんなんですが、ブログを開くと最新記事を「お知らせ」欄として使っています。

最新記事を未来の日付にすれば、一番上に表示されるので、「お知らせ」を書いて常に表示できます。

問題なのが、しばらくの間「2017年05月27日」と表示されているんですね。待っていれば消えるんですけど。

どうやって消しているのかというと、スクリプトを使っています。そのソースを変えれば、もっと早くに、すぐ消えるんじゃないか?と、思ってソースを見てみました。実にドンくさいソースコードでした。

でもよく考えたら、これは私が書いたものでした困った

そのソースコードが、これですが、無駄に長い。「記事の日付を消したい」より

<script type="text/javascript">(function(){var entries=document.getElementById('entries');if(!entries){return;}var div=entries.getElementsByTagName('div');if(!div){return;}for(var i=0;i<div.length;i++){if(div[i].className=='entry'){var child=div[i].getElementsByTagName('div');if(child){for(var n=0;n<child.length;n++){if(child[n].className=='entryDate'){var date=child[n].innerHTML.replace(/^\s+|日\s*$/g,'').replace(/年|月/g,'/').split('/');var entrydate=new Date(date[0],date[1]-1,date[2]);var today=new Date();if(today.getTime()<entrydate.getTime()){child[n].style.display='none';div[i].className='entry future';break;}return;}}}}}})();</script>

これを、先ほどの記事「querySelectorとquerySelectorAll」を使って書きかえます。

まずは、古いコードをスキンから削除してください。もういりません。そして、この下のコードを使います。

新しいソースコード

<script type="text/javascript">date=document.querySelector('div.entryDate');if(date)date.style.display='none';</script>

すごく短くなった。querySelector恐るべし!

ただし、手を抜いています。最新記事の日付は常に未来である。その記事は必ず先頭に表示される。そういう前提で作りました。

設置方法

これを、スキンではなく、「2017年05月27日」の日付の記事の中に付け加えます。

張り付けるのは、記事の最初でも最後でも構いません。
問題がなければ、「2017年05月27日」の日付はソッコーで消えます。


追記

実際にマスクドライダー17号さんが設置したところ、ある事情でうまくいきませんでした。
(上のソースは、うまくいくように修正済みです)

それに関して別の記事「ソースのバグの作り方 -if文のカッコ-」で説明しています。

新ブログ「Big Bang」で続きを読む

ブログでクルクルスクロール

以前「ページの途中にリンクする」と言う記事でスムーススクロール「smoothscroll.js」というものを簡単に紹介しました。

このブログでは、スムーススクロールを使っているので、同じページの違う場所に飛ぶときは
クルクルとスクロールします。このように

smoothscroll.jsはスクリプトの外部ファイルです。
拡張子が「.js」のものはアップロードできるブログと、出来ないブログがあります。

ameba、FC2、Seesaa、ライブドア、JUGEMを調べましたが、拡張子が「.js」のファイルを
アップロードできるのはFC2とSeesaa blogだけでした。

ただしファンブログでは裏技を使えば、アップロードして使えます。

裏技については、おーとえす氏の記事「ファンブログにjava scriptをアップロードする方法」を参考にさせていただきました。

追記:おーとえす氏の記事の元ネタがありました。ぽあろ氏の
【カスタマイズ】ファンブログでFlashを使ってみよう|ファンブログ カスタマイズ ぽあろの休日」です。失礼しました。

今回はsmoothscroll.jsを例に、ファンブログでスクリプトファイルをアップロードして使う方法を
書きます。

新ブログ「Big Bang」で続きを読む