WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など
WordPress既存テーマをカスタマイズするなら子テーマを使うべきと思います。 これは、Wordpress codexにある子テーマの項目でも推奨されています。 ただ、Wordpressを使い始めたばかりの時に「子テーマ」「親テーマ」と言われても、「何だそれ？」とか、「そもそもテーマ自体にカスタマイズしたらなんでだめなの？」とも思うかもしれません。 僕も、テーマ配布サイトでカスタマイズ用に子テーマを配布してはいるものの、そういったことについては詳しく説明していませんでした。 なので、一度それについて書いておこうと、今回はWordpressの子テーマについて書きたいと思います。 photo by Alexander Gounder 子テーマとは そもそも子テーマとは、既存のWordpressテーマのカスタマイズ専用のテーマです。 既存のWordpressテーマは、「親テーマ」とも呼ばれ、テ
リロード不要！Sublime TextでCSS変更を即座にChromeに反映させる方法
LiveStyleパッケージをインストールするには、メインメニューから「Preferences（基本設定）→Package Control（パッケージコントロール）」を選択してください。 パッケージコントロールが表示されるので、「Install Package」を選択してください。 入力欄に「LiveStyle」と入力したら、LiveStyleパッケージがインクリメンタル検索されて表示されるのでクリックしてインストールします。 Sublime Text側の設定はこれで完了です。 ChromeにLiveStyle拡張をインストール 次に、ChromeブラウザにEmmet LiveStyle拡張をインストールします。 拡張が追加されれば、Chromeでのインストール作業は終了です。 Sublime TextでCSSファイルを開く ChromeでEmmet LiveStyleの設定を行う前に、S
WordPressをhttpからhttpsにSSL化した全手順まとめ（エックスサーバー環境）
事前にデータベースのバックアップをとる まずは、事前にデータベースのバックアップをとっておきます。 これは、何かしら作業に手違いがあった場合でも、作業前の状態に復元できるようにしておく保険的なものです。 データベースのバックアップには、WordpressプラグインのBackWPupを利用します。 データベースのバックアップを手っ取り早く行うには、プラグインのインストール・有効化後、Wordpress管理メニューの「BackWPup → Dashboard（ダッシュボード）」メニューを選択します。 ダッシュボード画面が表示されたら、「One click backup」項目の「Download database backup」をクリックしてSQLファイルを取得してください。 すると、サイト名とデータベース名から名前が付けられた以下のようなSQLファイルがダウンロードされます。 ちなみに、これに
アドセンスで新しく出た広告ユニット「関連コンテンツユニット」の設定方法
先日、Googleアドセンスの管理画面に以下のようなメッセージが出ていました。 関連コンテンツ ユニットに広告を表示することで、収益増加を図ることができます。広告のスタイルは、おすすめ記事のコンテンツやデザインに合わせてカスタマイズされます。 とりあえず、こういったものは使ってみないとよくわからないので、早速試してみました。 関連コンテンツユニットとは 「関連コンテンツユニット」は、サイト閲覧ユーザーに関連コンテンツを表示する機能のことです。 よくブログなどに表示されている「関連記事」みたいな機能のGoogleアドセンス版みたいな感じでしょうか。 「関連コンテンツユニット」を設置すると、そのページに関連した、おすすめのコンテンツがいくつか表示されます。そして、おすすめコンテンツの一部が広告に置き換えられます。 この「関連コンテンツユニット」の素晴らしい点は、従来のアドセンス広告数上限の以下
省エネHTML入力！基本Markdown記法のチートシート
Markdown記法とは Markdown記法とは、軽量マークアップ言語のひとつです。 HTMLでマークアップを手打ちしたことがある方ならわかると思うのですが、テキストエディタでタグを打ち込むのは、結構大変ですし、慣れないうちは覚えきれない部分もあります。 ただ、Markdown記法を利用すると、覚えやすいちょっとした書き方を守ってプレーンテキストを書くだけで、HTMLを生成できるようになります。 ですので慣れてしまえば、HTMLを手入力したり、ツールなどでタグ付けなどをするよりは、早く基本的なHTML文書なら作成することができます。 Markdown記法を、ちょっとブラウザから試してみる場合は、以下のツールなどが便利です。
少しの労力でサイトをかっこよく！見出しのCSSデザインに役立つジェネレーター＆サンプル集30個まとめ
見出しジェネレーター 外観や色を選んでCSSを生成するジェネレータータイプ。 CSS見出しジェネレーター CSS見出し-ジェネレーター | WEB道 吹き出しやリボン、背景色、ボーダー色、文字色、影、ぼかしなどを選択して見出し用のCSSを生成するジェネレータ。 見出しメーカー 好きな色でCSS見出しが作れます | スタイルシート見出しメーカー 好きな色を選んでボタンを押すだけでシンプルな見出しが作れる見出しメーカー。 見出しサンプル集 見出しデザインと、HTML・CSSがセットになったデモサンプル集。 CSS見出しデザインのアイデア9個 H1一つでここまで出来るCSS見出しデザインのアイデア9個 切り取り線、テープ、リボン、吹き出し、アメリカンな吹き出し、付箋、メタルプレート、モザイク、旗、のような見出しをCSSのみで実現しています。ポイント解説などもあってわかりやすいです。 CSSのみで
WordPressグローバルナビの横並びメニューをFlexBoxで均等幅表示する方法
メニューを1列に均等幅表示する方法 グローバルナビのメニューを1列に均等幅表示するには、簡単に書くと以下のような設定を追加する形になります。（※CSSセレクタは、テーマのものに合わせてください。） #navi ul{ display: flex; /*フレキシブルボックス*/ text-align: center; /*センタリングは好みで*/ } #navi ul li{ width: 300px; /*幅は大きめに調節する*/ } テキストのセンタリングが不要ならば、ulとliにそれぞれ1つずつプロパティーを追加設定するだけで均等幅表示を実現することができます。なんて簡単。 動作確認すると、こんな感じに表示されます。 ただ、Can I use…で確認してみると、FlexBoxは、現行のモダンブラウザでは、ほぼ利用できるようですが、Safariなどは「-webkit-」のようにベンダープ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressグローバルナビゲーションのCSSカスタマイズに最適な横並びメニューサンプルまとめ