フキダシで会話形式にするWordpressプラグイン「LIQUID SPEECH BALLOON」 | WordPressやWebデザインなど紹介 Ocadweb
最近良く見かけるようになったフキダシを使った会話形式の記事。 アイコンからフキダシ（吹き出し）にテキストを入力し、インタビューや会話形式で表示することができます。 以前、紹介したGutenberg対応のフキダシ（吹き出し）が簡単にできるWordpressプラグイン「LIQUID SPEECH BALLOON 」を紹介したいと思います。 WordPressプラグイン「LIQUID SPEECH BALLOON」 フキダシで会話形式にするWordpressプラグイン「LIQUID SPEECH BALLOON 」とは？ WordPressプラグイン「LIQUID SPEECH BALLOON 」ってどんなプラグインなの？ こんな感じに会話しているように表示できるWordPressプラグインだよ。 他の似たプラグインとどう違うの？ このフキダシ（吹き出し）が簡単にできるWordpressプラグイ
これからのコーディングは再利用と効率化だ！話題のPugを使ってみた | カルアカはWebが無料で学べる
こんにちは、リードスペースです。 数年前にsassに出会い、タスクランナーを走らせてコーディングするようになり、めちゃめちゃ作業が早くなりました。Emmetの出現にも目からウロコが出るほど驚き日々技術の進化に感動してます。 そしてまたまた便利なものを見つけちゃいました！！！ Pug（旧:Jade）です（犬ではない）。 最近このPugを使ってhtmlを書いてすごーく感動したので、使い方をまとめようと思います。 公式サイトはこちら Pug公式サイト 内容が長いのでお品書きを参考にして、さっさとテンプレート作りたい人はすっ飛ばして読んでください。 目次 Pugってなんぞ？ Pugを始めるために用意するもの Node.jsをインストール Pugをインストール 最初の一歩、index.pugをhtmlにコンパイル Pug基本の記述方法 コメント divは省略できる 属性の追加 ネスト 改行、span
Pug(Jade)記法でHTMLのテンプレート的なの - Qiita
2017/06/23追記 今更ですが、本記事のサンプルコードをあげました soarflat-prototype/pug-template サンプルコードは以下の点で記事内容と異なります。 拡張子がpug mixinを利用する必要がなかったため利用していない 現在のバージョンだと"http://#{metas.url}"のような"#{}"がサポートされていないため修正 はじめに Pugの勉強のためにHTMLのテンプレート的なのをJadeで書きました。 Pugで書くとこうなる もとのHTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" conte
【第3弾】少しのコードで実装可能な15のCSS小技集
2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ 目次 スムーズスクロール スクロールスナップ スクロールすると要素を固定 画像をトリミング CSSで計算式を書く テキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避する テキストに波線を引く テキストの上に記号を表示 表のセルの幅を統一する 入れ子になったリストもカウントする フォームのプレースホルダーの文字色を変更 しましまのライン メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応 アコーディオン HTML・CSSの全コード
脱初心者！Sass記法の入門 | Web Design Trends
Sassというキーワードは知っていても、まだSassを使ってCSSを記述できていない方も多いのではないでしょうか。Sassは一昔前にブームが来て、今はあまりホットではないと思っている人が多いかもしれませんが、Web制作会社のほとんどがSassを使ってスタイルの記述を行っています。 一度導入して使い方を覚えてしまえば、もうCSSでの記述に戻れないくらい作業効率が改善されます。そこで、今回はSassをまだ導入していない人に向けて、Sassの概要、導入方法、メリット、特徴的な機能についてご紹介していきたいと思います。 Sassとは Sassとは、「Syntactically Awesome Stylesheets」の略称で、「構造的にイケてるスタイルシート」と意味です。その名の通り、SassはCSSをより構造的に整理して記述することができる、CSSの「メタ言語」です。 CSSの文法はとてもシンプ
これからはcssはSassで書こう。 - Qiita
Sassってなんだろう。 ・Sass「Syntactically Awesome StyleSheet」 Syntactically ＝ 構文的に Awesome ＝ イケてる StyleSheet ＝ スタイルシート とどのつまり、すごいCSSということでしょうか。ロゴもかっこいい。 詳しく調べてみた ・CSSを拡張したメタ言語 メタ言語とは「ある言語について何らかの記述をするための言語」のこと。 つまりSassの場合は「CSSに対して機能を拡張した言語」ということになります。 CSSをより効率的に書けるようにした言語ということになります。 ・Sass はプログラムっぽく CSS を書く プログラムっぽく書くことでコーディング効率やソースコードの保守性が上がる。 Sassは、関数や変数の処理を行うために「プリプロセッサー」と呼ばれたりもするみたいです。 Sassには書き方が2種類ある！
SEOにおけるアノテーションとは？サンプルコードと共にミスした際の影響についても解説
Webサイトを検索エンジンに正しく理解してもらうためには、適切なアノテーションの設定が欠かせません。canonicalやhreflangタグなどのアノテーションタグを使わないと、検索エンジンはサイトの構造を正確に把握できず、重複コンテンツの誤認識やキーワード関連性の低下、多言語対応の失敗などSEO上の問題が発生してしまう可能性があります。特に、デバイス別にURLを設けているサイトやグローバルに展開をしている多言語サイトでは、アノテーションタグの設定が重要です。 本記事では、アノテーションタグの具体的な設定方法から、設定後の確認ポイントまでを、サイト構造別のケースごとにわかりやすく解説します。 アノテーションとは？ そもそもアノテーションとは、「注釈」や「注記」を意味する言葉です。AIやJAVA、YouTubeなどさまざまな分野で使われる用語ですが、SEO（検索エンジン最適化）の分野でも使わ
PCページとスマホページの最適化について｜
パソコンとスマートフォン、１つのホームページを２つの端末に向けて作成する必要性についてのコラムです。 PCページとスマホページのURLが異なるデメリット たとえばPCユーザー向けのwww.example.comというページに対応して、スマートフォンユーザー向けのwww.m.example.comというページがあったとします。URLやデザインが異なるだけで内容的にはまったく同じサイトです。しかし、グーグルではクローラーで自動的に検知していることから、何も対策をしないでいる場合、両者は別々のサイトとして認識される可能性があります。 PC用URLに40人、スマホ用URLに60人がアクセスした場合、本来ならば合計100人のユーザーがサイトを訪れたことになります。しかし、別々のサイトと認識されている場合はアクセス数も分散されてしまうため、結果的にサイトの価値も下がってしまうのです。 またクローラーに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/20160326pugbegin