Diviのヘッダーのアニメーションを消す方法【コード要らず】

Diviのヘッダーのアニメーションを消す方法【コード要らず】

Diviはディフォルトでスクロール時に、ヘッダーのサイズが変わるアニメーションが付いてきます。 カッコいいですが、ちょっとウザいと思う時もあるのではないでしょうか?しかもアニメーションを消すオプションがないんです。じゃあJSかCSSを使ってアニメーションを消すしかないのか? 実はその必要はないんです。カスタマイザーのオプションの設定の仕方で、このアニメーションは消すことができるんです。とっても簡単です。 ではそのやり方を紹介しますね。 アニメーションを消す...
Diviを使わずにDiviビルダーを使う方法

Diviを使わずにDiviビルダーを使う方法

こんにちは、ナオミです。 『Diviは凄そうだけど、今使ってるWordPressのテーマを変えたくはない。』 そんな方は結構いると思います。そうですよね。ずっと使ってたテーマを手放すのは惜しいです。でも安心してください。 DiviビルダーはDiviを使わなくても使えるんです。 ?????となったかもしれないですね。まずDiviをDiviビルダーの違いについて説明しますね。 DiviビルダーとDiviは別のもの この二つ、一見同じように思えますが実は違うものなんです。 DiviはDiviビルダーが備わってるWordPressテーマ...
WordPressでカスタマイズしやすいテーマはこの一択【目から鱗】

WordPressでカスタマイズしやすいテーマはこの一択【目から鱗】

『このテーマもだめだ・・・もう何個め?』『ただ二列で表示したいだけなのに・・・』『WordPressのカスタマイズってコード書かないとできないの?』 こんなふうに思ったことありませんか?もうお気づきかもしれませんが、コードを書かないなら、通常のWordPressのテーマのカスタマイズ性はかなり低いです。『じゃあWordPress使いたくない!』なんて思う方もいるかもしれません。でもちょっと待ってください。...
Diviでスマホ上で列を自由に並びかえる方法

Diviでスマホ上で列を自由に並びかえる方法

こんにちは、ナオミです。こんな感じで、交互に色を変えたりするデザインをたまにみますよね。 これはデスクトップでこんな感じに見えますが、スマホでみたらどうなるでしょう? あれれ、これはちょっと予想と違いますし見にくいです。黄黒黄黒で表示させたいですよね。 そんな問題を解決すべく、この記事では、どうやってスマホ上で表示される列を並び自由に替えるのか説明します。 WordPressにCSSを追加 @media all and (max-width: 980px) { /*** Flexboxを使う ***/ .custom-row {...
エックスサーバーのアカウント作成からWordPressイントールまで(10~20分)【初心者向け】

エックスサーバーのアカウント作成からWordPressイントールまで(10~20分)【初心者向け】

こんにちは、ナオミです!ホスティング会社を色々と調べていくと、いつも聞くのが『エックスサーバー』です。とっても評判が良いので、今日はエックスサーバーでアカウントを作って、WordPressをインストールしてみました。その過程を説明していきます。 因みに実際にかかった時間は20分ほどですが、そのうち10分は待ち時間でした。最長でも30分くらいかと予想します。 エックスサーバーでアカウントを作る まずは、エックスサーバーのサイトへいきます。 >>エックスサーバー まずはこの『お申し込みはこちら』と書いてるボタンを押します。...
Diviのトップに戻るボタンをカスタマイズ

Diviのトップに戻るボタンをカスタマイズ

こんにちは、ナオミです!Diviは縦に長いページを作るのに適しています。そのためDiviには『トップに戻るボタン』が実装されています。 この記事では、そのボタンを有効化する方法と、カスタマイズする方法を紹介します。 Diviのトップに戻るボタンを表示 長いページを下にスクロールしてもこのボタンが表示されない場合は、Diviのテーマオプションから『トップへ戻る』ボタンを有効にします。 これをクリックするとスクリーンが上までジャンプします。これが『トップへ戻るボタン』です。 Diviのトップへ戻るボタンのカスタマイズ...
Diviの行をスマホでも複数列で表示する方法【便利】

Diviの行をスマホでも複数列で表示する方法【便利】

こんにちは、ナオミです。Diviは何もしなくてもレスポンシブで、スマホでもタブレットでもサイトを綺麗に表示してくれます。でもスマホではいつも一列で、それを変えることは設定画面からはできません。この記事ではCSSを使ってどうやってそれを変えるのか説明します。 Diviの行にCSSクラスをセットする まずは行にCSSクラスをセットします。ここは自分の好きな名前にしてください。 DiviのCSSのメディアクエリのコードを上書き 次のコードを追加してください。 @media only screen and (max-width:...
Diviとは

Diviとは

こんにちは、ナオミです!残念ながら、Diviの知名度は日本ではまだまだです。今回はこの記事でDiviとは何なのか、もう一度説明したいと思います。 もし今『ウェブサイトを作りたいけど、どこから初めていいかわからない』『WordPressってそんなに簡単じゃない』『HTMLもCSSもめんどくさい』など思ってる人がいたら、Diviはあなたが探してるものです。 Diviとは、世界で一番使われてるWordPressテーマ ウェブ上に存在するWordPressサイトの7%以上がDiviを使用しています。...
Diviを劇的に高速化する一つの方法【超簡単】

Diviを劇的に高速化する一つの方法【超簡単】

こんにちは、ナオミです! 正直言うと、Diviは何もしない状態だと比較的遅いです。これの原因の一つはフォントにあります。 この三つのフォントがDiviの初期設定でサイトにロードされるフォントです。 1.6MB x 3 = 4.8MB 4.8MBはデカすぎです。 画像がそんなにないサイトなら、サイト全部入れても0.5MB以下が理想です。他のフォントに変えるだけで、サイトが4.8MBぶん軽くなるわけです。 初期設定のフォントを変えるには フォントを変えればいいだけのことですね、と思っていたのですが、...