皆さんごきげんよう。
私のブログではメニューバーに以下の赤枠のようなアイコンボタンを設置しています。
スマートフォンの場合、左下のサイドバーというボタンを押すと以下のような画面が見られます。
このアイコンボタンをWordpressを使って設置する方法について解説します。
アイコンボタンの作り方
アイコンボタンの作り方は以下の手順で行います。
- STEP1ホームから「外観」を選択
- STEP2ホームから「外観」を選択
- STEP3「ヘッダ」をクリック
- STEP4ブログのカスタマイズ画面に移動するので「メニュー」を選択
- STEP5次にメニューから「サイドバー」をクリック
サイドバーの各項目を設定すると以下のように反映されます。
- STEP6「項目を追加」を選択
「項目を追加」を選択すると、固定ページや投稿・カテゴリなどのクリックしたときに飛ばしたいリンクが一覧になっているので好きなものを選びましょう。
通常なにも画像の設定をしない場合以下のの赤枠のようになります。
- STEP7「タイトル属性」に画像リンクを貼る
これに画像を設定したい場合、設定したい項目のタイトル属性に画像のリンクを貼ることで設定ができます。
タイトル属性に張る画像の作り方とURLの確認方法
「タイトル属性」に画像URLを貼るためには以下の手順が必要です。
- STEP1画像を作成
まずはメディバンペイントで500×500の画像（これがアイコンになります。）を作る。
- STEP2次にWordpressの「投稿」ボタンをクリック
- STEP3「新規追加」をクリックし画像をアップロード
「新規追加」をクリックするとファイルをドロップしてアップロードという枠が出てきます。
ここで「ファイルを選択」をクリックし、画像ファイルを選択する方法と、画像をこの枠にドラッグ&ドロップする方法のどちらかで画像をWordpressにアップロードすることができます。
- STEP4アップロードした画像からURLを確認可能
次にアップロードした画像をクリックするとファイルのURLが表示されるので、このURLを先ほどの「タイトル属性」に張り付けることで好きなアイコンに変えることができます。
まとめ
今回はサイドバーにアイコンボタンを作る方法について解説しました。
自分のブログのイメージキャラなどをアイコンボタンにすると、ただのマークに比べてオリジナリティが出ます。
メディバンペイントの使い方については以下で解説しているので参考にしてください。
こういった地味で細かな工夫を積み重ねていくことで、少しずつブログの質が上がっていきます。
やり方を覚えれば簡単にできるので、「いいな」と思ったら試して見て下さい。
今回はここまで
それでは！
関連記事
コメント