InVisionだけじゃない！国内産デザインツール「Studio」はモックアップもWeb・スマホサイトも簡単に作成できる
海外ではInVisionが注目されていますが、国内産のデザインツールも負けていません。 Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできる無料のオンラインサービスを紹介します。 こういったツールは英語だからと敬遠していた方は、是非試してみてください！ ようやく正式版としてリリースされ、以前紹介した時からさらに進化しています。 Studio Studioの特徴 Studioを使ってみた Studioの特徴 Studioは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。
[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック
例えばカードで、見出しが1行・3行、本文の量が多かったり少なかったりする場合、それぞれの高さを揃えるのは非常に難しく、かなりトリッキーな実装が必要でした。もしくは、JavaScriptを使用しなくてはできなかった実装です。 こういったレイアウトをセマンティックなHTMLで実装できるようになるdisplay: contents;の基礎知識と使い方を紹介します。 How display: contents; Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 【更新】 2021/9/4: 現在の環境に合わせて、内容をアップデートしました。 まずはおさらい、CSSのボックス モデル 「display: contents;」を使用すると、どうなるか 「display: contents;」について詳しく解説 「display:
![[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/377c5eeb9c23ceb8880cd655b04f3d4733502acc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018040106.png)
「STUDIO」がついに正式版をリリース！作成したデザインをそのままWebサイトとして公開可能に | Web Design Trends
TOP > デザイン > デザインツール > 「STUDIO」がついに正式版をリリース！作成したデザインをそのままWebサイトとして公開可能に STUDIOとは、STUDIO株式会社が提供する国産デザインツールです。デザインツールといえば、SketchやAdobe XD、InVision Studioなどが人気のデザインツールですが、それらのツールに引けを取らない操作性や使いやすさがSTUDIOの大きな特徴の1つです。 2017年1月にベータ版をリリースしていましたが、それから1年の間に様々な追加機能を加え、ついに正式版のリリースとなりました。 さらに、今回の正式リリースに合わせて追加されたパブリッシュ機能は、STUDIO上でWebサイトのデザイン作成から公開までできてしまうという驚きの機能で、プログラムコードを一切書かずにWebサイトの公開が完了してしまいます。 今回は、正式版がリリース
Web制作にすぐに役立つ、Chrome デベロッパーツールの便利な機能・使い方のまとめ
Web制作者にとって、Chrome デベロッパーツールは欠かせません。Web制作にすぐに役立つ、便利な機能・使い方を紹介します。 Cool Chrome DevTools tips and tricks you wish you knew already 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 要素をElementsパネル内でドラッグ&ドロップ 02. コンソールで現在の要素を参照 03. コンソールで最後に実行された値を参照 04. セレクタを加えて、要素のスタイルを追加 05. 変更したCSSをファイルに保存 06. 指定した要素のみをスクリーンショット 07. CSSセレクタを使用している要素を検索 08. コンソールで複数の行にまたがるコマンドを記述 09. Sourcesパネルの便利な機能 10. Wa
無料WordPressテーマ「Cocoon（コクーン）」を公開しました
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。 以前公開したSimplicityの後継となるテーマです（※後釜ということで完全な互換性はないです）。 新しくテーマを作成したのは、Simplicity自体元々、個人用に作成したものを公開したテーマだったので、機能を増設するにつれて、多少の無理も出てきて、動作確認が大変になってきたからです。 また、Simplicityは、約4年前に公開したものなんですが、「当時のWEB状況」と「最近のWEB状況」に乖離もでてきました。ですので、一度現在の状況に合わせて作り直しておきたかったからです。 元々Simplicity自体、僕が初めてPHPで作成したプログラムだったので、当時はPHPの作法などをよくわかっておらず、書き直したい部分もいろいろ出てきたというのもあります。 こういった複合的な理
WordPress高速化: WordPress Popular PostsからSimple GA Rankingへ移行
WordPress Popular Postsが重い! スロークエリーのログを観察してて何度も現れたのはwp_popularpostdataというデータベースに関する処理です。 # Time: 171029 12:09:23 # User@Host: ...[...] @ localhost [] # Thread_id: 32675 Schema: ... QC_hit: No # Query_time: 0.303782 Lock_time: 0.000076 Rows_sent: 0 Rows_examined: 0 # Rows_affected: 2 use ...; SET timestamp=1509246563; INSERT INTO wp_popularpostsdata (postid, day, last_viewed, pageviews) VALUES (194
WordPressのショートコードを自作してみる
WordPressのショートコードを自作してみる Wordpressで記事を書いていると、投稿記事からテンプレートタグを使いたくなったり、自作のプログラムを動かしたいくなる場合があると思います。 そんなときに便利なのがショートタグです。 投稿日2010年07月11日 更新日2011年04月03日 ショートタグは投稿記事に[]（ブラケット）内にショートコード名を記述することで、あらかじめ設定しておいた関数を呼び出すことができます。 で、肝心の関数を記述する場所はというと、プラグインとして読み込ませたり、テンプレートフォルダのfunctions.phpに記述します。 プラグインというとちょっと大げさな気がするので、今回はfunctionsファイルの方を試してみたいと思います。 たぶん一番シンプルなショートコード ショートコード第一号は呼び出すと決められた文字列を返すだけという、実用性0のコード
【WordPress】サーバ負荷が軽い「Simple GA Ranking」プラグインで人気記事ランキングを表示する方法 ｜ Tips Note by TAM
2016.11.18 【WordPress】サーバ負荷が軽い「Simple GA Ranking」プラグインで人気記事ランキングを表示する方法 人気記事ランキングを表示させるプラグインは「WordPress Popular Post」「WP-PostViews」など色々あります。 今回は、Google Analyticsのデータを元にランキングを表示する「Simple GA Ranking」の使用方法をご紹介します。 ◆目次 プラグインのインストール OAuth2認証とプラグインの設定 サイトに表示する フックの設定 プラグインのインストール 管理画面の「プラグイン」＞「新規追加」より「Simple GA Ranking」で検索し、インストールと有効化を行ってください。 OAuth2認証とプラグインの設定 管理画面の上部に「Simple GA Ranking is available OA
WordPress Popular Postsで人気記事を表示する方法
１．WordPress Popular Posts とはWordPress Popular Postsはサイトに人気記事を表示させる際に非常に便利なプラグインだ。 以下の図のように人気記事をサイドバーに表示させることができる。 出典：酒の雫 サイドバーに人気記事を表示させることでサイト内の回遊率を上げる役割を担っている。 回遊率が上がれば直帰率も減る。また、アクセスの多い記事への誘導ができる為、記事をシェアしてもらうことやその記事からコンバージョンが生まれることもあるだろう。 そして、設定後は自動で最新の人気記事を表示してくれるので非常に便利だ。 それでは、まずはインストールの方法から見ていこう。 2. WordPress Popular Postsインストール方法管理画面左メニューの「プラグイン→新規追加」の順にクリックする。検索窓に「WordPress Popular Posts」と入
『プラグインなし』で人気記事一覧を出力する方法【WordPress】
2015/04/27 (更新日: 2018/01/20) 『プラグインなし』で人気記事一覧を出力する方法【WordPress】 PROGRAMMING WordPress WordPressで人気記事を出力するといったらwordpress-popular-postsのプラグインが有名です。しかし、「プラグインに頼りすぎてはいけない」ということで人気記事一覧が出力できるコードを書きました。 たったの2ステップで完成します。 完成イメージは以下のような感じです( ◜◡‾) さっそくまとめ開始。 STEP1：functions.phpを編集する // 人気記事出力用 function getPostViews($postID){ $count_key = 'post_views_count'; $count = get_post_meta($postID, $count_key, true);
WordPressの人気記事表示プラグインはコレだ！サムネイル表示を変幻自在に使いこなす
WordPressでブログを運営する上で、なくてはならないものの1つが人気記事の表示です。まだプログに慣れてないと”いいなー、人気記事。どうやって表示するんだろう”なんて考えているかもしれませんね。（私がそうでしたし ^◇^)ゞ ） そんな心配は全然ご無用。プラグインを使えば自動でやってくれるので気にする必要はないんですね。 ここではよく使われる、私も愛用のプラグイン「WordPress Popular Post」を使って人気記事の表示の仕方や、サムネイルのデザインをカスタマイズして独自性を出す方法を解説します。見た目も楽しく人気記事の紹介ができたら訪れてくれる人も嬉しいですよね。 是非あなたのブログにも活用してみてください。 関連 WordPress Popular Postsでサムネイルを簡単に更新する方法 人気記事を表示するプラグイン！TOP10を使った設定法（「WordPress
「10分で終わらせてくるっ！」WordPress子テーマの作り方を2ステップで簡単解説！
とりあえず作りきる！知識は後半！ 記事ページをカスタマイズしたい。え？記事下にこんな「いいね！ボタン」も設置したいし。 こんなオリジナルシェアボタンだって作りたい。 せやでぇ？カスタイズしたいねんけど、直接テーマファイル触わるんコワいやんけ んでテーマをアップデートしたらせっかくのカスタマイズが消えるらしいやんけ んで子テーマ作れば解決するらしーやんけ ややこしそーやんけー手ぇ出しにくいやんけー億劫やんけぇ！ わかる！わかるぞ！私もしばらく見て見ぬふりをしていた一人。 でもやってみたら作業は簡単。知識が先行すると億劫になるだけ。安心するために、ラクになるために。子テーマなんてサクッと作ってしまおう。 まずは「作り方」のみにフォーカス。ややこしい仕組みは後で説明。実作業は10分で終わらせよう。早く寝よう。明日も早い。 簡単2ステップの作業順
【子テーマの使い方！】WordPressのテーマをカスタマイズする方法
【子テーマの使い方！】WordPressのテーマをカスタマイズする方法 WordPress初心者向けに「子テーマ」を使って、Webサイトのデザインをカスタマイズする方法を解説。バージョンの変更とともにデザインが変わらないように自分で変更する方法を紹介しています。「子テーマ」の使い方も理解できるでしょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 WordPressでおしゃれなサイトを作成しようと思ったら、元々入っているテーマでは不十分
子テーマ使用者必見！カスタマイズしたWordPressテーマのアップデート方法と注意点
ついにやってきた、WordPressテーマの更新通知。不具合の修正？新機能の追加？・・ 興奮と焦燥感が絡み合っては”まどろむ”、この身に覚えのない感情は一体なんだ？恋ともちがう。何にせよ初めての体験だ。とは言いつつもまあ先日から気づいてはいた。子テーマは作っている。大丈夫。カスタマイズは消えないはずだ。しかし・・・アレ？ 子テーマを作ったあとのアップデートって、どーやるんダスか・・？ 途端、今日起こったストレスフルな出来事たちが次々と脳裏に浮かびだす。 オーケー、わかってる。こうなってしまえばもう頭は切り替わらない。 男はいちど深呼吸をしたあと目を細め、唇の端を少しだけもちあげる。皮肉たっぷりのその表情は、何かを悟ったかのようにさえ見える。いつもの様子だ。クリック＆ログアウト。そして今夜も静かに画面を閉じるのだった。そう、何事もなかったかのように・・・ アカン。放置、アカン。 茶番ここまで
理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方
サイトレイアウトは、直感的に、簡単に。 WEBサイトを立上げると、最初におおまかなレイアウト設定をすることになります。サイトのテーマカラー、ロゴの設置、SNSシェアボタンの設置などなど・・・ 色々と方法を探ってみるのもまあ、勉強になっていいものです。でも、納得のいくサイトが完成するのはいつになるやら・・・。 TCDテーマなら専門的な知識は不要。私たちのような素人でも簡単に、イメージどおりに設定できてしまいます。プロに外注するような本格的なサイトを自分で作れて、管理していける。そんな時代が来た、ということですね。 ここでは、TCDテーマならではの機能が集約した【テーマオプション】を紹介。サイトレイアウトを直感的に、簡単に設定できる様子をお伝えします。 サイト設定はほぼここで完結。「TCDテーマオプション」 TCDテーマをインストール・有効化すると、「外観」の中に「TCDテーマオプション」が現
目指せ爆速WEB屋！過去2年間かけて知ったリソースを駆使して作るサイトの制作手順！ | バンクーバーのうぇぶ屋
『一時間前の自分より、一秒でも作業スピードを上げる努力をなさい。』 僕が心の底から尊敬する人に以前言われた言葉です。今でも僕の背中にはこの言葉が刺青として刻まれて……いたらどうしよう恥ずかしい（汗） さて、毎年年末年始は僕にとって今まで自分が意識してきた作業スピード、そしてクオリティの両面を試す時期です。去年作ったものより、どれだけクオリティを上げることができ、どれだけ作業スピードを上げることが出来たのか。まぁ、タイトル通り、完全自己満足万歳な記事なので、去年よかちょっとスキル／スピード上がったかなぁと僕自身が感じられたら良しとしてます（笑 とりあえず、難しい話はありません、今回はみんな大好きWordpressでブログを作ります。基本、僕の作業手順を追いながら制作の助けになったリソースを紹介していく感じになりますが、何かの参考になれば嬉しい限りです。制作したサイトは公開してますので、最後に
SEOのためにコンサルやコンテンツ制作を依頼したい――発注者側が気をつけるポイントは？
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
Google XML Sitemapsの設定方法
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. あなたのコンテンツをしっかり検索エンジンに認識してもらうためには、サイトマップは必須である。だが、記事の公開や更新に合わせて毎回、このサイトマップを手動で編集してアップロードするのは非常に手間だ。 そこで、Google XML Sitemaps というプラグインを使うと、 記事の公開・更新の度にサイトマップを自動生成するサイトマップが生成されたら自動で検索エンジンに通知する検索エンジンに認識してほしいページを指定できる記述内容はGoogleの推奨する内容に沿っているといったメリットが受けられる。ここでは Google XML Sitemaps の設定方法について図解で分かりやすくご紹介しよう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウィジェットタイトル入力欄先頭に!が入っているとウィジェットタイトルを表示しないようにするWordPressカスタマイズ方法
Wordpressで子テーマを作る際に知っておくべき仕組みと注意点
