:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
超倍速でWordPressオリジナルテーマ作成！骨だけ「Bones」の使い方をザックリと
【発表】WP テーマ選びで悩んでる？ 日本語テーマの比較はこちら。 デモサイトを見ながら使い方とできることを比べられます 【テーマ選び方】8つ比較 「Bones」は、WordPressの「ブランクテーマ」とか、「スターターテーマ」って呼ばれる、カスタマイズ前提のテーマの一つなのだけど、そのカスタマイズのしやすさが他のブランクテーマと比較して圧倒的です。（当人比。ちなみに、その他のブランクテーマは下記リンク先を） 密かに使ってるカスタマイズ前提のWordPress ブランクテーマ4つ 「Bones＝骨ばっかり」というその名が示す通り、「骨組み」として、自分好みに肉付けしやすく、オリジナルのテーマ作成をビューンとひとっ飛びに高速で進められます。 簡単にまず、優れた特徴をあげてみましょう。 子テーマ不要 よそ様が作ったテーマをカスタマイズする場合、子テーマを用意した方がいいです。直接、元のテーマ
WordPress 魔改造の手引き - Qiita
Intro この資料は、私が仕事で手がけた WordPress カスタマイズ系プロジェクトのコードをメンテしたり追加開発したりするステキな人たちへ向けたものですが、社内に閉じてない範囲をここに記す。コメントなどでの指摘歓迎。 WordPress、プラグイン機構（hook）が充実、というかデフォルトのブログシステムも自身のプラグイン機構に乗る形で作られている。そのため、モデルがブログ的でありさえすればフレームワークとして使うことも可能。これまで、やれアプリ向け API を追加してみたり、完全別システム用 CMS にしてみたり、よくまあやったものだ。 これ WordPress でやれるんだあ！？的な意味で魔改造と揶揄しているがいたって正攻法の改造である。1 Pros/Cons 以下、WordPress のよいところでもあり、裏返すと弱点でもある特徴のいくつか 2 とにかく利用者が多い。オープン
WordPress(wp)の子テーマの作り方とfunctions.phpの注意点 | 【MsReDesign】スタバの新作・カスタマイズ記事・Wordpressネタなど
WordPress(wp)の子テーマの作り方とfunctions.phpの注意点 2016-11-16 2017-01-23 WordPressテーマ WordPressでホームページを作成するにはテンプレートテーマを使用することが多いですが、テーマ内にあるファイルをそのままいじってしまうと、テーマをアップデートする際に全て上書きされてしまい、カスタマイズしたものは全て消えてしまいます。 そうならないように、子テーマを作りアップデートの上書きを避けましょう。 セキュリティの向上であったりWordpressのバージョンに合わせるようにアップデートされることがあるので、テーマのアップデートはできるだけ行いましょう。 子テーマの作成方法 子テーマの作成はいたって簡単です。 準備するものは、 子テーマとわかる名称のフォルダの作成 style.cssの作成 functions.phpの作成 この３つ
WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね！今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー（カスタム分類）を使って作っています。 ページを表示する為に使っているテンプレート
WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろ
WordPress をカスタマイズするなら覚えておきたい条件分岐タグと、カスタマイズにとっても便利なカスタム投稿タイプについて、簡単にまとめてみました。 WordPress をカスタマイズするなら、必ずと言っていいほど使うのが条件分岐タグ。ブログとして Webサイトを構築するなら、とってもよく使う … というほどではないかもしれませんが、一般的な Webサイトを WordPress で構築していくとなると、動的な Webサイトであればあるほど、条件分岐タグはよく使います。 また、話は変わっちゃいますけど、WordPress 3.0 から本格的に採用された新機能、カスタム投稿タイプも、WordPress でのサイト構築にはかなり便利です。おなじみの条件分岐タグから、カスタム投稿タイプ、タクソノミーまでを、メモっぽくまとめてみました。 WordPress サイト構築 Tips 目次 WordP
備えあれば憂いなし！Wordpressのバックアップから復元までの方法まとめ
「Wordpressのデータが消えてしまった！」「Wordpressのデータがバグってしまった！」などなど、Wordpressでサイト運営をしていると予期せぬデータトラブルに巻き込まれることがあります。 もしバックアップを取っていなかったならば、以前の状態にもどすことはまず不可能です。それまでにWordpress記事作成に割いた多くの時間と労力が完全にムダになってしまいます。 こうした事態を未然に防ぐためにも、Wordpressのバックアップを定期的に取ることはとても大事です。いつかあなたにも起きるかもしれないWordpressのデータトラブルに備えてほしいので、今回はWordpressのバックアップ方法と復旧手順を紹介します。 そもそもなぜWordpressはバックアップが大事なの？ WordPressで作成した記事や画像のデータはデータベースに保存されます。htmlファイルに直接書き込
子テーマを作ってWordPressの既存テーマをカスタマイズする方法
2017年5月1日 Wordpress いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存のテーマも豊富に配布されています。今回はそんな既存のWordPressテーマを使うメリットや、子テーマを作成してカスタマイズする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ WordPressの既存テーマを利用するメリット ちょっと検索すればたくさんのWordPressの既存テーマが見つけられます。既存テーマを利用すると、どんなメリットがあるのでしょうか？ 制作時間を短縮できる こういった配布されているテーマを使うメリットは、なんといっても制作時間の短縮。豊富なテーマの中には、自分の思い通りのレイアウトのものも見つけら
CSSの content プロパティーを使いこなそう！
2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す
www が付いたものと付いていない URL がサイト内に混在しています。統一するべきですか？
［質問］wwwが付いたものと付いていないURLがサイト内に混在しています。統一するべきですか？「wwwあり・なし」問題は昔から頻繁に取上げられるSEOの話題だ。たとえば筆者が勤めるアイレップのウェブサイトは“http://www.irep.co.jp/”またはwwwを省略した“http://irep.co.jp/”どちらでもアクセス可能でブラウザにも全く同じウェブサイトが表示がされる。しかし検索エンジン相手となると少々事情が異なる。 検索エンジンはページに張られたリンクの数や質などを総合的に判断して点数を付けるわけだが、wwwありとwwwなしのURLを「別のページ」として取り扱う。つまり、先の例でいえば、検索エンジンにとって“www.irep.co.jp”と“irep.co.jp”は別のサイトと認識するのだ。このため、URLが統一されていないと「外部リンクの分散」が生じてSEOの効果が低下
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
文章校正のコツ～精度を上げるために必要な６つのこと - ブランド戦略のフレイバーズ
WEBサイト制作のなかで、重要なプロセスである文章校正。日々の作業でありながら、思わぬ場面でチェックミスが発生してしまいがっくりと肩を落とした経験がある方も多いはず。 今回は私たちが実践している、たった６つのコツをおさえるだけで、文章校正の精度を限りなく100％に近づけるポイントをご紹介しよう。 それでは、作業を進めるための準備（心構えに近い）に関するポイントからミスをなくす実践的な文章校正のコツをていねいに挙げていこう。 [準備段階のポイント] 1.モニターでなく、プリントアウトで必ずチェック。 文章校正の精度を上げるためには、これ外してはいけないほどの鉄則。モニターでの校正は、視認率が約25%下がるため、必ずプリントアウトしたものを用意すること。 同時に、モノクロでプリントアウトすることで、文字の色や背景色とのコントラストなどから視認性も確認することができる。モノクロで見てコントラスト
校正記号これだけ知ってると大丈夫---あいわプリント
印刷に校正はつきものです。校正は原稿と校正刷りを対照し，誤りを修正指示したり，組版を修正指示したりする作業です。原稿の誤りを訂正する機会でもあります。（推敲する機会ではありません。） 出版社を介さない町の印刷物は著者や発注者が校正してその内容に責任を負うことになります。また，印刷所に出すものでなくても文章の推敲や点検をする機会は多いものです。画面の上でただちに直せることもありますが，紙に一旦プリントして加筆するほうが考えがまとまりやすいこともあります。 校正記号はこれを簡便に正確に記述する便利な記号です。印刷物校正には是非使用してください。 校正記号もJISZ 8208で2007年に改正がありました。より明確に幅の広い指示の仕方が認められています。記入しやすくかつ間違いを誘発しない書き方を考えて見ます。 記入は赤ボールペンで。 鉛筆や黒のボールペンは不適当です。 赤ダマートやクレヨンのよう
Facebookページとは？Facebookに企業ページを作成する７つのステップ
公開日：2013-09-07 更新日：2022-10-16 Facebookには、10億人を超えるユーザーが、毎日平均して32億回の「いいね！」やコメントをしています。 日本国内だけでも、Facebookのアクティブユーザー数は1,900万人を突破し（2013年2月公式発表）、その後も増え続けています。 Facebookで強い存在感を示すと、それだけで最もパワフルなクチコミマーケティングである「Buzz（バズる）」を発生させることができます。 ですが、そのためには強い存在感を示すために「ブランドを確立」させなければなりません。 その中心となる場所が、「Facebookページ」となります。 ※Facebookページとは、企業やブランド・アーティスト、何かしらのグループや団体が作るページであって、個人が普段利用しているページではありません。 Facebookページは、無料で作成することができ、
CSSのみでアイコンフォント風の図柄を表示できる「CSS ICON」の使い方
CSS ICONとは CSS ICONは、CSSのみで描画されたアイコンを表示させることができるコードが集められたアイコン集です。 この記事を書いた2016年11月時点では500以上のアイコンを利用することができます。 CSSのみで描かれたものということなので、思いっきり簡素なものと思いきや、かなり実用的なアイコンがそろっています。 CSS ICONの使い方 アイコンを利用するには、まずCSS ICON利用したいアイコンを選択します。 すると、画面右側に「アイコンを利用するためのコード」が表示されます。 CSSをコピペ これを利用するには、まずCSSをコピーします。 すると、以下のようなコードがクリップボードに貼り付けられるので、CSSファイルなどに貼り付けます。 .heart.icon { color: #000; position: absolute; margin-top: 6px;
Tableauで背景画像を用いた『フロアマップ』等の可視化アイデアのまとめ | DevelopersIO
Tableauでは可視化の機能の1つとして『背景画像』を設定する事が出来ます。 背景イメージ | Tableau Software 背景イメージ ちなみに当ブログでは、これまでに『ジャッキー・チェン』と『ジョジョの奇妙な冒険』を題材にしてこの辺りの機能のご紹介をして来ましたが、若干のネタに走っていた部分は否めません。『もうちょっと一般的な、イメージし易いテーマや題材で何か無いですかね？』というフィードバックを同僚から頂いたので、その辺りを踏まえたコンテンツのご紹介・アイデアとなる部分について当エントリでは見て行きたいと思います。 あの世界的映画アクションスターの『怪我一覧』を可視化してみた｜Tableau Software Tips&Viz Advent Calendar 2014 #23 #tableau ｜ Developers.IO Tableau Tips: レーダーチャート(Ra
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
インタフェースデザインの心理学 まとめ
1. All Copyrights reserved by akihiro_0228, 2015 インタフェースデザインの心理学 2015/03/26 - 社内勉強会 @akihiro_0228 100 Things Every Designer Needs to Know About People
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プロなら知っておきたい！Photoshop文字設定とCSSプロパティの相互関係 | それからデザイン スタッフブログ
