Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
AFTER
カスタマイズは自己責任でやろう
自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。
![](https://for-men.jp/wp-content/uploads/2019/04/jikosekininn-160x160.png)
カスタマイズするための
準備
HTMLコード
<p><span class="maru2">文字</span><a href="URL">★リンク★</a></p>
アドクイックタグやビジュアルエディタカスタムボタンに<span> ~ </span>を登録しておくと楽ちんです。
![Visual-Editor-Custom-Buttonsの使い方](https://for-men.jp/wp-content/uploads/2018/10/Visual-Editor-Custom-Buttonsの使い方-160x160.png)
CSSコードの追加方法
おすすめは追加CSSからコードを追加する方法です。
はじめてカスタマイズする方は、こちらの記事を読んでくださいね。
![カスタマイズを加速させる追加CSS](https://for-men.jp/wp-content/uploads/2018/09/カスタマイズを加速させる追加CSS-160x160.png)
追加方法 | 難しさ |
---|---|
追加CSS | |
テーマエディター | |
FTPソフト |
複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。
カスタマイズに必要な
CSSコード
![ãã®ç»åã«ã¯ alt å±æ§ãæå®ããã¦ãããããã¡ã¤ã«å㯠kopinosikata.png ã§ã](https://for-men.jp/wp-content/uploads/2018/08/kopinosikata.png)
コメントあり
/*-------------------------------------- 二文字背景丸 --------------------------------------*/ .maru2 { background: #1a73e8;/*背景色*/ color: white;/*文字色*/ border-radius: 30px;/*丸に*/ display: inline-block;/*幅と高さを設定できるように*/ font-size: 12px;/*文字サイズ*/ width: 34px;/*幅*/ line-height: 34px;/*行の高さ*/ text-align: center;/*中央揃え*/ margin-right: 10px;/*外側 右余白*/ }
コメントなし
/*-------------------------------------- 二文字背景丸 --------------------------------------*/ .maru2 { background: #1a73e8; color: white; border-radius: 30px; display: inline-block; font-size: 12px; width: 34px; line-height: 34px; text-align: center; margin-right: 10px; }
確認する際は必ずキャッシュを削除してから見てください。
確認方法 |
---|
「Ctrl」+「F5」(キャッシュ削除) |
カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。
Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。
![](https://for-men.jp/wp-content/uploads/2019/04/kyassyusakujo-160x160.png)
くまからのお礼
本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)
もっとカスタマイズしたい人はこちらの記事を見てください。
![](https://for-men.jp/wp-content/uploads/2019/09/84c53e12efdc94956cb14977175bad0f-160x160.png)
まとめ・感想・雑談・こだわり
![追加CSSのまとめ](https://for-men.jp/wp-content/uploads/2018/09/自作まとめ.png)
![](https://for-men.jp/wp-content/uploads/2018/08/huki-talk.png)
はっ!と思いついた単純なカスタマイズやけど、意外と良かった
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kuma3.png)
そやな、お手上がるに使えるし、SANGOにマッチしてるよな
![](https://for-men.jp/wp-content/uploads/2018/09/huki-niya.png)
アイコンを入れてもいい感じなのは予想外だったw
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kuma3.png)
半角なら4文字までいけるのもええな
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kirakira.png)
手軽な割に使えるやつ!!