タグ

ブックマーク / kachibito.net (18)

  • WordPressのオリジナルテーマ作成フロー・基本マニュアル

    初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基中の基で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに作成するWebサイトの目的と構造テーマ作成前に用意するものと環境テーマの構造を(触り程度だけでも)理解するHTMLからテー

    WordPressのオリジナルテーマ作成フロー・基本マニュアル
  • ブラウザ上でPCにインストール済みのフォントを表示テストできるツール・typezebra

    ブラウザでインストール済み フォントのテストを行える、 というツール・typezebraの ご紹介。タイピングして表示 をチェックする事が出来ます。 動作も軽いのでなかなか良い 感じ。 フォントの表示テストを行えるツールです。他にもありますが、typezebraは動作も軽いので割とオススメ。 その場でタイプした文字をインストール済みのフォントで表示確認可能なツールです。左にインストール済みのフォントが一覧表示されます。 タイプした文字を変更したりフォントを変更してもサクサク動作してくれます。 この手のツールでは一番良かったです。 typezebra

    ブラウザ上でPCにインストール済みのフォントを表示テストできるツール・typezebra
  • Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選

    Webサービス使えるツール10選 Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 もっと沢山あるんですが、特に利用しているものを。制作時には毎回利用しているかもしれません。基的に無料のものを使っています。順不同。 960 grid system グリッドシステムです。ブックマークレットも含め、色々手軽なのが嬉しい。何よりグリッドレイアウトはお客さん受け良い傾向にある気がします。 960 grid system Fire

    Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選
  • 名刺を自作したい方の為のフリーの名刺テンプレートやツールいろいろ

    誰ともあまり会わないような職種 もネットビジネス界には多数存在 するでしょうが、名刺はあるとイザ という時に重宝します。ですが、 普通に発注すると最低枚数が あったりして余計なお金がかかります。 数を必要としない方は自作で済ませたい所。 そんな方にインク代、用紙代以外は 無料で名刺を作れるツールやテンプレートを ご紹介します。 テンプレの多くはPDFですが、Wordなどもあります。フリーソフトやオンラインツールなどなど。 A Business Card Template Pack かっこいいテンプレート。 A Business Card Template Pack 5 Business Card Template Packs フリーの名刺テンプレートパック。 5 Business Card Template Packs Businesscardland オンラインで名刺を作成。テンプレを選

    名刺を自作したい方の為のフリーの名刺テンプレートやツールいろいろ
  • Web担当者のすべき最適化あれこれ

    Webサイトを利用して収益化を目指す Web担当者は多くのすべき仕事があり、 すべき事が混同して知識や、行動に 混乱を伴うのは良くあることです。規制が 無いので誰かが作った言葉で更に混乱が 生じている可能性も否めません。 そこで、自分用ですが、すべき最適化を 挙げてみます。Web担当者の方にも 共通する事ではないかと思います。 中には「全部SEOだろ!」と思うかもしれませんが、あまり細かい事は気にしないで下さい。 参考URLは最善では無い可能性もあります。あくまでご参考までに。 もくじURLの最適化表示スピードの最適化画像・イメージ・メディアの最適化ソーシャルメディアへの最適化ユーザーへの最適化ページ印刷の最適化リンク集の最適化SERPs最適化※IE6以外はページの何処にいても右端に「上へ戻る」ボタンがあります URLの最適化 Webサイトのアドレスを最適化します。リンクして貰いやすいUR

    Web担当者のすべき最適化あれこれ
  • CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer

    一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど

    CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer
    akiueos
    akiueos 2012/03/24
  • Pinterestっぽいレイアウトを作ってみる

    以前、レンガ風に要素を配列するレイ アウトを凄くよく見かけるようになり、 それから一種のブームのように様々な リソースが出回りました。最近はあま り見かけなかったのですが、Pinterest の登場で、また似たようなレイアウト のリソースが出てきている印象です。 Pinterestのように時系列を崩さず、ボックスを配置するスクリプトにjquery masonryっていうプラグインがあるのですが、同じようなプラグインでWookmark-jQueryというのを昨日見かけましたので、空いた時間になんとなくPinterestっぽいレイアウトを作ってみる事にしてみました。 Sample ソース調べるほど真面目な記事でもないので見た目を勘に頼って似せただけ。 ※あくまで「っぽい」です。 Sample コード<script src="js/jquery-1.7.1.min.js"></script> <

    Pinterestっぽいレイアウトを作ってみる
  • 手書き風のWebデザインを作りたい時に役立ちそうなフリー素材やデザイン例まとめ - かちびと.net

    Webデザイン手書き風デザイン 個人的に大好物の手書き風な Webデザインを作りたい時に 役立ってくれそうなフォントや テクスチャ、アイコンなど、無料 のリソースをメモしておきます。 個人的に大好物の手書き風な Webデザインを作りたい時に 役立ってくれそうなフォントや テクスチャ、アイコンなど、無料 のリソースをメモしておきます。 手書き風と言っても色々あるのでこのまとめは偏ったものになっているかも知れません。参考程度にして頂ければ幸いです。全ては掲載出来ないので個人的に好みのリソースを厳選します。 日フォントふい字 かなり使用条件を緩くしてくれている有名な手書きフォント。 ふい字 みかちゃんフォント こちらもかなりオープンに配布してくれています。 みかちゃんフォント あんずもじ 縦書き用も含まれています。こちらも有名なフォント。 あんずもじ ひま字 基的には商用でも利用可能ですが

    手書き風のWebデザインを作りたい時に役立ちそうなフリー素材やデザイン例まとめ - かちびと.net
  • ゲーム感覚で楽しく学べる系Webサービスいくつか

    ちょこちょこ見かけるので最近に なって見かけた、ゲーム感覚で 楽しく学べるWebサービス的なもの をご紹介。Webアプリのアイデア の参考にもなればなぁとの気持ち も込めて。 ゲーム感覚で学べる、みたいなWebサービスは昔からありますので、ここ最近見かけたものを中心に少しまとめてみます。暇つぶししながら学べるって考えるとお得かもしれませんね。 Web制作に関わるものが中心です。 Kern Type カーニングをゲーム感覚で楽しく学べます。ドラッグで文字詰めしてください。 Kern Type Shape Type ベジェ曲線を学べるサイト。デザイナーさんは勿論、非デザイナーさんもこういうのでデザインがいかに難しく時間がかかるものか理解できるのではないかと。こういうの体感しておくとデザインなんて安売り出来ないし、簡単に学べない事が分かるかと思います。 Shape Type Color — Me

    ゲーム感覚で楽しく学べる系Webサービスいくつか
    akiueos
    akiueos 2012/01/26
    後でやってみよー / ゲーム感覚で楽しく学べる系Webサービスいくつか - かちびと. net
  • かちびと.net

    Kachibito.net is a website to writing tutorials and code snippets for Web Developers, the main subjects are WordPress, javascript, CSS, OSS, tools and resources.

    かちびと.net
  • WordPressにベーシックなプロジェクト管理システムを追加できるプラグイン・CollabPress

    なかなかの使い勝手で気に入ったので ご紹介。WordPressの管理画面内に、 ベーシックなプロジェクト管理システムを 追加するプラグイン・CollabPressです。 基的に欲しい機能や使い勝手が凄く 平均的な感じで、結構おすすめです。 個人的に、こういうマネジメントシステムは高機能、高性能よりも使い勝手で選択するのですが、CollabPressは性能もなかなかで使い勝手も良いのでオススメしたいプロジェクト管理システムでした。 よく、こういったシステムは紹介されていますが、どうも使い勝手がいまいちです。CollabPressは最低限の機能なので使いやすさは個人的に好みでした。 以下にざっと機能、手順などをご紹介します。 管理画面全体 管理画面全体はこんな感じです。まず新しいプロジェクトを追加します。プロジェクト名と簡単な説明を加えてAddすればOK。また、アクティビティもここで確認でき

    WordPressにベーシックなプロジェクト管理システムを追加できるプラグイン・CollabPress
    akiueos
    akiueos 2010/12/10
  • わずか3STEP!誰でも簡単にjQueryを使ったLightboxギャラリーを作成出来るソフトウェア・Jquery Photo Viewer

    なかなか面白い試みだったので 備忘録。現在数多くのjQueryを 使用したギャラリーが存在し、その 中には多くのLightbox風ギャラリー が存在します。今日、ご紹介する のはそんなギャラリーを作成する ソフトウェアです。 jQueryを使用したギャラリーを作成するジェネレーターになりますね。ちょっとこの発想はありませんでした。 オンラインのジェネレーターではなく、ローカル環境で動かすソフトウェアです。使い方も凄く簡単ですよ。 言語も日語に対応しています。 わずか3STEPで作成出来ます。 STEP.1 使い方はDLページにも書いてありますが、簡単にご紹介。おそらく直感で作成出来ます。ソフトウェアをDLしてセットアップすると上記画面が立ち上がります。ここにギャラリーにしたい画像をドラッグ&ドロップしていきます。 STEP.2 画像を決めたら、上部のPublishをクリックします。すると

    わずか3STEP!誰でも簡単にjQueryを使ったLightboxギャラリーを作成出来るソフトウェア・Jquery Photo Viewer
    akiueos
    akiueos 2010/11/03
  • 完全無料でWordPressを使ったブログを始める7の方法

    WordPressを使ってみたい、でもサーバーを有料で借りても自分で運営できるか 分からないし不安でなかなか始められない。そんな慎重派な方に 「完全無料でWordPressでブログを始める方法」を7通りご紹介します。 簡単に言うとWordPressを使った無料ブログサービスなどのご紹介です。 これで使い方が分かればサーバーを借りる勇気も出るのではないでしょうか。 WordPress.com WordPressの無料ブログホスティングサービスです。ココは仮にレンタルサーバー を有料で借りて、WordPressを運営した場合でも恐らく登録する事になるので サーバーを借りる前に試したい方はココがオススメです。 WordPress.com CMS Square 無料のレンタルサーバーなのですが、CMSに特化しています。アカウントを 取ると自動インストールをしてくれます。WordPressだけでなく

  • 公式Twitterを使いやすくするChromeのエクステンション・Twitter Plus PlusとTwitter Extenderを併用してみる

    こちらもなかなか。 併用すると以下の機能が追加されます。 Old Retweet いわゆる非公式RTが可能になります。 その場でDM その場でDM送れます。 短縮URL 短縮URL(goo.gl)が使えます。 動画はその場で、画像はアイコン 動画はその場で表示、再生可能です。画像はカメラのアイコンがつきます。 翻訳 機械翻訳ですが、翻訳出来ます。 雑感2つの拡張なので衝突してるっぽくて、機能しないものもあります。確認できたのは「Twitter Plus PlusのShareが機能しない」が機能しませんが、個人的にに必要性は感じないので問題なしです。因みにオンにする方法わかりません。あと、Twitter Plus Plusを使うと、右サイドバーにアドセンス表示されます。 TwitIQのリプライのネスト化が良かったんですが、我慢するしかないですね。当面併用して使ってみることにします。 Twit

    公式Twitterを使いやすくするChromeのエクステンション・Twitter Plus PlusとTwitter Extenderを併用してみる
  • 国産限定・カラー選定、配色支援などに役立ちそうなカラーツールいろいろ

    カラースキーム、配色関連のツールの 大半は海外サイトのものです。僕も海外 のサイトを利用していますが、やはり 日語の方が良いよねという方も少なく 無いかと、ふと思いましたので国産の サイトでカラー選定、配色支援に役立ち そうなツールを探してみましたのでシェア。 海外のは海外ので似たような機能のカラースキームツールばかりにもなっているので国産に目を向けてみるのも良いかもしれませんよ。ツールの前に配色を学びたいという方はwebデザイナーの色彩スキルを磨くエントリーまとめというエントリをご参照ください。 NIPPON COLORS – 日の伝統色 まだ出来たばかりのツール。和の色専門ツールですよ。デザインも使用感もかなり素敵です。環境によってはうまく表示されないかもです。 NIPPON COLORS – 日の伝統色 色サンプル(色見と配色) もっと評価されて欲しいツール。明暗や、系統でカ

    国産限定・カラー選定、配色支援などに役立ちそうなカラーツールいろいろ
  • 厳選して使用している便利なChromeエクステンション19個

    メインブラウザをFirefoxからChrome に変更して暫く経ちます。Chromeも かなりエクステンションが豊富になって きました。いろいろとエクステンションを 試して、微妙に感じて消して、の繰り返 しですが、そんな中、マストに使ってい る拡張をご紹介します。 色々試して、最終的に残ったChromeエクステンションのまとめです。 CSS Tester どのページでもcssの追加テストが出来ます。すぐに反映されるので結構便利。 CSS Tester CSSViewer 先日記事にしましたが、インストールしてから毎日使っています。マウスを乗せるだけでその要素のcssを表示。便利ですねー。 CSSViewer View Selection Source ドラッグした部分のみのソースを表示します。Web制作時によく使っています。使い慣れるとほんと重宝します。 View Selection So

    厳選して使用している便利なChromeエクステンション19個
    akiueos
    akiueos 2010/10/08
    ブラウザ
  • 国産のWebデザインギャラリーサイトが一番参考になるのでまとめた - かちびと.net

    Webデザインのギャラリーは沢山 ありますが、結局感性の近い国産 のギャラリーが一番参考になるの でまとめました。探してみると結構 いろいろあるんですね。助かります。 やはりギャラリーは国産がいいですね。沢山あるので、ある程度厳選しています。 io3000 最近知りました。すごくいいですね、ここ。見やすいし、使いやすいです。おすすめ。 io3000 straightline bookmark とにかくクールでクオリティの高いサイトをブックマークしているギャラリー。 straightline bookmark Web Design Clip こちらも個人的にオススメのギャラリーサイトです。目的のデザインも直ぐに見つかりますよ。 Web Design Clip Good Design Web こちらは他ではあまり見かけない良デザインのサイトを紹介してる貴重なギャラリーです。 Good Desi

    国産のWebデザインギャラリーサイトが一番参考になるのでまとめた - かちびと.net
  • 知っておいて損しない、地味に便利なWordPressのデフォルト機能

    WordPress存在は知っているけどあまり 使われていない印象、という WordPressのデフォルト機能 のご紹介。個人的な印象なの でもしかしたら凄くポピュラー な機能かもしれませんが・・ 存在は知っているけどあまり 使われていない印象、という WordPressのデフォルト機能 のご紹介。個人的な印象なの でもしかしたら凄くポピュラー な機能かもしれませんが・・ 殆どは知られていると思いますので期待しないで下さい。1つでも「これ知らなかった!便利!」と思ってくれる方がお一人でもいれば幸甚です。 やや地味な機能なのですが、知っておいて損しない便利な機能です。順不同。 Press This Press Thisというブックマークレットがお使いのWPの管理画面→ツール→ツールからインストール出来ます。これが結構便利で、引用したいと思った他サイト等でブックマークレットを使えばその場で上図の

    知っておいて損しない、地味に便利なWordPressのデフォルト機能
  • 1