[WordPress.com] 記事のプリント画面を CSS で修正する

私自身はプリンターは現在では使っていないのですが、印刷して記事の内容を保存・管理する人もいると聞きます。

AccessMenuBarApps-12

mac の場合だと、「⌘(コマンドキー)+ P」で印刷設定画面が表示されるわけですが、そこから PDF ファイル形式で保存することもできます。

AccessMenuBarApps-10

私のブログの場合だと、pdf ファイル形式で記事を保存し、「プレビュー」で開くとこんな感じで表示されます。

AccessMenuBarApps-11

ブログでの表示そのままだと、pdf ファイルではちょっとごちゃごちゃした感じに見えるので、「@media print」を使って、以下のような CSS を CSS スタイルシートエディターに追加し、

/* プリント画面の修正 comemo20131112 */
@media print {
.entry-title {
	box-shadow: none !important;
	text-shadow: none !important;
}

div.sharedaddy,
.singular footer.entry-meta {
	display: none;
}
}

以下のような感じで表示の補正を行っています、というか、今回の記事作成にあたり、修正を加えてみました。

image

rect3015

AccessMenuBarApps-8

AccessMenuBarApps-6

rect3015

AccessMenuBarApps-9

なお、逆の場合、すなわち、自分自身が他のブログの記事などを pdf 形式などで保存しておきたいときなどは、例えば Safari であればリーダー機能、

AccessMenuBarApps-14

Firefox であれば、例えば、Pocket などを使って、

AccessMenuBarApps-17

以下のような簡略化されたスッキリ表示で pdf ファイル形式等で保存しておけばいいと考えます。なお、情報管理の観点からは、日付と URL も合わせて表示させておくのいいのかな、と考えます。

AccessMenuBarApps-18

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。