ブログ アイコン 自作。 ブログアイコンどうする?ブログアイコンの作り方まとめ

はてなブログにブログアイコン(ファビコン)を5分で作る方法|ブログ始めた人におすすめ

ブログ アイコン 自作

形ばっかり気にしてると、上手くいかないと思ってました。 実際に、気分転換がてらアイコンを作ってみたところ、 モチベーションが爆上がりです! ブログに愛着が湧き、記事の執筆がとても楽しくなりました! SNSで情報を発信しやすくなった。 アイコンを作ったことで、SNSで情報を発信しやすくなりました。 アイコンをSNSにも導入したことで、自信を持ってツイートできるようになり、twitterの運用がやりやすくなりました。 実際に、僕はほとんど手付かずの状態だったtwitterですが、今では著名人に話しかけることにも躊躇しなくなりました。 SNSの運用も考えるなら、アイコン作りを念頭に入れましょう。 有名人のアイコンを見てみよう! いつも拝読している有名ブログのアイコンを引用させて頂きました。 せっかくなんで、実績を出している方々のアイコンを参考にしましょう! 素敵なイラストレーターさんが沢山います。 フリー素材ですが、ちょっといかがわしい雰囲気が出ています...。 そして、上記イラストをイメージとして書いてみて、イラストレーターさんに「こんな感じでお願いします!」とお願いしたところ・・・ After:小川フクロウです。 (現在はさらにアップデートしました。 ) 明らかに可愛い感じになりました!! 断然こっちの方がいい!! この2パターン作ってもらって1000円、すごく安いですね。

次の

どうしてる?ブログのプロフィールのアイコン画像の作成方法・探し方

ブログ アイコン 自作

ブログの購読率向上のために、記事の下やサイドバーに表示する アイコン付き フォローボタンの HTML って、こんな感じで書かれていることが多いと思います。 よくあるパターン1 の中にアイコンフォントの表示タグを書くパターンです。 アイコンフォントの表示タグ の Class 名は FontAwesome の場合です。 よくあるパターン2 に表示するアイコンの Class を設定して、擬似要素で表示するパターンです。 個人的にですが、このよくある書き方は a タグの中に要素が増える、 表示するアイコンの Class を個別に指定しなければいけないという不満と手間を感じます。 そこで、属性を活用した URL を書くだけでアイコンが表示される フォローボタン を5種類作ってみました。 アイコン用のフォントを読み込むコードになります。 制作時点で自動でアイコンが表示されるサービスは以下の通りです(50音順)。 CodePen• delicious• dribble• LinkedIn• Pinterest• Pocket• Steam• Twitch• Vimeo• Weibo• WhatsApp• com• org• (読者登録)• () HTML コード 使い方は. follow-me を指定した ul 下にある li 内部に a リンク を書くだけです。 ボタンを追加する方法も li を増やしていくだけなので簡単です。 表示する場所も選びません。 これは「ある要素の」「ある属性に」「ある属性値が含まれている」ときにスタイルを適用するです。 com"] 例えば上記のように書くと、「. follow-me li a の」「href に」「. com が含まれている」ときにスタイルを適用する、という意味になります。 このによって、 へのリンクを貼れば のアイコンが、 へのリンクを貼れば のアイコンが、 へのリンクを貼れば のアイコンが…、というわけです。 色付き+ホバー時に薄くなる See the Pen by half-moon on. 色付きで、ホバー時に若干薄まるデザインです。 おそらく最もベーシックなデザインではないでしょうか。 色付き+ホバー時に背景色と文字色が反転 See the Pen by half-moon on. ホバー時に背景色と文字色が反転するデザインです。 サイズを理解しやすくするため、ホバー時は 1px のボーダーを加えています。 色付き+ホバー時に背景色と文字色が反転(逆) See the Pen by half-moon on. の逆バージョンです。 モノクロ+ホバー時に色が付く See the Pen by half-moon on. 最初はモノクロですが、ホバーすると色が付きます。 ミニマル系のテーマでよく使われているデザインです。 モノクロ+ホバー時もモノクロ See the Pen by half-moon on. モノクロで、ホバー時に背景色が黒、文字色が白に変わります。 こちらもミニマル系のテーマでよく使われています。 デザインオプション 貼り付けた の後に以下のコードを加えると、角の丸みやアイコンの大きさ、ボタンのサイズを簡単にカスタマイズできます。 border-radius の数値を変えると、ボタンの角丸の度合いを変更できます。 font-size でアイコンのサイズを変更できます。 height と line-height でボタンの高さを変更できます。 それぞれ同じ値を指定して下さい。 width でボタンの幅を変更できます。 height より大きい値を指定して、横に長い付箋風のデザインにするのも良いかもしれません。 まとめ 「URL を書くだけ」というのは、類似のフォローボタン・カスタマイズと比べて大きな利点だと思っています。 よろしければお使いください。 各アイコンのカラーコードの指定はこちらのサイトを参考に行いました。 waitingmoon.

次の

アイコン作成をプロに依頼!SNSやブログのプロフ画の制作サイト

ブログ アイコン 自作

ブログアイコン何にするか悩む1年 さて、ブログのアイコンについて1年間悩んできました。 何かトレードマークにしようか? 身体の一部を撮影したものにするか? イラストをお願いするか? などなど、いろいろ試してみるも「これ!」というものが思い浮かばず。 たかがブログのアイコンのくせに~~~悩ませやがる~~~! と思いつつ、いろいろ考えまくりました。 以前使っていた目玉焼きのアイコンですが 目玉焼きが好きという理由で、これを長らくアイコンにしていました。 しかーし、自分で書いたくせに、なかなかしっくりこず。 「なんか違うな~」を抱えながら数ヶ月が過ぎました。 わたし、悩みすぎ笑 プロにお願いしてみる 自分の中にないならプロのイラストレーターさんにお願いしてみよう! そう思って、ネットで見つけたイラストレーターの方にアイコンを依頼しました。 いろいろ「こんな感じで!」とお願いし、お金も払い、とても可愛いアイコンを書いていただきました。 しかし、なかなか頭の中のイメージを伝えるのは難しく めちゃくちゃ可愛いアイコンなのに「あれ、私のブログとマッチしてないかも…」てな感じに。 結局、同時並行で自分で書いていたアイコンにすることにしました。 これもねー悩んだんですが、、! 自分の中のもにゃもにゃ感を大事にしました。 私もWEBのヘッダーデザインをお金いただいて作成したことがあるのですが 相手のイメージを具現化するのって難しいんです。 逆にイメージを伝えるのも難しいんだなと今回は学べてよかったです。 イラストレーターの人ってすごいな~とあらためて尊敬しました。 自分で作成したブログアイコン ってな感じでこのブログアイコンになりました。 わたし、ちょっとですが絵が描けます。 LINEスタンプも何種類か発売してるしね! でも見ての通り ヘタウマ?なゆる~~いものしか書けません。 「ちゃんとしたものを書こう!」と思って書いてみたものもあります。 面白いんで、最後にボツ案として載せますね笑 でも結局、自分が得意なジャンルで描いたほうがいい!と今回実感しました。 ブログアイコンの作り方私の場合 興味ないかもしれませんが、これからブログアイコンを自分で作りたい方のために私のアイコンの作り方を載せておきますね。 絵を書く 白い紙に、ペンで自分のアイコンの元となる絵を書きます。 自分が目指すべきアイコンの雰囲気をよく考えましょう! 私もいっぱい絵をみて目指すべき雰囲気を考えながら書いてみました。 ちなみに、わたしが使っているペンはCOPIC MULTILINER。 コピック用のペンで、いい味が出るのでお気に入りです。 文房具屋さんに売ってます。 書いた絵をスキャン 書いた絵をスキャンします。 わたしは家にあるスキャン付きコピー機を使いました。 スキャンしたものをワイファイで自動でパソコンに送ってくれます。 ベンリー! コピー機ない場合はコンビニとかでスキャンできます。 イラストレーターのようなもので色をつけたりする スキャンした絵を画像編集ソフトに取り込みます。 取り込んで、黒い線以外の部分を削除しつつ、色をつけます。 色をつける作業が一番好きです!たのしー! ちなみにわたしが使っている画像編集ソフトは 「イラストスタジオ」です。 パッケージ版使っていたんですが、廃盤になってしまっていて 今はPROっていう新しいのが出ておりますー! photshopよりも安価だったのでこれを使っていますー。 完成 色をつけ終わったら、完成です。 ちなみに初心者がやりがちなことなんですが 保存するときにjpegで保存するとネットにアップロードしたときに画質が悪いです。 PNGを選択しましょうー! 作った時にこだわったこと ・ゆるさをだす ・自分の好きなものを入れる ・人のアイコンにする ここにこだわって作りました。 それと意外と大事だったのが「表情」。 おすまし顔 キラリ顔 ニコリ顔 笑顔 いろいろありますが、今の「あは~ん」て感じの表情に表情を変えたらしっくりきました。 ゆるくて自分らしくて気に入ってます。 結果的に、いままで自分で作ったアイコンの中で一番いい感じだ。 人を書こうとして、可愛く書こうとして、頑張って書いた結果がこちら! ほとばしる、 クレ〇ンしんちゃん感・・・笑 一周まわってゆるいー!という感じではないので使うのやめました笑 ポーズも意味不明ですね 笑 両目書くの難しいから隠すという初心者あるあるでしたー笑.

次の