【SANGOカスタマイズしてみた】画像にタイトルをワンクリックで追加する

ワンクリックで画像にタイトルを付けれるようにする

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


この記事では
画像にワンクリックでタイトルをプラスするカスタマイズ方法を説明。
CUSTOM POINT
タイトル付きの画像を使いたいときなんかに便利です。

サンプル用の画像

大きさ:361✕361px

休日が欲しい気持ちが強かったので、この画像を使用しました。


パターン1

ゴロゴロ大好き

上にタイトル追加


パターン2

ゴロゴロ大好き

下にタイトル追加


パターン3

ゴロゴロ大好き

カード風


お・ま・け

ゆるりと過ごす休日が大好き。

癒やされに行く

MENくん

おまけのカスタマイズもいつか記事にしなければ!


このサイトの環境

テーマ
子テーマ
プラグイン

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズの準備

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

ワンクリックでタイトルを追加するには、プラグインを使用します。

カスタマイズの手順としては

手順 カスタマイズコードをCSSに追加プラグインでコードを登録(ボタンになる)ビジュアルエディタで画像を選択して、ボタンを押せばCSSが適用される

パターン1 ~上にタイトル~

CSSコード

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

プラグインでコードを登録

プラグイン Visual Editor Custom Buttons

1列目ををBefore(開始タグ)に、3列目をAfter(終了タグ)に貼り付けます。

設定欄のタイトルやアイコンはお好きな用に設定してください。

パターン2 ~下にタイトル~

CSSコード

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

プラグインでコードを登録

プラグイン Visual Editor Custom Buttons

1列目ををBefore(開始タグ)に、3列目をAfter(終了タグ)に貼り付けます。

設定欄のタイトルやアイコンはお好きな用に設定してください。

パターン3 ~カード型~

CSSコード

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

プラグインでコードを登録

プラグイン Visual Editor Custom Buttons

1列目ををBefore(開始タグ)に、3列目をAfter(終了タグ)に貼り付けます。

設定欄のタイトルやアイコンはお好きな用に設定してください。

2列目のimage-title3-imageは自分の好きな画像にクラス名を付け加えてください。

 

 

まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
  • プラグインでコードを登録して終了。
MENくん

ワンクリックで画像にタイトルを付けれるようになりました