やっと見つけた！ LINEやFacebookみたいな会話をブログで使う事ができる、めちゃくちゃ便利な吹き出しプラグインを見つけました。 [speech_bubble type=”fb-flat” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]こんにちは。WordPressではこんな便利なプラグインがあるんですね。[/speech_bubble] [speech_bubble type=”fb-flat” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]佐伯さん、”毎年平社員”っていう肩書がつけられてますよ。チョー似合う。 [/speech_bubble] 今回は、こんなふうに漫画風や会話風にブログを進行することができるようになるワードプレスのプラグイン『Speech Bubble』というプラグ

This page is also available in English. どうやってコンタクトフォームのスタイルを指定するの？ というのがサポートフォーラムの定番の質問です。Contact Form 7 はスタイル指定のためのカスタマイズ機能を提供しません。CSS のスタイルシートを編集するのがコンタクトフォームにスタイルを適用する最善の方法です。この記事ではコンタクトフォームのスタイル指定のための重要なステップについて解説します。CSS について詳しい方にとっては難しくないはずですが、まだよくわかっていないという方はまず先に CSS について勉強してください: Learning CSS – W3CCSS Tutorial – W3SchoolsLearn CSS | MDN – Mozilla Developer NetworkCSS Basics どのスタイルシートを編集するべき

ソーシャルメディアのシンプルなアイコンをサイドバーやフッターに表示できる。 アイコンの種類は全部で15種類ある。アイコンの表示位置や表示内容は、ウィジェットを利用して設定できる。アイコンの配色・サイズ・リンク先URLは自由に変更できる。URLを設定すれば、対応するアイコンが表示される。プラグインが日本語化されているのでわかりやすい。 アイコンの見本下記の様なアイコンをサイドバーやフッターに表示できます。 アイコンをマウスオーバーすると、アイコンの色が変わります。 全てのアイコンを表示した状態 よく利用されるアイコンのみ表示した状態 アイコンの種類FacebookGoogle+TwitterEmailRSSFlickrDribbbleGitHubInstagramLinkedinPinterestStumbleUponTumblrVimeoYouTubeインストール方法管理画面から検索してイ

基本 px pxとは、画面の色情報を持つ最小単位 例えば、font-size:16pxのときに1文字は、1pxが縦16個・横16個並んだの正方形の中に表示される em emとは、1文字分を表している単位 ページでfont-sizeを何も指定していない場合、どのブラウザでも16pxなので、1em=16pxになる emの由来 emは印刷業界で用いられていたもので、組版における相対的な長さの単位。emという呼称は大文字Mに由来しており、古くはMの活字の字幅とボディサイズがほぼ一致し、正方形に近かったため mではなくemなのは、ラテン文字のＭの名称がemで、発音も/em/であったため rem rem (root em) は、常にルート（html）要素を基準にしたem emは親要素を基準にする emや%で指定すると、親要素の影響を受けてしまうので文字サイズの調整に手間がかかることがある % %とは、

下の図のような構造を作るときのメモです。 ●方法 ?front-page.phpとhome.php（投稿一覧用）を用意する。 ?投稿ページ用とトップページ用のふたつの固定ページを用意 ?方法はダッシュボート→設定→表示設定から フロントページを表示で固定ページに丸をして下の設定をする。 フロントページ：トップページ 投稿ページ：ブログ これだけでオーケーです。 http://test55.sakura.ne.jp/blog/にいくと、 home.phpが適用されて投稿の一覧表示が可能になります。 ●設定の確認 固定ページ一覧を見た時に、 トップページ-フロントページ ブログ-投稿ページ と記載されていればオーケーである。 参考サイト WordPress固定ページをブログのトップとして記事を一覧表示する方法 http://ateitexe.com/wordpress-blogtop-page

今回はCSSのコピペで使える引用ボックスデザインのサンプルを30個作ってみました。引用タグ（blockquote）のデザインをサクッと変えることができます。どれも画像は使わず、HTMLとCSSだけで表示することができます。ブログやWebサイト運営者の方は、是非ご利用くださいませ。 使い方 デザインを紹介する前に、使い方を簡単に説明しておきます。 CSSをコピーして貼付け

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

今自分のポートフォリオサイトを作っています。 そこで練習、勉強がてら色々動き・エフェクトをつけようと思い、調べつつ作り込んでいます。 今回は背景にグラデーションをつけつつ、そのグラデーションにアニメーションをつける（ゆっくりと動き続ける）方法・ツールを紹介します。 CSS GRADIENT ANIMATORでCSSを生成 こちらのサイトでアニメーションを生成できます。 自分の好きなように色やアニメーションのスピード、角度を設定できます。 こんな感じの画面です。 これを自分の入れたいところの背景に設定するだけです。 どんな感じになるかプレビューもできます。 画像の上に半透明の動くグラデーションをつけたい時 こんな感じに画像にアニメーション付きのグラデーションをつけたい場合は、opacityで半透明にしてもいいですが、その要素の中身全部が半透明になってしまいます。 そんな時は、グラデーションの

最近では鮮やかなグラデーションを背景などに採用するというのが1つのトレンドになっていますよね。単色の背景では味気ないと感じた時などに試してみるとインパクトを加えることができるのでオススメです。 CSS3からグラデーションをCSSのみで表現できることができるようになったこともあり積極的にと入れる価値があると思います。また、アニメーションも合わせることでより目を引く背景をつくることが可能です。 それでは、CSSのbackgroundプロパティのlinear-gradientとanimationを利用して背景グラデーション+アニメーションを実装していきましょう！ 背景グラデーションをCSSで実装する方法 背景をグラデーションにするにはbackgroundプロパティにliner-gradient関数を設定します。 background: linear-gradient(#FFB3E7,#FF54C

更新日: 2018年10月11日公開日: 2015年10月28日これ全部CSS!?驚くほど自由自在なCSSアニメーション20選 "CodeCampus"はオンラインプログラミングスクール No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアです CodeCampとは？（受講生体験記） 「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。元バレエダンサーの挑戦普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の記録 CSSアニメーションの基礎知識 改めてCSSアニメーションとは 2011年6月にFirefox5がCSSアニメーションに対応したことを皮切りに、GoogleChrome、Safari、iOS、Androidなど次々に各ブラウザがCSSアニメーションに対応するようになりました。C

WordPress.com のテーマのうち、１カラムであるか、もしくは１カラムにできるテーマについての覚書です。 オーソドックスな１カラムテーマ 何の変哲もない、普通の１カラムのテーマです。

作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ

美容・健康・エステのWEBサイト・ホームページのリンク集｜WEBデザインの見本帳｜WEBデザイナーのためのデータベース・リンク集、サンプル・配色・参考・ご提案に!!