ランディングページやポートフォリオなど、レスポンシブ対応のペライチ縦長ページをドラッグ&ドロップで驚くほど簡単に作成できてしまう無料オンラインツールを紹介します。 FlexboxベースのTailwind CSSが使用されており、ヘッダやフッタやコンテンツには、一般的に使用されているコンポーネントが揃っています。HTMLの作業は必要なく、自分用のHTMLファイルを短時間で作成できます。
![驚くほど簡単!コーディング作業不要で、まざまなHTMLページを積み木感覚で作成できる無料ツール -Stitches](https://cdn-ak-scissors.b.st-hatena.com/image/square/a291ba967c2aa7d3d02a7d4b41d712d8e756732e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018072001.gif)
HTMLの無料テンプレートのほとんどは単一ページのみですが、今回紹介するのはなんと、サイトの主要ページまるごと無料テンプレートとして、しかもデザインファイルやフォントファイルまでもまとめてダウンロードできるMashup Templateを紹介します。 時間がないときに、予算がないときに、さくっと作成できるテンプレートです。 また、最近のトレンドを採用したさまざまなコンポーネントが用意されているので、デザインやコードの引き出しとして、勉強にもいいですね。 Mashup Template Mashup Templateの特徴 複数ページとコンポーネントが含まれたテンプレート 単一ページのテンプレート素材が多いですが、Mashup Templateはサイトやブログで使われる複数のページとコンポーネントが用意されています。 カスタマイズが簡単 そのまま使ってもよいですが、コンポーネントが用意されて
Chromeに広告を非表示するアドブロックが標準機能として搭載される噂を耳にしていましたが、それが具体的にどのような広告が対象になるかは不明でした。 GoogleのSearch Consoleに新コンテンツが追加され、デスクトップとスマホでどのような広告が非表示にされてしまうか詳しく解説されています。 「Better Ads Standards」にはユーザーが特に不快に感じる広告の種類を掲載されており、それらに当てはまる場合は修正してね、というものです。 2018年から適用予定で、デスクトップやスマホでけっこう見かける広告が掲載されているので、注意が必要です。 非表示にされてしまうデスクトップの広告 ポップアップ広告 ページのメインとなるコンテンツの一部・全体を隠すようにポップアップして表示される広告。このタイプの広告は、ユーザーをイライラさせるだけです。 サウンド付き、自動再生されるビデ
当ブログでたびたび紹介するCreative Marketで、個人のデザイナーさんがなんと1億円($1,000,000)の売上を達成したそうです! Creative Marketは名の通り、クリエイティブを扱ったマーケットで、個人でフォント・グラフィック素材・写真・テンプレートなどを販売できるサイトです。 Nicky Laatz 彼女の販売歴を見ると、最初が2012年12月で、計61種類のフォントやグラフィック素材を扱っています。ほとんどのものは$10-20なので、彼女の人気の高さがうかがえます。 実は僕も、彼女のフォントをいくつか購入しています。 フォントとしての美しさ、クオリティの高さ、そしてお値段がお手頃と、3拍子揃った素晴らしいフォントです。彼女の人気アイテムをいくつか紹介します。 Hello Beautiful Font Duo + Swashes まずは一番のお気に入り。手書きス
WordPressは最早できないものはないくらい、さまざまなタイプのWebサイトが制作できます。しかしその出来ることが多すぎて、どこから手をつければよいのか分からない、具体的にどうすればよいのか探すのが大変ということもあります。 WordPressを使用したサイトを作成する際に、必要とされる制作テクニックをしっかり身につけることができるオススメの本を紹介します。 WordPress最新版に対応です! 本書は2013年に刊行された「WordPressデザインのメソッド」のアップデート版で、2016年現在の状況に合わせて各テクニックの実装方法が全面見直され、レスポンシブサイトに不向きなテクニックは削られたものです。 今時のさまざまなデザインや機能、UIを実装するすごいテクニックが解説されています。
Webページが世界各地のブラウザでどのように見えているか、位置情報を使ったコンテンツのローカライズ、コンテンツが国によってフィルタで妨げられていないかなどを確認できる無料オンラインツールを紹介します。 対応都市の一覧 ワールドワイド ローケーション 世界各地65ヵ所以上のデータセンターに対応。 結果はすぐに サーバーのクラスタはキューを使わずに、直ちにスクリーンショットを生成。 Webkitエンジン レンダリングには、WebFonts/CSS3をサポートしたWebkitエンジンを使用。 マルチデバイス 多数の異なる解像度のデバイスをサポート。 ローカライズ HTTPヘッダーに含まれる言語指定、多言語フォントのサポート。 API スクリーンショットを処理するバッチのAPIを提供。 単に世界各地でどのように見えるかだけでなく、Geo Location(位置情報)を使ったサイトの確認にも役立ちま
普通のデザインツールだと、サイズ指定は「px」を使用している人がほとんどでしょう。固定値のデザインをするのであれば、ピクセルで何も困りませんが、レスポンシブの相対値のデザインに適しているとは言えません。 Sketchでサイズ指定を「%」でできるプラグインを紹介します。 キャンバス・グループ・兄弟要素に対して、相対的にサイズを指定できます。
WordPressでブログやサイトを運営する前、そして運営している時にしっかり設定しておきたいWordPressのセキュリティやメンテナンスに役立つ.htaccessの設定を紹介します。 .htaccessファイルを守る 最初に行うことは、.htaccessをあなた以外の無許可のアクセスから守ることです。下記のスニペットは第三者があなたの.htaccessファイルにアクセスするのを阻止します。 ルートの「.htaccess」に下記を記述します。 <files ~ "^.*\.([Hh][Tt][Aa])"> order allow,deny deny from all satisfy all </files> wp-config.phpファイルを守る WordPressでもう一つ重要なファイルがあります、それはwp-config.phpです。
ヘッダ、フッタ、ナビゲーション、見出しなど、Webページでよく使う各コンポーネントやエレメントごとに国内・海外の素晴らしいデザインを集めているギャラリーサイトを紹介します。 眺めているだけで、さまざまなインスピレーションをもらうことができます! ヘッダのデザイン フッタのデザイン ナビゲーションのデザイン 見出しのデザイン いろいろなパーツのデザイン ヘッダのデザイン
人物・動物のイラストを描く時の参考になる骨格や筋肉の仕組み、動きや表情、手や足など各部位、赤ちゃんからお年寄りまで世代ごとの特徴の出し方、ネコや鳥や馬などの動きや品種や柄などの描き方を紹介します。
ランディングページ、スモールビジネス、ポートフォリオ、ギャラリーなど、企業や個人サイトを簡単に構築できる多目的用のWordPressのテーマファイルを紹介します。 「Optimizer」の名の通り、あらゆるデザインに最適化できるようカスタマイズ性に優れています。 Optimizer Optimizer -WordPressテーマディレクトリ OptimizerにはFree版とPro版があり、Free版ではいくつかの機能が利用できませんが、CC0ライセンスで個人でも商用でも無料で利用できます。 Optimizerのデモ Optimizerの特徴 Optimizerのデモ Optimizerを使うと、本当にいろいろなタイプのページやサイトが作成できます。
WordPressの管理画面へのログイン時のURL(wp-login.php)を簡単に変更できる国産プラグインを紹介します。 管理画面に総当たり攻撃をされて困っている人は是非お試しください。 当ブログはこのプラグインを使用して解決しました、作者様に感謝! Login rebuilder -Plugin Directory Login rebuilder公式ページ(日本語) Login rebuilderのインストール Login rebuilderの設定 Login rebuilderのインストール WordPress公式のPlugin Directoryから通常のプラグインと同様にインストールできます。 管理画面の「プラグイン」から「新規追加」を選択。 「プラグインの検索」に「Login rebuilder」を入力して検索。 「Login rebuilder」の「いますぐインストール」を
WordPressには数多くのテーマファイルがありますが、それらとは少し違ったアプローチのテーマ「Layers」を紹介します。 ページ作成にはHTML/CSSの知識は不要で、レイアウトやウィジェットを組み合わせてかっこいいページを直感的に作成できます。 Layers Layers -GitHub ライセンスはGPL 2.0 Licenseで、商用利用、修正、配布などが無料で行えます。 通常のテーマファイルはデザインが完成していて、画像やテキストを配置しますが、Layersはベースとなるレイアウトが数種類あり、そこにコンポーネントやウィジェットを自由に組み合わせてページを作成します。 ページのデザインを見ながらカスタマイズできるテーマという感じです。 組み合わせるのは簡単で、下記ページで動画で公開されています。
ダウンロードファイルのデモ Slideout.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="index.css"> </head> <body> ... <script src="slideout.min.js"></script> </body> Step 2: HTML ナビゲーション(#menu)とコンテンツ(#panel)を実装します。 idは変更可能です。 <nav id="menu"> ナビゲーション </nav> <main id="panel"> コンテンツ </main> Step 3: JavaScript オプションを定義し、スクリプトを実行します。 <script> var slideout = new Slideout({ '
トレンドをうまく取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 時間のある時に、じっくり楽しんでください!
昨日、Twitter(@colisscom)でお伝えしたもう一つのプレゼント、高品質なイラストのベクター素材をコリス限定で全員にプレゼントします! 今回は、ビジネスをテーマにしたアイコン。 レトロな色使いがかわいく、各イラストは非常に丁寧にデザインされています。 Free Vectors ビジネスからホビーまで、アイコンからイラストまで、多彩なベクター素材が揃っています。ベクター素材を探す用にブックマークしておくのがオススメです! 今回ダウンロードできるアイコン素材のフォーマットは、Illustrator用とPhotoshop用のベクターを完備。 Photoshopで開いたキャプチャ .ai .eps .psd .png(プレビュー用) 素材の利用にあたっては個人でも商用でも無料、ウェブでも紙でも利用してください、とのことです。素材の再配布や販売は禁止です。 TwitterやFaceboo
ブログやWebサイトのパフォーマンスの改善やSEO、セキュリティの向上に役立つ.htaccessの設定を紹介します。 ドメインをwww有り・無しに統一、新ドメインに引っ越した時のリダイレクト、URLをクリーンなものにしたり、共有サーバーでのPHPのバージョンを指定したりなど、すぐに利用できるものばかりです。 .htaccess Snippets -GitHub 元記事には有用な.htaccessのスニペットがPublic Domainでまとめられおり、それら全部に加えて.htaccessファイルの作成と使い方を加えました。 .htaccessファイルの作成と使い方 リライトとリダイレクトの設定 セキュリティの設定 パフォーマンスの設定 その他のいろいろ有用な設定 .htaccessファイルの作成と使い方 「.htaccess」ファイルを作成することは非常に簡単です。 テキストベースのアプリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く