印刷(プレビュー)ですべてのリンク先が表示される

2016年3月15日 at 1:06

特に不便なのがオートナビのリンク先がすべて表示されてしまうことです。
開発者の方のデバッグ用に設定されているのでしょうか。
エレメンタルのテーマです。

concrete/themes/elemental/css/build/bootstrap-3.2.0/print.less
の@media print の帯出し元のどこかを触れば印刷時に各ブロックに設定されたリンク先が表示されなくなるんでしょうか。

よろしくお願いいたします。
concrete5.7.5.6

タグ:

Re: 印刷(プレビュー)ですべてのリンク先が表示される

2016年3月15日 at 8:45
該当する箇所だけ書いておきます
print.lessの20行目あたり。


a[href]:after {
content: " (" attr(href) ")[/url]";
}
 

Re: 印刷(プレビュー)ですべてのリンク先が表示される

2016年3月15日 at 11:34
ねこみみ隊長さん、早速のアドバイスありがとうございます。


後ろに[/url] をつけたり…すべてコメントアウトしてみたり
print.lessをリーネームしてみたり printxxx.lss
print.lessをインポートしている bootstrap.lssをリネームしてもエラーにもならないし何の手ごたえもありません。

web検索でも a:afterは印刷指定に間違いなさそうですが全く違うところを触っているような手ごたえのなさです。ここにブレークポイントでもつけられたらいいんですけど。

実際の場所は下の通りです。場所はわかったのでいろいろやってみます。
ありがとうございました。

apprication/themes/xxxxx/css/build/bootstrap-3.2.0/print.less
20:// a[href]:after {
21:// content: " (" attr(href) ")[/url]";
22:// }
 

Re: 印刷(プレビュー)ですべてのリンク先が表示される

2016年3月15日 at 12:17
実際に触っているのは
concrete5.7.5.5から5.7.5.6にアップデートした後に

自分用のテーマファイルを
バージョンアップ前の
concrete/themes/elemental
からコピーしてきて使っているんですがこのやり方が間違っていて

concrete/update/concrete5.7.5.6/concrete/themes/elemental
から持ってくるべきっだったのでしょうか?

apprication/\themes/xxxxx/css/build/bootstrap-3.2.0/print.css
をさわっていますが他の lessファイルもxxxxx以下のファイルをさわって問題ないんですが。
 

Re: 印刷(プレビュー)ですべてのリンク先が表示される

2016年3月15日 at 12:44
単純にBootstrapのprint.cssが読み込まれた後に記述するCSSのどこでもいいので


@media print {
a[href]:after {
content:none;
}
}


と上書きしてあげればいいと思うんですが。
私はいつもBootstrapを使う時に書いてます。

lessなどのCSSプリプロセッサや
concrete5(5.7系)でのテーマの作り方に関しては別途検索してください。

(concrete5 5.7)のテーマを作成する::エレメンタル(Elemental)カスタマイズの準備



(ごめんなさい、急ぎの案件でゆっくり説明してあげられそうにないのです)
 

Re: Re: 印刷(プレビュー)ですべてのリンク先が表示される

2016年3月15日 at 12:50
入れ違いですみません

content:none;もためしてみましたが駄目でした。
僕と同じような経験をした人おいでませんかconfused
 

Re: 印刷(プレビュー)ですべてのリンク先が表示される

2016年3月15日 at 12:45
使用環境
さくらのレンタルサーバ スタンダード

もう一度クイックインストールして concrete5.7.5.5からバージョンアップをせずに
concrete/themes/elemental/ 以下のディレクトリで同じことをやってみましたが結果は同じでした。

他の皆さんも elementalからコピーしたテーマを使って顧客に納品しているとすれば後々文句を言われそうな気がしますけど。僕もちょっと時間をおいて言い訳を考えてみます。

ねこみみ隊長さんも、もし試してみる時間があればよろしくお願いいたしますsmiling
 

Re: 印刷(プレビュー)ですべてのリンク先が表示される

2016年3月15日 at 22:25
テーマのインストール方法に話が進むと話がややこしくなるのでさくらのクイックインストールを使わずにconcrete5.7.5.6を直接FTPで送りインストールしたもので検証しました。
エレメンタルテーマのファイルで確認しています。

システムと設定/サーバー設定一覧/デバッグ設定
というのを見つけたので

エラーを表示 にチェック
エラー詳細 エラーのデバッグ出力を表示にチェックの状態で

concrete/themes/elemental/css/presets/defaults.less
の2行目をエラーにしてみました。

1:@preset-name: "Sunrise";
2:×@preset-icon: concrete-icon(#75ca2a, #fff, #0099ff);
3:@preset-fonts-file: "build/fonts/defaults.less";

この時にトップページを表示させると添付ファイルのようなエラーが表示されます。
間違えないように2行目がエラーになるように不要な文字を挿入しています。
添付ファイルには見てほしくないサーバー名も含まれておりますがひとつづつ消していくのも手間なのでご了承ください。


同じように
concrete/themes/elemental/css/build/bootstrap-3.2.0/print.lessを呼び出している
concrete/themes/elemental/css/build/bootstrap-3.2.0/bootstrap.lessの2行目もエラーになるように不要な文字を挿入してみましたがエラーにはなりません。
bootstrap.lessも print.lessも使われていないという証拠です。

concrete/themes/elemental/css/build/bootstrap-3.2.0/bootstrap.lessの二行目に不要文字を挿入
1:// Core variables and mixins
2:×@import "variables.less";
3:@import "mixins.less";


ねこみみ隊長さんが嘘をいう必然性もないので非常に困ったチャンの状態で悩んでおります。
超初心者向けでなく一般向けで話題を変えての質問も考えている状況ですのでよろしくお願いいたします。
添付: 2016-03-15_.png
 

Re: 印刷(プレビュー)ですべてのリンク先が表示される

2016年3月16日 at 11:36
main.less の最後に下記を記述してみてください。


@media print {
a[href]:after {
content: "";
}
}


お約束のキャッシュのクリアをお忘れなく ^^

よろしくお願いします。
 

Re: 印刷(プレビュー)ですべてのリンク先が表示される

2016年3月16日 at 13:54
nipperさん。ありがとうございます。

おっしゃる方法で解決しました。
でも、どこで指定されているのかも気になるのでさがしていたら
concrete/themes/elemental/css/bootstrap-modified.css

で見つかりました。このファイルは圧縮されているようでエディタで触る気にはなれません。
圧縮前のファイルはサンプルには入ってないようですね。
 

Re: 印刷(プレビュー)ですべてのリンク先が表示される

2016年3月16日 at 15:16
ねこみみ隊長さん
nipperさん
ありがとうございました。

concrete/themes/elemental/css/bootstrap-modified.css
を削除してもサンプルには何も影響ありませんでした。
どこからもインポートされていないようです。

結論としては concrete5.7のコアシステムで読み込まれていると思うことにしました。
だからわざわざ
content: "";を指定しなければいけないようですね。

長年concrete5を使っている人はelementalをコピーして使わずにカスタムテーマを使っていると思いますがそれでもcontent: "";の指定が必要だということはそれ以外考えられません。コアの開発に携わっている人にしかわからない部分だと思います。

この質問はこれでめでたく終了しました。
最後に他の人も考えてもらってありがとうございました。
 

Re: 印刷(プレビュー)ですべてのリンク先が表示される

2016年3月16日 at 19:09
ディーンさん

手っ取り早いので先ほどの方法を書きましたけど、print.less の21行目と bootstrap-modified.css の該当箇所の両方をコメントアウトしても URL は非表示になりますよ。

プリント時に URL を表示するのは、考え方の違いだと思います。
画面の見たままをプリントしたいと思う人と、リンクテキストだと明示したい人の違いじゃないでしょうか。

initializr、Bootstrap、Foundation などの CSSフレームワークは、プリント時に URL を表示するようになっています。
海外では下記の記事を参考にしてるんじゃないかなぁと勝手に思ってます。

http://alistapart.com/article/goingtoprint

古い記事ですけど、a list apart の記事は影響力ありそうですしね ^^

以上、解決済みですけどコアではなく Bootstrap の仕様のはずなので補足させていただきました。

よろしくお願いします。

追記
今、さくらのクイックインストールで試してみました。
bootstrap-modified.css の該当箇所をコメントアウトするだけで非表示になりましたね。


/* a[href]:after{content:" (" attr(href) ")"} */


一度、試してみてください。

いずれにしても、印刷時の URL を消す方法はわかりにくいですけどね。
 

Re: 印刷(プレビュー)ですべてのリンク先が表示される

2016年3月17日 at 22:04
昨日「bootstrap-modified.css を削除しても何も変わらかった」というのは間違いでした。
ブラウザキャッシュが残っていたようです。

システムと設定-デバッグ設定でエラーにならないのは本当です。
今回ほどブラウザのデバッガをあれこれ使ったのは初めてですがfirefoxの開発ツールが一番よくできていますね。

bootstrap-modified.cssがみごとに整形されて表示されました。保存もできるのでコピペしなくても手軽です、参考画面を添付しました。現在これをつかっています。

あれこれしているうちに背景に色を付けた色が印刷されないことにも気が付き困っているところです。もちろんfirefoxで「背景色と背景画像も印刷」にチェックを入れた状態です。

もしわかりましたらどこを触ったらいいのか教えてください。bootstrap-modified.cssの中から @media printをすべて削除してもダメでした。

追記
ところでbootstrap-modified.cssはどこでインポートされているのかもわかりません。