search
LoginSignup
81
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

いまみているウェブページを阿部寛のサイトっぽくするChrome拡張を作った

日本を代表するすばらしい俳優であり, ブルータルウェブレイアウトの先駆者である阿部寛氏と彼のウェブサイト制作者への敬意をこめて.

成果物

左が通常のWikipedia、右がこの拡張機能でAbehiroshize(アベヒロシャイズ)したページ.

Screen Shot 2017-11-20 at 11.08.50.png

Githubレポジトリ

技術仕様

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;
}

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
81
Help us understand the problem. What are the problem?