WordPress シンプルかつクールなデザインで魅せるWordPress無料テーマ「SIMPLE WP THEMES」がカッコイイ！
既に有名なんだと思いますが、WordPressのテーマデザインを考える上で参考にさせて頂いている「SIMPLE WP THEMES」というものがあります。過度な装飾や色使いを避け、シンプルな空気感がとても好きで、これからWordPressを...
mororeco
WordPress 
CSS box-sizingプロパティで横幅指定の煩わしさを軽減する
CSS3から追加されたプロパティ「box-sizing」についてメモしておきます。 ある要素の横幅や高さにおいて、今までは「要素自体の幅 + padding値 + border値」 を合わせた数値が、その要素幅になり。要素自体に指定する w...
CSS counter-incrementプロパティを使って自動連番を実現する
counter-incrementプロパティは、Q&Aやサイトマップ、よくある質問などを記載する時に、テキストの先頭に数字を連番で割り振りたい場合などに利用できます。単なる連番であれば、ulタグやolタグで実現可能ですが、「第1章」や「Q1...
CSS 「before,after」擬似要素を使用してカウンター（自動連番）を挿入する
before/after擬似要素を利用して、ランキングなどのリストの先頭にカウンター（自動連番）を挿入してみます。
CSS before, after 擬似要素でblockquoteを表現する
ある書物やサイトなどからの抜粋文をサイト内に掲載する場合、その部分が“ 引用 ”であることを明示的に「blockquote」で表現するか、説明書きを添えて、「ここは引用文ですよ！」と言った感じにわかりやすく記載しておく必要があります。 その...
jQuery 横スクロールパララックスを表現するjQueryプラグイン「jInvertScroll.js」
スクロールすると、横方向に画像が移動しパララックスを表現をしてくれるjQueyプラグインの「jInvertScroll.js」をご紹介します。 デモサンプル // // 1.jInvertScroll一式をダウンロード jInvertScr...
jQuery レスポンシブに対応した簡単メニュー
PC・タブレット・スマホ、それぞれに対応したレスポンシブなメニューを「jQuery」と「CSS」で簡単に作成できます。シンプルなものですが、その作り方をメモしておきます。 サンプルを用意しましたのでまずは確認してみてください。 (adsby...
CSS transformを使って回転するパネルを作ってみる
CSSのtransformを使用してクルっと回転するパネル風ボタンを作ってみます。
Illustrator 手書き風文字で遊び心を演出してみよう！
タイトル文字やほんのちょっとした飾り文字として鉛筆やチョークで描いたような「手書き風文字」を使用してみると、簡単にオリジナリティー感アップで遊び心がちょこっとプラスされます！ということで、テキストを手書き風に変える簡単な方法をご紹介します。...
WordPress 投稿画面を「AddQuicktag」を利用して効率UP!
WordPressの投稿画面でテキストを入力していく際に、ある決まりのあるコードの記述をまとめておけば効率が良くなりますよね。例えば、簡単なところで言うと、テキストを赤色にしたいとか、背景色を付けたいとか、リストアイコンを付けたいとか、後は...
CSS CSS3アニメーションを実現する「transition」
transitonプロパティを使って、時間的な変化を付けることが出来ます。 変化する変化速度や開始のタイミング、また要する時間などをCSSのみで実現が可能です。ただし、対応ブラウザの問題がありますので注意が必要です。 ※IE8,9は対象外、...
WordPress カテゴリーごとに別々のアイコンを表示する
投稿記事の一覧を表示しているページなどで、すべての複数の投稿カテゴリーが羅列される際に、それぞれがどのカテゴリーに属する記事なのかがパッと見で視覚的にわかるようにしたいとき、該当するカテゴリーに応じてアイコンなどを付けるといいかもしれません...
ブログ ウェブデザイン技能検定3級に合格しました！
普段、Webデザインを生業として生活をさせて頂いておりますが、時代の流れは早く、日々なんとか食らいついていくのが精一杯になってしまう時が少なからずあります。よくわからない技術や知識は忙しさにかまけて、落ち着いたらやろうかな～などと先送りにし...