きょろきょろと目が動くアイコンを関連リンクに使ってみたが地味すぎてあまり気づかない

こんな感じ

BEFORE

リンクリリンクリンクリンクリンクリンクリンクリンクンク

AFTER


MENくん

目が、、目がぁぁぁぁ!

くま3号

おぉ、、地味に動いとるw


FANBOX限定

色違いを作って見ました。

FANBOX限定

めっちゃ早く動かしてみました(ネタです)

スピードアップ

縦横無尽

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

自己責任の意味がわからない方初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

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

カスタマイズするための
準備

目次へ戻る

動かす顔と目の画像

まずは「顔」と「目」のSVG画像をダウンロードして、WordPressにアップロードしてください。

顔のSVG画像

目のSVG画像

「右クリック」して「名前をつけて保存」してください。

アップデートしたあとは、画像のURLをCSSコードに貼り付けます

グーテンベルクでの準備

下のボタンからダウンロードして、再利用ブロックにインポートするだけです。

再利用ブロックを追加した画面
MENくん

慣れれば秒でできるからおすすめだよ

くま3号

グーテンの場合はエディタで見た目がわかりやすいよね

クラシックエディタの場合

クラシックエディタの場合は、こちらのコードをアドクイックタグに登録してお下さいね。

リンクはaタグに追加してくださいね。

CSSコードの追加方法

おすすめは追加CSSからコードを追加する方法です。

はじまてカスタマイズする方は、こちらの記事を読んでくださいね。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方
追加方法難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

目次へ戻る

この画像には alt 属性が指定されておらず、ファイル名は kopinosikata.png です

コメントありver

コメントなしver

うまくできたか
確認

目次へ戻る

確認する際は必ずキャッシュを削除してから見てください

確認方法
「Ctrl」+「F5」(キャッシュ削除)

カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

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

くまからのお礼

目次へ戻る

本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)

もっとカスタマイズしたい人はこちらの記事を見てください。

【圧倒的SANGOカスタマイズまとめ】~ようこそ、沼への入口へ~

コメントを残す

メールアドレスが公開されることはありません。