LINEで送る
Pocket

1.[初級者の方へ]テーマをお試しください
2.[中級者の方へ]テーマの技術的な解説

[初級者の方へ]テーマをお試しください

ブログ・ウェブ制作ツールWordPress は、サイト全体のデザインを、「テーマ」の選び変えによって一瞬にしてまったく見た目の違うサイトにしてしまうことが可能です。

テーマは自分で作ることもできますし、世界中のクリエイターが作っているテーマの中から好きなものを選ぶこともできます。このGhichi.com サイトではWordPress のデフォルト・テーマ Twenty Seventeen に変更を加えて(子テーマの作成)利用しています。

ホームページ制作を学ぶ会では当サイトで使用しているテーマを使いながら、学びを進めていく予定です。このテーマ自身も更新を重ねながら、いくつかの可能性にチャレンジしていきます。ぜひ皆さまの目的と好みに合うテーマを見つけてみてください。

2.[中級者の方へ]テーマの技術的な解説

本サイトのテーマはTwenty Seventeen の子テーマです。現時点における主なポイントは3つです。
1.フォントの大きさ指定
2.ヘッダー画像の大きさと位置の変更
3.リード文(概要)の導入

GitHub にて公開しました。現行のテーマをいったん親テーマのファイルに戻し、変更後のテーマに記述を差し替えることで、差分をとって明示し直しました。合わせてご参考ください。

(1)フォントの大きさ指定

親テーマではフォントの大きさにおいて rem と px の併記が見られますが、html 要素の font-size がデフォルトのまま(=100% )であるため、数値計算が煩雑となっています。1rem = 16px すなわち、10px = 0.625rem 。

したがい html 要素の font-size=100% を 62.5% に変更し、10px = 1.0rem で併記できるようにしています。サイト全体の em または rem 表記の変更を必要としますが、今後のメイテナンス性を優先すると、やむを得ない変更と考えています。

(2)ヘッダー画像の大きさと位置の変更

親テーマのヘッダー画像は、デフォルトでアイキャッチ画像を入れると、かなり大きく表示されます。content 内に表示を移動させることで、大きさの調整を図ってみました。

画像部分の記述を header.php から page.php または single.php 内に移動することで、アイキャッチ画像の大きさの適正化を図っています。テンプレートでは header.php からアイキャッチ画像の表示を削除し(別テンプレートに置き換え)、アイキャッチ画像の表示を template-parts フォルダ内 content に相当するテンプレートファイルに移しています。GitHub にてご確認頂ければ幸いです。

(3)リード文(概要)の導入

投稿ページにおいて、タイトルのあとにアイキャッチ画像を表示できるようにしました。画像の前に適切なリード文を表記したいところです。そこで 「抜粋( <!–?php the_excerpt(); ?–> )」を使って別枠に書き込めるようにしてみました。

同タグはトップページでも使っていますが、画像とリード文の配置を逆転させています。さらにサムネイル化を進めていくこと展開もありと考えています。

LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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

この記事を書いた人

渡邉ぎいち @Ghichi

ウェブのセルフ作成サポートを行っています。メンバーさんが楽しみながら制作できる環境を整え、自ら切り開いていく力を存分に培って頂くことが生きがいです。朝の散歩の帰りがけ、スマホでブログを執筆するのが日課です。よろしければ、>> プロフィールをもう少し詳しくご覧ください! >>