人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

価格.com掲示板をアレンジする(2) PHOTOHITOと連携

2018年 01月 03日

PHOTOHITOとの連携


価格.comのカメラ掲示版は、PHOTOHITOとの連携で、機材に関する情報を豊富化しています。 PHOTOHITOにデータベース化されたユーザーによるレンズの実際の撮影サンプルは、メーカーの宣伝よりも参考になる場合が多いものです。

価格.com掲示板を800px以下にコンパクト化したアレンジスタイル「Kakakucom Viewer」は、掲示板の右メニューを省略したので、PHOTOHITOのサンプルページを開くリンクが見えなくなりました。 これは、右メニューで一番必要なリンクだったので、これを再生しました。

価格.com掲示板をアレンジする(2) PHOTOHITOと連携_a0349576_21181835.png

上図の赤枠は、ページ最上部に移動したPHOTOHITOへのリンクです。

また、移動先のPHOTOHITOのページは本来は最小1000px幅でデザインされているため、スムーズな移行となる様に主要な画像閲覧ページを最小幅800pxにアレンジしました。

下図はサンプルの最初のページで、画像リストの画面です。

価格.com掲示板をアレンジする(2) PHOTOHITOと連携_a0349576_21593602.png

このリストの画像をクリックすると、撮影者別のリストとコメント表示の下のページになります。

価格.com掲示板をアレンジする(2) PHOTOHITOと連携_a0349576_21595153.png

上記はいずれも約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; }
}





by Ataron2 | 2018-01-03 21:54 | システム覚え書き