タグ

ブックマーク / www.webcreatorbox.com (16)

  • Free “Coming Soon” Page Template with Countdown Timer

    2013年3月25日 ダウンロード ページを開くと、無機質な「メンテナンス中」の表示。誰もが一度は見たことがあると思います。文章のみが表示されると、なんだか寂しいですよね。だからと言ってメンテナンスページを作るのに時間をかけたくない…。そんな方のために、カウントダウンタイマー付きの「準備中ページ」テンプレートをご用意しました!ご自由にお使いくださいませませ。 ↑私が10年以上利用している会計ソフト! ダウンロード デモ 仕様 無料 商用サイトでの利用可 日付設定するとカウントダウン可能 Chrome、Safari、Firefox、iOS、IE7〜9、Operaで動作確認済 タイマーの設定 タイマー設定は index.html の <head></head>内にある $(function () { $('#countdown').countdown({until: new Date(2013

    Free “Coming Soon” Page Template with Countdown Timer
  • とあるフリーランスWebデザイナーの一日

    2017年7月14日 フリーランス, 便利ツール フリーランスとして働いている人は、なかなか他の人の働き方を知る機会がないのではないでしょうか?どんな風に時間管理してるんだろう?どんなツールを使ってるんだろう?などなど、気になるけど、聞くまでもないかな…なんて…。最近そのような、フリーランスの働き方についての質問メールをいくつか頂いたので、フリーランスのWebデザイナーである私の一日を追ってみました(自分で)。いつも業務に使っているWebサービスや便利なツールも紹介しています。ほとんどが無料サービスなので必見ですよ! ↑私が10年以上利用している会計ソフト! 5:30 起床 朝は早いです。逆立ちをして(!)目を覚まします。逆立ちなんて相当集中していないとできないので、一気に目が覚めます。 その後Macを開いてメールチェック。メールクライアントはMac付属のMail。すぐ返信するもの、後で返

    とあるフリーランスWebデザイナーの一日
  • WordPressの管理ページをより便利にカスタマイズする方法13

    2014年8月22日 Wordpress WordPressを使ってWebサイトを作る際、自分のサイトならさほど気にならない管理画面も、クライアントに納品するのであれば少し手を加えて使いやすくしておきたいところ。少しデザインを変えるだけ、機能を追加・削除するだけで「オリジナル感」がでますよね。今回はそんなWordPressの裏側、管理ページのカスタマイズ方法を紹介します。 ↑私が10年以上利用している会計ソフト! WordPressの管理ページをカスタマイズ 目次 管理バーを消す コメントに「削除」「スパム」ボタンを追加 ログイン画面:ロゴを変更する ログイン画面:CSSを変更する 管理画面左上の「W」ロゴマークを変更 投稿画面の項目を非表示 サイドバーのメニューを非表示に フッターテキストを変更 ユーザープロフィールの項目を追加 ビジュアルリッチエディターを非表示 投稿画面のビジュアルリ

    WordPressの管理ページをより便利にカスタマイズする方法13
  • WordPressの多言語化プラグインをqTranslateからWPMLに変更しました

    2016年6月8日 Wordpress 過去に何度か記事にした、WordPressの多言語化プラグイン。昔からWPMLを使用していましたが、qTranslateの存在を知り、このブログではqTranslateを使っていました。ところがなんだか問題発生したようなので、WPMLに完全移行!その理由と移行手順を紹介します。 ↑私が10年以上利用している会計ソフト! qTranslateとWPMLの違い ふたつのプラグインの違いをザックリと解説。使い方の説明は以下の過去記事をご覧頂ければと思います。 WordPressプラグイン「qTranslate」でブログを多言語化する WordPressプラグイン「WPML」でブログを多言語化する 翻訳記事の扱い 一番の違いは、ひとつの投稿記事に対する翻訳記事の扱い。qTranslateはすべての言語をひとつの記事としてまとめています。それに対しWPMLはデ

    WordPressの多言語化プラグインをqTranslateからWPMLに変更しました
  • WordPressで困った時に役立つお助けコード8つ

    2013年3月23日 Wordpress WordPressでコーディング中、「理由はなんだかわかんないけどちゃんと動作してくれない!」なんて事がありませんか?私は度々ありました。その都度ググって解決策を探していたのですが、そのお助けコードメモがEvernoteに結構たまってきたので記事にしてみます。よくわからないけど動かない!という時に試してみてください! ↑私が10年以上利用している会計ソフト! お助けコードを使う前に 今まで動いていたのに突然動かなくなった!そんな時は慌てず、とりあえず以下を確認してみてください。プラグインが原因で動作しなくなる事が多いですね。 有効化しているプラグインをすべて無効化して試す </head> の前に <?php wp_head(); ?> があるか </body> の前に <?php wp_footer(); ?> があるか PHPコード(特にif構文

    WordPressで困った時に役立つお助けコード8つ
  • Change Text Link Hover Effect Using CSS3

    2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな?と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト! 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、

    Change Text Link Hover Effect Using CSS3
  • Free “Japanese-ish” Fonts 10 + 1

    2013年3月25日 インスピレーション, フォント 先日同僚と日語の文字についておしゃべりしていると、「日語はまるで絵や記号みたいだ!」と言われました。確かに私達日人から見るとアラビック文字やハングル文字が記号を並べているように見えるのと同じで、英語圏の人からすると不思議な記号に見えるんでしょうね!ということで探してみるといくつか見つかった素敵フォント。パッと見日語に見えたり、日をイメージした英字フォントをいくつか紹介します。なんだかジワジワきますw ↑私が10年以上利用している会計ソフト! 「日語風」の英字フォント 1. TokyoSoft ダウンロード(商用利用可) カタカナ風の英字フォント。日人が見たら間違ったカタカナの羅列ですが、よーく見るとアルファベットになっています。このフォントで「MANA」と書くと、「ポタカタ」になるようです…! 2. Kaneiwa ダウン

    Free “Japanese-ish” Fonts 10 + 1
  • 日本語版 WordPress チートシート | Webクリエイターボックス

    2024年7月21日 Wordpress, ダウンロード WordPressの覚え書きというか、カンニングペーパーです。コードなんぞをまとめました。他にもWordPressのチートシートはいたるところで記事にされていますが、CSSハックやCSS小技集に続き、これもまた自分用まとめだったり…。例文も私がよく使うものをコピペしやすいように置いてます。A4サイズの印刷用も作ってみたので、「これ使えるかも!」と思った方は印刷してデスクに置いておくと便利です :) ↑私が10年以上利用している会計ソフト! WordPressチートシート 目次 印刷用WordPressチートシート WordPressテンプレートファイル インクルードタグ テンプレートタグ テンプレートタグ/bloginfo 条件分岐タグ ループ ナビゲーションメニュー 1. 印刷用WordPressチートシート A4サイズの印刷用P

    日本語版 WordPress チートシート | Webクリエイターボックス
  • 6 Options for Low Budget Web Design / Development Projects

    2014年7月23日 Webサイト制作, フリーランス Webサイト制作の依頼を受ける上で、クライアントの中には相場が分からず、必要最低額を遥かに下回る予算を提示する方もいます。多くの場合は必要な作業内容やかかる時間を説明すれば納得して頂けますが、時々「タダでできて当たり前」を前提とする方もいます…。うむむ。タダ…はちょっと行き過ぎですが、なるべく低予算のクライアントにも満足してもらいたいですよね。予算にあわせてできることがないか、考えてみました。 ↑私が10年以上利用している会計ソフト! 1. 実装する機能を絞る 「必ず取り入れたい機能」「できれば取り入れたい機能」「取り入れられたら嬉しい機能」と、要望の優先順位を話し合い、予算に応じてできないものは思い切って削除したり、違う方法を考えて予算内に収まるように検討します。「時間 vs お金 vs クオリティ」でも書いたように、取り入れたい要

    6 Options for Low Budget Web Design / Development Projects
  • CSSスプライトで画像を円滑に表示させる

    2014年8月13日 CSS, Webサイト制作 CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます。以前よりYoutubeなどに使用されているので、その名前を一度は聞いたことがあるかもしれません。ここではCSSスプライトを使用したメニュー画像の作り方を紹介します。 ↑私が10年以上利用している会計ソフト! CSSスプライトを使うデメリット メリットは上記にあるとおり、サイトの高速化が期待できます。ではデメリットとは? alt属性が使えない 背景画像のリピート表示ができない 更新する時に手間がかかる(サイズを変えるとCSSも変えなければいけないため) 以上をふまえて、私はいつもメニューの背景やボタンなど、マウスオーバー時に変化する画像のみCSSスプライトを

    CSSスプライトで画像を円滑に表示させる
  • 効果的なミニマルデザインと退屈なデザインの境界線

    2013年3月23日 Webデザイン, インスピレーション ミニマルデザインを考えるときによく使われる言葉「Less is more(少ない事は効果的だ)」。装飾が多すぎるとどれも目立たなくなる、無駄を削ぎ落した方がより美しく効果的であるという考えです。これに対し「Less is bore(少ない事は退屈だ)」という皮肉な言葉もあったりします。美しいミニマルデザインと退屈な間抜けデザインは紙一重。その違いを考えてみましょう。 ↑私が10年以上利用している会計ソフト! ミニマルデザインとは そもそもミニマルデザインとはなんなんでしょう?Wikipediaを見ると ミニマル・デザイン(Minimal Design)は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。 とあります。冒頭でも書いたとおり、要素が多すぎると結局なにが主張したいの

    効果的なミニマルデザインと退屈なデザインの境界線
  • WordPressの検索機能をもっと使いやすくする

    2013年4月1日 Wordpress WordPressにはデフォルトで検索フォームが設定されているので、一行のコードを追加するだけで簡単に検索フォームを設置することができます。しかしその検索フォームは当に簡易なもの。よりユーザーが使いやすくなるようにカスタマイズする方法をいくつか紹介します。実際にWebクリエイターボックスで使っているコードも公開しているので、ぜひ参考にしてみてください。 ↑私が10年以上利用している会計ソフト! 検索フォームの設置方法 まずは基編、フォームの設置方法です。自分でオリジナルテーマを作成したり、カスタマイズする時に地味にひっかかる検索フォームの設置方法(たぶん)。設置するだけなら以下の一行をテーマファイル内に記述するだけでWordPressが最初から用意しているフォームを実装することができます。 <?php get_search_form(); ?>

    WordPressの検索機能をもっと使いやすくする
  • Step-by-Step Creating a Website Guide

    2014年8月17日 Webサイト制作 8回に渡り連載した「実践で学ぶWebサイト制作ガイド」がついに終わったので、ここで簡単にまとめておきます。この記事では基的な流れを説明していますが、リンクをクリックでより詳しい説明記事を読むことができます。これからWebサイトを作ってみたい!という人のお役に立てればいいなあと思います :) サンプルファイルもあるので、ご自由にダウンロードしてくださいね! ↑私が10年以上利用している会計ソフト! サンプルファイル 今回作成したファイルをサンプルとして配布します。参考になれば幸いです。説明するために制作したものなので、学習目的以外でのご利用はご遠慮ください。Google Chrome, Safari, Firefox, IE8・9で動作確認済み。 デモ ダウンロード 1. プランニング 誰のため?何のため?Webサイトを作り始める前に。 突然Phot

    Step-by-Step Creating a Website Guide
  • Basic Process to Apply CSS to Your Website

    2014年8月17日 CSS, Webサイト制作 CSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ!今回はサンプルファイルも用意したので、ダウンロードしてコードをじっくり見てやってください。連載企画「実践で学ぶWebサイト制作ガイド」、CSSでラストスパートです! ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その7 目標:CSSでレイアウトが組める・基的な装飾ができる 必要なもの:Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル:CSSの基礎知識がある・基的なCSSが手打ちで書ける 目次

  • Guide to HTML Semantic Markup

    2014年8月17日 HTML, Webサイト制作 連載企画「実践で学ぶWebサイト制作ガイド」も佳境を迎え、今回いよいよHTMLマークアップの段階に突入します!「デザインは好きだけど、コーディングは苦手…」という人も、焦らず少しずつ記述していけばちゃんと形になります!お手持ちの「TextEdit」や「メモ帳」などのテキストエディタツールを開いて、さっそく始めましょう! ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その6 目標:正しいページ構造のHTMLが書ける 必要なもの:Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル:HTMLの基礎知識がある・基的なHTMLタグが手打ちで書ける 目次 誰のため?何のため?We

    Guide to HTML Semantic Markup
  • Slicing Images for Your Website with Photoshop

    2014年8月17日 Photoshop, Webサイト制作 印刷物のデザインではそのまま印刷すればいいのですが、Webサイトの場合は出来上がったデザインをパーツごとに画像をスライス(分割)し、HTMLCSSで組立ててWebサイト上に表示します。「実践で学ぶWebサイト制作ガイド」5回目ではそのスライス作業に注目!私は普段Fireworksを使ってスライスしていますが、ここでは前回と同様Photoshopを使ったスライス方法を紹介します。実践に入る前に、いくつかのポイントもおさえておきましょう。 ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その5 目標:コーディングしやすいパーツ画像を用意できる 必要なもの:Adobe Photoshop 対象レベル:Photoshopの基的なツールの使い方がわかる 目次 誰のため?何のため?Webサイトを作り始める前に

    Slicing Images for Your Website with Photoshop
    tajima_taso
    tajima_taso 2012/10/16
    サイト制作
  • 1