Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
83
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

いまみているウェブページを阿部寛のサイトっぽくする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;
}

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
83
Help us understand the problem. What are the problem?