イラストの使い方

「吹き出し」や「上に戻るボタン」にイラストを導入する方法!

投稿日:

このページでは、サイトやブログのデザインにイラストを使いたい場合の「導入方法」をご紹介しています!
わかりやすく解説されているサイトへのリンクをご紹介いたしますので、導入の際にはぜひ参考にしてみてくださいね。





会話形式のデザインに仕様する場合

ご飯!
今日のご飯はなんですかー!
そうね…
今日は、オムライスにしようかしら

ブログなどで、会話形式のデザインを使用したい場合には、こちらのサイトを参考にさせて頂きました。
とてもわかりやすかったです!

Google Chromeの拡張機能を使った、方法がのっているサイトへのリンクものっていましたよ。

 

「上へ戻るボタン」に画像を使う場合

「上へ戻る」ボタンに画像を設定したい場合の方法をご紹介していきます!

はてなブログ

はてなブログでのカスタムの方法は、こちらのサイトを参考にさせて頂きました。
サイトに記載されているCSSをコピペし、 <i class="blogicon-chevron-up fa-3x"></i> の部分を画像のURLに置き換えます。

この時に、画像URLのみではなく「img class=」から始まるはてなブログ独特の形にする必要があります。
やり方はこんな感じです↓

① 一度記事に画像を貼りつけ
② HTML表示で「img class=」から始まるCSSをコピー
「<i class="blogicon-chevron-up fa-3x"></i>」に上書きして貼りつけ!

画像サイズは、130~100pxくらいだとスマホでちょうど良かったです。




WordPress(ワードプレス)

WordPressで上へ戻るボタンに、イラストなどの画像を使用したい場合には、「プラグイン」を入れることで簡単に導入することが出来ます!
ここでは、「Back To Top」というプラグインについてご説明していきますね。

「Back To Top」を新規追加

左端メニューの「プラグイン」から、新規追加を選択して「Back To Top」を探すよー

まずは、「Back To Top」というプラグインを新しく追加します。
新規追加の項目から検索をして探してみましょう!

 

見るポイントは2つ!

「Back To Top」と検索をすると、結構たくさん出てきます。

プラグイン名「Back To Top」
制作者「Arkapravamajumder」

この2点が合っているか見てからインストールしてみてくださいね。

確認が出来たら「今すぐインストール」を選択して、有効化しておきましょう!

 

設定画面を開く

インストールが終わったら、画像を設定するよー

「Back To Top」のインストールが終わったら、画像の指定をしましょう!
まずは、左端メニューから「Back To Top」の項目を選択して設定画面を開いてくださいね。

 

設定画面を開くと、こんな画面になるので真ん中にある「Upload Your Back To Top Image」にチェックを入れておきましょう!
チェック出来たら、「Next」を押して次に進みます。

 

画像の指定

下の方にこんな画面が表示されたら、「Upload」をクリックして好きな画像をアップロードしてみましょう。
アップロード方法は、全部で3種類あります!

自分のパソコンから追加!

自分のパソコンに保存されている画像から、選択が出来ます。
「ファイルを選択」から選択してみましょう。

 

URLから追加!

URLを入力することで、画像をアップロード出来ます。
必須事項を入力して、「投稿に挿入」を選択しましょう。

 

メディアライブラリから追加!

サイトのメディアライブラリにアップロードされている画像を、選択して使うことが出来ます。
「表示する」を選択して、詳細を見てみましょう。




 

画像の詳細を設定

画像をアップロード出来たら、画像の詳細を設定していきます。
配置や大きさなどを変更できますので、お好みで変更してから「投稿に挿入」を選択しましょう。

 

確認してアップロードを完了

「画像URL」と「画像イメージ」を確認するよ

画像の指定が出来たら、「Upload Your Back To Top Image」の項目で「画像URL」と「画像イメージ」が表示されているかを確認しましょう。
選択が出来たら、「Upload Back To Top Image」を選択して、画像の指定は終了です!

※URLが入らない場合には、あらかじめメディアに画像をアップロードして、画像URLをコピー。
「Back To Top」のURL入力画面(画像の①のとこ)に貼り付けし、「Upload Back To Top Image」で入れることも可能です!

 

細かい動きの設定

もっと細かく設定したい時は、「Settings」を開こう!

画像の動きなどの細かい設定は、「Back To Top」内の「setting」の項目から行うことが出来ます。

横から飛び出すような動きにしたり、見えたり隠れたりするように出来たり…
色々な動きがあったので、お好みで調整してみてくださいね。

 

①の項目では、大きな動きを設定出来るよ

「Hide/Show」
横から隠れたり、出てきたり(ゆるいらはこれ!)

「FadeIn/FadeOut」
はっきり映って、次第に消える

「SlideDown/SlideUP」
出たり入ったり、上下に動く

Edit Cssなどで、もっと細かく指定もできますよ。
指定が終わったら、「Save Settings」を選択して終了です。

 







-イラストの使い方
-, , , , , , , ,

Copyright© ゆるいら , 2018 AllRights Reserved.