Pocket

カスタムフィールドを使って、ページレイアウトの変更と作業の効率化を図る

固定ページと投稿ページのレイアウトをそれぞれ変更しました。デフォルト・テーマ Twenty Seventeen は「アイキャッチ画像」がヘッダー部に大きく表示されます。画像をメインにした投稿やメッセージのページ作りにはそのままでも使えていけそうですが、テキスト(文章)をメインにしていきたいので、レイアウトを変更しました。*アイキャッチ画像とはページやブログ記事の冒頭、記事一覧ページに配置される(サムネイル)画像を指します。1ページに対して1画像を対応させます。

投稿ページでは「抜粋」をリード文のスペースとして使用し、トップページでも表示させました。タイトルの後にくるリード文(現在は class を当てることで、サブタイトルもその中に表示させています)の後に、アイキャッチ画像を表示させています。

固定ページではカスタムフィールドを使って、サブタイトルとリード文を表示させています。プラグインとして、 Advanced Custom Fields を使用しています。

固定ページおけるPCでの表示(横幅 768px 以上)は、アイキャッチ画像を「リード文」と並べて表示させています。一方投稿ページではPCでの表示で2カラムとなり横幅が狭くなりますので、スマホでの位置関係のままタテに並びます。固定ページでは1カラムですので、アイキャッチ画像をリード文とヨコに並べて表示させています。

固定ページではコンテンツ部分にもカスタムフィールドを適用し、画像とテキストの左右位置を選択しながら、繰り返しコンテンツを増やしていけるようにしています。

以上の詳細は github にてテンプレートにてご確認頂けます。現在のバージョンをダウンロードでもご確認頂けるようにしました。

プラグインの繰り返し機能は Advanced Custom Fields の有料版での機能となります。北島氏の作成された Smart Custom Fields では、同じプラグインでも無料版で「繰り返し」機能が使えます。シンプルな仕上がりとなっており、導入のしやすさから言ってもお勧めです。当サイトにおいては、今後詳細なカスタマイズを重ねていく予定のあるため、初めから Advanced Custom Fields の有料版を使っています。

* この投稿で使っているアイキャッチ画像は、愛用の一眼レフで自身の iMac を撮影しました。当初 Ghichi.com のメイン画像としての使用を考えていましたが、直前に自身の画像(現在は各ページのフッター部、プロフィールに使用)に変更した経緯があります。ようやくこの投稿記事でデビューを果たしました画像となります ^ ^

【イベントのご案内】 3月3日(土)の朝、ゆるゆるカフェを吉祥寺にて行います。

Pocket

コメントを残す

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

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

この記事を書いた人

渡邉ぎいち @Ghichi

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