MENU
03-1234-5678
お問い合わせ
  1. ホーム
  2. .

.

こちらのページを見つけたのはさすがの洞察力です。

ホームページでは色々な仕掛けがあるので色々ポチポチ触ると色々な発見が出てきますので是非色々触ってみましょう。

ここでは教えきれなかった部分を教えたいと思います。

まずヘッダーメニューでどのようにして小文字の英語を表示させるかと言いますと

ダッシュボード→外観→メニューを選択

右上の表示オプションをクリックすると詳細めにゅー設定を表示の項目の

説明をを選びます。

改めて作ったメニューの▼をクリックすると説明という項目が出るのでそこに該当の文字を入れると表示されるようになります。

続いてメインビューに文字を載せる方法

これは結構難易度高いです。

html,cssに関わる部分となります。

まずは外観→カスタマイズ→トップページ→メインビジュアルまで行きます。

chromeの検証を用いると

なぜか文章上ではHTMLの部分は消えてしまいます。

しあわせを感じる
ひとときを
カフェサンプルで

これをそのままサブテキスト【１】に貼り付けます。
コードの部分は消えるので文字だけが表示されます。

そこで次はカスタマイズ→追加cssを選びます。

/* メインビジュアル */
.main-text{
text-align:left;
font-size:40px;
position:relative;
top:150px;
}

以上の様に記入したら出来上がります。

それぞれどういう意味かぜひ検索してみてください。

更に発展したお話し

今回、追加cssに記載と書きましたが、こちら記載すると前ページに跨って記述した内容が適用されてしまいます。

じゃあ他のページ適用されないようにするにはどうしたら良いか・・・

各固定ページの下にあるcssの部分に記述するだけでその固定ページだけに適用されます。

そのため追加cssに記載する必要はなくなります。

次にヘッダーメニューの作成方法

それぞれの見出しを改めて選んでいただきます。

該当項目を選ぶと右側に設定で固定ページとブロックとあるのでブロックを選びます。
下にスクロールすると高度な設定→HTMLアンカーというのがあるのでそこの場所がcolumuだとcolumuを選びます。
まず一旦公開を押して保存。
次に外観→メニューでグローバルメニューを作成します。
左側のところでカスタムリンクを選び先ほどのHTMLアンカーを使います。
トップページなのでドメイン/#HTMLアンカーとしてメニュー項目を作成。
同様の手順で上から下まで行う。

footer部分にロゴを置く方法

こちらを参照して頂けると幸いです

https://boonboonswell.com/entries/entry-3603.html

外観→テーマファイルエディターを開きます。

その中にfunctions.phpがあります。（WordPressの心臓部分）

こちらに以下の表記を施します。

// —————————————-
add_action(‘swell_after_copyright’, function() {
?>
<p class=”my-footer-link” style=”text-align:center”>
<a href=”https://www.xxxxxxxxxxxxxxxx.co.jp”>
<img src=”https://xxxxxxxxxxxxxxxx/LOGO.png”>
　　</a>
</p>
<?php });

  • 赤字の部分を実際に表示するコンテンツに書き換えてください
  • コンテンツは必ず全体を <p> か <div> で括り、クラス名（例：my-footer-link）をつけてください
  • 「style=”text-align:center”」をつけてセンタリングしています
  • 「swell_after_copyright」という SWELL のフックを使っています

私は以下の記述で出来ました。

// footerロゴ
add_action(‘swell_after_copyright’, function() {
echo SWELL_PARTS::head_logo( ‘no’, true );
});
書く位置も気を付けないといけません。

サンプルコードではロゴ画像をリンク付きで配置していますが、テキストのみでも、長文のコンテンツでも構いません。

「swell_after_copyright」は、コピーライトの後にコンテンツを配置するフックのため、このままでは、コピーライトの下に表示されます。次のCSSで上下を入れ替えます。

CSSで位置を入れ替える

「swell_after_copyright」でコンテンツを入れただけでは、コピーライトの下に表示されます。そのため、CSSを用いて上下の位置を入れ替えます。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

.l-footer .l-container {
display: flex; flex-direction: column;
}

.copyright {
　　order: 2;
}
.my-footer-link {
　　 order: 1;
}

  • 「.l-footer .l-container」でフッターのもともとあるコンテンツのクラスを指定しています
  • 「display: flex;」と「flex-direction: column;」を指定することで、「.l-container」以下にあるコンテンツを縦に並べています、この指定をしないと上下を入れ替えられません
  • 「copyright」と自作したコンテンツのクラス（例：my-footer-link）に対して、order で順番を入れ替えます

完成です。

自分はですが、以下の追加cssで行うことが出来ました。

/* footerロゴ */

#footer .c-headLogo.-img{
text-align:center;
position:relative;
bottom:100px;
}

こちらは検証を使って行いました。
またpositionはファーストビューで文字を移動させたときに使ったので馴染み深いと思います。
それを用いてやってみました。

ヘッダーの右側に電話番号設置する方法

step1ブログパーツでボタンを作る
ダッシュボードのブログパーツを選ぶ
WordPress の管理画面から「ブログパーツ」を選択して、ブログパーツを作ります。「呼び出しコード」は後ほど利用するのでメモっておきます。

「SWELL ボタン」ブロックを使って電話番号ボタンを作ります。アイコンは、右側のブロックの設定から「アイコン選択」で電話番後やメールなどのアイコンを選ぶことができます。

電話番号をリンクとして設定する場合は、「tel:」の後に「電話番号」を入力します。

tel:090-1234-5678

「tel:」を使うことでスマホなどでクリックした場合に自動的に電話アプリと連携します。

ポイント

問い合わせボタンを作る場合は、「メール」のアイコンと、お問合せページへのリンクを設定しましょう。
step2ヘッダー内部にブログパーツを設定する

WordPress の管理画面から「外観」→「ウジェット」を選択します。

  • 「ヘッダー内部」に「テキストウジェット」を設定する
  • 「テキスト」タブに、ブログパーツの「呼び出しコード」を入力する

右上に電話番号ボタンが表示されていれば、完成です。

複数個のボタンを並べる方法

ポイント

複数個のボタン配置する方法

すこしの工夫で複数個のボタンを並べることも可能です。実際に複数個ボタンを配置してみましょう。

■ Step.1 ブログパーツで複数個ボタンを作る

ブログパーツを使ってボタンを作ります。

カラムブロック」を「50 / 50」で配置します。

各々のカラムに「SWELL ボタン」ブロックを配置します。

■ Step.2 ヘッダー内部にブログパーツを設定する

作成したブログパーツをヘッダー内部に設定します。

WordPress の管理画面から「外観」→「ウジェット」を選択します。

  • 「ヘッダー内部」に「テキストウジェット」を設定する
  • 「テキスト」タブに、ブログパーツの「呼び出しコード」を入力する

ボタンを複数個並べると、ボタン内部のテキスト（主に電話番号）が改行する場合があります。
次の工程で改行を禁止します。

■ Step.3 ボタン内部の改行を禁止する

ボタン内部の改行禁止は、CSS を使って設定します。

クラス名の設定

ブログパーツで作成した「SWELL ボタン」に対して、改行させたくないボタンの「追加 CSS クラス」に、任意のクラス名を入力します。

ポイント

本サンプルでは、任意のクラス名「my-button-nobr」を設定しています。すでにクラス名文字列が入力されている場合は、半角スペースで区切って追加で入力します。

css設定

WordPress の管理画面から「カスタマイズ」→「追加 CSS」を選択します。

  • CSS を追加する
  • CSS を追加する

追加する CSS は以下です。

.my-button-nobr{
  white-space : nowrap;
}

先ほどボタンに設定したクラス（例：.my-button-nobr）に対して改行禁止「white-space : nowrap;」を指定しています。

コーポレートサイトでよくある追従バナーを設置するカスタマイズ

参考サイト
https://vool.jp/swell-follow-banner/

ブログパーツを作成する

最初に、バナー（ボタン）の本体となるブログバーツを作成します。

STEP1

ブログパーツを新規追加する

WordPress管理画面の右側メニューから、ブログパーツを選択し、新規追加をクリックします。ブログパーツの名前は任意のものでOKです。ここでは「【PC用】追従バナー」としておきます。

STEP2

テキストとアイコンを挿入する

ブログパーツに段落ブロックを挿入し、「お問い合わせ」のテキストを入力します。アイコンを入れたいので、テキストの前にカーソルを持ってきた状態で、SWELLのアイコン選択ボタンを押します。

ブログパーツ、アイコン挿入方法

アイコンは好きなものを選んでください。

STEP3

リンクの設定をする

アイコンとテキストをひとまとまりにしたいので、アイコンとテキストをドラッグ（選択）した状態で「グループ化」をクリックします。

ブログパーツ、アイコンとテキストをグループ化

再びアイコンとテキストをドラックした状態でリンクの挿入をクリックし、任意のURLを設定します。

ブログパーツ、アイコンとテキストにリンクを設定

STEP4

クラス名をつける

CSSの調整がしやすいように、グループにクラス名をふっておきます。

グループを選択した状態で、右側の「ブロック」タブを開き、高度な設定の「追加 CSS クラス」に任意のクラス名を追加します。

ここではクラス名をfollow-bannerとしておきます。

ウィジェットエリアにバナーを追加する

次に作成したブログパーツをウィジェットエリアで表示します。

ブログパーツ一覧を開き、作成したブログパーツの呼び出しコードをコピーしておきます。

外観＞ウィジェットを開き、左側の利用できるウィジェットの中から「カスタムHTML」をクリックします。「フッター直前」を選択した状態で、ウィジェットを追加をクリックします。

次に右側のウィジェットエリアから「フッター直前」を探します。そして追加したカスタムHTMLの「内容」の中に、コピーしておいたブログパーツの呼び出しコードを貼り付けます。

「フッター直前」の中身が下記のようになっていればOKです。タイトルは空で大丈夫です。

フッター直前のウィジェットを使う理由

サイドバーの有無に関わらず全てのページで表示されるため、「フッター直前」エリアを使用しています。ウィジェットを使用することで、テンプレートファイルの編集を避けられ、保守性の向上が見込めます。

特定のページでのみ追従バナーを表示させたい場合は、該当する固定ページ内でブログパーツを呼び出せばOKです。

CSSで見栄えを調整する

最後にCSSで見た目を調整します。以下のコードを外観＞カスタマイズ＞追加CSSに記述してください。

.follow-banner {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 20;
}

.follow-banner a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  writing-mode: vertical-rl;
  color: #fff;
  background-color: var(--color_main);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1.5em 1em;
  border-radius: 10px 0 0 10px;
  transition: opacity 0.25s;
}

.follow-banner a:hover {
  opacity: 0.7;
}

.follow-banner .swl-inline-icon::after {
  left: 50%;
  transform: translateX(-50%);
}

/* スマホでは非表示に */
@media screen and (max-width: 599px) {
  .follow-banner {
    display: none;
  }
}

これで冒頭の画像のようにお問い合わせの追従バナーを設置できたかと思います。

バナーの背景色は、メインカラーで設定した色が反映されるようにしています。必要に応じてコードの中のbackgroud-colorを変更してください。

また、スマホではバナーが非表示になるように設定しています。固定フッターメニューをご利用ください。

ステップを横向きにする方法

STEP
test

test

STEP
test

test

STEP
test

test

追加cssで以下のcssを入れて作る。

ステップ全体を横向きにするために親要素にdisplay:flex;

.swell-block-step {
display: flex;
}

.swell-block-step__item:before {
border-top: 1px dashed var(–color_border);
content: “”;
height: 10%;
left: 23px;
position: absolute;
top: 12px;
width: 100%;
}

各固定ページにファーストビューを入れる方法

固定ページの右側のタイトルの背景画像で入れたい画像を入れる

表示の上書き設定でタイトル位置：コンテンツ上とする

cssは

div#top_title_area {
height: 70vh;
}

@media screen and (min-width: 768px) {
div#top_title_area {
height: 50vh;
}
}
を設定する

WordPressでsvgをアップロードする方法

プラグインのsvgsupportをインストールする

グーグルマップを端から端まで設定する方法

グーグルマップで共有→埋め込み

カスタムhtmlで地図のhtmlを入れます。
カスタムhtmlで埋める際に style=”border:0″ となっている部分を style=”border:0; margin-right: calc(50% – 50vw); margin-left: calc(50% – 50vw); max-width: none; width: 100vw”

を入れることで端から端までの表示されます。

ローディングアニメーションの追加

ブログパーツでアニメーションとなるロゴを画像ブロックで作成

トップページでどの場所でもいいのでさっきの作ったブログパーツを配置します。

右側の高度な設定にて追加cssのところに「loading」と入力します。

固定ページの編集画面一番下のとこの「CSS用コード」「JS用コード」ってとこにコードを入力します（↓のとこね）

/* loadingアニメーション */

CSS用コード

.loading {
position: fixed;
top: 0;
left: 0;
 z-index: 9999;
width: 100vw;
height: 100vh;
background-color: #fff;　/* 背景の色 */
display: flex !important;
align-items: center;
justify-content: center;
animation: fadeOut 1.5s 2s forwards;
}

.loading img {
opacity: 0;
animation: logo_fade 2s 0.2s forwards;　/* ロード画面を再生している時間 / width: 250px; / ロゴのサイズを指定（パソコン） */
}

@media screen and (max-width: 959px) {
.loading img {
width: 200px; /* ロゴのサイズを指定（スマホ） */
}
}

@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}

@keyframes logo_fade {
0% {
opacity: 0;
transform: translateY(20px);
}
60% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
}
}

JS用コード

document.addEventListener(“DOMContentLoaded”, () => {
const content = document.getElementById(“content”);
const fixHeader = document.getElementById(“fix_header”);
const loading = document.querySelector(‘.loading’);

content.style.zIndex = 101;
fixHeader.style.opacity = 0;

setTimeout(() => {
    document.getElementById("content").style.zIndex = 1;
    content.style.zIndex = 1;
    fixHeader.style.opacity = 1;
}, 3000);

loading.addEventListener('animationend', () => {
    loading.style.display = 'none';
});

});

JavaScriptをフッターで読み込ませる方法

functions.phpにおいて

  1. WordPress管理画面の左メニュー「外観」→「テーマエディター」を選択
  2. 右メニュー「テーマファイル」→「テーマのための関数(functions.php)」を選択
  3. 表示されたコードをスクロールし、一番下の行に、下記のコードをコピペ
function move_scripts(){
  remove_action('wp_head', 'wp_print_scripts');
  remove_action('wp_head', 'wp_print_head_scripts', 9);
  remove_action('wp_head', 'wp_enqueue_scripts', 1);
  add_action('wp_footer', 'wp_print_scripts', 5);
  add_action('wp_footer', 'wp_print_head_scripts', 5);
  add_action('wp_footer', 'wp_enqueue_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'move_scripts' );

Copy

これで、WordPressが書き出しているほとんどのJavaScriptを、フッターへ移行することができます。

SWELLユーザーがXサーバーを選ぶ理由

WAF（ウェブアプリケーションファイヤーウォール）との相性がとても良い

WAFは不正アクセスによるサイトの改ざんや情報漏洩を防ぐ機能

エックスサーバーだけエラー報告がない

シンプルSEOパックの設定
「Feed page」をインデックスさせないは、はいを選ぶ
「カスタム投稿タイプ」のアーカイブページをインデックスさせないは、いいえを選ぶ

SWELLの設定→WordPressの設定
WordPressの機能
コアのサイトマップ機能を停止するにチェックが付いているかを確認する
XML Sitemap Generator for Googleをインストール

WP Multibyte PatchとシンプルSEOとXML Sitemap Generator for Googleは自動更新
リヴィジョンは履歴のデータだけど増えすぎると重たくなるのでそれを制御するプラグインがある
サイトの読み込みを遅くならないようにする→WP Revisions Control
設定を下にスクロールするとリビジョンの設定が出来るのですべて５に設定する
リビジョンエラーが出るが気にしなくて良い。→ブログパーツでエラーが出る

セキュリティープラグイン
wordfence Login securityを有効化してライセンスを取得するためにボタンをクリック→freeを選ぶ→青いボタンの下の文章を選ぶ→メールを登録する→宣伝広告に関してはNoを選択→チェックを入れてRegisterをクリック
メールが届くのでインストールをクリックWordPressに戻るので×消す。
次に設定
プラグインの自動更新
ファイヤーウォールの初期設定
メール通知量
上から順にWordfenceの設定を選ぶと自動更新が出ているのでそれを有効化
ファイヤーウォールの設定をクリック→学習モード
次のとき自動的に有効化にチェックを入れる
日付が今日から一週間後になっていること
保護レベルのWORDFENCEファイヤーウォールの最適化をクリック
.HTACCESSをダウンロードと.USER.INIをダウンロードをクリックが完了したら次へをクリック（それぞれのファイルは保存）
もしエラーが起きたらレンタルサーバー内に同じファイルがあるので今ダウンロードしたファイルに置き換える
WORDFENCE→すべてのオプション→Wordfence の全般設定→通知メールの設定
IP アドレスがブロックされたら通知する→チェックを外す
漏えいしたパスワードの使用によりログインがブロックされたら通知する→チェックを外す
管理者権限のある人がサインインしたときにアラートする→チェックを外す
管理者以外のユーザーがサインインしたときにアラートする→チェックを入れる
不正ログインを防ぐ対策
WORDFENCE→すべてのオプション→ブルートフォース保護
何回ログインに失敗するとロックアウトされるか →7に変更
どの期間の失敗をカウントするか →12に変更
無効なユーザー名を即座にロックアウトする にチェック
リキャプチャとWORDFENCEをつなぐ
WORDFENCE→ログインセキュリティ→タブで設定をクリック→下にスクロールするとリキャプチャの設定項目がある→いつものリキャプチャの設定
ログイン出来なくなった時の対処法
登録したメールアドレスを入れる
メールに30分以内にくる
直ぐに対処したい場合
Xサーバーのファイル管理→ドメインのフォルダをクリック→public_html→サイト名→wp-content→plugins→WORDFENCEフォルダ長めにクリックして離すと名前を変えられる

Font Awesomeの読み込み
SWELLの設定でFont Awesome→cssで読み込むで使えるようになる
Font Awesomeのサイトで使いたいアイコンを選ぶ
https://fontawesome.com/
ツィッターのアイコンであれば
<i class=”fa-brands fa-twitter”></i>
SWELLに戻ってさっきのカスタマイズ→ウィジェット→フッター１→テキスト
→番号無しリスト→テキストタブ→
<i class=”fa-brands fa-twitter”></i>を
〔icon class～〕の形にに変更する

/* スマホでもカバー画像を固定 */
.wp-block-cover.has-parallax{
-webkit-clip-path:inset(0);
clip-path:inset(0);
}
.wp-block-cover__image-background.has-parallax{
position:fixed;
top:0;
left0;
z-index:-1;
}