僕のWordPressブログで効果を出している+αなカスタマイズ
ブログをやり始めて、見て貰えるようになるには 時間と努力、そしてチャンスが必要です。 チャンスというのはインフルエンサーのツイートだったり、Gunosyやはてブのエントリー入りなどいつ訪れるかわからないのですが、とにかくそう何度も訪れるものではありません。そういう時の為に準備は万全にしておかないとせっかくのチャンスを一時のアクセスで終わらせてしまう事になります。 photo credit: merwing✿little dear via photopin cc スポンサーリンク TwitterのフォロワーやFacebookのファンを 増やす真面目な仕組み作り インチキなフォロワーを購入したり相互リンクで無意味なフォロワーやファンを増やすというものではありません。 現在は、情報が次から次へと流れ、また各サービスがブログを見易いデザインで見せる為、正直読んでいるブログが誰のどんなブログかわから
レスポンシブ対応でPCとスマホで違う画像を使う
先日、こそこそと作ってたAndroid向けの電卓アプリ「LateCalc」をリリースしました。ボクは企画設計、デザイン辺りを担当してます。 LateCalc（電卓） - Google Play の Android アプリ なんで、電卓！？とか色々有りますが、まだ実装したい機能とかが全然実装出来てないので、その辺の紹介はある程度機能が実装された頃に書きたいと思ってます。はい。 さて、今回は久々にCSS関連なエントリーです。 ここ数年、レスポンシブ対応な案件が増えていると思われますが、実際にコーディングしていると色々有りますよね... そんな中でも、画像周りは何かと厄介だったりすると思うので、今回は、PCで見た時とスマホとか（640px以下）で見た時に、違う画像を使いたい場合に使えそうなTipsです。 レスポンシブなんだからPCとスマホで違う画像を使うとかしないで、おとなしく縮小しただけの画像
WordPressをカスタマイズする前に子テーマを作っておく | WPnavi
子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選んで使用していらっしゃると思います。 テーマを初期状態のまま使うのももちろんアリ。 ですが、WordPressに慣れていくにつれて もっとこうしたいのにな～っていう要求は膨らむもの。 そんな時「カスタマイズしてみようかな？」と思い立ちます。 カスタマイズ方法を検索で調べると 「CSSファイル」がどうとか「PHPファイル」がどうとかって 丁寧に説明されているサイトはたくさんあります。 でも、その説明を見てそのままカスタマイズに踏み入ると おそらく「管理画面」→「外観」→「テーマの編集」から 直接テーマファイルを触ることになると思うんですね。 この方法が悪いとは言いませんが、 もしもテーマがバージョンアップされて その都度新しいテーマファイルをインストールし直すとしたら せっかくカスタマイズしたファイ
Head Cleaner の最も理想的な設定方法
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. Head Cleaner は、WordPressのそれぞれのページを構成するソースを最適化して、サイト表示速度の向上に寄与してくれるプラグインだ。 特に、サイトのソースの中でも容量の大きい以下の２つをコンパクトにしてくれる。 CSS：デザインやレイアウトを指定する言語JavaScript：画像にカーソルを合わせると自動的に拡大させたり、アニメーションを取り入れる時などに使うプログラムそれでは、 Head Cleaner の設定方法をご紹介していこう。
リンクの http: や https: を省略して現在のプロトコルでリンク先にアクセスさせる - Qiita
<a>タグのhrefなどで指定するURIは、http:やhttps:を省略できます。 具体的には、 と書けます。 省略することで、遷移元のページを httpで開いているときはhttpでアクセスさせられます。 httpsで開いているときはhttpsでアクセスさせることができます。 <a>以外にも<script>, <iframe>, <link>などURI全般でこの書き方を使えます。CSSでも使えます。 メリット httpsで開くページの中にhttpのリンクが混在することを予防できます。 逆に混在すると中間者攻撃を受ける可能性がありますが、それを防ぐことができます。 中間者攻撃を受ける理由は、おおざっぱにいってこうなっています： 1. ユーザがhttpsを使って、あるページにアクセス 2. そのページにhttpへのリンクが混在していると、httpなアクセスが飛ぶ 3. 攻撃者がhttpコンテ
レスポンシブのテーブルをcssで作ってみた（2列のみ）STINGER5対応
主婦があれこれ日常のことや趣味のサイト作成のことなどを節操なく書き綴っているブログの運営です。また、一歳半になる娘のお世話も重要な仕事であります。 PCでの表示 PCではおなじみの表示です。 スマホでの表示 スマホではこのように1列になり、幅の狭い画面でも見やすくしました。 HTML部分 <div class="res-table"> <table> <tr> <th>左側1</th> <td>右側-1</td> </tr> <tr> <th>左側2</th> <td>右側-2</td> </tr> <tr> <th>左側3</th> <td>右側-3</td> </tr> </table> </div> css部分 /*-------------------------------------- スマホでの表示 --------------------------------------
【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About
レスポンシブWebデザインとは、画面サイズなどの閲覧環境に応じてWebページのレイアウトや装飾が自動調整される作り方のことです。記事「レスポンシブWebデザインの簡単な作り方」でも解説しました。特に、画像サイズを画面幅に自動で合わせる方法は、Webサイトのスマートフォン対応目的でも需要が高いでしょう。 例えば、下図のWebページをご覧下さい。ページ上部に見える大きなバナー画像の表示サイズは、ブラウザのウインドウサイズをある程度小さくすると、描画領域の横幅に合わせて自動的に縮小されるデザインになっています。 今回はこのような、画面サイズ（ブラウザのウインドウの横幅サイズ）に合わせて、縦横比率を維持したまま画像の表示サイズを変化させる方法をご紹介いたします。レスポンシブWebデザインを採用したページではもちろん、そうでない場合でも、画面サイズに合わせて画像サイズを自動で拡大縮小させたい様々な場
![【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/1d9230bd03ef83fbdd879610f125c72468e6b161/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F0%2F6%2F3%2F0%2F1640285675%2Ftopimg_original.jpeg)
画像上の自由な位置に文字を重ねる方法 [ホームページ作成] All About
画像の上に文字や入力フォームなどを重ねて表示させたいと思ったことはありませんか？ 例えば、図のような画像の看板部分にぴったり合うように文字を表示したい場合などです。 画像の上に重ねて文字を表示したい場合でも、1枚の画像を細かく分割して掲載したり、table要素を駆使したりする必要はありません。CSS(スタイルシート)を使えば、1ピクセル単位で表示位置を微調整して、簡単に画像の上に文字を重ねることができます。 今回は、ウェブページ上に掲載した画像の上に、文字や入力フォームなどの任意のオブジェクトを重ね合わせて表示する方法をご紹介いたします。HTML＋CSSだけの簡単な方法です。 画像の上に文字やオブジェクトを重ねる例 今回ご紹介する方法を使えば、以下のような重ね合わせ表示が作れます。ここでは例として、画像の上に文章を重ねたり、画像の上に選択フォームを重ねたり、画像の上に枠付きのキャプションを
![画像上の自由な位置に文字を重ねる方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d97a100a80e7a4fa04379e2a233bf79e392b360/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F2%2F4%2Ftopimg_large.png)
コピペでOK！「Contact Form 7」を使ったかっこいいお問い合わせフォームテンプレート集 – ワードプレステーマTCD
すでに購入意欲を持ったユーザーが、入力フォームが使いづらいがために購入をやめてしまうこともあります。サイトへの流入はあるのに成果が上がらない、フォームPV数とコンバージョン数に差がある。そんな時には入力フォームを見直すべきかもしれません。 今回は「Contact Form 7」で使用できるコンタクトフォームのテンプレート集を作成しました。ぜひTCDテーマと合わせてご活用ください。 ※テーマのカスタマイズはあくまで個人の責任の範囲でお願いします。万が一カスタマイズによって不具合が生じましても弊社及び弊サイトでは責任を負いかねます。カスタマイズの際は必ずバックアップをご用意の上、行ってください。 ContactForm7の導入の仕方はこちらをご覧ください。 お問い合わせフォームプラグイン「Contact Form 7」カスタマイズまとめ テンプレート集 下記のそれぞれの用途に適するお問い合わせ
【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法
GoogleMapはほとんどのサイトに設置してあって、スマートフォンからでも簡単に見れて分かりやすい。 埋め込みはiframeを使うのでレスポンシブに適用させるためにはレスポンシブ用のCSSが必要です。 新しいGoogleMapを埋め込んでみよう！ トップページにいって、表示したい住所を打ち込み、右下の「地図を共有/埋め込む」をクリック 「地図を埋め込む」のタブをクリックして、iframeコードをコピーしてサイトの表示したい場所に埋め込むだけ GoogleMapをレスポンシブサイトに対応させてみよう！ まずdivでiframeを囲みます。 HTML <div class="ggmap">iframeのコピーしたコード</div> CSS .ggmap { position: relative; padding-bottom: 56.25%; padding-top: 30px; heigh
iPhone/iPad/iPad mini用メディアクエリ一覧 | ENTEREAL/エンタリアル
Blog Posts List ブログ記事一覧 検索 CakePHP3を始めた方に CakePHP 3.X 2016年01月16日(土) 14時23分 2つの住所から距離を計算する API 2015年12月18日(金) 10時23分 「:target」セレクタについて CSS 2015年12月12日(土) 12時23分 外部サイトからの画像への直リンクを防ぐ Apache 2015年12月04日(金) 12時23分 CSS3だけで作るブラウザタブ CSS 2015年11月17日(火) 21時23分 CSS3だけで作るパンくずに関する件 CSS 2015年11月12日(木) 12時23分 Bootstrap4のブレイクポイント計算機 Bootstrap 2015年11月11日(水) 19時23分 Bootstrap4のブレイクポイントに関する件 Bootstrap 2015年11月11日(水
超便利！CSSグラデーション基礎と簡単に作れるジェネレーターまとめ | CodeCampus
超便利！CSSグラデーション基礎と簡単に作れるジェネレーターまとめ更新日: 2018年10月11日公開日: 2015年1月6日 ホームページデザインに彩りを添えてくれるグラデーションは、たくさんのホームページで使われていますよね。しかし、いざコードを書くとなると長くて面倒なのがこのCSSグラデーション。何種類もグラデーション用のコードを書かないといけない謎な仕様だったり、長いコードの意味がよくわからなかったり…。 そこで今回はこのグラデーション技術の基礎をご紹介していきます。簡単にグラデーション用のコードが作れるジェネレーターもご紹介するのでお見逃しなく！ グラデーションコードの基礎 色の移り変わりがとても綺麗なグラデーションですが、CSSでグラデーションを表現するには、linear-gradient()関数を使います。linear-gradient()関数は線型のグラデーションを表現して
BizVektorカスタマイズ講座（デザイン設定からCSSカスタマイズまで） - 西沢直木のIT講座
デザイン修正に必要なCSSをその場で作成！ CSSを使えばデザインを微調整できます BizVektorでは「外観」‐「テーマオプション」メニューでデザインを設定できるとはいえ、メニューで設定できない細かいデザインを修正したいこともあります。 たとえば、画面の最上部のロゴ画像は高さ60pxで表示されます。 ヘッダーのロゴは高さ60pxで表示される この表示サイズはメニューからは変更できませんがCSSを記述すればもう少し大きく表示することもできます。 CSSを調整すればロゴの表示サイズも設定できる 他にも 見出しの上下の余白を狭くしたい サイドバーを広げたい グローバルメニューの文字サイズを大きくしたい 「詳しくはこちら」ボタンを消したい フッターの色を変えたい MTS Simple Booking Cのカレンダーの表示を直したい テーブル（表組み）の幅を変更したい 枠線の太さ・色・表示／非表
あたりまえのレスポンシブWebデザイン（基本理解集） - メヘンニミン
Webやりたいぜー向けのお話です． 重要性とか Webはもう，大画面デスクトップPCで悠々と見るためだけのものではない・・・ という“世はスマホ・タブレット時代”の話はよく聞きます．仕事の休憩に／電車の中で／歩きながら／家のベットで行えるネットサーフィンの海は，とっくに机上からはみ出した大洋規模と化していたのです． スマホでのウェブサイト閲覧頻度はPCの約2倍ーリビジェン調査 ｜ 「マイナビウーマン」 2014年最新スマートフォン市場動向 〜 世界出荷ベースでスマホは13億台、PCの3倍を超える [in the looop] さらにいえば，巨大化を進めるiPhoneに，サイズがバラバラなAndroid端末．OSも画面幅も異なる様々な端末があちらこちらで動作する現況を見てみますと，どんな環境にも素敵なデザインで応戦する“世はレスポンシブデザイン時代”という導入もわかってもらえると思います．
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodePen Search
Form Designs - a Collection by Team CodePen on CodePen
CSS Arrow Please - By Simon Hoejberg - @shojberg
コウノヒデヒロ ウェブ
Ultimate CSS Gradient Generator from ColorZilla
Grad3
