はてなブックマーク

投稿エディタで Gutenberg を使用している場合に、新規投稿時、任意のブロックをデフォルトで配置しておくことができます。 デザイン上、指定のタグやクラス付きのタグを最初に入力してほしい場合に便利な設定です。 hタグの見出しブロックやpタグの段落ブロックを入れておく 見出しや段落ブロックを入れるには以下のようなコードを functions.php へ記入します。 function my_post_template() { $post_obj = get_post_type_object( 'post' ); // get_post_type_object( 'post' ) → の部分で、設定をしたい投稿タイプのスラッグを記入 $post_obj->template = [ // h2タグを入れる [ 'core/heading', [ 'className' => 'myclass'

今まであまり知らなかったのですが、contentプロパティを使うと自動的に文字や画像を自動的に挿入したりできて便利ですね。最近調べて知った、contentプロパティを使用した表示の仕方をいくつか書きだしてみました。 IE8以上でないとcontentプロパティを使った、:beforeや :after擬似要素は対応していませんが、「 IE9.js」を使用すれば使える範囲も広がります。ちなみにIE9.jsを適用しても5.の連番表示は8以下では表示できませんでした。 1. リストの最初の要素に”★new!”を表示する 更新記事一覧などで最新の記事に自動的に”★new!”等の表示や画像を表示する事ができます。文字だけでなく画像も表示できます。Webフォントを使えばいろんなアイコンが表示できますね。 デモ See the Pen リストの最初の要素に”★new!”を表示するサンプル by Saomoc

リストでマークアップした要素をくるくる回転させて見せる事ができるJQueryのプラグイン、Roundaboutを使ってみました。 「サンプル」も作りました。 スタンダードでは要素が奥行きがあるようにくるくる回転しますが、オプションで3Dのように回転させたり、要素のまわりを回転させたりといろんなパターンで回転して見せる事ができます。 ダウンロード ダウンロード：fredleblanc/roundabout · GitHub 使い方 スタンダード htmlはulのリスト形式で記入し、回転させたいものをliの中に記入します。 cssはulの横幅（回転するボックスが並んだ横幅より少し大きいくらいのサイズ）と、liの横と縦のサイズを指定します。 ヘッド内でjQuery本体とプラグインファイルを読み込みます。 <script type="text/javascript" src="https://aj

アイキャッチではなく、投稿記事内の画像を使用してサムネイルとしてトップページやサイドバー等に表示する方法です。調べていたら色々方法がありましたので、書き出してみました。 get_postsタグを使用してサムネイルを表示する get_postsを使用して投稿記事の添付画像を取得し表示する方法です。 下記のコード表示したい箇所に記入します。このコードでサムネイルサイズ（150px × 150px）のサイズの画像を表示します。 <?php $args = array( 'post_type' => 'attachment', 'posts_per_page' => 1, 'post_status' => null, 'post_parent' => $post->ID ); $attachments = get_posts($args); if ($attachments) { foreach

ライトボックス系で画像の拡大表示をしたい時など、aタグに独自クラスを付与したい場合があると思います。そんな時に自動的にHTMLにクラス付けする方法です。 image_send_to_editor フィルターフックを使う image_send_to_editor フィルターフックを使用すると、投稿画面から画像挿入する際に出力されるHTMLを加工できるので、これを使うのがよいようです。 画像へのリンクタグに一律でクラス付与する場合は以下のように、functions.php へ記入すればOKです。 add_filter( 'image_send_to_editor', 'addClass' ); function addClass( $html ) { $class = 'myClass'; // ←付けたいクラス名が入ります。 return str_replace( '<a ', '<a cl

WordPressのカスタムフィールドに入力したデータを取得する方法と表示する方法です。データを取得するにはいくつか方法がありますので、分かる範囲で書き出してみました。（カスタムフィールドに値があるかないかで表示を分ける条件分岐も追加しました。） 1. get_post_meta() でデータを取得して表示する パラメータ <?php $meta_values = get_post_meta($post_id, $key, $single); ?> $post_id データを取得する投稿のIDを指定します。表示中の投稿を指定するなら $post->ID を指定する。 $key 表示したいカスタムフィールドに入れた名前（日本語で大丈夫） $single trueかfalseを指定。falseで配列でデータを出力する。trueで指定されたフィールドの”値”の1つを文字列で出力。 使用例 下のよ

必要となる場面は少ないのですが、たまに WordPress から JavaScript へ値を渡したい時があるのでその方法のメモです。 WordPress から外部の JavaScript ファイルへ配列の値を渡す WordPress のオプション値など PHP の値を外部の JS ファイルに渡したい場合は、wp_localize_script() という関数が WP には用意されているのでこれを使用します。 wp_localize_script() を使用すると PHP の連想配列を JS のオブジェクトとして扱えるようにしてくれます。 wp_localize_script の使用方法 functions.php 又は プラグインファイルに以下のように記入します。 <?php wp_localize_script( $handle, $name, $data ); ?> $handle

transform プロパティの scale で要素をズームしたり、translate で移動させるアニメーションを、transition で行った際に、アニメーションしている要素以外の部分が微妙にガタガタ動くという現象に遭遇しました。 実際の動き 実際の症状は下の画像のような動きです。マウスオーバーでアニメーションを実行すると、アニメーション要素でないテキストの部分が微妙に動いてしまいます…。 この現象は Chrome や Safari など、webkit 系のブラウザで発生するようです。ただ、起こる場合と起こらない場合があり、どういう状況で起こるのかまでは検証できませんでした…。 この CSS アニメーションのコード 対処法 このガタツキは以下のようにアニメーション要素に対して、3Dの方向に関する transform:translatez(0) 又は、transform:transla

ターミナルで変換する ターミナルを開き以下のように入力し実行します。 sass-convert --to （scss 変換するcssファイルがあるフォルダのパス）/style.css （scssファイルを作成するフォルダのパス）/style.scss 例）ホームディレクトリにある sites というフォルダの css フォルダ内の css ファイルを scss 形式へ変換し sites フォルダ内に作っておいた scss フォルダへ保存する場合 ターミナルへ以下のようにコマンドを打ち込みます。 sass-convert --to scss /Users/ユーザ名/Sites/css/style.css /Users/ユーザ名/Sites/scss/scss.css これでネスト化された scss ファイルが scss フォルダへ作られます。

表題どおりですが、WordPress のカスタムメニューにセットされたメニューより、画面横からシュッとスライドインするメニューを簡単に作成できるプラグインを作りました。 現在このブログ左上に表示されているメニューが、そのプラグインで表示しているものです。 機能 ・設定画面のドロップダウンよりカスタムメニューにセットされているメニューが選択できます。選択したメニューがスライドインメニューとして表示されます。 ・メニューボタンの表示はレスポンシブ対応になっていて、設定したウィンドウサイズ以下でのみ表示することが可能です。 ・メニュー位置を左または右の選択ができます。 ・メニューのカラーを White と dark から選択できます。お使いのテーマに合わせて色を変更して下さい。 ・メニューボタンの位置を画面トップからと、上記メニュー位置で設定した左右からの位置で設定できます。 カラーテーマ ◆

[WordPress] WordPress Popular Posts プラグインでの表示を自由にカスタマイズしたい時に便利なフックとその使い方 WordPress Popular Posts プラグインを使用すると閲覧数などから人気記事をランキングで表示することができます。表示内容を設定するパラメータも予め複数用意されているので、ある程度自由な表示が可能です。 しかし、全体のマークアップをまるっと変えてしまいたい時や、用意されていない項目を表示したい場合には限界があります。このプラグインでは、そんな時のためにフィルターフックが3つ用意されています。大変便利ですね。そのフックの使い方メモです。 参考記事 WordPress Popular Posts プラグインの GitHub にフックの使い方が掲載されています。 3. Filters · cabrerahector/wordpress-

先日、iPhone で撮影した写真を WordPress にアップロードして投稿に挿入すると縦方向の画像が横向きで表示されるという現象が起こりました。しかもその現象を確認できるのは iOS から閲覧した時のみ（パソコンから見ると横転していない）という謎の現象でした…。このことを詳しく調べて下さっている記事に助けられ、なんとか解決できたので解決方法などをまとめました。

同じようなレスポンシブスライドショーの jQuery プラグインは既に多数ありますが、カスタマイズが必要な場合に多機能なプラグインだとコードをみてどこでなにをしているのかを理解するのが大変です…。今回もシンプルな機能なのでカスタマイズしやすいと思います。 サンプルデモ ◆ レスポンシブスライドショーデモ demo｜memocarilog このサンプルのコードは以下よりダウンロード出来ます。 ◆ SaoriMiyazaki/ResponsiveSlideshow_jQuery 前回と同じく横幅が狭くなった場合のサムネイル画像は、設定した min-width まで小さくなり、並びきらない場合は以下のように2段になって表示します。 HTML コード 画像をサムネイルサイズの画像と大きい画像と二種類用意します。 サムネイル画像をリスト形式で記入し ID 又は Class をふります。画像のリンク先

[Git] SourceTree で使用する Git を Homebrew でインストールした Git へ変更する方法（Mac） SourceTree で使用する Git は自動的にシステム内のものを使ってくれていると思っていましたが、そうではないんですね。今まで私は SourceTree 内蔵の Git を使用していたようです。 そのために、他のツールを導入する際につまづく元となってしまいました…。 SourceTree で使用する Git は簡単に変更できるのですが、意外と分かりづらかったので変更の手順を詳しくまとめました。 Git のインストールついて Mac には最初から Git が入っていますが、少し古かったりするので新しいものをインストールした方がよいですね。インストーラーからインストールすることもできますし、Homebrew というパッケージ管理システムからインストールも可能

さくらのVPS サーバに WordPress を移転して一番感動したのは、サクサク動く管理画面です。表示スピードも上がり大変快適になりました。せっかくなので、他のドメイン・サーバーで運用しているサイトもこのサーバーに引っ越したいという欲が出てきました…。 さくらのVPS ではマルチドメイン（Virtualhost）で運用することも可能です。エラーを出しながらもなんとか、複数のドメイン設定ができたのでその手順のメモです。 1. さくらのネームサーバー設定をする さくらのVPS 管理画面から「ネームサーバー登録」をクリックして「ネームサーバの利用申請」画面へ移行します。 画面一番下に「新しいネームサーバの登録」という項目があるので、ここからドメインを追加します。次に「ゾーン編集」のボタンをクリックし、「さくらインターネットのネームサーバーに設定する」の項目の箇所へ、IPアドレスを入力し送信しま

svg の拡張子画像も jpg 画像などと同様に管理画面からアップロードできるようにし、SVG画像をアイキャッチに設定した際にサムネイルを表示可能にする方法です。 .svg 拡張子画像のアップロードを許可する設定 WordPress 4.0 現在では、svg 拡張子の画像を「メディアを追加」などでアップロードしようとすると以下のような「許可されていません」というエラーがでてアップロードできません。 svg 拡張子の画像のアップロードを許可するには、以下のコードを functions.php へ記入します。 function cc_mime_types($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'cc_mime_types'); これで svg 画像がアップロー

プラグインなどで実装した非レスポンシブなギャラリーでも、シンプルなものの場合は CSS やライブラリのコードに少し手を加えるだけでレスポンシブ対応にできることもあります。しかし、凝ったエフェクトのギャラリーをレスポンシブ対応にしたい場合、どこをどうしたらいいのかプラグインのコードを読むだけで大変です…。 少し力技になってしまいますが、凝ったエフェクトのギャラリーを jQuery を使って簡単にレスポンシブにする方法を思いついたので、記事にしてみました。 ヒントになったのは少し前に話題になったこちらの記事「これでよくない？ レスポンシブテーブルの話 | ダーシマ・ヱンヂニヤリング」 サンプルデモ だいぶ以前に Rhinoslider（シンプルなスライドショーから変わったエフェクトのスライドショーも簡単に実装できるjQueryプラグイン-Rhinoslider）というプラグインをご紹介しました

git-ftp を導入する ※この記事では、Homebrew から git-ftp などをインストールしています。 Homebrew のインストール方法はこちらの過去記事「Git をインストールする手順[ 2 ] – Homebrew からインストールする 」のなかでまとめています。 curl をインストール git-ftp を使うのに curl という HTTP や FTP に関する機能をつかえるコマンドが必要なため、Homebrew からインストールします。オプション付きでインストールした方がよいようです。（参考：How to use git-ftp） curl をインストールするにはターミナルで以下のように入力します。 brew install curl --with-ssl --with-libssh2 git-ftp をインストール 以下のコマンドをターミナルで入力すると git

横幅やマージンなどを % で指定したい場合、親ボックスの横幅などから % の値を計算する必要があります。複数の値を % 値で指定するとなると計算がめんどくさく、また計算ミスの可能性も出てきます。そこで、Sass の mixin 機能を使えば簡単に変換することができて便利かなと思い px 値を % に変換して指定する mixin を考えてみました。

SVG 画像を Web 制作で使用する場合に、IE8 などの SVG 非対応ブラウザへは代替画像を表示することで対応することが多いのではないかと思います。調べてみると代替画像を表示する方法も色々あるようなのでまとめてみました。 object タグを使用して表示する object タグを使って SVG ファイルを読み込み、SVG ファイルが読み込まれなかった場合は、代替の img タグで指定された画像を表示します。 <object data="svg_image.svg" type="image/svg+xml" width="500" height="300"> <img src="svg_image.png" alt="svg_image" width="500" height="300" /> </object> 代替画像の表示をする代表的な方法のようですが、何故か私の環境では IE8

ぼかし効果のサンプル 以下のような指定で簡単に画像にぼかし効果を入れることができます。 img{ -webkit-filter: blur(3px); filter: blur(3px); } See the Pen filter: blur(3px) by Saomocari (@Saomocari) on CodePen. その他の効果は以下のようなものがあります。 ぼかし / blur() 明度 / brightness() コントラスト / contrast() 彩度 / saturate() ドロップシャドウ / drop-shadow() グレースケール / grayscale() 色相 / hue-rotate() 階調の反転 / invert() 透明度 / opacity() セピア / sepia() SVG のfilter / url() CSS-Filters-Po

この記事は SVG Advent Calendar 2014 の2日目の記事です。前日の記事は、t_motooka さんの「clip と transform との組み合わせ – 職業プログラマの休日出勤」でした。 SVG の filter 要素を使うとどんなことができるのかという基本的なことと、filter 要素を使ったわりと簡単にできるマウスオーバー効果の作り方をご紹介します。 filter 要素でどんなことができるのか filter 要素では SVG 内の画像をぼかしたり、色相を変えたりするようなフィルターを作ることができます。 ただ、filter 要素単独でフィルターを作る訳ではなく、原始フィルター（フィルターの効果を定義するようなもの？）と呼ばれる要素を子要素として記述しセットで使います。 原始フィルター要素は、feGaussianBlur（ぼかし）・feColorMatrix（明

CSS3 で新しく追加されたフォント単位 rem を IE8 以下でも利用できるようにする、JavaScript のライブラリ REM-unit-polyfill の使い方などです。 rem はルート要素(HTMLに指定したもの)のフォントサイズを参照して、文字サイズを指定できるためとても便利です。しかし IE8 以下では対応していません。古いブラウザも対象の場合 rem 指定の際 px や em でのフォントサイズ指定も必要になり、二重で記述することになってしまうため面倒です…。 REM-unit-polyfill を使えば、ライブラリファイルを読み込むだけで簡単に IE 対応ができます。 ダウンロードと使いかた 以下のページよりライブラリを入手出来ます。 chuckcarpenter/REM-unit-polyfill 使い方はとても簡単で、ダウンロードした rem.min.js ファ