いまみているウェブページを阿部寛のサイトっぽくするChrome拡張を作った
5941 ワード
日本を代表するすばらしい俳優であり, ブルータルウェブレイアウトの先駆者である阿部寛氏と彼のウェブサイト制作者への敬意をこめて.
成果物
左が通常の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;
}
参考
Author And Source
この問題について(いまみているウェブページを阿部寛のサイトっぽくするChrome拡張を作った), 我々は、より多くの情報をここで見つけました https://qiita.com/kyoyababa/items/b7e80ac4815bcb95a49a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .