サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
都知事選
www.konnect-kollect.info
簡単にレスポンシブなWebページを制作できるフレームワークBootstrap4ですが、まだまだ情報が十分でないため、海外のサイトなどを参考に、今回カスタマイズしてみました。 スマホ、タブレット表示時のハンバーガーメニューの色の変更方法についてです。 ハンバーガーメニューのclassのCSSを触り、枠線、背景、3本線の色を変更してみました。 ハンバーガーメニューの枠線、を変更するclass .navbar-toggler を設定します。 .navbar-toggler{ border-color: #ffffff; } ハンバーガーメニューの背景色を変更する枠線と同様にclass .navbar-toggler を設定します。 .navbar-toggler{ background-color: #000000; } ハンバーガーメニューの三本線を変更する枠の中の三本線のイメージは、SVG
現在、Adobe社のPhotoshopやIllustrator、Acrobat、InDesignなどのデザインソフトをセットでまとめて購入するには、サブスクリプション版であるAdobe Creative Cloud(アドビクリエイティブクラウド。以下、Adobe CC)を購入する必要があります。 高額なので購入しようか迷っている、あるいは、少しでも安く買う方法を探しているという方への情報です。 最安値で、1年間で¥30,000以上節約、約半額でAdobe CCを格安で買う方法があります。 今すぐAdobe CCを安く買いたい方はこちら! Adobe CCが、税込39,980円で購入可能! ヒューマンアカデミー ヒューマンアカデミーさんの通信講座1ヶ月受け放題とAdobe CC1年ライセンスのセット アドビ CC オンライン トレーニング通信講座 1ヵ月間 受け放題コース デジタルハリウッド
WordPressを複数ドメインを運用しているさくらのレンタルサーバにインストールした方より、 「独自ドメイン直下にインストールしたいのだけれど方法が分からないのでサポートして欲しい」 との依頼が入りました。 さくらのレンタルサーバーでは、独自ドメインを使用でき、また、クイックインストールで簡単にWordPressを設置できるということでセットアップを始めたそうですが、 「独自ドメインの直下にWordPressを配置できない」とのこと。 確かに、クイックインストール機能では、 http://www.○○○.com/wp の「wp」ようにサブディレクトリを指定しなければインストールできません。 まずは、さくらのレンタルサーバーのサポートページを見れば、方法書いてあるでしょと調べてみたのですが、どうも載っていない。 ということで、Google先生に助けを求めてみました。 同様のトラブルを独自に
GIGAZINEさんやLife Hackerさんで取り上げられ、話題になっていますが、大分県で活躍されているデザイン事務所CONDENSEさんから、すばらしいWEBフォントが公開されました。 CONDENSE-iconFont スマホサイトのボタンを設置する場合、1つずつ画像を作ったり、CSS SpriteでCSSを指定するというのも面倒なときがあります。 そんなときに、このWebフォントを使うと、フォント名を指定し、CSSで飾りをつけるだけで、画像の処理を行わず、アイコンを作ることができます。 ダウンロードCONDENSE-iconFontのダウンロードはこちらから í ライセンス「営利、非営利問わず自由に使用できます。但し、再配布は禁止しています。」 とのことで、WEB制作にも自由に使えますね。 フォントファイルダウンロードしたファイルを解凍すると、 CONDENSEicon.woff
Webサイトの制作で、動作確認を行う場合、実際の表示状態とそれを表示させている、HTMLやCSSのコードを参照したいということがあります。 Google Chromeで、上記の確認を行う場合は、「デベロッパーツール」を利用します。 デベロッパーツールを起動すると、初期設定では、表示画面の下部に表示されます。 Webサイトの制作を仕事としている方の中には、高解像度の横長ディスプレイを使っている方もいらっしゃると思います。 私もその1人ですが、Chromeの下部の表示では、コードの一部しか表示されず、非常に使いづらいです。 この表示位置を下部ではなく、右横に変更することができます。 方法は簡単だった。。。ボタン長押しでメニューが出てきたデベロッパーツールのウィンドウの下部に、アイコンメニューが表示されます。 このアイコンメニューの一番左を “長押し” すると、右側表示のアイコンが表示されるので
number_format($xml->itemPrice) としたところ、 number_format() expects parameter 1 to be double, object のWarningが。 PHPのドキュメントをみると、 string number_format ( float $number , int $decimals = 0 , string $dec_point = ‘.’ , string $thousands_sep = ‘,’ ) 第一引数は、数値型にしないといけないのね。ということで、 number_format((int)$xml->itemPrice) とintでキャストしたところ、無事Warningとれました。
WordPressをインストールして、デフォルト設定になっているテーマがTwenty Eleven。 ブログの文章を書いて、アップできればいいという人ならそのまま使っても何も問題はありません。 このTwenty Elevenですが、初期設定のままでは、単一の投稿ページで2カラム表示して、右サイドメニューを使うことができません。 そのため、投稿一覧をサイドバーに表示して、過去の投稿を見てもらうというような使い方がそのままではできません。 また、<hx>などのタイトルタグなどのスタイルがシンプルなので、もう少しデザイン性を持たせたくなります。 ですが、そのために、テーマファイルそのものをカスタマイズするというのも面倒です。 そこで、ご紹介したいWordPressのプラグインが、Twenty Eleven Theme Extensions。 まさに、Twenty Eleven テーマを拡張するた
スクロールするだけで次ページのコンテンツを自動で読み込み、表示してくれるjQueryプラグインがjQuery.autopagerです。 jQuery.autopager ちょっとおしゃれなWEBサイトのブログ、ECサイトなどでよく見かけますが、スクロールすると自動的に次のページが表示されるので、たくさんページがあって、それをたくさん見てもらいたいというときに便利なプラグインです。 ブログや、商品一覧などで使われているのをよく見かけます。 今回、私の関わっているWordPressで構築したサイトでもこのプラグインを使うことになったのですが、1つだけ問題が発生。 「最後の記事の下にも【次へ】のリンクが設定されてしまう」 この問題の解決法を探してみたのですが、なかなか見つからず、ようやくたどり着くことができましたので、シェアさせていただきます。 $wp_query->max_num_pagesで
サイトのトップのURLにアクセスしたとき、デバイスの種類を判別して、PC用のサイトとスマホ用サイトに切り替える方法です。 今回は、.htaccessファイルを使っての対応です。.htaccessファイルを使いますので、お使いのWEBサーバーがApacheを使用していることが前提です。 http://www.hogehoge.jp/ が共通のURLで、HPのトップへのアクセスがあったときに、スマートフォンからのアクセスの場合は、 http://www.hogehoge.jp/sp/ へリダイレクトする処理です。 まずは、.htaccessファイルの中身がこちらRewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC] RewriteCond %{QUERY_STRIN
どこで、売っているの?アドビ スクール パートナーのプラチナスクールパートナーとなっている、パソコンスクールの通信講座専用サイトです。 パソコンスクールISA通信講座 アドバンスクールオンライン デジタルハリウッド Winオンライントレーニング ヒューマンアカデミー たのまな アドビソフトウェア通信 Creative Cloudの方が年額にしたら安いんじゃないの?その通りです。Adobeさんに直接申し込んで Adobe Master Collection相当のソフトを月額5,000円、CS3以降の単体またはSuite製品 (CS3.x、CS4、CS5.x、CS6) を持っている場合は、初年度は月額3,000円で利用できる発売記念版を購入できるので、年額36,000円で買えることになります。 ※参考サイト Creative Cloud Creative Cloudプラン別のサインアップページ
「Twitter account」に自分のTwitterのアカウント。 「Label」は、初期設定では、「Follow us」になっているので、好みで「Follow me」など選びます。 「Color」はボタンの色で、直接入力するか、カラーピッカーを使って設定します。 「Side」はLeft(左側)か、Right(右側か)を選びます 「From top」はページの一番上からの表示位置です。 設定が終わったら、[UPDATE CODE]をクリックすると、下のテキストエリアに貼り付け用のコードが生成されます。 このコードをコピーして、自分のサイトの</body>の直前に貼り付けます。 WordPressのテーマの場合は、footer.phpの</body>の直前に貼り付けます。 これで、TwitterのFollowバッジが表示されるようになります。 このサイト以外にも国産では、HeartRai
WEB制作のディレクションをしていると、いろいろなデザイナーさんやコーダーさんと仕事をする機会がありますが、本当に個々のスキルというのはまちまちです。 社内で気心の知れた、力量のわかる人と一緒にする場合はいいのですが、誰かの紹介であったり、ディレクションの部分だけ任されて、制作部隊は決まっていたりと自分の権限で選ぶことができないこともあります。 そういうときに、一緒に仕事をしていく中で、ちょっとした部分で、その人の経験が豊富か、浅いか、普段から勉強しているかどうかわかってしまうことがあります。 渡されたデータを見て、不要なものが入っていたり、確認もれがあったり。デザインそのものやコードの中身だけではなく、データの扱い方でわかることがあります。 そんな事例をピックアップしてみました。実際に私がこれまでに経験したことのある事例です。 不要なファイルをアップするMacでは、.DS_Storeをは
基礎をおさえるには、ドットインストールが最高におすすめ!「ドットインストール」は、@taguchiさん、@fkojiさんが立ち上げられた、「すべての人にプログラミングを!」を合い言葉に作られた動画によるプログラミング学習サイトです。 「ドットインストール」で法人化もされており、その気合いの入れようがおわかりいただけると思います。 Twitter Bootstrap (v2.0)の基礎 (全28回) 実は、「ドットインストール」のサイト自体もTwitter Bootstrapで作られています。 1レッスンがすべて3分以内なので、ちょっとした空き時間を活用して学習できるのと、動画では、実際にコードを編集している様子が表示されているのですが、ナレーションも同時に収録されており、途中で、入力間違いなんかもあって、そういうのが逆に、やってしまいがちな実例にもなっていて、実践的なのがいいです。 ユーザ
最近、個人的に最も注目のTwitter Bootstrap。 レスポンシブWEBデザイン対応(つまり、スマホサイト対応)、ページレイアウト、ボタンデザイン、UI、ナビーゲーションメニューの制作、特にデザインに関しては決まったスタイルから設定していけばいいので、開発時間の短縮に大いに役立ってくれています。 これまでは、サイトを一から立ち上げるときに、使っていたのですが、どうやら、Wordpressでも使えるようで、対応プラグイン見つけました。 WordPress Twitter Bootstrap CSS こちらをインストールして、動作確認や使い方を確かめてみました。 インストールと設定1.Wordpressのプラグイン管理メニューで、「Twitter Bootstrap」で検索すると、「WordPress Twitter Bootstrap CSS」がヒットしますので、インストールして、有
WPtouchのプラグインの設定で自分のIDを指定WordPressのダッシュボードで、設定>WPtouch を選択し、WPtouchの設定ツールを開きます。 そして、 Advertising, Stats & Custom Codeの 「Advertising Service」を「Google Adsense」に 「Google Adsense」の「Google Adsense ID」に、「pub-」で始まる自分のGoogle Adsense IDを入力し、設定を保存します。 投稿上部にモバイル バナー (320×50)が表示されます。 下部にレクタングル (中) (300×250)を設置WPtouch Proを購入すると設定画面から設定を行えるようなのですが、無料版WPtouchでもテーマを編集すると設置ができます。 自分のWordpressサイトの /wp-content/plugi
頭ん中の増永 玲さんのエントリーで これが Google IME の恐いところ 私のアンテナにひっかかりました。おっしゃられていること、「言葉をたいせつに」ということ響きました。 「ふいんき」と入力して変換すると、 ATOKでは、「ふんいき」が正しい読みですよと誤りを指摘してくれるけど、Google 日本語入力では、そのまま何も表示されず「雰囲気」とすんなり変換できてしまうこと。 Google 日本語入力とATOK、それぞれのプロダクトのなりたちや経緯、開発手法から見ていくといいのでは?と思います。 以下、かつてATOK、Yahoo!サーチエンジンの開発に携わった私の個人的な一考察ですので、それこそ誤りありましたら、ご指摘ください。 Google日本語入力について少し古いですが、ITmediaさんの 「Google日本語入力」開発者が語る、その狙い の記事などからの情報で ・無料である ・
最初に、謝罪します。 すみません。タイトルは完全に釣りです。 個人的な話ですが、2012年3月末をもってお手伝いさせていただいた会社との契約を満了いたしました。 IT戦略事業部マネージャーという立派な肩書きを頂いて、様々な業務に従事させていただいたのですが、その中でも非常に面白い経験ができたのが パソコンスクールの通信講座+Adobe Suiteのソフト(CS)のセット販売サイトの構築、運営でした。 感謝の意味も込めまして、この記事を投稿します。 守秘義務の関係から、裏の裏までのお話とはいきませんが、公開している範囲でもおそらく、有用な情報をお伝えできると思います。 また、Adobe CS6、発売日が、2012/5/11に決定しましたね。 今なら、CS5.5を買って、CS6に無償アップグレードできますので、ぜひ、ご参考にしていただけたらと思います。 ※5/11記事追加元なかの人が語るAdo
Facebookのiframeページを簡単作成。involver「Static HTML for Pages」 2011/3/11より、Facebookが、Static FBMLによるタブ追加が出来なくなり、FBML形式からiframe形式へ変更になります。 iframe版のタブの追加試してみた方もいらっしゃると思いますが、 Appの登録など、プログラム、HTMLなどのWEB知識を持っていない方には、 非常にハードルが高いものになってしまってます。 ですが、Facebookの公式認定デベロッパー、involverから 簡単にiframeページを追加できるアプリケーション、 「Static HTMl for Pages」がリリースされましたので、 (Twitter for Pagesを利用していましたので、メールでお知らせが届きました) 早速導入してみました。 Static HT
このページを最初にブックマークしてみませんか?
『www.konnect-kollect.info』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く