ログイン
Language
今回はナビゲーション部分にオリジナルのアイコンを設定する方法をお伝えをさせていただきます。
Jimdoのナビゲーションはお世辞にもあまりかっこいいとは言えません。
そこで、少しでもオシャレに見せるために、リンクボタンの前にオリジナルのアイコンを付けたいと思います。
完成系はこちらになります。
ナビゲーションのリンクボタンの前にハートのアイコンを設置しました。
まずはこのアイコンですが、前回ご紹介をさせていただきました、フリー素材集サイトの「Photo AC」から好きなアイコンをダウンロードします。
「photo AC」
http://www.photo-ac.com/
このサイトは無料で画像がダウンロード出来、商用問わず使えるフリー素材集です。
ダウンロードが出来ましたら、ペイントでハートだけを抜き取ります。
ペイントソフトについてはこちらのマニュアルをご確認ください。
http://global-s-h.com/jimdo/ja_picture.php
ペイントソフトでダウンロードしたアイコンを開きます。
選択ツールでハートだけを選択し、「変形」からトリミングでハートのみを抜き取ります。
「変形」からハートのサイズを変更します。
windows vista版では縦、横10%くらいでサイズを縮小します。
windows 7,10版では縦、横15～17pxくらいでサイズを縮小します。
ファイルを保存します。
その後、Jimdoの「レイアウト」ボタンから「独自レイアウト」をクリックします。
「ファイル」タブから「ファイルを選択」し、作成したアイコンをアップロードします。
CSSタブからCSSのコードを表示し、190行目から215行目辺りを表示します。
※テンプレートによって行の場所、書き方は違います。
この中の「arrow.png」という矢印のアイコンになっている分部をアップロードしたアイコンの名前に変更します。
今回は「517026.jpg」に変更しました。
最後にアイコンからリンクボタンまでの距離を設定します。
下記、192行目の「padding」と書かれているところの最後の数字を変更します。
数字が大きくなるにつれて、距離が遠くなります。
何度か繰り返して、フィットする距離に合わせます。
このサンプルでは35pxに設定しました。
完成した、アイコンです。
2017 1/26 Jimdoのそれぞれのページに違うメイン画像を設定する
2016 12/22 他社で取得したオリジナルドメインをJimdoで利用する方法
2016 11/09 Jimdoページに3Dタイトルを導入する
2016 09/30 Jimdoのナビゲーション部分にオリジナルアイコンを付ける
2016 09/16 Jimdoコンテンツ部分にｵﾘｼﾞﾅﾙﾀｲﾄﾙを作る
2016 08/18 Jimdoのコンテンツ文字部分に枠を付ける
2016 07/07 「グーグルアナリティクス」を使ってユーザーのアクセス解析を行う
2016 06/23 「Tokyo」Jimdoの新テンプレート
2016 05/12 Jimdoトップページに掲載する１０のコンテンツ
Copyright (C) Web Shakehands All rights reserved.
