ブログの記事一覧

【CSS】paddingとmarginの使い分け

CSSを学んでいる中で必ずといって良いほどに使うのが余白の取り方ですよね! HEMLを制作する上で、CSSでの余白の作り方には2種類あります。 paddingmargin では、この2つの違いをおさらいしてみたいと思います。 ボックスモデルを理解する まず一番最初に理解しなければならないのがこのボックスモデルという形です。これを理解してしまえば、もう使い分けは簡単で...

続きをみる

【CSS】ブロック要素の縦横高さ中央揃え

ホームページで欠かせない、ボタンなどで文字を中央に寄せて高さも中央に揃えたいってことありますよね? 横の中央寄せは簡単なんですが、高さが真ん中にこないなどうまくいかないことってありますよね。 そんな解決策を簡単に出来る方法をお伝えしたいと思います ブロック要素のセンタリング こんなボタンのようなHTMLはよく作ると思いますが <div cla...

続きをみる

メインビジュアルのテキストをお洒落なアニメーションにしたい【JQuery】

お疲れ様です!サイトを運営する時にお客様からなんか見た目をカッコよくしたいって言われた事ありませんか? そんな時に私は重要なメインビジュアルにアニメーションを付与したりします。 ちょっとしたカスタマイズでお客様に喜んで頂けるので非常に好きな仕様です さて、今回はそんなテキストをふわっと浮かび上がらせたり、横からビュンって出てきたり色々できるJQueryを使ったやり方を解説したい...

続きをみる

【0から学ぶWordPress】投稿タイプのカテゴリ、タグ取得表示する

固定ページやトップページに記事の一覧を何件で表示したい!そんなカスタマイズはもはや標準だと思いますが、ここではそんなカスタマイズ方法をを解説したいと思います。 今回の取得して、出力する部分はこちらになります 投稿タイプのカテゴリー・タグを取得して出力 タイトルのように、こちらは最初からWordpressに実装されている「投稿」の記事になりますので、別途作ったカスタム投稿では出力...

続きをみる

ファビコン(favicon)の作成方法と設定方法について

ファビコン(favicon)とは、Webブラウザで新規タブでサイトを開いたときにタブにタイトルの左側に表示される画像のことです。 その他にWebページをブックマークした際に表示される画像などをいいます。 2019年5月には、Googleの仕様が変わり、ユーザーの検索結果画面にも表示されるようになりました。そんなファビコン(favicon)の概要や表示される場所・作成方法・作成ツール・...

続きをみる

【0から学ぶWordPress】サイドバー(ウィジェット)の複製で内容を変える

ページ毎にサイド(ウィジェット)に表示したい内容を変えたい事ないですか? 私は上は固定で下をスクロールしたらついてくるみたいな仕組みにしたかったのでそれには複製が良いかなって思いまして追加したので解説致します。 新たにウィジェットを増やそう 1つ目の新規のウィジェットの作り方は別記事で公開しております。 [related id=132 label=ウィジェットの有効化] ...

続きをみる

【0から学ぶWordPress】プラグインなしでSNSシェアボタンを自作する

まいど!今からWordpressでホームページを制作したい、勉強したいって方と共に成長できるように記事を連投しております。 大阪でホームページをサブスク運用でご提供してます株式会社ディー・オー・エス ドスブイサポートでございます! 本日は加速し続けるSNSへの拡散を目的としたボタンを生成したいと思います 記事をSNSでシェアしてもらうボタンを自作する意味 プラグインを使え...

続きをみる

figureタグ・figcaptionタグの意味

まいど!いつもご覧頂いて有難うございます。大阪でサブスク運用のホームページ制作を行っているドスブイサポートです。 HTML5から使用可能となったfigureタグですが、SEO対策にもなる有能なタグです。 figureタグやfigcaptionタグを使ってより分かりやすいWebサイト制作を目指しましょう。 今回は、figureタグとfigcaptionの解説を行いたいと思います。...

続きをみる

【ECCUBE4】各リンクのテンプレートタグ

まいど!大阪で話題のサブスク運用でホームページ制作をしている株式会社ディー・オー・エスのドスブイサポートです ECCUBEでページやブロックでHTMLを書いている時にリンクを取得するテンプレートタグはこちらになります TOPページ  {{ url('homepage') }}商品一覧  {{ url('product_list') }}商品詳細  {{ url('product_de...

続きをみる

【CSS】a:hoverで画像を半透明に白くするリンク

まいど!大阪で話題のサブスク運用でホームページ制作をしている株式会社ディー・オー・エスのドスブイサポートです 今日は画像にマウスカーソルを乗せた時にこれはリンクですよーって表現するCSSを説明させて頂きたいと思います a:hoverでCSSを指定している このレベルなら皆さんご存じかと思いますがaリンクがhoverで乗せた時にどうするかって事ですよね HTML &l...

続きをみる