タドワークスコンテンツへスキップタドワークス個人や団体、企業のホームページ集客・運用を総合的に支援します。Seventeen」でヘッダー画像上にキャプションを追加する方法について解説したいと思います。Seventeen」は1ページ構成のサイトを作成するのに大変重宝するテンプレートですが、ヘッダー画像部が少し寂しくなる傾向があります。ランディングページ(LP)での利用などでは特にですが、せっかくのファーストビューですのでこの部分でしっかりとPRを行いたいところです。Seventeen」のカスタマイズではこの部分のコンテンツに対応する項目がありません。画像に直接文字を入れる場合は、スマートフォン表示で文章がおさまらない、または逆に、PC表示で小さすぎて格好がつかないなどの状況に陥りがちです。Seventeen」でヘッダー画像にキャプションを入れるためには、header-image.phpを編集する必要があります。header-image.phpの場所は以下の通りです。header.phpにキャプションを追加した場合、親要素がナビゲーションメニューを含めた要素となってしまうため、position:absolute;での位置指定に難が出てきますからheader-image.phpでの追加がベターかと思います。追加するHTMLサンプル改行などはちょっと調整しておりますが、以下がheader-image.phpにキャプションを追加したサンプルとなります。class="caption">タドワークスは、東京秋葉原を拠点に活動するウェブマーケティングチームです。--></span>トップページ以外の表示ではロゴ部分にキャプションが重なってしまうため、トップページのみ表示するPHPの条件分岐を入れています。HTMLに関してはこんな感じで追加して頂ければよいかと思います。CSSサンプル次にCSSのサンプルです。カスタマイズの追加CSSに記載して頂ければよいかと思います。color:#fff;}ここまででヘッダー画像にキャプションが表示されるかと思います。位置やフォントのサイズや色はお好みで調整してください。Seventeen」のヘッダー画像部にキャプションを重ねる方法を備忘録としてまとめました。スマートなやり方があるよという方は是非情報頂ければと思います。隠しテキストスパムによる逆SEO?andsteady様の新規ワードプレス設置を担当いたしました。みうら整骨院様(千葉県八千代市)のホームページを制作させて頂きました。