日々の忘備録とリファレンス

PHPマニア

HTML・CSS・PHP・jQuery・Mysql・Linuxの総合情報サイト

PHPを中心にしたIT用語など、サーバー用語からTCP/IP用語まで

HTML・CSS・PHP・jQuery・Mysql・Linuxの情報サイト

+
Share
Bookmark
Follow

サイト内のSNSやソーシャルアイコンのデザイン

もうなんかやりたいことが出来たら、それが出来るまで落ち着かないんですよね。

デザインってイメージから入るので、そのイメージに近付けるプログラミングやコーディングが楽しすぎますね。

そして最近はソーシャルアイコンのデザインにハマってます。ようやく一段落したので独り言の記事を書こうと思います。笑

Webサイトにおけるソーシャルアイコンの重要性

現代はWordPressの発達の関係か、トレンド感のある記事がとても多いですね。
そしてそのWordPressは、様々なプラグインを開発者やプログラマーたちが新しく作っているので、流行りのものを取り入れたプラグインなどのおかげで、もう次々とサイトのデザインも進化して行っています。

その中で、TwitterやFacebook、LINEなどのSNSをはじめ、はてなブックマークやPocketなどのソーシャルアイコンの設置が流行っているというか、業界ではデフォルトのようなものみたいになっています。

それらは、サイトの閲覧者に記事をシェアして拡散してもらったり、また読み返せるようにブックマークするものですが、現代はサイトのデザインの一つになっている気がします。

PHPに最適の共用サーバー

GMOの格安WordPressサーバー

ロリポップサーバー

お名前.comのサーバー

お名前サーバー

ソーシャルアイコンの配置パターン

そこで、サイトによって様々なソーシャルアイコンの設置デザインがありますが、大体はパターン化されています。

その中で、デザインや配置が優れてたり、使いやすかったりといったパターンをいくつかピックアップして、サイトに設置してみたりしました。

ちょうと新しくサイトも立ち上げたところだったので、それに適応したりしました。

ソーシャルアイコンを設置するだけで、一気にカラフルになりますね!

あとはこのサイトにもソーシャルアイコンを設置してみました。

PHPに最適の共用サーバー

GMOの格安WordPressサーバー

ロリポップサーバー

お名前.comのサーバー

お名前サーバー

jQueryを使ったソーシャルアイコン表示

このサイトのイメージは、ちょっとマニアックだけどデザインは統一感ある感じで分かりやすくしたいイメージで作っていますが、その中で流行りのテイストを取り入れつつ、ちょっとお洒落にしたいなと思ってました。

そこでフワッと浮き上がるデザインにしたいなと思いました。

そういったのは、どこかのサイトで見たことはあったのですが、なかなかそういうサイトは少なく、探してもイメージ通りのがなかなか出てきません。

とりあえずイメージはあったので、一からjQueryCSSを打って行きました。

そして、苦手だったけど今はハマっているTwitterのようなオープンアイコンを右下に設置したいと思い、そうしてみました。

ソーシャルアイコンの並びは少し内側寄せで、透明感あるようにしました。

誰が見てもわかりやすいように、シェアとブックマークとフォローを分けました。

そして閉じる時はどこをタップしても閉じれるようにしました。

ソーシャルアイコンは、Font Awesomeを使い、CSSで背景色を付けて丸くしています。

なかなか見ないデザインにはなりましたが、オリジナリティもあっていいかなって思うので、当分これで行こうと思います。

[カテゴリ]

2021年02月03日

関連記事

ツイッターを始めたのはいいけれど、最初戸惑ったことの一つが、ツイッターに一度に投稿出来...

2020年12月12日

最近までツイッターは超苦手でしたが、ようやく慣れて好きになりました。も...

2021年02月06日

そう言えば最近色々検索エンジンで検索したときに、引っかかるサイトやページって、普通の内...

2020年12月13日

全く文章力がないし、文章書くのが苦手でめんどくさがりなので、ツイッターのつぶやきと同じ...

2020年12月12日

Copyright© 2019-2021 php-mania.com All Rights Reserbed.

当サイトに掲載している文章、画像などの無断転載を禁止いたします。