PHOTOHITOとの連携
価格.comのカメラ掲示版は、PHOTOHITOとの連携で、機材に関する情報を豊富化しています。 PHOTOHITOにデータベース化されたユーザーによるレンズの実際の撮影サンプルは、メーカーの宣伝よりも参考になる場合が多いものです。
価格.com掲示板を800px以下にコンパクト化したアレンジスタイル「Kakakucom Viewer」は、掲示板の右メニューを省略したので、PHOTOHITOのサンプルページを開くリンクが見えなくなりました。 これは、右メニューで一番必要なリンクだったので、これを再生しました。
上図の赤枠は、ページ最上部に移動したPHOTOHITOへのリンクです。
また、移動先のPHOTOHITOのページは本来は最小1000px幅でデザインされているため、スムーズな移行となる様に主要な画像閲覧ページを最小幅800pxにアレンジしました。
下図はサンプルの最初のページで、画像リストの画面です。
このリストの画像をクリックすると、撮影者別のリストとコメント表示の下のページになります。
上記はいずれも約800pxまで幅を狭めた状態で、アレンジがなければ左右が隠れるところです。 個別画像の拡大参照の画面は、元々完全にウインドウ幅に従って拡縮するので、アレンジの必要がありませんでした。
Kakakucom Viewer の更新
以上の様に、「Kakakucom Viewer」を更新して PHOTOHITOとの連携を有効にしました。「Kakakucom Viewer」を使用する手順は以下の「
①→➁A」または「
①→➁B」の手順が必要です。
① ブラウザにStylusを導入する
ウェブページのアレンジには、拡張機能(アドオン)の Stylusが先ず必要です。 これは、Chrome用とFirefox用があり、使用中のブラウザに合わせて導入します。
Chrome版
Stylusの入手先 Firefox版
Stylusの入手先➁A userstyles.org から Kakakucom Viewer をインストール
以下のリンク先は、スタイル投稿サイト「userstyles.org」に私がこのスタイルを登録したページです。 スタイルの名前を「Kakakucom Viewer」としています。 このスタイルは Chrome版 / Firefox版 どちらのStylusでも使用出来ます。
スタイルのインストールは、サンプル画像の右下の
Install Style を押すと、一瞬で Stylus にインストールされます。 この際、無関係なアプリの「Download」ボタンなどが同ページにあり、紛らわしいので注意ください。
➁B 手作業で Kakakucom Viewer をStylusにインストール
以下に掲載する「Kakakucom Viewer」(Mozilla Format)のCSSを、手作業で Stylus に登録することができます。 方法は、以下のリンク先を参照ください。 登録後の機能は
➁Aと同じです。
セクション構成 と CSS
最新の「Kakakucom Viewer」は 9セクションの構成です。
セクション1 価格.com 掲示板 基本CSS
セクション2 写真ビューワー画面 基本CSS
セクション3 コメント編集画面・レビュー編集画面 基本CSS
セクション4 レビュー編集画面 追加 基本CSS
セクション5 フォント メイリオ指定 / 画面背景色
セクション6 フロート部 機材詳細の非表示オプション
セクション7 フロート部 カテゴリタブの非表示オプション
セクション8 フロート部 全体の非表示オプション
セクション9 PHOTOHITO 基本CSS
●「セクション5」はCSSの扱いが出来る人には、簡単にカスタマイズが可能です。
●「セクション 6, 7, 8」の「有効」「無効」の切り替えで、フロート部の表示を選択出来ます。
● 初期設定は、「セクション1~6, 9」を有効、「セクション7, 8」を無効に設定しています。
●セクションの適用先が「次で始まるURL」の場合は「有効」、「URL」等の場合は「無効」になります。 編集画面で適用先を変更して「保存」を押すと、オプション設定が変更されます。
以下のCSSコードは Mozilla Format で、9セクションが適用先指定と共にコンパイルされています。
Kakakucom Viewer (Chrome/Firefox) ( Mozilla Format )
@-moz-document url-prefix("http://bbs.kakaku.com/bbs/"), url-prefix("http://kakaku.com/item/"), url-prefix("http://review.kakaku.com/review/"), url-prefix("http://kakaku.com/auth/prdevaluate/") {
/* 2018.01.04 価格.com 掲示板 基本CSS */
/* ページ上部 機種説明 */
#contents930 {
width: 740px !important; }
#header {
width: 740px !important; }
#header .headerR {
display: none; }
.path.btmPath {
width: 740px; }
#itmOther {
display: none; }
#itmBoxMax {
width: 740px !important;
background-size: contain !important; }
#titleBox {
width: 720px !important; }
#titleBox + .bookmarkAdd3 {
right: -3px; }
#productInfoBox span.morelinkbox {
width: auto !important; }
/* カテゴリタブの小幅化 */
#main ul.tab {
margin: 0 0 -1px !important;
width: 740px;
display: flex; }
#main ul.tab li {
border-radius: 7px 7px 0 0;
overflow: hidden;
flex-shrink: 1;
transition: .5s }
#main ul.tab li:hover {
flex-shrink: 0; }
#itemviewFixedTab ul.tab li {
border-radius: 7px 7px 0 0;
overflow: hidden;
flex-shrink: 1;
transition: .5s }
#itemviewFixedTab ul.tab li:hover {
flex-shrink: 0; }
/* 標準タブ */
#main .tabArea {
width: 740px;
background-position: center bottom !important; }
#main .h3Area {
width: 720px;
background-size: contain; }
#main .h3Area + img {
width: 740px; }
/* フロート部 全体 */
#itemviewFixedTab {
width: 740px; }
/* フロート部 機材詳細 */
#itemviewFixedTab .fixedTabItemLines {
display: grid; }
/* スレッド表示順 ボタン列 */
.box04.change01 {
width: 116px; }
.box04.change05 {
width: 240px; }
/* NEW 新製品紹介 */
.newmodel,
.oldmodel {
width: 740px;
overflow: hidden; }
.newmodel h4 span,
.oldmodel h4 span {
width: 720px; }
.newmodel .newmodelInfo,
.oldmodel .oldmodelInfo {
width: 720px; }
.newmodel .valuebox,
.oldmodel .valuebox {
width: 300px; }
/* 右メニュー PHOTOHITOのみ残し上部に移動*/
#module > * {
display: none; }
#module .imgPhotohito {
display: block;
position: absolute;
top: 4px;
right: 0;
width: 450px;
background: none; }
#module .imgPhotohito .title {
width: auto;
background: none; }
#module .imgPhotohito .title p {
display: inline-block;
background: #e1f5fe;
max-width: 430px;
overflow: hidden;
border-radius: 4px; }
#module .imgPhotohito .title a {
white-space: nowrap; }
#module .imgPhotohito .boxIn,
#module .imgPhotohito .more {
display: none; }
/* レビューページ */
div#revbox {
width: 740px; }
#revbox .totalbox.clearfix {
width: 736px !important; }
/* 下部DM */
.sqTwoWrapper,
.sqTwo {
display: none; }
}
@-moz-document url-prefix("http://bbs.kakaku.com/bbs/") {
/* 写真ビューワー画面 基本CSS */
#contents {
width: 740px; }
#camera .h1Area {
width: 740px; }
#imageView {
margin: 0;
width: 740px; }
#imageViewInner {
margin: 0;
width: 740px; }
#imageView .imgAreaShadow {
width: 740px; }
#imageView .imageArea {
padding: 10px;
width: 718px; }
.imageArea a > img {
width: 718px; }
}
@-moz-document url-prefix("http://kakaku.com/auth/bbsnew/"), url-prefix("http://kakaku.com/auth/prdevaluate/") {
/* コメント編集画面・レビュー編集画面 基本CSS */
/* ページ上部 機種説明 */
#contents930 {
width: 740px !important; }
#header {
width: 740px !important; }
#header .headerL {
margin-right: -200px; }
#header .mLeft10 {
position: relative;
z-index: 1; }
#header .prText iframe {
display: none; }
#main .bbsBar {
width: 740px;
overflow: hidden;
background-position: center bottom !important; }
#main .h3Area {
width: 720px; }
#main .h3Area + img {
width: 740px; }
/* 入力欄 */
table.tblInput.ver2 {
width: 740px; }
#main .tblInput.ver2 .commentTextarea {
width: 600px !important; }
#main .tblInput.ver2 .nicknameChoice {
width: 592px; }
#main .tblInput.ver2 td .attention {
width: 600px }
#main .tblInput.ver2 #file_up .step {
width: 602px; }
#FrmInput .agreementFrame,
#FrmUpload .agreementFrame {
width: 738px; }
/* 下部クチコミ参照枠 */
#main .box08 {
border: none; }
}
@-moz-document url-prefix("http://kakaku.com/auth/prdevaluate/") {
/* レビュー編集画面 追加 基本CSS */
#main .tblInput.ver2 td {
padding-right: 0; }
#main .tblInput.ver2 .tblInput02,
#main .tblInput.ver2 .tblInput03 {
width: 590px !important; }
#main .tblInput.ver2 .commentTextarea {
width: 578px !important; }
#main .tblInput.ver2 #file_up .step {
width: 580px; }
}
@-moz-document url-prefix("http://bbs.kakaku.com/bb"), url-prefix("http://kakaku.com/ite"), url-prefix("http://review.kakaku.com/revi"), url-prefix("http://kakaku.com/auth/bbsn"), url-prefix("http://kakaku.com/auth/prdevalua") {
/* フォント メイリオ指定 */
* {
font-family: "メイリオ", "Meiryo" !important; }
/* 画面背景色 */
body {
background: #fafafa !important; }
#camera #header {
background: #fff; }
.h1deco {
background: #fff; }
}
@-moz-document url-prefix("http://bbs.kakaku.com/bb"), url-prefix("http://kakaku.com/ite"), url-prefix("http://review.kakaku.com/revi"), url-prefix("http://kakaku.com/auth/prdevalua") {
/* フロート部 機材詳細の非表示 */
#itemviewFixedTab .fixedTabItem {
display: none; }
}
@-moz-document url("http://bbs.kakaku.com/bb"), url("http://kakaku.com/ite"), url("http://review.kakaku.com/revi"), url("http://kakaku.com/auth/prdevalua") {
/* フロート部 カテゴリタブの非表示 */
#itemviewFixedTab .fixedTabArea {
display: none; }
}
@-moz-document url("http://bbs.kakaku.com/bb"), url("http://kakaku.com/ite"), url("http://review.kakaku.com/revi"), url("http://kakaku.com/auth/prdevalua") {
/* フロート部 全体の非表示 */
#itemviewFixedTab {
display: none !important; }
}
@-moz-document url-prefix("http://photohito.com/camera/brands/"), url-prefix("http://photohito.com/photo/") {
/* PHOTOHITO 基本CSS */
body {
min-width: 780px; }
#search_form input {
width: 150px; }
body .wrapper_full article #path,
body .wrapper_full article section {
margin-right: 230px; }
#photo_list_search_form {
margin: 0 0 20px 0; }
#photo_list_search_form input {
width: 436px; }
/* 右側メニュー */
body .wrapper_full aside {
margin-right: 15px;
margin-left: -215px; }
aside {
width: 200px; }
aside .side_ad {
display: none; }
.notlogin_banner img {
width: 200px;
height: auto; }
#recommend_container img {
width: 200px; }
section .adBox-300-2 {
display: none; }
footer {
min-width: initial; }
/* photo画面 写真枠 */
#photo_detail #photo_view a {
margin: 0 180px 0 0; }
#photo_detail #photo_view_side .ad_detail {
display: none; }
#photo_detail #photo_view_side #photo_link_area {
width: 170px; }
#photo_detail #photo_link_area #photo_date {
margin: 20px 0 60px !important; }
/* photo画面 コメント枠 */
#photo_detail .wrapper:nth-child(3) {
width: 780px; }
#photo_detail .wrapper #contents {
width: 570px; }
#contents .content_ad {
display: none; }
#photo_detail #photo_comment_area textarea {
min-width: 510px; }
#photo_detail .recommend_photo_list img {
width: 90px;
height: auto; }
#photo_detail #fav_users_area li {
width: 56px; }
}