WordPress技術

大人気WordPressテーマ「Sydney」: 投稿一覧の画像サイズ変更方法

WordPressテーマsydney

大人気WordPressテーマ「Sydney」

WordPressをインストールしてテーマを有効化しても、思うようなデザインにならないテーマが多い中、「Sydney」はデモサイトの通りになる優秀テーマです。

なので、とても人気ですね!
いつも人気テーマの上位に表示されています。

そんな使いやすいSydneyですが、1点だけムムッ!というデザインが。
それは、投稿一覧ページと投稿ページの画像デザインです。

アイキャッチ画像に登録した画像が、デーン!と巨大サイズで表示されています。
はじめて見たとき、でかすぎて驚きました(笑)

投稿一覧の画面
Sydney-投稿一覧

投稿ページ画面
Sydney-投稿ページ

そんなイケてないデザインの投稿一覧ページと投稿ページで、画像を普通サイズで表示するCSSを作成したので、公開します。
(※ただ、もしも不具合が起きても責任は負えませんので、ご了承ください。動作確認はしております。)

「Sydney」の投稿一覧ページ画像のカスタマイズ方法

ダッシュボードから、以下を辿ります。

「ここに独自の CSS を追加することができます。」の下に以下のCSSを追加します。

/*投稿一覧ページ*/
.content-area .entry-thumb {
    width: 45%;
    float: left;
    text-align: center;
    margin: 0 20px 30px 0;
    box-shadow: 3px 3px 5px #aaaaaa;
}

/*投稿ページ*/
.entry-thumb-single{
    width: 45%;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 3px 3px 5px #aaaaaa;
}
.page-wrap{
    padding-top: 30px !important;
}

Sydney-追加CSS

画像サイズが変更されました。

投稿一覧の画面 画像サイズ変更後
投稿一覧ページ-画像サイズ変更

投稿ページ画面 画像サイズ変更後
投稿ページ-画像サイズ変更

投稿ページの方を見ると、左上に表示されている画像(赤枠)があります。
これは、アイキャッチ画像が表示されています。

タイトルが右側に表示されてしまうので、投稿ページにはアイキャッチ画像はなくてもいいかもしれません。
その場合は、以下のファイルを編集すればアイキャッチ画像を消すことができます。

(※動作確認はしていますが、自己責任でご利用いただくようお願いいたします。)

content-single.php の、11行目からをコメントアウトします。

	<?php do_action('sydney_inside_top_post'); ?>

	<?php //if ( has_post_thumbnail() && ( get_theme_mod( 'post_feat_image' ) != 1 ) ) : ?>
		<!--<div class="entry-thumb">-->
			<?php //the_post_thumbnail('sydney-large-thumb'); ?>
		<!--</div>-->
	<?php //endif; ?>

そうすると、アイキャッチ画像が消えました。
投稿ページ-画像削除後

参考にされてみてください。

  • このエントリーをはてなブックマークに追加