Bootstrap を利用してwebサイトを構築した時、ページをプリントアウトするとリンクの箇所に意図していないのにURLが記載されていて驚いてしまいました。
ブラウザのプリント設定?それともほかの?・・・と調べてみたところBootstrap が原因でした。
もくじ
Bootstrap の@media print が原因
Bootstrap 3 にはページ印刷の際に、リンク箇所(例えばグローバルメニュー等)のリンクURLを表示させる設定がCSSに施されていました。
bootstrap.css (v3.3.2)で192行目付近から、その print 設定がありました。
下記の内容です。
a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; }
CSSで、印刷時にURLを表示する設定を打ち消す
原因がCSSと分かったので、それを打ち消す設定を記述(もしくは削除)すれば、プリント時にリンクURLが表示されなくなります。
下記が打ち消した例になります。
@media print { a[href]:after { content: "" !important; } abbr[title]:after { content: "" !important; } }
あえて残す場合も、この部分にフォントサイズなど必要なCSSを追記して活用してみてください。
久しぶりにしっかり印刷対応する必要があり、「このURLは何だ?」と一瞬ヒヤヒヤしてしまったのでメモです。