ブログBLOG

Google Chrome エスクテンション [ jsshell ] 上で jQueryを実行し Webサイトを見やすく。

更新日：2012/11/16

Webサイトの構築する際、デバッガやユーザースクリプトの実行環境は各々利用されていると思いますが、実際の開発時以外でも Webページを読みやすくしたり jQueryの学習をはじめるときなどでも便利です。

Google Chrome でスクリプトを実行するエクステンション [ jsshell ] を利用し、Webページを読みやすくしてみようと思います。

Chromeへ jsshellを追加

追加されたアイコンをクリックするとスクリプトを入力するウィンドウが表示されます。

*******

例えばウィキペディアの記事を読むときに、画面を最大化にすると文字が横に長すぎてとても読みづらいので、最大幅を指定してフォントサイズも変更してみます。

要素を確認

コンテンツを格納している要素 [ mw-content-text ] に [ max-width ] と [ font-size ] を設定して見やすくします。

JavaScript


$('#mw-content-text').css({ maxWidth: '50em', fontSize: 'medium' });

$('#mw-content-text').css({ maxWidth: '50em', fontSize: 'medium' });

最大幅が指定されフォントサイズが変更されました。

ただこれだとウィンドウの幅を小さくしているのと変わりません… 横に長い画面を生かしたレイアウトにしたいと思います。

変更したい部分の要素を確認

「概要」の見出しは [ h2 ] になっているので、次の見出しまでの記事を３カラムにして見やすくします。

JavaScript


$('h2:contains("概要")').nextUntil('h2').wrapAll(
  $('&lt;div&gt;&lt;/div&gt;').css('-webkit-column-count', '3')
);

$('h2:contains("概要")').nextUntil('h2').wrapAll(

$('<div></div>').css('-webkit-column-count', '3')

);

３カラムになりました。

*******

例えばONE PIECEのキャラクターを知りたいと思った時に、人物が多すぎてわかりづらいので人物を一覧にまとめて見れるようにします。

人物は [ dt ] 説明は [ dd ] になっているので、[ dt ] 以降の [ dd ] をすべて隠して [ dt ] をクリックして見れるようにします。

JavaScript


$('dd').hide();
$('dt').click(function () {
  $(this).nextUntil('dt', 'dd').toggle();
});

$('dd').hide();

$('dt').click(function () {

$(this).nextUntil('dt', 'dd').toggle();

});

人物が一覧にまとまり、

人物をクリックして詳細が見れるようになりました。

（藤崎）