カスタマイズは自己責任でやろう！
「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら
この記事では
画像にワンクリックでタイトルをプラスするカスタマイズ方法を説明。
画像にワンクリックでタイトルをプラスするカスタマイズ方法を説明。
CUSTOM POINT
タイトル付きの画像を使いたいときなんかに便利です。
サンプル用の画像
大きさ：361✕361px
休日が欲しい気持ちが強かったので、この画像を使用しました。
パターン１
ゴロゴロ大好き
上にタイトル追加
パターン２
ゴロゴロ大好き
下にタイトル追加
パターン３
ゴロゴロ大好き
カード風
お・ま・け
おまけのカスタマイズもいつか記事にしなければ！
このサイトの環境
テーマ 
子テーマ 
プラグイン 
使うソフトなどはこちら
必須
WordPress
Google Chrome
推奨
File zilla
sublime text
ジャンプマップ
カスタマイズの準備
| 追加方法 | 難しさ |
|---|---|
| 追加CSS | |
| テーマエディター | |
| FTPソフト |
はじめてカスタマイズをする方におすすめなのは追加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; } |
確認の手順
- カスタマイズコードを保存
- カスタマイズしたページを開く
- cntrl+F5を押す
いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。
プラグインでコードを登録
プラグイン 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; } |
確認の手順
- カスタマイズコードを保存
- カスタマイズしたページを開く
- cntrl+F5を押す
いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。
プラグインでコードを登録
プラグイン 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); } |
確認の手順
- カスタマイズコードを保存
- カスタマイズしたページを開く
- cntrl+F5を押す
いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。
プラグインでコードを登録
プラグイン 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。
- 追加のコードを書き込んで、保存。アップロード。
- 更新して確認。
- プラグインでコードを登録して終了。
ワンクリックで画像にタイトルを付けれるようになりました
コメント( ˶ˆ꒳ˆ˵ )