日本を代表するすばらしい俳優であり, ブルータルウェブレイアウトの先駆者である阿部寛氏と彼のウェブサイト制作者への敬意をこめて.
成果物
https://chrome.google.com/webstore/detail/abehiroshize/okffapkklocfabdipcgpaiibomcjdopp
左が通常のWikipedia、右がこの拡張機能でAbehiroshize（アベヒロシャイズ）したページ.
技術仕様
DOM操作
基本的にjQueryでDOM操作しまくっているだけである.
左ナビゲーション判定
- ナビゲーションの判定について、
$('nav')や$('#menu')などをもとに判定して左側に表示しようと思っていたが、意外と世の中のサイトはマークアップが適当なものが多く、うまくいかなかったので<ul>だったらナビゲーションにする という強硬手段に出た. ただし、<main>タグ内にあるそれは除く.
$('ul').each(function() {
if ($(this).closest('main').length === 0) {
$(this).find('li').appendTo(`#${navigationInnerListId}`);
}
});
既存スタイルの削除
雑だが強制的にデフォルトスタイルを全部排除する. リセットすらしない.
function removeExistingStyles() {
const $styleElements = $('style');
const $stylesheetElements = $('link[rel="stylesheet"]');
const $cssElements = $('link[type="text/css"]')
$styleElements.remove();
$stylesheetElements.remove();
$cssElements.remove();
$('*').removeAttr('style');
}
背景の文字
CSSのbefore擬似要素に対して、<title>の文字列テキストを羅列させた.
#${contentId}:before {
content: '${documentTitle} ${documentTitle} ${documentTitle} ... ${documentTitle}';
z-index: 0;
font-size: 70px;
font-family: 'Pinyon Script', cursive;
word-break: break-all;
color: #D3F6E0;
}
参考
