サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
iPhone 17
zarigani-design-office.com
プラグインを使わず、ワードプレスに構造化データを埋め込むやり方 Publish Date: 2018.03.01 プラグインいれなくてもテンプレートにコピペでいけます。 今回紹介するのはブログ（type: BlogPosting）の構造化データです。JSON-LDを使って基本的なデータを埋め込みます。構造化データを埋め込むプラグインはありますが、やたら滅多にプラグインを入れるとサイトが重くなるので、できるだけプラグインを使いたくない派です。 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $sns_url = urlencode(get_permalink()); $image_id = get_post_thumbnail_id(); if(!empty($image_id)){ $image_url =
<button type="button" class="zdo_drawer_button"> <span class="zdo_drawer_bar zdo_drawer_bar1"></span> <span class="zdo_drawer_bar zdo_drawer_bar2"></span> <span class="zdo_drawer_bar zdo_drawer_bar3"></span> <span class="zdo_drawer_menu_text zdo_drawer_text">MENU</span> <span class="zdo_drawer_close zdo_drawer_text">CLOSE</span> </button> /* =============== This hamburger button was generated by Z
Webにおける解像度のお話 Publish Date: 2017.08.10 Webにおいてはピクセルが絶対です。 紙のデザインをやっている人にとっては画像の解像度というのは気をつけるものですが、Webにおける解像度というのはちょっと複雑です。 解像度とは？ 解像度とは単位あたりの画素の数、つまり密度を表します。単位にはよくインチを使うので、平たく言えば、1インチあたりどれくらい点々があるか、ということになります。これがたくさんあるほど高解像度になるというわけです。 dpiとppi 解像度を示す単位にdpi (dot per inch) があります。1インチあたり何ドットで表わすか、を示しますが、このドットというのは多くの場合、印刷のインクの点になります。印刷はCMYKの細かい点々の集合により作られますので、点々が多いほど、つまり高解像度なほど高精細に印刷されます。また、高解像度なほど、1
ドロワーメニュー用のテンプレートを作りました Publish Date: 2018.03.22 当サイトで紹介しているアニメーションで×印になるハンバーガーボタンや横から出てくるドロワーメニューの作り方をまとめたテンプレートを作成しました。このHTMLとCSSとJSを読み込めば手軽にドロワーメニューを実装することができます。 2018.04.02追記：クラス名に不備がありましたので、修正したve1.1をアップしています。指摘してくれた方、ありがとうございました！ 2018.08.10追記：何人の方から左側に出るやつもほしいとの要望がありましたので、ver1.2にアップし、左側にも出るようにしました。 以下のGitHubのURLからテンプレートをダウンロードできます。 Releases · zarigani-design-office/drawer_menu デモはこちら 左側verはこちら
【OAuth認証】WP Mail SMTPでGmailを設定する方法 Publish Date: 2018.03.05 WP Mail SMTP ver 1.2.5でのやり方です。以前はGmailのアカウントとパスワードを入力するだけで使えていたようですが、Googleのセキュリティ強化もありクライアントIDとシークレットを登録する必要があります。ただ、それには少しGoogle側に登録が必要になるなど、少しハードルが高いので、そのやり方をスクリーンショットとともに紹介します。 Google Cloud Platformに登録 大まかな流れとしてはGoogle Cloud Platformにプロジェクトを登録し、WordPressでGmailを使わさせてください、という認証をもらうための設定を作ります。 まず、Googleアカウントにログインした上でGoogle Cloud Platform
子どもの頃のワクワクを忘れていませんか？ザリガニデザインオフィスはそんなワクワクを大切にしています。
横から出てくるドロワーメニューの作り方 Publish Date: 2017.07.27 お知らせ ハンバーガーボタン×ドロワーメニューのテンプレートを作成しました。詳しくはこちら CSSのtransitionとtranslateを組み合わせます。 <button type="button" class="btn_menu"> <!-- ボタンの記述 --> </button> <nav> <!-- ナビの記述 --> </nav> nav { width: 312px; height: 100%; transition: all 0.2s; transform: translate(312px); position: fixed; top: 0; right: 0; z-index: 1000; background-color: #fff; } nav.open { transform
ABBAをWeb上で正しく表示する方法 Publish Date: 2017.12.20 スウェーデンのアーティストABBAですが、ABBAの2つ目のBは逆向きが正しい表記になります。 小ネタですが。正しい表記を画像ではなくテキストで実装する方法です。 実装方法 やりかたは至って単純で、2つ目のBにspanタグで囲って、display: inline-blockとtransform: scaleX(-1)のCSSをあてているだけです。 A<span style="transform: scaleX(-1); display: inline-block;">B</span>BA scaleX(-1)で鏡写し ポイントはscaleXに-1を掛けると鏡写しになることです。これを応用すると、スライダーの矢印の画像も1つだけ用意すれば左右両方に使えます。 transform: scaleX(-1)は
本文がグラデーションで消える、続きを読むボタンの作り方 Publish Date: 2017.10.05 画像のような本文の冒頭は見えているけど、後半はグラデーションで消えているような「続きを読む」ボタンの作り方です。 デモはこちら 実際のコード <p class="text hidden"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla molestias et dolore, nisi repellendus odit repellat labore ratione velit quas amet tenetur, quis assumenda voluptate alias laborum aperiam reprehenderit incidunt. Lorem ipsum dolor sit ame
このページを最初にブックマークしてみませんか？
『ザリガニデザインオフィス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
