
サンプル用の画像
大きさ:361✕361px
休日が欲しい気持ちが強かったので、この画像を使用しました。
パターン1

上にタイトル追加
パターン2

下にタイトル追加
パターン3

カード風

カスタマイズは自己責任でやろう
自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。
見たい場所へジャンプ
カスタマイズするための
準備
CSSコードの追加方法
おすすめは追加CSSからコードを追加する方法です。
はじめてカスタマイズする方は、こちらの記事を読んでくださいね。
追加方法 | 難しさ |
---|---|
追加CSS | |
テーマエディター | |
FTPソフト |
複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。
カスタマイズに必要な
CSSコード

ワンクリックでタイトルを追加するには、プラグインを使用します。
カスタマイズの手順としては
パターン1 ~上にタイトル~
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 |
[center]<div style="position: relative; display: inline-block;"><span class="image-title1">★</span> <img> </div>[/center] |
1列目ををBefore(開始タグ)に、3列目をAfter(終了タグ)に貼り付けます。
設定欄のタイトルやアイコンはお好きな用に設定してください。
パターン2 ~下にタイトル~
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 |
[center]<div style="position: relative; display: inline-block;"><span class="image-title2">★</span> <img> </div>[/center] |
1列目ををBefore(開始タグ)に、3列目をAfter(終了タグ)に貼り付けます。
設定欄のタイトルやアイコンはお好きな用に設定してください。
パターン3 ~カード型~
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] |
1列目ををBefore(開始タグ)に、3列目をAfter(終了タグ)に貼り付けます。
設定欄のタイトルやアイコンはお好きな用に設定してください。
2列目のimage-title3-imageは自分の好きな画像にクラス名を付け加えてください。
うまくできたか
確認
確認する際は必ずキャッシュを削除してから見てください。
確認方法 |
---|
「Ctrl」+「F5」(キャッシュ削除) |
カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。
Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。
くまからのお礼
本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)
もっとカスタマイズしたい人はこちらの記事を見てください。
【圧倒的SANGOカスタマイズまとめ】~ようこそ、沼への入口へ~
まとめ

