Jetpack スライドショーの背景色を変更する

以前、Jetpackのタイルギャラリーの使い方という記事を書きましたが、WordPressのプラグイン、同Jetpackを使ったスライドショーの作成と、スライドショーの背景色の変更の方法です。

Jetpackをインストール、有効化してギャラリーを投稿する

スライドショーには JavaScript が必要です。

と、その前に・・・・
ギャラリーに投稿する写真を用意しておいて下さいね。

最近のデジカメは、そのまま撮影すると解像度が高く、ファイルサイズが大きかったりします。
(幅が3000ピクセル以上とかっていうサイズですね)

そのままだとファイルサイズが大きすぎてアップロード出来ない場合があるので、写真加工をして、サイズを縮小しておく方が良いでしょう!
↓こちらに以前写真加工の方法を書いたので、良かったら参考にして下さいね。
ブログに投稿する写真サイズを簡単に小さく加工する
私はギャラリーに投稿する場合は、1260px位にしています。

それでは、投稿画面に行って、投稿をします。

jp_01

投稿の際に「メディアを追加」をクリックします。

jp_02

1. 「ギャラリーを作成」を選択します。
2. 右側の「ファイルをアップロード」からファイルを選択して、画像を挿入して行きます。

※直接ドロップしても画像の挿入が出来ます。1つ1つ選んでもOK!

jp_03

この場合は、9点の写真を選択しました。
画面の一番下に「9点を選択済み」とありますね。ここで選んだ写真の点数が表示されています。

jp_04

右側の「ギャラリーの設定」で、好きな表示形式を選択します。
※ここまでは前回と一緒。

今回は「スライドショー」を選択して、スライドショー形式の表示にします。
そして「ギャラリーを挿入」をクリック。
jp_05

全ての作業が終わると、投稿画面に戻り、このようにカメラと写真のマークが表示されています。
ここが、ギャラリー(ギャラリー形式で表示)という事ですね!

これでギャラリーが出来ました。

次にギャラリーのデフォルトの背景色は「黒」なので背景色を変更してみる。

設置したギャラリーの背景色を変えたい場合ですが・・・

wp-content/plugins/jetpack/modules/shortcodes/css

というフォルダの中にslideshow-shortcode.cssというCSSファイルがあります。

.slideshow-window {
	background-color: #222;
	border: 20px solid #222;
	border-radius: 11px;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	-khtml-border-radius: 11px;
	margin-bottom: 20px;
	height: 410px;
}

このCSSファイルの最初の行にこのような記述があります。
background-color: #222;
border: 20px solid #222;
の、#222のカラーコードを好きな色に変更すれば背景色の変更が出来ます!

※追記
直書きだと、アップデートの際に上書きされてしまうので、「外観」→「CSS編集」に書く方が良いと、教えていただきました!
よつばデザインの後藤様、ありがとうございます(*^_^*)

関連記事

  1. スマートフォン(レスポンシブ)対応のGoogleMap

  2. 2013.7.13 WordBench 神戸 「お気に入りのテーマを見…

  3. JetPack タイルギャラリーの使い方

  4. WordPressのバックアップ

    WordPressを「BackWPup」プラグインで定期的にバックアッ…

  5. WordPress標準搭載のギャラリー機能でギャラリーを作成する

  6. ロリポップで「不正なアクセスを検知いたしました」とメールが来てWord…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. 「雑誌取材」や「TV番組取材」という名目の広告営業にご注意!
  2. フリーランスに必要な「稼ぎ力」「継続力」を身につける
  3. ブログって何をどう書いたらいい?
  4. ホームページ・ブログ・SNS それぞれの特徴と役割そして使い分け

アーカイブ

制作実績一覧

  1. まごころ本舗様
  2. アロマ時間
  3. 芦屋気功療法院
  4. ホメオスタジア 敏感肌・乾燥肌用クレンジング&洗願ジェル
  5. office-aki
  6. looplus 神戸の不動産買取・売却・リフォーム
  7. 12starz
  8. SOARist
  9. ダンスウェア ララック様