ホーム画面にギャラリー風のカテゴリーリンクを作りたいなと思い、”Canard”というテーマをインストールしてみました。

ポートフォリオではなく、アイキャッチ画像を使うスタイルです。

残念ながら今の力量では、カテゴリーページにアイキャッチ画像が投入できず、専用ページを別に作りました。

ワードプレステーマ、”Canard”

ホーム画面にギャラリー風のカテゴリーリンクというのは、こんなイメージです↓

画像をクリックするとワードプレスのテーマディレクトリへと遷移します。

canard

「ポートフォリオ」を使ってこんな感じに仕立て上げているテーマが多いのですが、これは「投稿」か「固定ページ」のアイキャッチ画像を使っています。

「カテゴリー」ページに直接リンクしたかったのですが、このタイプだとアイキャッチ画像とタグが持てないので、「投稿」ページを使うことにしました。

Canardのホームギャラリーの設定法

↓まずは、当ブログでの完成図↓

canard featured home
テーマCanardのホーム

小さい文字が「カテゴリー名」で、大きい文字が「投稿タイトル」です。

設定法は、

  1. 外観→カスタマイズ→固定フロントページ→フロントページの表示にて、最新の投稿を選択
  2. 外観→カスタマイズ→おすすめコンテンツ→タグ名に、適当なタグ名をつける
  3. 上記で設定したタグがついている「固定ページ」か「投稿」を最大5記事準備する
  4. 上記で作成した「固定ページ」か「投稿」にアイキャッチ画像をつける
  5. 表示される順番は投稿時間順に新しいものから、左上→右上→右下→左下→下段真ん中

分かりにくかったら、コメントくだされば、キャプチャー貼ります。(ちょっと手抜き)

Canardのフォントをゴシック体へ変更

文字が明朝体系列だったので、ゴシック体系列に変更しました。(上の画像は変更済み)

  1. 外観→カスタマイズ→追加CSSに後述のコードをコピペ
body,
button,
input,
select,
textarea {
	color: #222;
	font-family: "Yu Gothic", "Hiragino Kaku Gothic Pro", Meiryo,  sans-serif;
	font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-family:"Yu Gothic", "Hiragino Kaku Gothic Pro", Meiryo,  sans-serif;
	font-weight: bold;
	margin-top: 0;
}

日本語フォントは「游ゴシック」を使いました。

投稿ページのアイキャッチ画像を縮小する

実は、上の「ホーム」のキャプチャーはスクリーンの縮尺を50%まで落としてキャプチャーしたものです。私のパソコンにてスクリーンサイズを変えずに「投稿ページ」を表示すると下図の通りになります。

featured image too big
アイキャッチ画像が大きすぎる!!

これは…
いくら何でもひどすぎるでしょう??
スクロールしないと最初の一文字すら読めません。
少なくとも最初の200文字、もしくは1段落ぐらいまではスクロールなしで読めるようにしたいものです。

強引に最大の高さを200pxにしてしたところ、尺がぎゅっと詰まって微妙な写真になりましたが、こんな感じ↓

featured image max height on single for canard
投稿画面の最大高さを200pxへ変更

しまった。最初の写真と違うページを使ってしまった。ドンマイ。

変更方法は、

  1. 外観→カスタマイズ→追加CSSに後述のコードをコピペ
.post-thumbnail img {
	display: block;
	max-height: 200px;
}

これでとりあえず、投稿内容の文字が見え始めました。一歩前進。

メディアスクリーン1380px以上だと3カラム

3カラム嫌い。っという極々個人的な好みの問題で、メディアスクリーン1380px以上を下記の通り変更しました。

@media screen and (min-width: 1380px) {
	.entry-footer, .footer-widget-inner 	
        .widget {
           width: 869px;
	}
	div#jp-relatedposts, 
	.single .entry-content {
  	   width: 869px;
	}
	.comments-area {
  	   width: 929px;
	}
}

ここは、どうでもいいと思いますケドね。

残る問題点

  1. 文字がやたらに大きい(49pxってなんで??)
  2. この赤色、おしゃれなんだろうけれど…ちょっとキツイ。

これらをちょこちょこ変えていくのは少々面倒くさいので、Twenty Eighteenがでたら、そっちを眺めてから、Canardに戻るかどうか決めようと思っています。

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください