Gallery 2 Matrixテーマのカスタマイズ

• かもしれません 3, 2024

前回のチュートリアルでは、MatrixテーマをGallery 2の独自のテーマにカスタマイズし始めました。この新しいテーマをポートフォリオのデフォルトテーマとして設定し、背景グラフィックを変更していきます。

各テーマのテーマフォルダー内には、そのテーマのスクリーンショットであるscreeshot.png画像ファイルがあります。新しいテーマフォルダには、Matrixテーマの古いpngがまだあります。これをギャラリーテーマのpngに置き換えることをお勧めします。 pngの平均サイズは約500 x 200ピクセルです。新しいscreenshot.pngファイルをimagesフォルダーに保存します。

C：\ xampp \ htdocs \ gallery2 \ themes \ dCipollo \ images

これで、サイト管理コントロールパネルに戻ることができます。最初に、新しいテーマをインストールする必要があります。 [プラグイン]セクションに移動すると、ページの下部にある[テーマ]の下に新しいテーマが一覧表示されます。 [インストール]をクリックして、新しいテーマをインストールします。次に、管理領域の「テーマ」セクションに移動し、デフォルトのテンプレートをマトリックスから新しいテーマに変更します。もちろん、この時点でテンプレートのレイアウトが変更されることはありません。これらの変更を行う必要があります。

最初に私のテーマにグラフィックの変更を加えるのが好きです。背景画像を追加しましょう。これは、タイル張りの繰り返し画像にすることができます。しかし、私のウェブサイトに合わせて、同じ大きな静的背景画像を使用します。背景のjpgをgallery2ディレクトリのdCipolloフォルダーに保存する必要があります。

C：\ xampp \ htdocs \ gallery2 \ dCipollo

これで、theme.cssファイルを変更して背景画像を追加する準備ができました。 main.phpファイルのソースコードを見ると、bodyタグにgalleryというスタイルクラスがあることがわかります。



theme.cssファイルでこのbody.galleryスタイルを見つける必要があります。

body.gallery {
？ ？マージン：0;
？ ？パディング：0;
}

次に、このクラスに背景スタイルコードを追加し、背景画像のURLをdCipolloフォルダーのjpgにポイントします。

body.gallery {
？ ？マージン：0;
？ ？パディング：0;
？ ？背景色：#eeeeee;
？ ？ background-image：url（ '../../ dCipollo / BG1_Gallery.jpg'）;
？ ？ background-attachment：スクロール。
？ ？ background-repeat：繰り返しなし;
？ ？背景の位置：左上;
}

ポートフォリオのmain.phpページを更新しても、背景画像は表示されません。これは、背景が白に設定されているスタイルがあるためです。これらのスタイルを透明な背景に設定しましょう。

これで、ポートフォリオの背景グラフィックスが処理されます。 Webページのヘッダーとフッターを変更する準備が整いました。

動画の説明: （パソコン５列・タブレット４列・スマホ２列）写真ギャラリー無闇に縦長にならないように調整しました。【Wordpress５＋Divi次世代ホームページ制作環境 】GWDPウェブ戦略 (かもしれません 2024).