カスタマイズは自己責任で！
ワードプレステーマ
子テーマ
この記事では
画像にワンクリックでタイトルをプラスするカスタマイズ方法を説明。
画像にワンクリックでタイトルをプラスするカスタマイズ方法を説明。
CUSTOM POINT
タイトル付きの画像を使いたいときなんかに便利です。
サンプル用の画像
大きさ：361✕361px
休日が欲しい気持ちが強かったので、この画像を使用しました。
パターン１
ゴロゴロ大好き
上にタイトル追加
パターン２
ゴロゴロ大好き
下にタイトル追加
パターン３
ゴロゴロ大好き
カード風
お・ま・け
おまけのカスタマイズもいつか記事にしなければ！
このサイトの環境
テーマ
子テーマ
プラグイン
使うソフトなどはこちら
必須
WordPress
Google Chrome
推奨
File zilla
sublime text
カスタマイズの準備
追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く
追加CSSの使い方はこちら
カスタマイズコードの追加
ワンクリックでタイトルを追加するには、プラグインを使用します。
カスタマイズの手順としては
手順 カスタマイズコードをCSSに追加プラグインでコードを登録（ボタンになる）ビジュアルエディタで画像を選択して、ボタンを押せばCSSが適用される
パターン１ ～上にタイトル～
CSSコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*-------------------------------------- 追加するCSSコード --------------------------------------*/ .image-title1 { background: #424242; position: absolute; top: 0px; display: inline-block; width: 100%; color: white; font-weight: bold; font-size: 1.2em; letter-spacing: .1em; line-height: 44px; } |
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
プラグインでコードを登録
プラグイン Visual Editor Custom Buttons
|
1 2 3 4 |
[center]<div style="position: relative; display: inline-block;"><span class="image-title1">★</span> <img> </div>[/center] |
１列目ををBefore（開始タグ）に、３列目をAfter（終了タグ）に貼り付けます。
設定欄のタイトルやアイコンはお好きな用に設定してください。
パターン２ ～下にタイトル～
CSSコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*-------------------------------------- 追加するCSSコード --------------------------------------*/ .image-title2 { background: #424242; position: absolute; bottom: 0px; display: inline-block; width: 100%; color: white; font-weight: bold; font-size: 1.2em; letter-spacing: .1em; line-height: 44px; } |
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
プラグインでコードを登録
プラグイン Visual Editor Custom Buttons
|
1 2 3 4 |
[center]<div style="position: relative; display: inline-block;"><span class="image-title2">★</span> <img> </div>[/center] |
１列目ををBefore（開始タグ）に、３列目をAfter（終了タグ）に貼り付けます。
設定欄のタイトルやアイコンはお好きな用に設定してください。
パターン３ ～カード型～
CSSコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/*-------------------------------------- 追加するCSSコード --------------------------------------*/ .image-title3{ position: absolute; bottom: 0px; display: inline-block; width: 100%; color: #424242de; font-weight: bold; font-size: 1.2em; letter-spacing: .1em; line-height: 50px; } .image-title3-image{ padding: 5px 5px 50px 5px; box-shadow: 0 0px 5px rgba(0, 0, 0, .25); } |
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
プラグインでコードを登録
プラグイン Visual Editor Custom Buttons
|
1 2 3 4 |
[center]<div style="position: relative; display: inline-block;"><span class="image-title3">★</span> <img class="image-title3-image"> </div>[/center] |
１列目ををBefore（開始タグ）に、３列目をAfter（終了タグ）に貼り付けます。
設定欄のタイトルやアイコンはお好きな用に設定してください。
２列目のimage-title3-imageは自分の好きな画像にクラス名を付け加えてください。
まとめ
手順をザクッと説明
変更手順
- FTPソフトとテキストエディタを開いて準備OK。
- 追加のコードを書き込んで、保存。アップロード。
- 更新して確認。
- プラグインでコードを登録して終了。
ワンクリックで画像にタイトルを付けれるようになりました