ノーマル形式
ポートフォリオ１ : ３カラム、カテゴリーカラー反映
ポートフォリオ１ : ４カラム
ポートフォリオ２ : ４カラム
マガジン形式 : ３カラム
添付された画像URLの表示サンプル リンクされた画像URLの表示サンプル
吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であ...
多すぎるほどのカテゴリーに属している投稿。
マガジン形式 : ４カラム
様々なレイアウトを考慮した画像配置や画像サイズの表示テストです。DigiPressは美しいだけでなく徹底した表示要件にも配慮されています。
吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であ...
Digipressテーマの文字や各種標準的なHTMLタグの表示テストです。あなたがつくりたいサイトのイメージに照らし合わせながらご覧ください！
この投稿はパスワードで保護されているため抜粋文はありません。
このショートコードを使用するにはDigiPressテーマ専用のプラグイン(有料)が必要です
最もシンプルな例(画像指定のみ)
Code
[dpslideshow] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vegetables.jpg"][/dpslide] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vase.jpg"][/dpslide] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/tenedores.jpg"][/dpslide] [/dpslideshow]
スライド効果、キャプション指定、ホバー時停止、画像をリンク化
Code
[dpslideshow fx="slide" hoverpause=true] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vegetables.jpg" url="#" caption="画像にキャプションを表示しています。ホバー時は一時停止もできます。"][/dpslide] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vase.jpg" url="#" caption="このキャプションのベースカラーはホワイトとブラックを選べます。"][/dpslide] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/tenedores.jpg" caption="アニメーションはフェード、スライドから指定できます。表示時間とトランジション間隔を指定できます。"][/dpslide] [/dpslideshow]
ナビゲーション位置指定、ブラックキャプション背景、前後テキスト変更
Code
[dpslideshow controlpos="right" pagenavipos="left" captionblack=true nexttext="次へ" prevtext="前へ"] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vegetables.jpg" caption="画像にキャプションを表示しています。ホバー時は一時停止もできます。"][/dpslide] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vase.jpg" caption="このキャプションのベースカラーはホワイトとブラックを選べます。"][/dpslide] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/tenedores.jpg" caption="アニメーションはフェード、スライドから指定できます。"][/dpslide] [/dpslideshow]
表示時間指定、スライド上に任意のHTMLコンテンツを表示
スライドイメージ上に別の画像リンクを合成しています。
ページナビゲーションは非表示にしています。
Code
[dpslideshow showtime=3200 transitiontime=1400 showpagenavi=false hoverpause=true] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vegetables.jpg"] <p class="ft22px b white mg30px-top mg20px-l al-c">画像上に任意のHTMLコンテンツを指定できます。</p> [/dpslide] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/vase.jpg"] <a href="https://sogawa7th.com/wp-content/uploads/2014/06/iphone-holding.png"> <img src="https://sogawa7th.com/wp-content/uploads/2014/06/iphone-holding.png" alt="iphone-holding" width="55%" style="position:absolute;bottom:0;right:0;" /> </a> <div class="ft14px b mg30px-top mg20px-l"> スライドイメージ上に別の画像リンクを合成しています。
ページナビゲーションは非表示にしています。 </div> [/dpslide] [dpslide imgurl="http://demo.dptheme.net/_wp/wp-content/uploads/tenedores.jpg" caption="キャプションと同時にHTMLコンテンツを表示することもできます。"] <div class="ft18px white pd20px bg-black-op40">HTMLコンテンツをここに記述します。</div> [/dpslide] [/dpslideshow]