PARALLAX ONE って、ここのでしょうか。
http://themeisle.com/demo/?theme=Parallax%20One
カスタマイズは、やればできなくはないと思いますが、こいつは地味に難易度が高いです(ぼくが思うに)。
まあ、難易度はスキルとの相対値だから、こんなの楽勝だという人もたくさんいるでしょうけれど、「うっすらできる程度」だと、かなり苦労するのでは。
「画像を小さく」といっても、どうやるかはいろいろとあります。
高さを小さくするだけなら、style.css の 734 行目付近に一行追加。
.overlay-layer-wrap { z-index: 3; position: relative; height: 150px; /* ★これを追加 */ }
これで、高さが 150px になります。
こいつは、javascript でサイズを変えたりなんだりしているので、幅を変えるだとか位置を変えるだとかあると、そりゃあもう……
以下、たどり着いた経緯。他の人の足掛かりになるかも、ということで、備忘も兼ねて。
SVN の方は古い(1.0.5)。
GitHub に最新のソース(2.1.0.10)がある。
http://themes.svn.wordpress.org/parallax-one/1.0.5/
https://github.com/Codeinwp/Parallax-One
mouseover で揺れる画像の高さは、javascript で変えている。
https://github.com/Codeinwp/Parallax-One/blob/production/js/plugin.home.js
parallax_effect() が、DIV.overlay-layer-wrap の outerHeight + 100px の高さに設定する。
DIV.overlay-layer-wrap の階層。
DIV.overlay-layer-wrap は、header タグ配下にあるから、header.php にあるかと思いきや、header の閉じるタグがない。
https://github.com/Codeinwp/Parallax-One/blob/production/header.php
閉じタグは、index.php の方にあるというね...
https://github.com/Codeinwp/Parallax-One/blob/production/index.php
DIV.overlay-layer-wrap は、ここで定義されている。
https://github.com/Codeinwp/Parallax-One/blob/production/sections/parallax_one_header_section.php
画像ファイルはテーマのパラメータから取得。
定義されていない場合には、デフォルトで以下のファイルが使われる。
- paralax_one_first_layer ―― /images/background1.png
- paralax_one_second_layer ―― /images/background2.png
2016/06/14 22:49:16