TechAcademy（テックアカデミー） WordPressコース Webデザイン WordPress WordPressでカスタムヘッダーを設定する方法【初心者向け】
WordPress

WordPressでカスタムヘッダーを設定する方法【初心者向け】

WordPress（ワードプレス）で【カスタムヘッダーを設定する方法】を初心者向けに解説した記事です。WordPressのテーマによって異なりますが、ヘッダーに画像を入れることができます。応用編としてランダム表示方法も合わせて解説。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

WordPressでテーマによってはヘッダーに画像を設定することができます。

サイトのヘッダー画像は、そのページの印象を決める大切な部分ですので、印象的な画像を配置したいですよね。

 

このヘッダー部分を、WordPressではカスタムヘッダーと言います。今回は、初心者向けにWordPressのカスタムヘッダー設定方法をご紹介します。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター！！今使っているテーマがヘッダーを変更できるようなんですけど、どうやったらいいんですか？

田島悠介

カスタムヘッダーが対応しているんだね。それなら、ダッシュボードから設定できるよ。ちょっとやってみようか。

大石ゆかり

はい、お願いします♪

 

目次

本記事では下記の流れで紹介していきます。

  1. ヘッダー管理画面を開く
  2. ヘッダー画像を用意する
  3. ヘッダー画像をアップロードする

最後に応用として、「ヘッダー画像をランダムに表示する方法」も合わせて紹介します。

 

 

１.ヘッダー管理画面を開く

まずはヘッダー画像の管理画面を開きます。

ダッシュボード>外観>ヘッダー　をクリックします。

header1

管理画面を確認すると、推奨画像ピクセルが記載されています。

今回使うテーマのTwenty Twelveの場合は、960 px×250 pxです。

 

 

[PR] WordPressで挫折しない学習方法を動画で公開中

２.ヘッダー画像を用意する

任意のヘッダー画像を準備しましょう。

ヘッダーのサイズは、960px × 250pxに設定すると、そのままのサイズでページに反映されます。

 

また、多少サイズが異なっても、アップロード後に好きな範囲を指定できるので、安心してください。

今回は、この画像をヘッダーに設定してみます。
header0

 

 

３.ヘッダー画像をアップロードする

ヘッダー管理画面の「ファイルを選択」「アップロード」ボタンを使って、先ほど作成した画像をアップロードします。

header2

 

アップロード後、画像のトリミング画面になります。

暗くなっているところは、表示されないので、枠のサイズをドラッグして好きなサイズに調整し、「切り取って公開する」をクリックしてください。

header22

 

アップロードが完了したら、ページ下部の「変更を保存」をクリックすると、サイトに反映されます。

header3

 

サイトを確認すると、反映されましたことがわかります。

header4

カスタムヘッダーの設定方法は以上です。

 

 

応用：ヘッダー画像をランダムに表示する

最後に応用編として紹介します。

ヘッダー画像をいくつか表示した場合は、サイトのトップページが表示されるごとにヘッダー画像をランダムに表示することもできます。

 

先ほど紹介した手順2と3を繰り返しヘッダー画像が複数になると、「ランダム」というラジオボタンが選べるようになります。

header5

ここをクリックすると、アップロードしたヘッダー画像がランダムに表示されます。

 

無事に設定できましたか？

カスタムヘッダーはWordPressのテーマごとに大きさなどが異なるので、いくつかのテーマで試してみてください。

 

WordPressのカスタマイズをもっとしたい場合は、WordPressでカスタムフィールドを設定する方法の記事も合わせてご覧ください。

 

大石ゆかり

ヘッダーを変更するとかなりサイトの印象って変わりますね♪

田島悠介

そうだね。カスタムヘッダーが対応のテーマなら手軽に変更できるから、オリジナリティを出すためにもこだわったほうが良いね！

大石ゆかり

はい♪

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

記事を検索

関連するキーワード

関連する記事

WordPressのCSSを編集する方法｜自分でカスタマイズしよう！【初心者向け】

今回は、WordPressのCSSを自分で編集するカスタマイズの方法を解説します。 既存で用意されたテーマやプラグインでもCSSを少し修正するだけで、サイ...
WordPress

qTranslate Xの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインqTranslate-Xを使用すると、サイトで使用する言語の切り替え機能を追加することができます。メインの言語や翻訳で使用する言語...
WordPress

WordPressでカスタムメニューを作成する方法【初心者向け】

WordPressで作成したWebサイトで、より見やすいサイトナビゲーションに欠かせないのが、「カスタムメニュー」という機能です。 本記事では、カスタムメ...
WordPress

Google Analytics Dashboardの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、WordPressのアクセス解析に便利なプラグインの1つである、Googl...
WordPress

WordPressにFAQを追加できる「FAQ Manager」の使い方ーWordPressプラグイン【初心者

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、Wordpressで簡単にQ&Aページを作成できるプラグイン、FA...
WordPress

CKEditor For WordPressの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、WordPressのビジュアルエディタを拡張できるプラグインの1つである、...
WordPress

あわせてよく読まれている記事

WordPressでカスタムタクソノミーを設定する方法【初心者向け】

WordPressには投稿タイプをカスタマイズできる「カスタム投稿タイプ」という機能があります。そのカスタムタイプにカテゴリーを追加できるのがカスタムタクソノミーです。 今回は、カスタムタクソノミーの説明から、簡単な導入方法まで説明します。   なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター！！カスタムタクソノミーの使い方を教えてほしいんですけど、いいですか？ 田島悠介 カスタムタクソノミーを使う方法は「テーマを編集する方法」と「プラグインを利用する方法」の2種類あるんだ。それぞれ教えてあげるね！ 大石ゆかり はい、お願いします♪   カスタムタクソノミーとは カスタムタクソノミーとは、カスタム分類とも呼ばれる機能です。これは、カスタム投稿タイプにとってのカテゴリーやタグにあたります。 最初の設定さえしてしまえば、カテゴリーやタグとほぼ同じように扱えます。   例えば、カスタム投稿タイプで「グルメ感想」というレビュー集を作っていた場合、そのタクソノミーとして「和食」「洋食」「中華」などを設定するイメージです。 カスタムタクソノミーの設定には2つの方法があるので、順番に説明していきます。 テーマ（function.php）を編集する方法 プラグインを利用する方法     テーマ（function.php）を編集する方法 まず、ダッシュボード＞外観＞テーマ編集　を開いてください。 次に、function.phpを開きます。   ここで、下記のコードを入力し、更新します。 function people_init() { // 新規カスタムタクソノミーを作成 register_taxonomy( ‘washoku’,// 新規カスタムタクソノミー名 ‘kanso’,// 新規カスタムタクソノミーを反映させる投稿タイプの定義名 array( ‘label’ => __( ‘和食’ ),// 表示するカスタムタクソノミー名 ‘rewrite’ => array( ‘slug’ => ‘washoku’ ),// カスタムタクソノミースラッグ名 ‘capabilities’ => array( ‘assign_terms’ => ‘edit_guides’, ‘edit_terms’ => ‘publish_guides’ ) ) ); // 新規カスタムタクソノミーを作成 register_taxonomy( ‘chinese’,// 新規カスタムタクソノミー名 ‘kanso’,// 新規カスタムタクソノミーを反映させる投稿タイプの定義名 array( ‘label’ => __( ‘中華’ ),// 表示するカスタムタクソノミー名 ‘rewrite’ => array( ‘slug’ => ‘chinese’ ),// カスタムタクソノミースラッグ名 ‘capabilities’ => array( ‘assign_terms’ => ‘edit_guides’, ‘edit_terms’ => ‘publish_guides’ ) ) ); } add_action( ‘init’, ‘people_init’ );   カスタム投稿タイプを定義したコードに続けて記載します。 なお、「//」以下はコメントアウト（メモ書きできる）部分なので、あとでわかりやすいように補記しておくと安心です。 名称などは、お好みで変更してください。   ただ、カスタム投稿タイプは通常ではサイトに表示されません。 表示するには、さらにページの重要ファイルを編集する必要があり、PHPなどの知識がないとつまずいてしまいがちです。 そこで今回は初心者の方でも負担・ミスなくカスタムタクソノミーを活用するためのプラグインを紹介します。     [PR] WordPressで挫折しない学習方法を動画で公開中プラグインを利用する方法 テーマを直接編集するのが怖いという初心者の人は、プラグインを利用すると簡単です。今回は、Custom Post Type UIを紹介します。   ダッシュボード>プラグインからこのプラグインをインストールすると、ダッシュボードに表示されます。   表示されている項目に沿って、必要事項を入力していくだけで簡単にカスタムタクソノミーが作成できます。 気をつけたい点は、「利用する投稿タイプ」の選択です。   ダッシュボードで表示を確認すると、カスタム投稿タイプの中に作成したカスタムタクソノミーが表示されていることがわかります。   今回の記事は以上です。 ぜひ自分でも試してみてください。   大石ゆかり カスタムタクソノミーを追加できました♪ 田島悠介 よかったね♪カスタムタクソノミーはカスタム投稿タイプを使っているととても便利な機能だから、なれないうちはプラグインを使っても使えるようになっておくと良いね！ 大石ゆかり はい、わかりました！！！   さらにWordPressを使いこなしたい場合は、WordPressでカスタムヘッダーを設定する方法も合わせてご覧ください。 [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
WordPress

WordPressでカスタム投稿タイプを作成する方法【初心者向け】

WordPressには投稿タイプをカスタマイズできる「カスタム投稿タイプ」という機能があります。 今回は、カスタム投稿タイプの説明から、簡単な導入方法まで説明します。   なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター！！カスタム投稿タイプってなんですか〜？ 田島悠介 カスタム投稿タイプっていうのは、自分で投稿する時に投稿する内容に応じて書きやすいようにカスタマイズできる機能なんだ。使えるととても便利だから、教えておくね！ 大石ゆかり はい、お願いします！   カスタム投稿タイプとは 自分で投稿タイプをカスタマイズできる機能です。 例えば、通常の投稿はブログとして使い、それ以外にも「商品の紹介」や「ポートフォリオ」、「更新情報」などテンプレートとしてカスタム投稿タイプを利用することができます。 つまり、通常の投稿記事とは形式や目的の違う記事を書きたい場合に効果的な機能です。   カスタム投稿タイプを作るには、主に下記の2つの方法がありますので、順番にご紹介します。 テーマ（function.php）を編集する方法 プラグインを利用する方法     テーマ（function.php）を編集する まず、ダッシュボード＞外観＞テーマ編集　を開いてください。 次に、function.phpを開きます。   ここで、下記のコードを入力し、更新します。 場所はどこでも構いませんが、筆者はあとで追加が分かりやすいように上の方に入れています。 なお、「//」以下はコメントアウト（メモ書きできる）部分なので、あとでわかりやすいように補記しておくと安心です。 名称などは、お好みで変更してください。 // カスタム投稿タイプの追加 add_action( ‘init’, ‘create_post_type’ ); function create_post_type() { register_post_type( ‘news’, // 投稿タイプ名の定義 array( ‘labels’ => array( ‘name’ => __( ‘新着情報’ ), // 表示する投稿タイプ名 ‘singular_name’ => __( ‘新着情報’ ) ), ‘public’ => true, ‘menu_position’ =>5, ) ); }   更新すると、ダッシュボードに「投稿」とは別の新たな「新着情報」という項目ができています。 今回は新着情報としましたが、先ほど書いたコードを変えれば他の表示も可能です。     [PR] WordPressで挫折しない学習方法を動画で公開中プラグインを利用する テーマを直接編集するのが怖いという初心者の人は、プラグインを利用すると簡単です。 今回は、Custom Post Type UIを紹介します。   ダッシュボード>プラグインからこのプラグインをインストールすると、ダッシュボードに表示されます。   表示されている項目にそって、必要事項を入力していくだけで簡単にカスタム投稿タイプが作成できます。   なお、カスタムフィールドやカスタムタクソノミーの機能と合わせることで、使いやすい投稿フォームを簡単に作ることができます。 また、カスタムメニュー機能を使えば、サイドバーやフッターなど、好きな位置に一覧を表示させることも可能です。 この機能を活用して、よりオリジナリティの高いサイトを作っていきましょう。 さらにWordPressを活用したい場合は、WordPressでカスタムヘッダーを設定する方法を合わせてご覧ください。   大石ゆかり なるほど！カスタム投稿タイプを使うと記事が書きやすくなりますね♪ 田島悠介 そうだね。プラグインを使うと手軽にできるし、自分でテーマをカスタマイズするとより細かく設定できるから、どちらも試してみると良いね！ 大石ゆかり はい、わかりました〜♪   [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
WordPress

tableの隙間の間隔をCSSで設定する方法を現役エンジニアが解説【初心者向け】

tableの隙間の間隔をCSSで設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 tableの隙間の間隔をCSSで設定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   tableのセルを設定する方法 tableのセルは表のようになった枠組みを指します。 tableのセルを設定する場合には<table></table>で囲み、その中にデータ要素を入れて作成可能です。 データを入れる要素として、下記のようにデータを入れます。 横行は<tr></tr>で囲った中 縦列は<th></th>の中 <td></td>で囲った中 データの中にグループを持たせたい場合にはtbody要素を使いデータの横行でのグループを作成し、colgroup要素を使った場合は縦列でのグループを作成することが可能です。 また、ヘッダーとフッターを作成してマークアップすることもでき、それぞれthead要素、tfoot要素を用いて記述します。   実際に書いてみよう (htmlファイル)       <table>         <thead>             <tr>                 <th>1ヘッダー行</th>                 <th>2ヘッダー行</th>                 <th>3ヘッダー行</th>                 <th>4ヘッダー行</th>                 <th>5ヘッダー行</th>             </tr>         </thead>         <tfoot>             <tr>                 <th>1フッター行</th>                 <th>2フッター行</th>                 <th>3フッター行</th>                 <th>4フッター行</th>                 <th>5フッター行</th>             </tr>         </tfoot>         <tbody>             <tr>               <th>1タイトル行</th>               <th>2タイトル行</th>               <th>3タイトル行</th>               <th>4タイトル行</th>               <th>5タイトル行</th>             </tr>             <tr>               <td>1データ</td>               <td>2データ</td>               <td>3データ</td>               <td>4データ</td>               <td>5データ</td>             </tr>             <tr>               <td>1データ</td>               <td>2データ</td>               <td>3データ</td>               <td>4データ</td>               <td>5データ</td>             </tr>             <tr>                 <td>1データ</td>                 <td>2データ</td>                 <td>3データ</td>                 <td>4データ</td>                 <td>5データ</td>             </tr>         </tbody>       </table>   [PR] WordPressで挫折しない学習方法を動画で公開中おまけ：tableのセルの境界線を無くす方法 セル同士は、何も指定をしないで表示するとそれぞれ独立したセルと認識され、境界線が二重線となります。 今回はtableセルをリセットし、セル同士の隙間を無くしていきましょう。 border-collapseを使用し、セル同士をより離したい場合はseparateとし、セル同士を重ねる場合にはcollapseと指定してください。   実際に書いてみよう 以下、コード例となります。 table {     border-collapse:collapse; }   執筆してくれたメンター 木村勇土 TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。   大石ゆかり tableの隙間の間隔をCSSで設定する方法がよく分かったので良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
CSS

WordPressでカスタムフィールドを設定する方法【初心者向け】

WordPressには便利な機能としてカスタムフィールドがあります。 そのカスタムフィールドについて初心者向けに設定方法を紹介します。カスタムフィールドの設定は、初心者にとっては難しいところもあるので、プラグインを使った方法もあわせて解説していきます。   なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター！！WordPressのカスタムフィールドってなんですか？ 田島悠介 カスタムフィールドっていうのはね、記事を書くときのフォーマットを自分用にカスタマイズできる機能なんだ。   目次 本記事は下記の流れでご紹介します。 カスタムフィールドとは カスタムフィールドを表示させる方法 カスタムフィールドが使えるプラグイン     カスタムフィールドとは WordPressの投稿フォームには、デフォルトで「タイトル」と「本文」の2つがあります。ここに入力する情報を追加できるのがカスタムフィールドです。   例えば、 不動産サイトのようにたくさんの情報を扱うサイト 飲食店紹介など、決まったフォームで記事を書きたいブログ などを構築する時に、デフォルトの機能ではお店の情報などを定型的に表示することができず不十分です。   そこで便利なのが、「カスタムフィールド」です。カスタムフィールドを使うと「タイトル」と「本文」だけでなく、自分好みの任意フォームを追加できます。 カスタムフィールドを使えば、あとで「評価が高い順番に並べ替える」といったことも柔軟に行えるようになります。     [PR] WordPressで挫折しない学習方法を動画で公開中カスタムフィールドを表示させる方法 それでは早速カスタムフィールドを表示させる方法を紹介します。   デフォルトままでは表示されてないことが多いので、まずページ右上の「表示オプション」を選択します。   ここでカスタムフィールドにチェックを入れます。   すると、投稿本文の下に、カスタムフィールドが表示されます。カスタムフィールドの編集はここで行うことになります。 任意の項目を追加すると、次回以降はプルダウンから選択することができます。   この表示までは簡単にできました。 ただし、カスタムフィールドはとても便利な入力補助ですが、実はこのフィールドに入力、記事を更新しただけでは記事に出力されません。出力するためには、テーマを直接編集する必要があります。   大石ゆかり カスタムフィールドについてはわかったんですけど、もう少し手軽に扱うことってできないですか〜？ 田島悠介 プラグインを使うと手軽に使えるよ。   そこで今回は初心者の方でも負担・ミスなくカスタムフィールドを活用するためのプラグインを紹介します。     カスタムフィールドが使えるプラグイン カスタムフィールドが使えるプラグインはいくつかありますが、今回は「Custom Field Template」を紹介します。   プラグインのインストール まずは、Custom Field Templateをインストールしましょう。やり方がわからない場合は、WordPressプラグインのインストール方法の記事をご覧ください。   インストールが完了すると、管理画面＞設定＞カスタムフィールドテンプレート にプラグインが表示されます。   カスタムフィールドテンプレートの設定 プラグインからカスタムフィールドの設定を行います。 たくさん入力項目があるように見えますが、最低限設定すべきなのは2つです。まずは2つを登録しておきましょう。 1.カスタムフィールドテンプレートオプション（1番目） ※入力フォームの登録 2.[cft] and [cftsearch] ShortCode Format（4番目） ※表示テンプレートの登録   今回はカフェブログを作るという想定で、1つずつ紹介していきます。   入力フォームの登録 「テンプレートタイトル」と「テンプレートコンテンツ」に入力します。 記述ルールはシンプルで、 [ID]　：カスタムフィールドのID type　：カスタムフィールドの種類（＋サイズ） label　：投稿画面で表示されるテキスト（※全角などの注意事項） という３行で記述されています。   また、typeで使えるものとしては、 text：一行のテキストフィールド textarea：複数行のフィールド file：画像のアップロード などがあります。 チェックボックスやラジオボタンも利用できます。   なお今回、テストで記入したコンテンツは下記のとおりです。 ＝＝＝＝＝＝＝＝＝＝＝＝ [お店名前] type = text size = 35 [感想] type =textarea [評価] type = checkbox value = ★★★★★ # ★★★★☆# ★★★☆☆# ★★☆☆☆# ★☆☆☆☆ label = ※５段階評価 [住所] type = text size = 35 ＝＝＝＝＝＝＝＝＝＝＝   表示テンプレートの登録 [cft] and [cftsearch] ShortCode Formatに、タグなどを使って表示させたいテンプレートを作成します。この時に「PHPを使用する」にチェックを入れるとPHPが使用できます。 ここで[お店名前]のように、テンプレートのコードを書くと引用されます。   カスタムフィールドテンプレートを使った記事投稿投稿画面を開くと、「本文」の下にカスタムフィールドの項目が表示されています。 ここに、表示項目にそってコンテンツを入力します。   そして、本文中のカスタムフィールドを挿入したい場所にショートコード[cft format=0]を入力します。 （※=の後の数字が、テンプレートの番号と対応しています）     入力が完了すると、このように表示されました。   カスタムフィールドの設定は以上です。 他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。 ぜひ活用してみてください。   大石ゆかり 同じフォーマットの記事をたくさん書くときには、カスタムフィールドは欠かせないですね！ 田島悠介 そうだね。記事を書くスピードも早くなるし、何人かで書くときなんかにも同じように書けるのがいいね！ 大石ゆかり そうですね♪   [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
WordPress

RubyでCSVファイルにヘッダ（Header） を作成する方法【初心者向け】

RubyでCSVファイルにヘッダ（Header） を作成する方法について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSVファイルにヘッダ（Header） を作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSVファイルのヘッダ（Header）とは アプリケーションでは、Rawデータ(生データ)や集計結果として、CSVファイルを生成するケースが多々あります。 その際、1行目に出力される、カラムの名前などが入った行を、ヘッダ行と呼びます。 名前 年齢 煌木太郎 22 名前、年齢と書かれている行がヘッダ行です。 ヘッダ行があると、CSVファイルをExcelなどのツールで開いた際も、どのカラムが、どのデータかというのがひと目で分かりますので、とても重要な行と言えます。   CSVファイルにヘッダ（Header）を作成する方法 CSVファイルを作成する際、ヘッダ行を追加するためには、データベースのカラムなどを直接使用する方法もありますが、これらは英字であるため、一見するとわかりにくい表記となってしまいます。 また、1からCSVを生成する場合など、ヘッダがない状態も考えられます。 そのため、ヘッダを直接追加する方法を確認してみましょう。 使用するライブラリは、CSVライブラリです。 ヘッダを追加するために、先にヘッダ用の配列を準備し、CSVの先頭に追加します。   [PR] WordPressで挫折しない学習方法を動画で公開中実際に書いてみよう CSVファイルを1から作成し、ヘッダを追加する例を確認してみましょう。 ソースコード require 'csv' header = ["名前","年齢"] # ヘッダ用の配列を作成 data = [ ["煌木太郎",22], ["山田一郎",22] ] # データ配列を準備 # CSVデータを生成する CSV.open('sample.csv','w') do |csv| csv << header # ヘッダ行をCSVに追加 data.each do |d| csv << d # データ行をCSVに追加 end end # 生成したCSVデータを読み込む # CSV.foreachの引数に、headers: true とつける事で、先頭行をヘッダとして認識します。 CSV.foreach("sample.csv", headers: true) do |row|
Ruby

WordPressでアイキャッチ画像を設定する方法【初心者向け】

WordPressでは、記事1つ1つにサムネイル画像（アイキャッチ画像）を設定することができます。 ブログの記事冒頭や記事一覧ページに配置されている、一番目を引く画像です。   TechAcademyマガジンの場合は、このように表示されています。 アイキャッチ画像を設定すると、 記事の内容がひと目で分かる 記事一覧の画面でわかりやすい 記事のクリック率が上昇する SNSなどでシェアされた時に目立つ などのメリットが有ります。   そこで今回は、アイキャッチ画像の設定方法について簡単にご紹介します。 なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター！！記事一覧で見た時に記事ごとに画像が表示されていると思うんですけど、あれってどうやって表示するんですか〜？ 田島悠介 アイキャッチ画像のことだね。それなら記事ごとに設定するんだけど・・・ちょっとやってみようか。 大石ゆかり はい、お願いします！   アイキャッチ画像の設定エリアを表示させる アイキャッチ画像は記事投稿画面で設定できるのですが、デフォルトの記事投稿場面ではまだ表示されていないことが多いので、これを表示させてみましょう。 投稿編集画面で、右上に表示される「表示オプション▼」というボタンをクリックします。   すると、投稿画面で表示されるオプションリストが表示されます。 その中から「アイキャッチ画像」を探し、チェックボックスにチェックしましょう。   すると、投稿画面の右サイドに、「アイキャッチ画像」のエリアが出来ます。 これでアイキャッチ画像追加の準備はできました。     アイキャッチ画像を設定する アイキャッチ画像設定エリアの、「アイキャッチ画像を設定」というテキストリンクをクリックします。 すると、画像追加画面が立ち上がるので、設定したい画像を選択しアップロードしてください。   アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。   投稿画面に、設定したアイキャッチ画像が反映されます。 間違ってアップロードしてしまった場合は、「アイキャッチ画像を削除する」というテキストリンクをクリックし、またやり直せば大丈夫です。   記事を公開し、どのように反映されているかを見てみましょう。 これアイキャッチ画像の設定は完了です。   このように記事の冒頭に表示されるので、テキストだけよりぐっと見た目が華やかになりましたね。 アイキャッチ画像を適切に設定して、より魅力的なサイトにしていきましょう。   他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。   大石ゆかり アイキャッチ画像があると、記事のイメージがつかめていいですね♪ 田島悠介 そうだね。　アイキャッチ画像は一覧にすると特に印象に残りやすいから、必ず設定しておいたほうが良いね！ 大石ゆかり はい、分かりました！   [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
WordPress

TechAcademyから
現役エンジニアの方へ
お知らせ

藤門千明
TechAcademy（テックアカデミー） WordPressコース Webデザイン WordPress WordPressでカスタムヘッダーを設定する方法【初心者向け】