Joomla 写風

  • フォントサイズを大きくする
  • デフォルトフォントサイズ
  • フォントサイズを小さく
Home 少しいじってみよう Joomla! Slide show のカスタマイズ(Highslide JS Configuration の活用-その2)

Slide show のカスタマイズ(Highslide JS Configuration の活用-その2)

Eメール 印刷 PDF

Slide show のカスタマイズ(Highdlide JS Configuration の活用-その1)の例では gallerry-horizontal-strip を選択していました。
Highdlide JS Configuration の活用-その1 はこちらを参照
gallerry-horizontal-strip では写真の説明用のテキストおよびナンバー(何枚目/総枚数)の表示位置が左側に表示され、この位置を中央に表示させたいのだがいろいろ試してみましたが位置を変更させることはできません。つまりこの位置は左側に固定化されているようです。自分独自でカスタマイズするしか手がないようです。

いろいろ調べ自分なりのカスタマイズが出来たので報告します。Highslide JS Configuration Manager で gallerry-horizontal-strip を使って自動的に生成される場所は次の通りです。joomla/plugins/content/highslide/config/css と joomla/plugins/content/highslide/config/jss に生成されています。

hjoomla/plugins/content/highslide/config/css には以下のファイルが存在します。
highslide-article-141-styles.css
highslide-article-142-styles.css
highslide-article-143-styles.css
highslide-article-144-styles.css
highslide-article-145-styles.css
         :
         :

joomla/plugins/content/highslide/config/jss には以下のファイルが存在します。
highslide-article-141-settings.js
highslide-article-142-settings.js
highslide-article-143-settings.js
highslide-article-144-settings.js
highslide-article-145-settings.js
         :
         :

(141,142,143,144 ・・・・・・・ はHighslide JS Configuration Manager を使って作成されたときに割り当てられた ID 番号で、CSS と JS は対になっています。)

Slide が表示されるときはこれらの CSS と JSS をインクルードされて表示されています。
説明用テキストおよびナンバーの表示位置はこのうちCSS で設定されています。その中身を見ますと以下のようになっています。

gallerry-horizontal-strip を指定して作成された時はCSS は下記のように固定化されて生成されます。
赤い部分の CSS 記述では写真の説明用のテキストおよびナンバー(何枚目/総枚数)の表示位置をは左寄せに表示されてしまいます。

-------------------------------------------------------------------------------------------------------------

/*
*  Highslide article specific styles
*  DO NOT EDIT. Generated on 2012-06-14 12:57:13 (GMT) by the Highslide Configuration Component 2.0.11
*/

.highslide-active-anchor img {
 visibility: hidden;
}
.highslide-dimming {
 width: 100%;
 background: black;
}
/* Beginning of inserted CSS configuration parameters */
.control {
 float: right;
    display: block;
 margin: 0 5px;
 font-size: 9pt;
    font-weight: bold;
 text-decoration: none;
 text-transform: uppercase;
}
/* Controlbar examples */
.controlbar {
 background: url(/joomla/plugins/content/highslide/graphics/controlbar4.gif);
 width: 167px;
 height: 34px;
}
     :
     :
     :
     :
     :
     :

-------------------------------------------------------------------------------------------------------------

中央に表示させるためには、上の内、赤の部分を下の青の部分に置き換える必要があります。

------------------------------------------------------

.highslide-active-anchor img {
 visibility: visible;
 border-color: #808080 !important;
}
.highslide-dimming {
 background: #000000;
}
.highslide-image {
 border: 2px solid #FFFFFF;
}
.highslide-caption {
 text-align: center;
 padding: 2px;
}
.highslide-number {
 color: #666666;
 font-weight: bold;
 text-align: center;
 font-size: 10pt !important;
}

/* Beginning of inserted CSS configuration parameters */
.control {
 float: right;
    display: block;
 margin: 0 5px;
 font-size: 9pt;
    font-weight: bold;
 text-decoration: none;
 text-transform: uppercase;
}
/* Controlbar examples */
.controlbar {
 background: url(/joomla/plugins/content/highslide/graphics/controlbar4.gif);
 width: 167px;
 height: 34px;
}
     :
     :
     :
     :
     :
     :

-------------------------------------------------------------------------------------------------------------

highslide-article-141-styles.css
highslide-article-142-styles.css
highslide-article-143-styles.css
highslide-article-144-styles.css
highslide-article-145-styles.css
         :
         :
のすべてを修正を加えて再び訂正を加えたものをもとに CSS 位置に戻します。これ以降に gallerry-horizontal-strip を使って生成した Slide show はすべて修正を加える必要があります。

130827-PICT0001

                        修正前

 

130827-PICT0002

                       修正後

 

最終更新 2013年 8月 29日(木曜日) 12:00  
Home 少しいじってみよう Joomla! Slide show のカスタマイズ(Highslide JS Configuration の活用-その2)

写風お勧め Extemtion

秋づいた美山町

  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow

Movies

アンケート

Joomla!を何に利用しますか?
 

オンライン中のユーザー

現在
 ゲスト 27 人
 がオンラインです

ニュース速報

Joomla!はどんな種類のウェブサイトでも簡単に構築できます。あなたがパンフレットサイトを望んでいたり、あるいは大規模なオンラインコミュニティを構築中であったりするにせよ、Joomla!は数分間で新しいサイトを設置し、必要とする特別な機能を追加することができます。何百もの入手可能なエクステンションが、あなたのサイトを拡張し、あなたがインターネットへ伸ばす手をより広げてくれる新しいサービスを届ける助けとなるでしょう