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

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

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

ブラウザで Stylus をアドオンに追加して、こんな感じに CSSを追加する
/* 上部スペース */
body[class*="en-simplified-article"]{
    padding-top: 0.5em;
}

/* 全体のマージン等 */
div[id="box"]{
    padding-left: 0em !important;
    padding-right: 0em !important;
    width: auto !important;
}

div[id="box_inner"]{
    margin-left: 0em !important;
    margin-right: 0em !important;
}

/* タイトル */
h1{
    font-size: 20px !important;
    font-weight: bold !important;
    line-height: 1.2em !important;
}

/* タイトルの下の線 */
div[id="articleHeader__separator"]{
    padding-top: 0em !important;
    padding-bottom: 0em !important;
}

/* 本文 */
p{
    /* font-size: 14px; */
    margin-bottom: 1em !important;
}

/* メージの位置 */
img{
    margin-left: auto;
    margin-right: auto;
}

/* イメージ表題の位置(本文に strong 要素があると改行されてしまう) */
strong{
    width: 100%;
    display: inline-block;
    text-align: center;
}
あとは、通常通りWebクリッパーを起動し、Stylus から作成した CSS を適用(終わったら戻す) して保存すればOK

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

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


コメント

コメントを投稿