SmartHRをご利用中の方はこちらからログイン
11 Screens, Last modified on Jan 15, 2017 13:36 GMT
CSSやJavaScriptの読み込みはSTYLEタグやSCRIPTタグをheader.phpなどに直接書くこともできますが、WordPressではfunctions.phpでwp_enqueue_style()、wp_enqueue_script()をアクションフックを使って読み込むことが推奨されています。wp_enqueue_style()やwp_enqueue_script()を利用する利点として、CSSやJavaScriptの重複読み込みを回避できたり、functions.php内で一元管理できることなどが挙げられます。 ファイルをキューに登録する関数 wp_enqueue_style() – CSSファイルをキューに登録wp_enqueue_scripts() – JavaScriptファイルをキューに登録 wp_enqueue_script関数 wp_enqueue_scrip
皆さんはremという単位を聞いたことがあるでしょうか? 知っている方は「フォントサイズ指定が%とかemとかよりすっきりしたやつ」という印象を持たれているのではないでしょうか。 「remはフォントサイズだけのものではない」という事実を知ると、実はかなり便利な単位だったりします。 詳細についてはこちらのページにも解説・デモがあります。 remとは Mozillaの説明によると、 rem ルート要素の font-size (例えば、html 要素の font-size) です。ルート要素で使うと初期値を表します。 とあります。 html { font-size: 15px; } p { font-size: 1.2rem; } strong { font-size: 1.4rem; } p要素には18px、strong要素には21pxのフォントサイズが適用されます。 emや%だと<p>の中に<s
WordPressはいろんなことができますがCMSとして使うにはデフォルトの設定ではちょっと使いづらいところがあります。 そこはやはりブログなんでしょうね。 ですが、カスタムフィールドというのを使うとけっこう使えるようになります。 WordPress標準のカスタムフィールドでも良いのですが、今回はプラグインを使ってみました。 Advanced Custom Fieldsが有名・・・ですが 最初、カスタムフィールドでは有名な「Advanced Custom Fields」というプラグインを使おうと思っていたのですが、繰り返し処理をするには有料のアドオンが必要! 25豪ドルなので買っておいても良いのですが。 やりたかったことは画像を何枚か載せてその下に簡単なテキストをつけるというもの。 以下はAdvanced Custom Fieldsで書いたコード。 これは画像だけですが。 <?php $a
Title of section 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut. Title of section 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debiti
こんにちは、デザイナーのサリーです。 今回は「タイムライン」のサンプルを10例ほど紹介していきます。 たとえばLIGの沿革ページもSNSのタイムラインっぽいデザインになっているように、沿革や実績をタイムラインで見せたいという要望はときどきあるので、デザインの際の参考になればと思います。 それでは、はじめます。 さまざまなタイムライン10例 1. Vertical Timeline http://codyhouse.co/gem/vertical-timeline/ レスポンシブ対応のタイムライン。 JSも使用していて、スクロールでコンテンツが“びよよん”と気持ちいい動きで出現します。 中央のカテゴリーのアイコンがアクセントになっていて、かわいいですね。 2. VERTICAL TIMELINE http://tympanus.net/codrops/2013/05/02/vertical-
こんにちは、メディア事業部ウェブディレクターのコネル飯塚です。 WEBサイトのスタイルを調整することのできるCSSは、1つのCSSファイルだけでもデザインを作りあげることができます。 しかし、「コーポレートサイトとブログが1つのサイトにまとまっており、管理しやすいようにCSSファイルを分けておきたい」とか、「レスポンシブデザイン用のスタイルは別のファイルに書いておきたい」とか、「共通のスタイル以外は個別のCSSを読み込みたい」など、さまざまな要望があると思います。 管理上の問題、または無駄なスタイルの記述を読み込むことで、表示スピードへの影響も考えられますので、複数のCSSファイルにうまく分けておく必要もあります。 今回はWordPressで複数のCSSを追加する方法を紹介させていただきます。そしてページの種類や記事ごとに個別のCSSファイルを読み込むことも可能なので、あなたのWEBサイト
Here's a list of everything that's new in V.4, so far: Native Typescript Support: You can now use .ts handlers in your AWS Lambda functions in serverless.yml and have them build automatically upon deploy. ESBuild is now included in the Framework which makes this possible. More info here. New Dev Mode: Run serverless dev to have events from your live architecture routed to your local code, enabling
パート2では「開発プロジェクトの工程全体の中におけるモデリング」という視点から、実際のモデリングに必要な要素や具体的な作業の進め方を解説していきます。なぜそのような視点にしたのかは本編で述べていますが、基本的には筆者のこれまでの経験上、実際の開発現場で通用するモデリングのスキルを取得するにあたっての最短の近道だと考えるからです。これまでのモデリングに関する書籍や記事とは一味違った切り口での説明になると思いますが、どうぞ最後までお付き合いください。 "教科書に載っていない"モデリング作法とはこれまでに筆者は、データモデリングに関する数多くの書籍や雑誌/Webの記事を読んできました。それらから得た知識は、確かに実践の中で活かされてきましたが、実際のプロジェクトでDB設計を担当するとなると「記事には載っていない何か」が現場では必要になったのです。世の中にある、多くのモデリングに関する書籍や記事に
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
カスタムフィールドとは カスタマイズの前に、カスタムフィールドについて簡単に説明します。 WordPress投稿ページには、基本的に「タイトル」と「本文」を書き込む入力欄があります。 カスタムフィールドとは、それ以外の情報を入力するための補助的な入力欄みたいなものです。 例えば、不動産サイトなどでは、「価格」「間取り」「住所」「交通」のような入力項目を設定して、テンプレート側で出力させることができます。 ただ、カスタムフィールドは、Wordpressデフォルトの機能そのままでは、出力させることができません。情報を出力させるには、プラグインか、テンプレートのカスタマイズが必要になります。 カスタムフィールドの表示方法 カスタムフィールドは、Wordpressデフォルト状態では表示されていません。 表示させるには、投稿ページにある「表示オプション」をクリックします。 すると、以下のように「カス
目次 中々の大作になってしまったので目次付けときます。 ↓目次を表示する まえがき KoToRiは最近まで「Custom Field Template」を愛用していました。 使い方を詳しく説明した記事も書きました。詳しく書き過ぎて見てくれた人にコメントで注意もされました笑 Custom Field Templateの使い方[WordPress] でも最近『Advanced Custom Fields』に乗り換えました。 理由はいろいろあるのですが一番の理由は編集画面に表示されるフィールドが見やすいからです。 管理画面をなるべく使いやすくカスタマイズするという事に重きを置くようになったのです。今更ですが。 でも調べていくうちに『Advanced Custom Fields』の柔軟性にビビりました。 みなさん、このプラグインが無料なのは凄いことです! なので『Advanced Custom F
CSS positionのabsoluteとrelativeの違いについて ある程度HTMLやCSSに慣れてくると、HTMLの文書構造を重視してサイトが作れるようになってきます。 ただし、文書構造を重視していくと、floatなどでは実現できないレイアウトが出てくると思います。 そのようなときに役に立つのがpositionプロパティです。「ある基準を元に、そこから何px下に配置」といった指定が出来ます。 ここではその中でよく使われるabsolute(絶対位置への配置)とrelative(相対位置への配置)の違いを説明します。 まず縦横100px*100pxのdivのボックスを三つ並べ、上から仮にA・B・Cとします。 ボックスBに[position:absolute; top:50px; left:50px]をかけたものが下の図の左側。 ボックスBに[position:relative; t
I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. In this article I’ll share my approach to crea
WordBench Nagoya 11月勉強会の最後にアンカンファレンス(班別質問タイム的な感じの)をやった時、「Kさんが毎回必ず入れるプラグインを教えてほしい」という質問をいただいたのですが、残念ながらタイムアップとなったため、ブログにまとめることとなりました。 前提として サイトの用途によって必要なプラグインも変わってきますが、スタンスとしては クライアントワークで、企業サイトを作るというケースを想定 公式ディレクトリ登録プラグイン なるべく高機能ではない(負担の低そうな)もの 迷った時は国産(知人作) という感じです。 基本的なWordPress関数で済むような処理は原則として自分で書きますので、なるべくコードを書かずに表示をいじったり機能を追加したい、という方向けではないと思います。 ですので、よくある「使えるプラグイン○個まとめ」的なエントリーとはまた違ったプラグイン選定になって
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く(このサンプルはChromeブラウザでの
Spot is clean and highly responsive Bootstrap template which is perfect for small agencies and freelancers. You can show your work in a very beautiful way with this template. Spot is easily coded which makes it great for beginners as you can edit it without struggling. The design is a catch as it is elegant and unique, once your audience takes a look at it, they will want to know more of what it i
30分間データモデリング ~ER図を描こう!~:データベースエンジニアへの道(2)(4/4 ページ)
前々回、前回に引き続き、ER図に関する補足的なトピックを扱います。今回は、交差エンティティについて説明します。 前回: id:simply-k:20100714:1279071645 次回: - 目次: id:simply-k:20100716:1279237959 多対多のリレーションシップ 次の図を見てください。 この図を見ると、「商品」と「仕入先」の間に、多対多の関連がある事をがわかります。ER図としては、特に問題はありません。しかし、このER図を元にしてリレーショナル・データベースのテーブル設計をする場合、次のような問題が発生します。 ある商品が、どの仕入先(複数)と対応するのかを、データとして保持できない。 ある仕入先が、どの商品(複数)と対応するのかを、データとして保持できない。 このような場合、交差エンティティ(intersection entity)と呼ばれるエンティティを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く