はてなブックマーク

こんにちは。 みなさま、ご自身のWordpressブログや、クライアントワークで、「AMP」は導入しましたでしょうか。 僕はつい先日、テック系のオウンドメディアの構築に携わり、「AMPとか入れてや」ということで、「なんとなく知ってたけど、AMPって詳しくはなんぞや」というところから調べてみましたが、いかんせん仕事が詰まる… こういうとき、灯台下暗し。 ミッションは「AMPを導入（あと、見た目をカスタマイズ）」することですね。 本記事では、AMPとは？は軽めに触れておいて、そそくさとWordpressのAMP導入とカスタマイズの方法をご紹介いたします！詳しいことは割愛しますので、学びを深めたい方は改めて別の記事をご参照ください。 記事の対象は、wordpress初級〜中級ぐらいの方。でもAMPを有効化するだけなら初心者の方でもイッパツなんですよ。 AMPとは？「Accelerated Mob

こんばんわ！朝10時に起床するも無気力に部屋で過ごしてしまいました…satohmsysです。 Webサイトをデザインする上で背景ってとても重要ですよね。 安直に決められないのも、やはりサイト自体のブランディングや他の部分のカラーリングに関わってくるからであって… とにかく僕は困ります。困って果てます。 テクスチャも、途切れ目がどうしても気になってしまいますが、 今回ご紹介するのはそんな心配が一切ない、Webデザイナー必見のツールです。 背景パターン作成/プレビューツールTransparent TexturesTransparent Textures 解りづらいですが、アーガイル柄、グランジ系、シンプルな斜線の背景…数十種類から選べます。 使い方は簡単そのもの！わずか3ステップです。 ベースとなるカラーを選ぶ左カラムにあるカラーピッカーから、カラーを選びます。 実際にリアルタイムでサイトの背

いきなりですが、ありがとうございます。 Webサイトを作ったデザイナーから 直接、画面の向こうに気持ちを 伝えることはできません。でも、この、 自分のためでしかない ポートフォリオサイトなら、できます。 開いてくれてありがとうございます。 せっかくなので、数クリックだけでも。

jQuery無しでアニメーション。TweenMaxを使ってサイトをコーディング今更ですが、アニメーションライブラリ「TweenMax」を触ってみました。 かなり高度でスムーズなアニメーションが実装できますが、理屈はかんたんで、 少し理解するだけで、Webサイトで使われるような効果は実装できます。 TweenMaxを使ったアニメーションのデモ TweenMaxを使うメリットjQuery には豊富な機能が揃っているぶん、無駄なコードが多かったり、処理に時間がかかるなど昨今では気にかけるクリエイターが多いようです。 かんたんにアコーディオンを実装できるslideToggle();ですが、実際、スマートフォンで見たときにアニメーションがもたついたりする場合があります。 TweenMaxを開発？しているGSAPのサイトにアニメーションの比較があるのでよければ参考にしてみてください。なんとなーくjQu

/** * sass compile setting * scss/ディレクトリのscssをコンパイルする */ gulp.task(‘sass’ , function(){ return sass( dir.top + `/【common/scss/など、特定のディレクトリをいちいち書く】/*.scss` , { compass : true, style: ‘expanded’ }) .pipe(autoprefixer()) .pipe(csscomb()) .pipe(plumber({ errorHandler : notify.onError(‘<%= error.message %>’) //gulp notify エラーメッセージ })) .pipe(gulp.dest( dir.top + ‘/【/common/css/など、書き出し先をいちいち書く】’));

いまいちよく解っていなかったので調べてみました。 JSONとは？JSON（ジェイソン）は、「Javascript Object Nation」の略。 データ記述言語の1つで、名前の割にJavascript専用ではなく、さまざまな言語間でのデータの受け渡しに互換性があります。 主に2つの構造を基にしています。 名前/値のペアの集まり。様々な言語で、これはオブジェクト、レコード、構造体、ディクショナリ、ハッシュテーブル、キーのあるリスト、連想配列として実現されています。 値の順序付きリスト。ほとんどの言語で、これは配列として実現されています。 http://www.json.org/json-ja.html Ajax（googleマップで用いられているようなリアルタイムでデータを受信して受け渡す方法）でよく用いられている「XML」と同じような場面で用いることが出来ますが、 JSONのほうが記法

レビューどれがいいか分からない！iPhoneの充電器で失敗しない選び方まとめ！おすすめも2024年9月17日 satohmsys

カスタム投稿タイプで更新した記事も、月別のアーカイブを表示したい時があると思います。 これが簡単なようで意外とハマリました。ちなみに、「『アーカイブページ』内の記事」の表示のことではありません。今回は2通りの方法をご紹介いたします。 function.phpに追記する方法だいたいこれにぶち当たると思います。 至極簡単で、functions.phpに以下のコードを追記します。 //投稿タイプ保管用 $my_archives_post_type = ‘post’; //Where書き換え add_filter( ‘getarchives_where’, ‘my_getarchives_where’, 10, 2 ); function my_getarchives_where( $where, $r ) { global $my_archives_post_type; if ( !array_

プラグイン無しで管理しやすいCSSでページネーションを出したほうが俄然エコ…というわけでページネーションを実装する関数です。 wordpressプラグイン無しでページネーションを実装 function pagination($pages = ”, $range = 4){ $showitems = ($range * 2)+1; global $paged; if(empty($paged)){ $paged = 1;} if($pages == ”){ global $wp_query; $pages = $wp_query->max_num_pages;　//ページ総数 if(!$pages){ $pages = 1; } } if(1 != $pages){ echo ‘<ul class=”pager”><li>Page’.$paged.’ of ‘.

wordpressで口コミサイト、アフィリエイトサイト、掲示板機能を実装するにあたって必須なのがこの「コメント機能」。 検索するといくつかの方法が出てくるのですが、コメント欄が追加されなかったり、コメント欄だけ追加されて、データベースには格納されないものだったり… なんだか上手く実装できないのが多かったのですが、僕の場合で上手く言った事例を各フェーズの備忘録としてメモしていきます。 wordpressコメント項目の追加にあたって、今回のケースなんだか面倒になりそうなので、先にサクっとシチュエーションを決めましょう。 今回は、「口コミ」機能の実装を目指して、wordpressコメント機能に 「タイトル」「性別」「年齢」を選択する項目をつけることにします。 「性別」「年齢」は複数選ばれる必要が無いしあってはいけないので、ラジオボタンで選択するようにします。 <input type=”ra

wordpressの検索機能は適宜に応じて出力を変えることで絶妙なユーザービリティを発揮することが出来ます。 今回は、「キーワード検索なしのドロップダウン選択式」で、カスタムタクソノミーを絞り込んでみます。 htmlのformについての基礎ひとまずHTMLのform要素で、wordpressの検索を実装する上で理解しておきたい基礎的な仕組みを簡易的にメモしていきます。 form method=””フォームに入力された情報の送信方法。 getとpostがありますが、値を省略すると「get」になります。 それぞれの使い分けは以下の様な感じ。 getデータを「取り出す。」 検索に対して、ヒットしたコンテンツを「取り出し」たりするときに使います。 URLに付加して処理システムに渡されるので、長いデータを送るのには適しません。 Googleとかで検索した後にURLをみると、記号やら何やら色々と付け足

デザインをする、部屋を、ファッションをコーディネートする… 何かを作るうえで配色が大事なのは百も承知だと思いますが、人類が快適さを覚えていることで生まれた「配色のルール」をしっておくことで適切で円滑な目標達成につなげることができます。 ここでは配色において基礎的なルールを綴っていきます。 新年度ということで、新しく勤めだした新卒の方や新米webデザイナーさんもさらっと見てみてくださいね。偉そうなことを綴っていますが、我慢して下さい。 配色の目的まず、「配色をすること」の目的です。 色を選ぶことで効果をあげたり、美的な面だけでなくメッセージの伝達や行動の示唆など言葉を使わずにユーザーに訴えかけるのに「配色」はかかせません。 秩序のない配色や、理由のない選び方をするよりも、すこし意識するだけで「配色」は変わります！と思います！頑張ります！ 色の表現方法混色系（RGB,CMYK）色や光の三原色。

Google検索結果インデックス用のサイトマップではなくて、視覚的に確認するためのサイトマップの方です。 前者なら「XML Google Sitemap」というプラグインをインストールしカチカチっとやって、アレするだけなのですがモチロン大切なことなので絶対やっておいてくださいね！ Google XML Sitemapsプラグイン(XMLサイトマップの自動更新) – WordPressプラグインの一覧 後者の機能を実装するには「PS Auto Sitemap」が有名ですが、なぜかショートコードを埋め込んでも動作しなかったので それらしいものを探してみました。すると、すぐに見つかりましたよ。 WP Sitemap Page こちらからダウンロードしてプラグインフォルダにブチ込むか、ダッシュボードより検索してください。 インストールすると、「設定」のメニューに「WP Sitemap Page」と

WEBやDTPにおいて”表現したいこと”が”問題解決”に繋がるためには、まず「デザイン」のひとつひとつに置いて意味や意図が必要です。 ”クライアントから何を聞いて、何に活かせばいいのか”の逆算にもなると思うので、 今日は「バランス」「人目を惹く」「リズム感」「アート性。見応えを高める」の4つの観点でのデザインについて基礎的なセオリーを解説していきます！ デザイン・レイアウトの基礎1：バランスシンメトリー・対称性 画面の中央に仮想のラインや軸をいメージし、それに対して左右対称になるようにエレメントを配置すること。 人は対称性の感じられるものに対し、整然とした美しさを感じるといいます。 また、自然界に完全な対称（シンメトリー）は存在しないため、その象徴的かつ人為的に作られた印象から 「安定感」「精度感」「権威」「正統性」をアピールできます。 単調になってしまうため、グラフィックや配色に気をつけ

前回の記事で、WP_QueryやQuery_postsで’offset’のプロパティを使用すると、ページャーにエラーが出て同じ記事しか表示されない…的なことを書きました。 WordPressでページネーション実装したときのWP_Queryとquery_posts共通のハマりポイント で？なに？if(have_posts()): while(have_posts()): the_post();でいいじゃん？ って方も多いと思いますが、上記のような問題は、ページにループを2つ作る場合に非常に困るんですよね。 最新記事のみ「ループ1」、2番目以降は「ループ2」で出力したい時とかあると思うんですね。 ループ2の最初の記事は先頭から2記事目を表示したい、ということです。 WP-PageNaviとoffsetの関係 -WordPress(ワードプレス) (wald-grun/blog) 一応ここにそれ

いろんなクラウドストレージを使いすぎて汎用性にかけている、satohmsysです。 ブログネタをMicrosoftのOneDriveだったりEvernoteだったり… 気になるwebサイトのキャプチャをOneDriveに、サイト自体をはてなブックマークに登録したり… どれか1つに統一することでより便利になると思うのですが、部屋が片付かない人の言い訳じゃないけれども「そのとき手近にあるもの」がいいんですよ。結果、あれもこれもになっちゃっています。何かイイ方法ないですか？ 正直な話、自分がぱっと取り出せて、目的物を探すために時間がかからないのなら別にいいと思いますけどね。 保存しておくことが第一ですので。 とはいえど、使う度に他とは違うサービスの充実度を誇るEvernote そのショートカットキーを書いていきます！

今までLessを使って作業をしていた自分ですが、 先日の「CSS Nite LP38 「Webデザイン行く年来る年（Shift8）」での1コマ ”そうですね～Sass一択ですね” の言葉が、Lessプレイヤーだった自分の心に妙に刺さりました。 一択って…俺は、選択肢にも入っていなかったのか… というわけでSassを仕事中にさらっと勉強してみました。 おもに初心者向けかと思います。 あと、今回は神GUIコンパイラ「Prepros」、そして「compass」にも少し触れてみます！ご存じない方はこれを期に同時に使えるようになっちゃいましょう！ まず、Sass（サス）とは「Sass」は、「Syntactically Awesome StyleSheet」の略であり、端的に訳すと「構文的にスゲェスタイルシート」とのことです。 記法には2種類あり「Sass記法」「Scss記法」両方を総称して「Sass

Twitterアカウントのbot化って、例えば企業アカウントとか新規メディア用のアカウントを作ったときに頼りたくなるところですよね。 いろいろツールが合って使い方が面倒なのですが、実は、3つだけでいいんです。 色々やって感じたことなので、間違いないです（小声） 今日は紹介を交えて備忘録として綴っていきます。 では、オールラウンダーから。 自動ツイート管理がしやすい「MAKEBOT」 MAKEBOT – ツイッターボット作成サービス OAuthではログイン出来ないので、アカウントを作りましょう。 それと馴染みのない方にはハードルが高い点は、Twitter Developersでアプリケーションを作らなくてはいけない点です。 ちゃんとガイドがありますが、面倒ですね。 （ちなみにガイドのスクリーンショットは古いので気をつけてください。 実際にアプリ作成画面に行くにはTwitter Develop

先日の記事で、無料wordpressテーマの「Stinger5」に、最強jQueryスライダープラグイン「bxSlider」を使ってカルーセルスライダーを実装する工程をかんたんに綴りました。 【wordpress】Stinger5でカルーセルスライダーを実装する方法 ただ、ブラウザチェック時にIE8でスライダーが表示されないというトラブルにぶち当たりました。その時の対処法と、IEでbxSlider見たときに起こる類似のトラブルについてまとめました。 IE8で「bxSlider」のheigthが0になって表示されないトラブル細かいソースやjavascriptの記述は省略しますが、だいたいこんな感じのHTMLソースになっています。 <div style=”max-width: 100%;” class=”bx-wrapper”> <div style=”width: 100%

解りやすく、砕いて書こう専門用語、業界用語は基本的に好感触でないです。 どの業界にもビギナーはいるため、そういった方のために、あまりにも専門的な表現は避けたほうが良いです。 売り手側の脳内で完結してしまっていないか？注意しましょう。 相手に寄り添った形で「キャッチコピーにある言葉を、買い手側の抱える問題」にまで近づけている状態がよいです。 価格/特価をメインに推すかどうか決めよう”○○円のところ、今なら○○円でお求め頂けます” ”海外セレブ愛用のダイエットサプリ、当社独占ルートで大量確保のため○○％ OFF” など。 価格競争性が高い場合、自社の製品の認知度を素早く広めたい場合に有効なので、場合によっては検討してみましょう。 堂々とキャッチコピーとして打ち出せる割引は赤字覚悟になる可能性があるので注意が必要です 文言を決める 呼びかけよう”掃除が面倒なあなたへ” ”コミュニケーションで失敗

cssでなら複数のクラスに同じスタイルを適用するのはとても簡単ですが、じゃあjQueryで変数（ｊQueryオブジェクト）を作った場合、複数のそれらに同時に処理を適用するにはどうしたらいいのか。 これがcssと同じようには行かないのです。 最近知ったいくつかの方法をまとめました！ まず、ベースとなるHTML <div style=”border: dashed 10px #ccc; padding:10px;”> <h1>mergeで結合して一緒に</h1> <div id=”b1″ class=”block”>id=”b1″</div> <div id=”b2″ class=”block”>id=”b2″</div> </div>