【Bootstrap】印刷時に表示されるURLを消す方法

Bootstrap テクニック

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は何だ?」と一瞬ヒヤヒヤしてしまったのでメモです。