サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
円安とは
junjun-web.net
トリミングの基点を変更したいと思ったきっかけ これまで、縦位置で撮影している人物写真などをアップする際、中央基点で上下をトリミングすると人物の頭の上が少し切れたりしていました。 なのでPhotoshopなどの画像編集ソフトで画像をトリミングし直してからアップしていました。でも、毎回画像編集ソフトでトリミングするのも面倒。数が多いとさらに大変だし(アクションを使う方法もありますが…)、画像編集ソフトが使用できないクライアントの場合はこの状態では不親切かなと… しかし、この方法を設定すれば、毎回同じ位置でトリミングする場合、画像編集ソフトで修正する手間が省けるのでちょっと喜んでいます。 トリミングの基点を変更するには、画像サイズを追加する「add_image_size()」関数を使用します。 add_image_sizeの仕様 add_image_sizeの仕様は以下のようになっています。 $
CSSのFlexboxとcalc()関数を使って簡単にレスポンシブ対応3カラムカードレイアウトを作成する方法を備忘録としてまとめておきます。デスクトップ表示時は3カラム、タブレット表示時は2カラム、モバイル表示は1カラムにするなどのレイアウトをいちいち幅やマージンを細かく計算して実装する必要がないので、自分的には重宝しています。※注)calc()関数はモダンブラウザにサポートされていて使いやすいですが、FlexboxはIE6-9(IE10はベンダープレフィックスで対応)には対応していないので旧IE6-9をサポートするサイトを構築する場合は注意が必要です。
これまで、記事一覧はarchive.phpを使って表示していましたが、これは一つのカテゴリに属する記事の一覧を表示します。今回、複数の違うカテゴリに属する記事をまとめて一覧にするという要望がありました。なので、複数の違うカテゴリに属する記事を取得するコードを備忘録としてまとめておきます。 複数の違うカテゴリの記事をまとめて取得するコード <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>の部分はサイトのデザインに合わせてカスタマイズしてください。
CSSだけで、border-bottom プロパティにグラデーションをかける方法のサンプルを作ってみました。カラーはグラデーションが分かりやすい様に適当につけているので、自由に変更してみてください。Firefoxでは問題なく表示され、IE11も一応表示されています。 border-bottomのグラデーションサンプル 今回、CSSで出来るボーダーグラデーションのサンプルです。 上記のサンプルは、border-bottom のグラデーション部分のみを記載しています。フォントサイズなどは、自由に設定してみてください。
Dropboxのデスクトップアプリをインストールすると、通常 Cドライブに同期フォルダが作られ使用するのですが、自分のPCでCドライブの空き容量が無くなってきました。このままでは、PCの動作に支障をきたす恐れがあるので、多くのファイルをDドライブに移動させました。その中の一貫でDropboxの同期フォルダもDドライブに移動させたいと思い、設定を変更しました。その手順を記載します。 Dropbox同期フォルダ変更手順 Dropboxデスクトップアプリを起動し、システムトレイの中にある①Dropboxアイコンをクリックします。アイコンをクリックしDropboxの画面が表示されたら②歯車のアイコンをクリックします。 歯車のアイコンからメニューが表示されたら、[基本設定]をクリックします。 [基本設定]をクリックすると、以下のような設定画面が開きますので、[同期]をクリックします。 [同期]を表示
WordPressの高機能SEO対策プラグインとして、有名なYoast SEOの基本的な機能についてまとめてみます。このプラグインはとても高機能で設定項目が多くあります。初心者にはとっつきにくい部分もありますが、痒いところに手が届く素晴らしいプラグインかと思います。 自分もまだまだこのプラグインの設定方法に試行錯誤していますが、なんとか使いこなしていこうと日々、研究中です。 それでは、Yoast SEOの基本設定について順に紹介していきます。 Yoast SEOのプラグインインストール Yoast SEOのプラグインページ プラグインのインストール手順は以下のページを参照してください。下記リンクのページはJetpackを例としたインストール手順ですが、[Jetpack] を [Yoast SEO]に置き換えてください。 WordPressプラグインインストール手順 プラグインをインストール
WordPressはhead内にいろいろなタグを出力しますが、サイトの運用状況によっては必要ないタグもあります。それらのタグを出力しないようにできるコードをまとめてみました(自分がよく忘れるため…)。すべてのコードはfanctions.phpに記載して使用します。 絵文字を利用するためのタグ WordPress4.2から絵文字を使えるようになりました。head内に、下記のような、javascript と css を出力します。初めて見た時は、「なんじゃこりゃ!ハッキングか?」と驚いた記憶があります。 【head内に出力される内容】 個人的には絵文字は全く使いません。なので、下記コードを使い出力しないようにします。 wp-jsonタグ 【head内に出力される内容】 上記のような wp-json タグを出力させないようにするには下記のコードを使います。 ブログ編集ツールのためのタグ ブログ編
options.phpとは? WordPressには options.php というページがあるのは、ご存知でしょうか? WordPressのすべての設定が可能な隠しページです。このページを知っておくと、いざという時便利です。このページへのアクセス方法はあなたの管理しているWordPressサイトの管理画面にログイン後、/wp-admin/の後ろにoptions.phpを付けるだけです。そうすると、下の画像のような画面が表示されます。設定項目が多く、頭が痛くなるような感じがするかもしれませんが、ちょっと頭の片隅にでも置いておくと、いざという時役立つかもしれません。
CSSアニメーションを作成していて、ただ移動するだけでなくイージングをつけたいなと思っていた時、直感的にイージングを作成できるサイトがありましたのでご紹介します。 cubic-bezierサイトはこちら 操作イメージ 操作している様子をアニメーションにしてみたのでご確認ください。ドラッグ&ドロップと時間を設定するだけで簡単にイージングのコードが生成されます。 この様にして、自分が気に入ったイージングコードを生成します。 CSSアニメーションへの実装 気に入ったイージングコードを生成したら、コードをコピーして、CSSファイルに記載します。
Search Replace DBがVer4~にアップデートされていたので記事をリライトしました。以前のバージョンではPHP7.2以上だとエラーが出ていましたが、Search Replace DB Ver4~ならPHP7.3以上でも動作するようです。逆に古いPHP環境の場合はSearch Replace DB Ver3.1.0を使用してくださいとのことです。 WordPressサイトをローカル環境で構築後、本番環境に移行する場合、ドメインの置換をしなければなりません。以前(かなり昔)テキストエディタの置換でやったりしてましたが、これは良くないようです。 「WordPress のDB上のサイトURLを一気に変換」という記事を拝見させて頂いたところ、wp_optionsとかwp_postmetaにはシリアライズされたデータが入ってることもあるので、通常の置換ではプラグインなどに不具合が出る場合
今回は、非依存型のパララックス(視差効果)実装ライブラリの Rellax.js の紹介です。 Webサイトにおけるパララックスは、スクロールなどをした時、複数の要素を違うスピードで動かすし、立体感や遠近感などを表現する、視覚的エフェクトの事を言います。 パララックスのデモ このページにも、Rellax.js を適応しています。画面上部の画像が他の部分のスクロールスピードに比べて少し遅くなるように実装しています。 Rellax.js の実装 Rellax.jsのサイトに行きライブラリをダウンロードしてきます。 GITHUBをクリックすると下のようなページへ移動するので、”Clone or download”よりライブラリをダウンロードしてください。 ダウンロードすると、いろいろなファイルがありますが、使用するのは、rellax.min.js のみです。 </body>タグの前辺りに、rell
突然 Dropbox から「Public フォルダが非公開になります」とのメールが届きびっくりしました。 共有リンク結構使ってたのに、使えなくなるの! と残念に思っていたら、共有リンクちゃんと使えるようです。詳細はDropboxヘルプセンターより メールの内容としましては、Dropbox Basicのユーザーは、2017年3月15日まで Public フォルダを利用できるが、3月15日をすぎると Public フォルダは非公開になるとのこと。Public フォルダのファイルへのリンクは無効になるとのこと。ということは、今後共有リンクをつかう時は、Public フォルダ以外のフォルダなどにファイルを保存し、共有リンクを作成すれば良いようです。 共用リンクの作成手順 共用リンクを作成したいファイルを選択して、右クリックをしてください。
このページを最初にブックマークしてみませんか?
『JunJunWeb.Net | Webサイト関連の備忘録とライフログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く