Evernote の Webクリッパー簡易版の余白などを CSSをいじってマトモにする

Evernote の Webクリッパー「簡易版の記事」で保存すると、タイトルや左右の余白が変に大きいので、 Google Chrome や Firefox のアドオン Stylus を利用して CSSを変更してマトモにする

最終イメージはこんな感じ(前→後)

ブラウザで Stylus をアドオンに追加して、こんな感じに CSSを追加する
view plainprint?
  1. /* 上部スペース */  
  2. body[class*="en-simplified-article"]{  
  3.     padding-top: 0.5em;  
  4. }  
  5.   
  6. /* 全体のマージン等 */  
  7. div[id="box"]{  
  8.     padding-left: 0em !important;  
  9.     padding-right: 0em !important;  
  10.     width: auto !important;  
  11. }  
  12.   
  13. div[id="box_inner"]{  
  14.     margin-left: 0em !important;  
  15.     margin-right: 0em !important;  
  16. }  
  17.   
  18. /* タイトル */  
  19. h1{  
  20.     font-size: 20px !important;  
  21.     font-weight: bold !important;  
  22.     line-height: 1.2em !important;  
  23. }  
  24.   
  25. /* タイトルの下の線 */  
  26. div[id="articleHeader__separator"]{  
  27.     padding-top: 0em !important;  
  28.     padding-bottom: 0em !important;  
  29. }  
  30.   
  31. /* 本文 */  
  32. p{  
  33.     /* font-size: 14px; */  
  34.     margin-bottom: 1em !important;  
  35. }  
  36.   
  37. /* メージの位置 */  
  38. img{  
  39.     margin-left: auto;  
  40.     margin-right: auto;  
  41. }  
  42.   
  43. /* イメージ表題の位置(本文に strong 要素があると改行されてしまう) */  
  44. strong{  
  45.     width: 100%;  
  46.     display: inline-block;  
  47.     text-align: center;  
  48. }  
あとは、通常通りWebクリッパーを起動し、Stylus から作成した CSS を適用(終わったら戻す) して保存すればOK

クリップ段階では左右余白がきついように見えますが、Evernoteでは更に余白が追加されるため、上記くらいで問題ありません

上記 CSS では、strong をセンタリングしていますが、文章途中に strong があると開業されてしまいますので、お好みでコメントアウトしてください


コメント

コメントを投稿