WordPressのショートコードを使って 定型文を簡単に挿入させる (ブログエディタも対応)
WordPressにはたくさんのプラグインがあるので、定型文を管理するプラグインも多数存在シますが。基本的にWordPressのプラグインはWordPressの管理画面で使うことが想定されていますので、ブログエディタから […]
レイアウト崩れし無し！ borderをbox-shadowsで代用させると楽チン
初めてHTMLとCSSを使い始めた頃は、borderとかpadding、marginによるレイアウト崩れだけで相当ハマりました。だからこそ初心者にはこの方法で線を表現するのが楽かと思います、box-shadowは縦や横の […]
マウスオーバーで画像が折りたたまれるアクション Folding Effect on Hover
画像の部分をマウスオーバーすると、画像がクシャッと折りたたまれるアニメーションのアイディアです。 画像自体は分割されていません、1つの画像を背景として4回呼び出して4つのブロックがそれぞれ変形することで表現されています
Box-shadowのinsetを応用した 目隠しアクション Inset box-shadow play
box-shadowsの影を外側ではなく内側にするinsetでbox内を目隠しして、マウスオーバーで中身が見えるようにするアイディア集です。
無料で使えるフルカラー(カラフル)なCSSアイコンフォント STACKICONS
STACKICONS http://stackicons.com/ 無料で使えるアイコンフォントです 種類は主にブランドロゴを取り扱っていて、他にトグルボタンに使われるバーガーボタンや虫眼鏡などがありあます […]
まとまりのあるSNSボタンバーのデザイン
Facebook、Google+、Twitter、Linkedin、VK、Pinterest、Surfingbirdのアイコンボタンが揃っています。日本で馴染みがあるものが少ないですが、シンプルなので大体ブログデザインにも合うかと思います。
画像・ZIP・JS・PDF 等々のファイルの直リンクを防ぐ方法 .htaccessの活用
WEBサイトで使っている画像、等々のファイルって直リンクされると とても困りますね サーバーへの負荷になりますし、オリジナルファイルが自分のサイトからではなく他の誰かのサイトからダウンロードされてたら、商売上がったりの方 […]
WordPressで1つの投稿(記事)をページ分割をする方法とカッコイイデザイン
All About とかにある一つの記事を複数のページに分割やつ、あれがWordPressでも標準機能として備わっています、テーマに一つコードを追加することと、ページを分割していところでショートタグを入れることでページを […]
見て目が不揃いなSNSのボタンをカバーを付けて切れに見せるための9つのアイディア
SNSのボタンをアイコン等でかくして、マウスオーバーされた時にSNSのボタンを表示するアイディア集です
プロフィールの画像に使える、SNSアイコンが滑りこんでくるアイディア Hexagonal Team Member
六角形に表示された画像の部分にマウスポインタを乗せると、4つの方向からSNS等のアイコンが滑りこんでくるアイディアです、
入力フォームの入力欄を飾るアニメーション Animated input labels
入力欄にフォーカスすると、ラベル部分がアニメーションしてデザインが変わるものです 入力が必須のところで入力が無いと赤色の表示のエラーを示すようになっていています入力内容も判別しているようです
シンプルでフラットなデザインのツイートカウンターボタン Twitter Button (Tweet)
シンプルでフラットデザインのツイートカウンターです、表示のはじめに数字がコロコロと変化して表示されます。 hoverすると鳥がパタパタと羽ばたきます
パステルカラーの付箋風のWEBデザインが魅力的 Sticky notes without images
背景は画像を利用しているものの、他はCSSでデザインされています。ブロックを付箋で表現したデザインがとてもいいですね。新着記事一覧等にこれを利用するのも有りかと思います
ポップでかわいい テキストベースのローディングアニメーション
カラフルでポップなデザインのローディングアニメーションです #containerLoaderのところを調整すれば、コピペで使えますね
床屋さんに有るクルクル回るアレが CSSだけで作られたアニメーション Barbershop Loader
床屋さん、理容室美容室にある外においてあってクルクル回るサインポールってやつです それがCSSのアニメーションで表現されたものです。
ヌルヌル動くCanvasで作られた オリンピックの輪がすごい olympic circles logo
画面が表示されると、線状のものが集結してオリンピックの輪になります そのアニメーションがとても綺麗です
ダイヤルと連動して、コンテンツがスクロールするjavascriptコード
左にあるダイヤルを回すと、右にあるコンテンツがスクロールして行き、逆にコンテンツ部分でスクロールをすると左のダイヤルが回るようになっています。
画像なしで、CSSだけで作られた質感が良いスイッチボタン Toggle button in pure CSS
CSSだけで画像を使わず作られたスイッチボタンです、とても質感がよく出来ています このリアルな質感のボタンを見つけ人はついついスイッチを押しっちゃうんじゃないでしょうか
Photosho CCとLightroomが1000円から利用可能！？
Photoshop と言えば、仕事で画像を扱うことがある人にとってはほぼ99％知っているワードではないかと思うのですが。そのPhotoshopとLightmoonが月額1000円で継続的に利用できるようです。 adobe […]
WEBサイトの背景選びに困ったらフォトショップの背景パターンから探すと良い！
WEBサイトの背景って結構重要です、シンプルに白で決めるのも良いですが、サイトに印象を付けたい時や単色では物足りない時には背景にパターン画を使うことで継ぎ目のない背景を実現することが出来ます。そこで便利なのがフォトショッ […]
