WordPressテーマ「Responsive」のトップページの表示設定方法 | SSC
トップ > ブログ > Web制作 > WordPress > WordPressテーマ「Responsive」のトップページの表示設定方法｜SSCのホームページ制作・集客スクールブログ こんにちは、岡部です。 SSCのホームページ制作・集客スクールで私が担当している、「WordPress講座」でお教えする内容の一部をご紹介。 今日は弊社Webサイトで使用している、WordPressのテーマ「Responsive」について。 先月末、弊社Webサイトをリニューアルするにあたって、手を抜くため一から作り直す時間が取れなかったので、WordPressのテーマをベースに制作することにしました。 「レスポンシブ」 SEO的に。 「公式に配布されている」 安心、安全。野良テーマ怖い。 「会社っぽい」 一応会社のWebサイトなので、ね。 を条件に、使えそうなテーマを捜索することに。 レスポンシブなだけ
text-indentで文字を非表示にする | IT工房｜AI入門とWeb開発
h1要素などの背景にcssで画像を指定してh1のテキストを隠すための手法としてtext-indentが使われます。 かつて多く取られた方法は−9999pxの位置まで飛ばす方法でしたが、パフォーマンスの問題やサーチエンジン対策としてダークな部分が残るなどの問題がありました。 text-indent: -9999pxサンプル HTMLコード <h1>美しい日本語</h1> CSSコード h1{ width:200px; height:100px; background:url(logo.png) no-repeat; text-indent: -9999px; } 考え方は同じようなものですが、どこか遠くへ飛ばすのではなく、 text-indent: 100%としてぎりぎり見えなくしています。 さらに、そのままでは行が折り返されてしまいますので、white-space: nowrapで折り返し
wordpress、fanctions.phpとプラグインの使い分けについて考える
wordpressを使っていて、一番助かるのがその豊富なプラグインの量だったりします。 ちょっとした機能を追加したいとき、調べてみるとこんなこともできるプラグインがあるんだと、驚かされることしばし。 ただプラグインに頼り過ぎると、だんだんプラグインの数が多くなってきてしまって、管理とかセキュリティ、サーバー負荷などが気になるところです。 複雑な機能を追加できるプラグインは仕方がないとしても、簡単な機能追加のプラグインに関しては fanctions.php を使えば住む部分も多そうですので、そのあたりはなるべく fanctions.php に追加してゆきたいところ。 ただ、 fanctions.php に書いてしまうと、テーマを変更した時に機能追加するのを忘れてしまうこともママある話。 たとえば googleアナリティクスの追加コード。 このブログもテーマを変更する際、まあ fanction
レスポンシブWebデザインのWordPressテーマを作成するときに参考になるサイト - Naifix
レスポンシブデザインのテーマを作成するにあたって、多くのサイトを参考にしました。備忘録として参考サイトをご紹介します。 基本を学べるサイト レスポンシブ Web デザインの基本を学べるサイトがこちら。 レスポンシブWebデザインとは 「枝豆隊」というサイトを作成する過程を見ながら基本を学べます。HTML5＋レスポンシブデザインの概要がつかめるので、これから始める方におすすめです。 この企画は書籍化されており、動画像の対応やパフォーマンス改善など、より詳しい情報が盛り込まれています。 「枝豆隊」サンプル HTML をベースに、骨格が完成すると思います。 CSS3 を学べるサイト 骨組みができたあとは、スマホ閲覧時のデザインから始めます。 上記の「枝豆隊」のサンプルをベースに、リファレンスで調べながらデザインしていくのがよいと思います。 スタイルシートリファレンス（目的別） レスポンシブデザイ
【完全版】Font Awesomeの使い方 | アイコンをWebフォントで表示
※こちらの記事は「Font Awesome」のバージョン4.0.3をもとに書かれています。バージョンアップにより内容が変更されている場合もありますので、その際は公式サイトを確認してください。 目次「Font Awesome」とは「Font Awesome」の初期設定「Font Awesome」の使い方①「font-awesome.min.css」を参照②アイコンフォントの確認③アイコンフォントを表示④サイズ設定⑤色設定⑥リスト設定⑦同じ幅に設定⑧回転アニメーション設定⑨角度設定⑩反転設定⑪ボーダー設定⑫回り込み設定⑬複数のアイコンを重ねて表示独自でアイコンフォントのクラスを設定する方法アイコンフォントギャラリーまとめ 「Font Awesome」とは「Font Awesome」とは、Web上でよく利用されるアイコンを画像ではなく文字として表示できるフォントセットにしたものです。利用頻度の高
バナナのBloggerカスタマイズ日記: 【CSS】DIV要素全体にリンクを効かせる方法
DIV要素全体にリンクを効かせたい！！ これには主に以下2つのパターンがあると思いますので、今回はこの2つの方法を紹介していきます。 DIV要素内がリンクタグのみ DIV要素内にテキストや画像などリンクタグ以外の要素も存在する場合 1・DIV要素内がリンクタグのみ これは簡単です。 a要素をwidthでリンクの横幅を広げ、displayでブロック要素にするだけです。 HTML <div class="sam13"><a href="">テスト</a></div> CSS .sam13 a { display:block; width: 100%; /* 横幅 */ background-color:#B2DBBF; border:2px solid #00171F; padding:10px; /* a要素内の余白 */ } /* 以下マウスを載せたときのスタイル */ .sam13 a:
楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips
このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つか書いておきます。 Font Awesome, the iconic font designed for Bootstrap ※ なお、本エントリーはバージョン4.0.3をもとに書いているため、バージョンアップによって、掲載しているコードも変わっている可能性があります。利用前に、使うバージョンとそのスタイルを確認してから使うことをオススメします。 Font Awesome とは？Font Awesome は サイト上で使われるようなさまざまなアイコンを Webフォント として利用できるようにしたものです。フォントとして利用できるため、サイズや色などすべて CSS で調整して利用することができ
YouTubeなどのiframe埋め込み動画をレスポンシブにする方法
YouTubeなどのiframeで埋め込む動画をレスポンシブに対応させる方法を紹介します。 以前、「たった1行追加するだけでYouTubeの埋め込み動画をレスポンシブに対応させる方法」という非常に簡単な方法を紹介しましたが、あくまで簡易的な対応方法なので、横幅が小さくなるにつれて高さが間延びしてしまいます。 今回は、高さもしっかりとレスポンシブに対応する方法を紹介したいと思います。 ステップ1. 埋め込みコードにクラスを付与する まずは、埋め込みコードにクラスを付与してあげます。 通常は、以下のような埋め込みコードになっているかと思います。 <iframe width="560" height="315" src="//www.youtube.com/embed/vyGiIZkPjiI" frameborder="0" allowfullscreen></iframe> これをdiv要素で
たった1行追加するだけでYouTubeの埋め込み動画をレスポンシブに対応させる方法
ブログに YouTube の動画を埋め込んでいる人は多いと思います。また、最近ではサイトにレスポンシブデザインを採用している人も多いと思います。WordPress でもレスポンシブに対応したテーマが多くリリースされていますね。 レスポンシブデザインのブログに YouTube 動画を埋め込むと、スマートフォンでサイトを見た時に動画が画面からはみ出てしまうことがあります。 埋め込みコードを使って YouTube の動画を埋め込んだ場合、iframe を使って動画を表示します。この iframe の幅が 560px などに指定されているためスマートフォンで表示した時に画面からはみ出してしまうのです。 そんな YouTube 動画をレスポンシブに対応させる方法として、div などで動画のコードを囲って CSS クラスを付与して調整する方法がよく紹介されていますが、毎回 HTML ソースを書き換える
ファビコンとは？ 初心者でもできるファビコンの作り方
近年ではWebサイトを閲覧する環境の多様化により、ファビコンの準備も煩雑になってきました。この記事では、ファビコンの簡単な作成・設置方法を解説しています。 ファビコンとは、Webサイトを表示したときに、ブラウザのアドレスバーの横やタブの横に表示されるアイコンのことです。 上記以外にも、サイトをブックマークに登録すると、一覧でサイト名の横にも表示されます。この時、ファビコンを設置してあるサイトとそうでないサイトでは、ファビコンがよく目立って見つけやすくなるので再度アクセスしやすくなるのではないでしょうか。 また、昔はブラウザ上・デスクトップ上で表示するだけでしたが、最近ではスマートフォンのホーム画面などのショートカットとしても表示するようになっています。 （※正確にいうとこのアイコンはウェブクリップアイコンと呼ばれます）このように様々なところでファビコンを表示することができますが、その分ユー
様々なファビコンを一括生成
favicon.ico,apple-touch-iconなど様々なブラウザやデバイスに対応したファビコンをまとめて生成。 使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。 favicon.ico、icon*.png、android-chrome*.png、apple-touch-icon*.png、site-tile*、manifest.jsonを一括生成します。 エラーログに余計な404 not foundを記録させない対策としても有効。PWAのアイコン作成にも。 <meta name="msapplication-square70x70logo" content="/site-tile-70x70.png"> <meta name="msapplication-square150x150logo" content="/site-tile-150x150.png"> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
eky.hk
Loading...