HTMLタグとCSSで画像の上に文字やボタンを入れる方法

large-12-2

画像の上に文字やボタンを入れて
サイトとブログが見やすく、遷移しやすく!

システムエンジニア(SE)かっきーです。

画像の上にボタンやテキストを表示させたくてうずうずしたことはありませんか?
僕はあります(笑)

そんな方のために今回は、画像の上にボタンや文字列などを重ねる方法をご紹介。
画像の加工は一切なしです。

具体的には、下記画像のようなもの作ります。。
ちなみによいボタン画像が無かったため、左下のキイロノコトリがボタンのがわりです(笑)。
しっかり、「お問い合わせページ」に遷移しますので押してみて確認してみてください。

ライティングコンサルタント。宣伝会議コピーライター養成講座卒業、広告代理店勤務、ライター、ディレクター、WEB編集を経てフリーに。 スキルと知識が要求される広告ページや企画力も求められる編集記事、タレントのパンフレットを主に担当。 安価な単価で働かされるWEBライター・キュレーターの現実を重く受け止め、唯一無二の文章力向上サイト「ライティングレシピ」をオープン。 ライティング初心者向けに、文章力が向上する情報をお届け。1対1の添削指導は丁寧に行います。

さっそく実装していきましょう!!!

<div id="back">
    <img src="背景画像のURL" width="800">
    <div id="back-in">
        <div>
            <p>
                ライティングコンサルタント。宣伝会議コピーライター養成講座卒業、広告代理店勤務、ライター、ディレクター、WEB編集を経てフリーに。 スキルと知識が要求される広告ページや企画力も求められる編集記事、タレントのパンフレットを主に担当。          安価な単価で働かされるWEBライター・キュレーターの現実を重く受け止め、唯一無二の文章力向上サイト「ライティングレシピ」をオープン。 ライティング初心者向けに、文章力が向上する情報をお届け。1対1の添削指導は丁寧に行います。 
            </p>
        </div>
    </div>
    <a href="キイロノコトリを押したときの遷移先"><img src="キイロノコトリのURL" id="kotori" /></a>
</div>

HTMLは、上記の通り。
全体をid=”back”としてその中にid=”back-in”とid=”kotori”を入れています。

id=”back-in”とid=”kotori”は<div>タブで同じ階層になるようにしましょう。

HTMLタグに慣れない方はそのままを。
コピー文字や画像のURLを変えるだけでも使えます。

次はcssでデザインを

今回のポイントはこのCSSに隠されています。
「position」要素
です。
実際のコードを使用する前に「position」要素 について説明します。

positionプロパティ要素とは

position」プロパティ要素とは、表示位置をずらしたり、配置の方法を指定することが出来ます。
position」プロパティ要素で指定できる値は、以下の4種類の値で指定できます。
※static以外の値を指定した場合には、表示位置をずらすことが出来ます。

説明
static:標準 位置をずらさない標準の表示を表す値
relative:相対配置 本来の位置から指定距離だけ移動させる値
absolute:絶対配置 親ボックスの端から、指定距離だけ移動させる値
fixed:固定配置 描画領域(ウインドウ)の端から、指定距離だけ移動した位置に固定させる値 (画面をスクロールさせても動きません)

この要素をもとに画像の上に表示させるものの設定をしていきます。
さらにtop、bottom、left、rightを指定することにより、position要素で決めた位置から自由に動かくことが出来ます。

これを踏まえたうえで次に行きましょう。

cssのコード

「position」を理解したところで実際にコードを説明します。

#back {
    position: relative;
     > img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}
#back-in {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: rgba(255,255,255,0.7);
    > div {
        width: 90%;
        max-width: 320px;
        margin: 0 auto;
        font-size: 1rem;
        line-height: 1.7;
        padding: 20px 0;
    }
}
#kotori{
        width:50px;
        height:50px;
        position:absolute;
        z-index:1;
        top:400px;
        left:20px;
}

「kotoriのcss」が分かりやすいので例にして説明していきます。

 width:50px;
      height:50px;

ここでは実際の画像の大きさを指定。
この大きさを大きくすることにより、画像も大きくなります。

 position:absolute;
      z-index:1;
      top:400px;
      left:20px;

今回重要な部分はこの部分です。

まずpositionの要素「absolute」を指定。
親ボックス(ここでは背景画像の事)の左上が基準の位置です。
その部分の上から400px左から20px動いたところに「キイロノコトリ」を配置するようにしています。

z-indexは、今回は重ねるものが少ないためあまり使用しませんが、画像を重ねた際に表示させる順番を制御することが可能です。
値が大きければ大きいほど、前に表示されます。

「-」も設定できるため「-」設定は一番後ろに行きます。
今回の場合だと、背景で見えなくなってしまいますね。

画像を使ったボタン作成など簡単にでき、見てくれた方にインパクトをもたらす為ため、皆さんもぜひお試しください。

うまく実装できない場合は、お気軽にお問い合わせフォームよりご連絡くださいませ。

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

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