こんにちは！ WordPress大好きライターのナナミです。 WordPressでサイトを作っていると、どうしてもHTMLやCSSでは作れない動きや機能を追加したくなる時ってありませんか？ そんな時はJavaScriptの出番なのですが……
WordPressでJavaScriptを使う方法と動かない時の解決法 | 侍エンジニアブログ
こんにちは！ WordPress大好きライターのナナミです。 WordPressでサイトを作っていると、どうしてもHTMLやCSSでは作れない動きや機能を追加したくなる時ってありませんか？ そんな時はJavaScriptの出番なのですが……
WordPressの自作テーマに挑戦してみよう！ 初めてでも意外と簡単？｜ワプ活
WordPressをしばらく運用していると、「もっと自由にデザインを変更してみたい」「機能を自分好みにカスタマイズしたい」と考える人も多いと思います。 そんなときは、自分自身でWordPressテーマを自作してしまうという方法があります。 テーマを自作すれば、1から100まで自分の理想を反映させたWebサイトを作ることができます。 WordPressテーマを自作するメリットは、運営するWebサイトに合った理想のデザインや機能を搭載できるということと、あとからでも機能の追加やデザインの変更がしやすいことです。 逆にデメリットとしては、時間と手間がかかることがあげられます。 WordPressテーマの自作は意外と簡単ではあるものの、HTMLやCSS、PHPの基礎知識に加え、WordPressの構造に関する知識があるといいでしょう。 本記事では、WordPressのテーマを自作する方法を解説しま
WordPress 段落ブロックに枠線を入れる方法～CSSデザインサンプル
WordPressの段落ブロックに枠線（囲み線）を付ける方法をご紹介します。段落ブロックには、クリックだけで枠線を付与してくれるような便利機能は用意されていません。CSSなどを使って付与する必要があります。 今回は、段落ブロックの「高度な設定」機能を使って、CSSで段落ブロックに枠線を追加します。いくつかCSSのデザインサンプルを載せています。よろしければコピペしてご利用ください。 段落ブロックに枠線を付ける方法 STEP１：「高度な設定」にCSSクラスを追加する 枠線を付けたい段落ブロックを選択します。画面右側に「高度な設定」が表示されます。「追加 CSS クラス」に好みのクラス名を追加します。 今回は「waku」と付けています。 参考 ソースで見ると、段落<p>のタグが<p class="waku">に変更されます。 STEP２：スタイルシートを追加する 先ほど付けたクラス名に対するス
ブロックパターンを管理・編集できる「VK Block Patterns」
・同じブロックの組み合わせを簡単に使いまわしたい！ ・WordPressのデフォルトブロックは使いたくない！ ・自分で作ったパターンを登録したい！ Gutenberg のブロックは、HTMLやCSS を気にしなくて良い反面、同じブロックを何度も使うことに疲れてしまう、というなんとも怠惰な？感情に襲われる便利な機能です。 そこで、私が有料テーマでサブスクリプションにも関わらず愛してやまない Lightning G3 の開発元 Vektor.inc さんが開発されているプラグイン VK Block Patterns のをご説明致します！ ブロックパターンを登録する機能の名称は、各テーマによって異なります。 例えば、SWELL なら「ブログパーツ」。（Cocoonには同機能はありません） プラグインをインストールする前に、似たような機能がないか確認してみてくださいね。 この記事ではさらに、パター
TinyMCE Advanced の設定方法と使い方
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WordPressの投稿機能（ビジュアルエディタ）は、デフォルトの状態では次の操作ができない。 表の挿入、または編集YouTube 動画コードの挿入画像の回りに余白を挿入など、コンテンツの読みやすさを高めるための操作ができないと、HTMLでタグを直打ちしなければならなくなる。これでは、せっかくコンテンツマーケティングを始めたばかりの初心者には大変である。 そこで、今回ご紹介するのが「 TinyMCE Advanced 」というプラグインだ。 それでは早速、TinyMCE Advanced の設定方法と使い方をご紹介していこう。
【便利】SEO的ウェブマスター向けGoogleChromeの拡張機能でワンクリックでサイトのあれこれを調べる方法 | SEO対策に困ったときのクマだのみ
こんにちは、メディア事業部ウェブディレクターのコネル飯塚です。 WEBサイトのスタイルを調整することのできるCSSは、1つのCSSファイルだけでもデザインを作りあげることができます。 しかし、「コーポレートサイトとブログが1つのサイトにまとまっており、管理しやすいようにCSSファイルを分けておきたい」とか、「レスポンシブデザイン用のスタイルは別のファイルに書いておきたい」とか、「共通のスタイル以外は個別のCSSを読み込みたい」など、さまざまな要望があると思います。 管理上の問題、または無駄なスタイルの記述を読み込むことで、表示スピードへの影響も考えられますので、複数のCSSファイルにうまく分けておく必要もあります。 今回はWordPressで複数のCSSを追加する方法を紹介させていただきます。そしてページの種類や記事ごとに個別のCSSファイルを読み込むことも可能なので、あなたのWEBサイト
PC とスマホの表示を切り替える is_mobile と wp_is_mobile の違い - Naifix
wp_is_mobile() の使い方 wp_is_mobile() は、PC とスマホで出力を切り替えるための関数です。 基本形は以下のとおり。 <?php if ( wp_is_mobile() ) : ?> <p>スマホのみ表示されます。</p> <?php else: ?> <p>PC のみ表示されます。</p> <?php endif; ?> PC 用のメニューとスマホ用のメニューを切り替えたいときなどに使えます（PC でブラウザの幅を狭くしてもスマホ用メニューを表示したくない、という場合）。 タブレットへの対応方法 wp_is_mobile() を使うとき注意しなければならないのが、「タブレットへの対応」です。 wp_is_mobile() では、タブレットはスマホと同じ扱いとなっています。 のちのち扱い方が変更される可能性もありますが、基本的に「スマホ・タブレット」と「PC」
WPテーマSuffusion（5）CSSのカスタマイズも簡単！テーマ更新されても変更必要なしに！
さて、今日のWordpressテーマ「Suffusion」のCSSのカスタマイズ方法です。スタイルを簡単に変更して、上書きできるのがいいですね。頻度の高い更新するテーマとしてかなり重宝します。ではその方法とは？ CSS（スタイルシート）に装飾スタイルや日本語フォントの変更コードを入れたい場合に、直接「Suffusion」のPHPファイルをいじることは可能です。しかしかなりの高頻度でテーマが更新されているので、毎回変更するのも面倒で、トラブルのもとになります。さらにやっかいなことにブログ記事の更新に支障をきたすほど時間が取られます。 しかしSuffusionには、恐ろしく簡単にCSSの変更ができ、しかもテーマを更新しても問題ないような機能があります。（Suffusion自体の各部CSS変更機能でスタイルが変更できない場合のみ。） スタイルのカスタマイズ方法 Suffusionの設定からメニュ
WordPress » スタイルシートを読み込む | MORILOG
<link rel="stylesheet" id="style-css" href="http://my-domain.com/style.css" type="text/css" media="all" /> WordPressでは、この<link>タグを自動生成してくれるwp_enqueue_style関数が用意されています。 テーマファイルでは<link>タグは直接書かずに、このwp_enqueue_style関数を使用します。 <?php wp_enqueue_style($handle, $src, $deps, $ver, $media); ?> $handle — スタイルシートのハンドル名 $src — スタイルシートのURL（オプション） $deps — 関連するスタイルシートのハンドル名（オプション） $ver — スタイルシートのバージョン（オプション） $medi
【WordPressでCSSが効かない場合の対処法】 - Webサイト専門プログラマの言いたい放題
ワードプレスだとCSSが効かないことがある 「静的なHTMLサイトの場合は問題なくCSS（スタイルシート）が書けるのに、ワードプレスだとCSSが効かないことがある 。いったい何故？」という体験をしたことはありませんか？ なぜワードプレスでCSSが効かないことがあるの？ 結論から言いますと、「他のCSSのほうが優先順位が高いから」です。 ワードプレスで作ったページをブラウザで開いて、ソースの内を見てみると、多くの場合次のようになっています。 <head> ・・・ <link rel="stylesheet" src="●●●/テーマ名/style.css" /> ・・・（１） <link rel="stylesheet" src="別のCSS" /> ・・・（２） <link rel="stylesheet" src="別のCSS" /> <link rel="stylesheet" src
Suffusionの子テーマを作る – wizaman's blog
WordPressには色んなテーマがあるんですが、多すぎてお目当ての物を探すのには苦労します。そこらへんに転がってる野良テーマを使うとセキュリティ面で問題があるという話もあるし、公式に配布されているものを使うのが無難でしょう。タダだし、更新チェック効くし。そうして私が探した中で、唯一これだ！と思えたのが、現在使っている「Suffusion」です。 Suffusionはカスタマイズ項目が豊富なのですが、ほとんど手つけてないです。ヘッダの下にメニューバー追加したぐらいですかね。あとは直接コード書いてたりしてますが、それについてはあとで触れます。ともかく、ほとんどいじらなくていいぐらい完成度が高く気に入ってます。シンプルで見やすいのがいいんですよ。 WordPressは本体・テーマ・プラグインの最新版がないか自動でチェックしてくれます。Suffusionの開発は盛り上がってるみたいで、全然更新さ
知らないとハマる！CSSを書く場所と読込順とインライン記述の優先関係 | 隣IT
果たしてどの場所のスタイルが採用されるのでしょうか。 インライン記述最強 結論から言うと、③の「タグに直接指定（インラインで記述）」が採用され、文字色はピンクになります。 これは読込順に関するルールではなく、セレクタの点数によるルールが効いているからです。 実はインライン記述の点数は1.0.0.0となっており、いくらページhead内や外部CSSに他のセレクタを組み合わせた指定をしても太刀打ちできません。 セレクタの点数ルールにより、インライン記述は他の場所に記述したスタイルよりも優先される、とおぼえてください。 （これを他の場所で打ち消すためには「!important」を使うしかありません。） head内スタイルと外部CSSに書かれたスタイル、強いのは？ さて、残り２箇所に書かれた「head内スタイル」と「外部CSS」では、どちらが優先されるのでしょうか？ 答えは、「 後から読み込まれたほ
WordPressの子テーマを作成する
2012年5月現在、Wordpressには「twentyeleven」というデフォルトテーマが入っていますが、オリジナルのテーマを作ろうと思ったら、このテーマの子テーマとして作ると便利です。 確かに「twentyeleven」のテーマは複雑すぎて、HTMLやCSS、テンプレートタグなどをある程度理解していないと難しく感じるのですが、function.phpにいろいろ追加しなくても、とりあえず「twentyeleven」が提供してくれる機能をフルサポートしながらデザインを変えられるという大きな利点があります。 子テーマ用のフォルダを作成 最低限必要なのはstyle.css その他のファイル イメージフォルダのパス スクリーンショット １．子テーマ用のフォルダを作成 まずは子テーマ用のフォルダを作成します。フォルダ名は任意の名前でＯＫです。 「wp-content/themes/子テーマのフォ
独自のCSSやJSを読み込む
WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみました。 CSSファイルを読み込む方法 CSSを読み込むには、以下の関数を使用します。 wp_enqueue_style ★例として、子テーマフォルダ下に配置したBootstrapのCSSファイルを読み込ませる functions.php(子テーマ)に追加して下さい。 // wp-config/theme/[子テーマ名]/functions.php function my_styles() { wp_enqueue_style( 'bootstrap', get_bloginfo( 'stylesheet_directory') . '/bootstrap.min.css', array(), n
WordPress：functions.phpでJSやCSSを一元管理する方法とバージョン表記を消す方法 - NxWorld
CSSやJavaScriptなどの外部ファイルを読み込む際、全ページ共通で且つよく見かける方法だとheader.phpのhead内に記述するということが多いと思いますが、例えば投稿ページでは使うけど固定ページでは必要ないので読み込ませたくない場合があります。 head内で条件分岐させる方法もありますが、それをfunctions.phpを使って一元管理する方法です。 また、その際に追記されてしまうバージョン表記を消す方法も合わせて紹介します。 JavaScriptを管理する 例としてIDがそれぞれ1～3まで設定されている固定ページに、以下の4つのjsを適応させるという想定で説明していきます。 jquery-1.7.2.min.js（全ページに適応） common.js（全ページに適応） slide.js（固定ページ1のみに適応） lightbox.js（固定ページ2と3に適応） 上記のような
Account Suspended
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressの子テーマを作る理由と子テーマを自作する方法 – ワードプレステーマTCD
WordPress Related Postsでブログが壊れた！他のプラグインと競合する | Wordpress備忘録
emiac-works.com
WordPressの子テーマで@importを使わないでCSSを読み込む方法 - ディレイマニア
