タグ

WEB制作に関するbashalogのブックマーク (120)

  • 【お知らせ】バシャログ。メンバーが所属する株式会社シーブレインのWebサイト制作サービスのサイトがリニューアルしました | バシャログ。

    日は弊社シーブレインのWebサイト制作サービスのサイトをリニューアルしましたので、お知らせします。 →リニューアル以前のデザインはこちら 今回のリニューアルにより、下記の2点が主に変更になっています。 (その他細かな部分も修正しています。) キービジュアルの変更 構成の変更 キービジュアルの変更について 爽やかな青空が広がる横浜の風景にキャッチコピーを載せています。 弊社のWeb制作事業部がもっとも大切にしていること、それは「お客様に対してどこまでも誠実な対応を誇りとする」ということです。 ファーストビュー(最初に目にする部分)を変更したことにより、コンセプトが一目で伝わるデザインとなりました。 構成について リニューアル以前は縦長1ページで構成していたのですが、今回のリニューアルで「シーブレインにできること」「制作実績」「料金例」「会社概要」をそれぞれ階層に分けました。 縦長1ページの

    【お知らせ】バシャログ。メンバーが所属する株式会社シーブレインのWebサイト制作サービスのサイトがリニューアルしました | バシャログ。
  • 【Docker】初心者向けDocker基礎編 | バシャログ。

    こんにちは。nakagiriです。 今年は梅雨が明けるのが早くて毎日真夏並みに暑いですね。( ´∵`) みなさんも熱中症にならないように気をつけてください。 今回からDockerについて全四回に分けて解説していきます。 一回目の記事では、「Dockerって何だろう?」、「Dockerを使うとどんなメリットがあるのだろう?」といった疑問を解決するDockerの基礎編です。 Dockerに関する記事はたくさんありますが、難しい言葉が多く羅列されていてなんとなく難しいイメージを持たれている方もいるかもしれません。そこで、イラストを使ってなるべくわかりやすく噛み砕いてお伝えしていきたいと思います。 二回目以降の記事では、実際にDockerを使って解説していくので、ぜひ一緒にやってみてください。(※実際の構築は、Docker Composeを使用して解説する予定です。) Dockerとは? Doc

    【Docker】初心者向けDocker基礎編 | バシャログ。
  • 【WordPress】ページや権限によってアクセス制限をかける | バシャログ。

    みなさんこんにちは、yamashitaです。 今回はWordPressでログインの有無やユーザー権限によってアクセスできるページを設定する方法を紹介します。 これにより、クローズドな情報などを掲載することができます。 パスワード保護もありますが、複数ページを同時にアクセス制限する場合などに使えます。 ログインしていない場合はどのページも見られない // アクセスされてるURLを取得 $url = $_SERVER['REQUEST_URI']; $parseUrlArray = parse_url($url); // ログインページのURLを取得 $parseLoginUrlArray = parse_url(wp_login_url()); // ログインページの一致していない且つ、ログインしていない if ((strpos($parseUrlArray['path'], $parseL

    【WordPress】ページや権限によってアクセス制限をかける | バシャログ。
  • BrowserSyncでAliasっぽい設定 | バシャログ。

    どうもfujiharaです。ジメジメして生活しづらい季節ですね。日はBrowserSyncでAliasを使いたいと思い調べていたら、似たように 使用できる方法があったのでご紹介いたします。(知らなかった。。。) 背景 弊社ではシステム開発する際にコーディングリポジトリとシステムリポジトリを分けることがあるのですが、 コーディングのCSS,JS,IMGをシステムリポジトリに反映するのが結構手間で、以前ブログに書きました gulp-directory-syncを使い、同じリポジトリで開発できるようしていました。 しかしこの方法だとファイルが2重管理になるので嬉しくありませんでした。 でAliasの設定ってないのかな(あるだろう)と思い調べていたら、 なかったのですがオプションでMultiple base directoriesというものがありました。 これを使えばdirectory-sync

    BrowserSyncでAliasっぽい設定 | バシャログ。
  • SVG画像のHTMLでの使い方 | バシャログ。

  • 【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」ー後編 | バシャログ。

    こんにちは、koyaです。 今回は前回の続きを書きます。 前回のおさらい 前回はプラグインでブロックのフィールドを作成するところまでをやりました。 上の画像のようにブロックエディタ上のフィールドに値を入力して、いざブロックに反映しようとすると画像のようなエラーが出た状態になっている状態で終わりました。 ブロックエディタでのエラーの解消 上記のエラー文では「Block rendered as empty.block-lab-editor__ssr」と表示されています。 ブロックをレンダリングしようとしましたが中身が空でした。と言われていますね。 プラグイン入力した状態では入力画面は作りましたが、ブロックの中身やデザインは設定されていない状態です。 これを解消するためにブロックの中身を作成していきます。 ブロックはテーマディレクトリの下にblocksディレクトリを作成し、その中にブロックごとに

    【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」ー後編 | バシャログ。
  • 【WordPress】多言語対応プラグインPolylangでhome_url()を使うときに気を付けること | バシャログ。

    みなさんこんにちは、yamashitaです。 6月からクーラーをフル稼働していて8月にはどうなっていることやら心配です。 さて今回はPolylangプラグインを設定している状態でhome_url()を使う際の注意点を一つ紹介したいと思います。 Polylangとは 設定することで多言語ページのURLを設定してくれるプラグインで、各投稿・ページにも対応するページが存在するか一覧で確認できるようになります。 今のところ自分は使用していませんが、有料版には自動翻訳もあるようです。 home_url()の動作 テンプレート上で使用する場合はほとんど通常時と同じ感覚で使って大丈夫です。 出力内容は以下の通りです。 デフォルト言語ページの場合、http://example.co.jp/の様にトップのURLがそのまま出力されます。 他の言語ページの場合、http://example.co.jp/enの様

    【WordPress】多言語対応プラグインPolylangでhome_url()を使うときに気を付けること | バシャログ。
  • 【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」 | バシャログ。

    こんにちは、koyaです。 在宅勤務で自宅PCでAdobe製品を開きながら作業することが多くなり、メモリが足りなくなってしまったので16GBから48GBにアップグレードしました。めちゃくちゃ快適です。 最近はChromeだけでもメモリをたくさん使ってしまうので16GBだと足りなくなってしまいましたね… 今回はブロックエディタに独自のブロックを追加する事が出来る「Block Lab」を紹介します。 インストール プラグインの追加から検索、または以下のサイトからダウンロードしてインストールします。 wordpress.org 公式サイト 使用方法 インストールをするとサイドバーの一番下に「Block Lab」が追加されるので、ここからメニューを開くことが出来ます。 All Blocksを開くとデフォルトで「Example Block」が下書き状態で追加されています。 「Example Bloc

    【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」 | バシャログ。
  • 【MovableType.net】カスタムフィールドの出力パターンをおさらい | バシャログ。

    こんにちは、ishidaです。 テレワーク生活で通勤がなくなり運動をしなくなっているので 勤務終了後にウォーキングやら筋トレをするようにしています。 最近ハマっているのがこちらのダンスです。 家の中で出来るのと、お姉さんが励ましてくれるので最後までやり切ることが出来ます。 さて、今回は MovabelType.net でのカスタムフィールドの扱いについてご説明します。 ソフトウェア版とは扱い方が違うのでMovabelType.netが初めての方は、迷うこともあると思います。 ソフトウェア版との記述方法の違い ソフトウェア版ではカスタムフィールド に自由にテンプレートタグをつけることが出来ましたが、 MovabelType.net では、「識別子」というものに変更されました。 この識別子を使って記述します。 単純にカスタムフィールドを出力する テキストなどのカスタムフィールドは以下のように記

    【MovableType.net】カスタムフィールドの出力パターンをおさらい | バシャログ。
  • gulp-directory-sync でディレクトリを同期する | バシャログ。

    どうもfujiharaです。ただいまテレワーク中です。日はgulp-directory-syncを使って ディレクトリを同期する方法をご紹介します 追記:2021/06/28)まずこちらの記事を参考にしていただき、駄目な場合はこちらのgulp-directory-syncをお試しください。 背景 WordPressを開発する際には以下のような構成で行っております。 (以下リポジトリルートです) . ├── frontend_check (コーディング用) ├── gulpfile.js ├── package.json ├── src (各種ソース) ... (その他各種設定フィル等) srcディレクトリで各種ソースを用意しgulpで運用してfrontend_checkに吐き出すイメージです frontend_check以下はこの様になっています frontend_check ├── a

    gulp-directory-sync でディレクトリを同期する | バシャログ。
  • cssでPhotoshopのように画像にエフェクトを追加する方法 | バシャログ。

    こんにちは。koyaです。 今回はcssプロパティbackdrop-filterでエフェクトを追加する方法について紹介します。 実装 早速ですが実際のコードがこちらになります。 See the Pen bg-filter by bashalog (@bashalog) on CodePen. 画像はフリー写真素材ぱくたそ さんの物を使用させていただきました。 解説 backdrop-filterにはオプションが10種類あり、ブラー、セピア、グレースケールなどのよく使うエフェクトもあります。

    cssでPhotoshopのように画像にエフェクトを追加する方法 | バシャログ。
  • 【WordPress】類似したURLからリダイレクトで全く別ページにアクセスされるのを止める | バシャログ。

    皆さんご機嫌いかがでしょうか。yamashitaです。 日はWordPressのお節介機能を止める方法を紹介します。 URL自動補完リダイレクトについて 実際の動作例 以下のような親子構成の固定ページがあるとします。(いい例が考えつかずすみません) /jp /en /jp/aaaa /en/bbbb この時/en/bbbbにアクセスしようと思い、間違えて/jp/bbbbとURLを入力すると・・・なんと/en/bbbbにアクセスできるとても便利な機能なんです。 他にも/jp/jpと入力した場合、ビックリなことに階層を飛び越えて/jpにアクセスさせてくれます。とても便利と見せかけて存在しないページへのアクセスを勝手に存在してるページに飛ばしちゃいます。 このような例のほかにも、/jp/aaと入力すると/jp/aaaaにアクセスします。 どうやら前方一致でリダイレクトしてるようでパスの最後の階

    【WordPress】類似したURLからリダイレクトで全く別ページにアクセスされるのを止める | バシャログ。
  • 【WordPress】WordPress5.4での変更点まとめ | バシャログ。

    こんにちは。koyaです。 ついに弊社でも全面的にテレワークを行うことになったので、自宅の模様替えをして作業環境を整えたりしました。 集中できるスペースを作るには狭い部屋ですが以前よりは仕事場って感じになって満足しています。 今回は3/31にアップデートされたWordPress5.4の情報についてまとめようと思います。 ブロックの追加 今回のアップデートで新規ブロックとしてTikTokブロック、ソーシャルアイコンの2つが追加されています。 TikTokは既存の埋め込みブロック同様にURLを入力するのみで動画を埋め込むことが出来ます。 ソーシャルアイコンは画像のような丸いアイコンのデザインで各種ソーシャルサイトへのリンクをまとめて表示することが出来ます。 よく使う機能がシンプルなデザインでデフォルトで追加されたのはいいですね。 既存ブロックの強化 既存ブロックも使いやすく進化しているのでまと

    【WordPress】WordPress5.4での変更点まとめ | バシャログ。
  • Hex、RGB、CMYK、DIC、PANTONEなど色の変換方法いろいろ | バシャログ。

    こんにちは。sitoです。 今回は、Hex(16進数カラーコード)、RGB、CMYK、DICやPANTONEなどの色を、簡単に変換、検索できるツールまとめです。 Hex ⇔ CMYK ⇔ RGB 相互変換 https://www.benricho.org/colors/convert-Hex-CMYK-RGB.html 画面がシンプルで見やすいので、よくお世話になっています。 カラーコード変換ツール https://syncer.jp/color-converter こちらも、RGB、Hex、CMYK、HSVの変換似対応。 数値の入力だけでなく、キーワードでの変換も可能です。 フォントや入力エリアが大きくて使いやすいです。 NCOLOR https://www.ncolor.me/ DICやPANTONEの変換にも対応しています。 変換する色を左右で比較できるところが気に入っています。 D

    Hex、RGB、CMYK、DIC、PANTONEなど色の変換方法いろいろ | バシャログ。
  • 【Adobe XD】ついにきた!アンカーリンクが実装されたので使ってみる | バシャログ。

    ご無沙汰しております。sitoです。 しばらく鳴りを潜めておりましたが、生きています。 さて、今回はまたXDのアップデートのお話です。 先日のアップデートでついに! ついにプロトタイプのアクションにアンカーリンクが実装されました!!!!!(拍手喝采 嬉しすぎたので早速触ってみました。 プロトタイプでアンカーリンクを設定してみる 使い方は超簡単! メニューやボタンなどのオブジェクトから、リンクしたいポイントまでワイヤーで繋ぐだけです。 右パネルのアクションが「スクロール先」になっていることを確認します。 スクロールする位置をオブジェクトからずらしたい場合は、オブジェクトの上に表示されている青いバーをずらすか、右のパネルにある「Y-オフセット」にオブジェクトからの距離を入力します。 こんな感じで、あっという間にアンカーリンクを設定できました。 別のアートボードのオブジェクトへはリンクできない

    【Adobe XD】ついにきた!アンカーリンクが実装されたので使ってみる | バシャログ。
  • 間違いやすいHTML5の要素を再確認 | バシャログ。

    こんにちは。koyaです。 突然ですが、龍が如く7はプレイしましたか? 今まで龍が如くシリーズをプレイしたことはありませんでしたが、物語の舞台が関内、伊勢佐木町だったため思わず買ってしまいました。 見覚えのある景色を走り回るのはプレイしてて楽しかったです。横浜にゆかりのある方には是非触って欲しいです。 さて、今回はタイトルの通りよく間違いを見かけるHTML5の要素についてまとめたいと思います。 僕もマークアップを始めた頃は<section>と<article>の違いなどがさっぱりだったので、初心者の方など参考にしていただければと思います。 section要素 article要素 div要素 ul、ol要素 section要素 section要素は文脈のセクション分けをするためのタグです。で言うと目次のようなものですね。 文脈を分けるためのものなので、見出し要素(h1〜h6)が要素内に必ず

    間違いやすいHTML5の要素を再確認 | バシャログ。
  • 【WordPress】カスタムフィールドの更新時間について | バシャログ。

    バシャログ。アドベントカレンダー3日目、yamashitaがお届けします。 今回は技術記事とオススメしたいものの企画記事、どちらか順番は自由に二つの記事を書くことになってますが、技術記事から書きたいと思います。 前回はおかしなテンションで書いた結果、社内で正気かと疑われたので様子を見たいと思います。 ちなみに前回紹介した時屋はコンセプト毎に店舗を拡大してるので皆様是非べてください。 さて、この記事ではWordPressのカスタムフィールドを含めた投稿の更新時間を取得する方法を考えたいと思います。 流れは以下の通りです。 なぜ取得する必要がある? カスタムフィールドの更新時間を保存する方法 カスタムフィールドの更新時間を取得する方法 まとめ なぜ取得する必要がある? 経緯としては、投稿を管理画面以外からも更新するシステムを作っていました。 その際に投稿体を更新せずにカスタムフィールドのみ

    【WordPress】カスタムフィールドの更新時間について | バシャログ。
  • 【WordPress】WordPress5.3での変更点まとめ | バシャログ。

    こんにちは。koyaです。 先日スノーボード友達と久しぶりに会ってきたのですが、まだまだ雪が降る気配がなくてシーズンインがどうなるのか気になっています。スキー場のライブカメラから目が離せません。 今回はWordPressのアップデートがあったのでエディタ周りの変更点をまとめます。 公式テーマに「Twenty Twenty」が追加 待望のブロックエディター対応公式テーマが追加されました! エディター画面で公開後のスタイルを確認することができるんで、WordPressを触ったことがない人でも簡単に記事を書くことができます。 今までの公式テーマは白色基調でした。参考に以下が今までのテーマです。 「Twenty Sixteen」 「Twenty Seventeen」 「Twenty Nineteen」 今回のテーマは#BD3854を使った落ち着いた色合いのテーマです。今まで白で統一されていたのでブ

    【WordPress】WordPress5.3での変更点まとめ | バシャログ。
  • http://bashalog.c-brains.jp/19/11/12-152006.php

  • 【WordPress】is_xxxx()という関数は用法用量を守って使いましょう。 | バシャログ。

    皆様ご無沙汰しております。yamashitaです。 今回はWordPressの関数を使うにあたって、気を付ける点を書こうと思います。 開発時に使ってみたら全然動かなくてパニックになったので調べてみました。 主な関数はis_page(),is_single(),is_archive(),is_attachement()など、表示するページの種類を判定する関数です。 おそらくこのファイルにある関数が主な対象です。 https://github.com/WordPress/WordPress/blob/master/wp-includes/query.php どういう風に失敗したのか。 カスタム投稿を含めた特定の投稿やアーカイブ、一部のユーザーからのアクセスが出来ないようにしたかったのですが、 functions.phpに以下のような記述をしました。 if(is_post_type_archiv

    【WordPress】is_xxxx()という関数は用法用量を守って使いましょう。 | バシャログ。