simplicityで ナビメニュー を作成すると、
次のようにタイトルとサイト概要の下にナビメニューが表示されます。

↓ デフォルトのナビメニューの例

このナビメニューをタイトル横やサイト概要横に設置したいと思う人も多いはず

でもsimplicityのカスタマイズ画面ではナビをタイトル横に変える設定はありません。

しかし設定が用意されていないだけで、
CSSを少し改造すれば簡単にナビメニュー位置を変えれるんですよね。

ここでは simplicityでヘッダー横にナビメニューを表示する方法 を解説します。

ナビメニューをヘッダーに設置する利点

ここでは次画像のように、ヘッダー内に設置されたナビメニューを作成します。

ヘッダー内にメニューを埋め込むメリットは次のような点です。

• ヘッダー横の空きスペースを有効活用できる
• ファーストビューで記事に目が行きやすくなる
• デフォルトで表示されるナビメニューより目立つ
• デザイン的にもオシャレになる

ヘッダーにナビメニューを埋め込むことで今までナビメニューにとられていたスペースがなくなる上に、ヘッダー横のスペースも活用できて一石二鳥です。

あとオシャレな感じのメニューも作れるので、デザイン面でもプラスになります。

ヘッダー横にナビメニュー表示させる方法

ではヘッダーにナビメニューを表示させる手順を解説します。

その手順は次の通り…

header.phpの編集

まずsimplicityでヘッダー出力している「header.php」というPHPファイルを編集します。

そのためには、メニューから「外観」ー＞「テーマの編集」をオープン。

テーマ編集画面を開いたら「header.php」というファイルを探して開き、
その中で次のようにヘッダーロゴ表示を行っている部分を見つけてください。

上の画像でオレンジ色で囲った部分がそうです。

この部分を 次のように改造 すればOK。

  <!-- ここから追加 -->
  <div id="header_navi">
  <!-- ここまで -->>
              
      <div class="alignleft top-title-catchphrase">
           <?php get_template_part('header-logo');?>
      </div>
      
      <!-- ここから追加 -->
      <ul>
          <li><a href="xxx">WordPress</a></li>
          <li><a href="xxx">プラグイン</a></li>
          <li><a href="xxx">javascript</a></li>
          <li><a href="xxx">CSS<a></li>
          <li><a href="xxx">SEO</a></li>
      </ul>
              
  </div>
<!-- ここまで -->

「<!-- ここから追加 -->」から「<!-- ここまで -->」の部分をヘッダーロゴ出力の部分に追加してください。

そして追加したコードで、ナビメニュー の代わりになるのが次のリストです。

<ul>
  <li><a href="xxx">WordPress</a></li>
  <li><a href="xxx">プラグイン</a></li>
  <li><a href="xxx">javascript</a></li>
  <li><a href="xxx">CSS<a></li>
  <li><a href="xxx">SEO</a></li>
</ul>

URLやリンクテキストなどは自分のサイトに合ったものに書き換えてください。

編集が終わったら「ファイルを更新」ボタンを押して更新完了です。

style.cssの編集

次にテーマの編集画面から「style.css」というCSSファイルを開いてください。

そしてそのCSSファイルの最後に 次のような内容 を追加します。

/** ヘッダーにナビメニューを追加 **/

@media screen and (max-width: 1110px){
  #navi{
    display: block;
  }
  
  #header_navi ul{
    display: none;
  }
}

@media screen and (min-width: 1110px){
  #navi{
    display: none;
  }

  #header_navi{
    display: flex;
  }

  #header_navi:first-child{
    flex: 1;
  }
  
  #header_navi ul{
    flex: 1;
    flex-wrap: wrap;
      
    display: flex;
    margin: auto 0px;
    padding-right: 100px;
    list-style-type: none;
  }
  
  #header_navi ul li{
    width: calc(20% - 1px);
    text-align: center;
  }
  
   #header_navi ul li {
     border-left: 1px solid gray;
   }
 
   #header_navi ul li:first-child{
     border-left: 1px solid transparent;
   }
  
  #header_navi ul li a{
    text-decoration: none;
  }
}

この内容を追加したら「ファイルを更新」を押して更新。

ファイル更新してページを見てみると、
次のようにヘッダーにナビメニューが表示されましたよね？

ここではCSSを使って、

• 画面幅1110px以上でナビメニューを表示
• 画面幅1110px未満でナビメニューを隠す

・・・としているので、スマホではナビメニューはヘッダーに表示されず、プルダウン式のメニューが代わりに表示されるようになります。

ナビメニューのカスタマイズ

最後にここで設置したナビメニューのカスタマイズ方法について少し紹介します。

カスタマイズするには次のようにstyle.cssを編集してください。

メニューの列数

メニューの列数はstyle.cssで追加したCSSコードの次の部分で調整しています。

#header_navi ul li{
  width: calc(20% - 1px);
  text-align: center;
}

widthプロパティに「calc(20% - 1px)」を指定することでメニューアイテム１つの幅はメニュー横幅全体の20%分から1ピクセルを引いた幅になります。

１アイテム当たり全体の20%の大きさを持つので次のように５列で表示されています。

もしこの列数を変えたい場合は「calc((100% / 列数) - 1px)」と指定してください。

例えば６列に変えたい場合は次のようにwidthプロパティを書き換えます。

width: calc((100% / 6) - 1px);

これで次のように６列のナビメニューになります。

また指定した列数を超えた場合は自動で折り返されるので見切れるという心配はありません。

文字サイズや色の変更

ナビメニューの文字の装飾を行っているのはstyle.cssに追加した次の部分です。

#header_navi ul li a{
  text-decoration: none;
}

なので例えばメニュー内の文字を太字にしてフォントカラーを緑色にしたいならこの部分にスタイルを追加します。

#header_navi ul li a{
  text-decoration: none;
  font-weight: bold;
  color: green;
}

変更したナビメニューは次のような見た目になります。

まとめ

simplicityではカスタマイズ画面にナビメニューの位置を変更する設定はありません。

しかし、ここで解説したようにテーマファイルを少しだけ改造するだけでヘッダー内にナビを表示することが可能です。

ここでは最低限のデザインしか紹介しなかったのでフォントサイズや色、列数などをサイトに合わせるとより洗練された綺麗なナビメニューが作れることでしょう。

以上ここではナビメニューをヘッダー横に表示する方法について解説しました。

The post simplicityでヘッダータイトルの横にナビメニューを表示する方法 first appeared on Fukuro Press.

WordPressテーマのsimplicityにはSNSボタン表示機能がついてます。

Twitter、Facebook、ハテブ、etc...などのSNSの拡散力は無視できないし、シェアされることで記事がバズることもあります。

なので標準でSNSボタン表示できるsimplicityはブロガーに強力なテーマです。

でもSNSボタンをカスタマイズできないのが欠点

自由な場所に表示したり、あるSNSボタンだけ非表示にすることはできません。

そこで simplicityのSNSボタンを自由にカスタマイズする方法 を解説！

simplicityのSNSボタンはカスタマイズしにくい

simplicityでSNSボタンをカスタマイズするには、
「外観」ー＞「カスタマイズ」と進み、カスタマイズ画面で「SNS」を選びます。

カスタマイズできるのは次のような項目。

• シェアボタンの表示・非表示
• シェア数の表示
• ボタンのタイプ
• シェアボタンの表示位置(タイトル下か本文下のみ)
• 表示するシェアボタンの種類
• その他いろいろ・・・

これだけ設定できれば十分というような気もしますが、結構制約もあります。

例えばシェアボタンをタイトル下に表示した場合、次のようなボタンが表示されます。

これでも悪くはないですが好きなデザインは選べず、
本文下に表示されるような 大きめのボタン にすることもできません。

あとタイトル下では "ツイートボタンを隠したいな" と思って、

• Twitter「ツイート」ボタンの表示

からチェックを外すと、本文下のツイートボタンまで非表示になってしまいます。

このように標準だと表示できる位置はタイトル上と本文下の２か所のみ。

あるボタンを非表示にすると、２か所ともボタン非表示になってしまいます。

そこで位置・種類をカスタマイズするにはPHPから操作する必要があります。

といっても難しいコードではなく、
プラグインを使えば危険なことせず、安全にボタンのカスタマイズができます。

次はその方法について解説していきます。

SNSボタンのカスタマイズに必要なもの

まずSNSボタンをPHPからカスタマイズするには・・・
ウィジェット内にPHPを書ける PHP Code Widget プラグインをインストール。

「プラグイン」ー＞「新規追加」からプラグイン名で検索すると次のように出てきます。

ちなみに直ダウンロードして使うなら、次URLからダウンロードも可。

https://ja.wordpress.org/plugins/php-code-widget/

インストールして有効化すると「外観」ー＞「ウィジェット」に「PHPコード」というウィジェットが表示されるので、それを表示したい位置にドラッグ＆ドロップできます。

以下の画像はPHPコードの設置例です。

タイトル欄の下にPHPコードを書き、
「保存」を押すとPHPコードを埋め込んだ領域でそのPHPが実行されます。

PHPファイルを直接編集してる訳ではないので、
エラーが起きてもブログ全体が壊れることは無いので安全です。

以下の方法では、SNSボタンをカスタマイズするのにこのプラグインを使います。

SNSボタンのカスタマイズ

前置きが長くなりましたが、次がSNSボタンのカスタマイズ方法です。

位置のカスタマイズ方法から最初に見てください。

１．ボタン位置のカスタマイズ

まずSNSボタンがどのように設置されているかという事ですが、
次のようにget_template_part関数からSNSボタンのテンプレートを呼び出してます。

<?php
get_template_part('template');
?>

このように書くとtemplate.phpというPHPファイルの内容が出力されます。

なのでSNSボタンを出力したいなら simplicity のテーマフォルダの中からSNSボタンの出力をしているテンプレートファイルを呼び出し、そのファイル名をget_template_partに渡せばいいという事です。

simplicity2のテンプレートフォルダは以下のURL

URL : [WPインストールディレクトリ]/wp_content/themes/simplicity2

ここには、SNSボタン出力する３つのテンプレートが存在します。

• sns-buttons.php
• sns-buttons-default.php
• sns-buttons-ballooon.php

このいずれかを get_template_part関数 に渡せばSNSボタン表示されます。

例えばウィジェット画面で「投稿本文上」にPHPコードウィジェットを設置し、
次のようなPHPコードを書きます。

<?php
get_template_part('sns-buttons');
?>

そして保存すると記事タイトル下に次のようにSNSボタンが設置されます。

標準のカスタマイズ画面のような平たいボタンではなく、大きめのアイコンになりました。

またget_template_partに 'sns-buttons-balloon' を渡すと、
次のような バルーンボタン が表示されます。

ここではタイトル下に表示していますが、
PHPコードウィジェットが置けるなら、どこにでもSNSボタンを設置可能です。

２．表示するSNS種類のカスタマイズ

標準でもどのボタンを表示するかはカスタマイズできますが、
あるボタンを非表示にすると、全て場所でそのボタンが非表示になってしまいます。

それぞれのSNSボタンの表示・非表示は、
simplicityで定義されている次のようなPHP変数で切り替えされています。

これらの変数がtrueの時に表示され、failseの時に非表示になります。

例えば ツイートボタン と GooglePlusボタン を非表示にしたい場合・・・
PHPコードに次のように書きます。

<?php

/** ツイートボタンを非表示 */
set_theme_mod( 'twitter_btn_visible', false );
/** GooglePlusボタンを非表示 */
set_theme_mod( 'google_plus_btn_visible', false );

get_template_part('sns-buttons');

/** 設定を元に戻す */
set_theme_mod( 'twitter_btn_visible', true );
set_theme_mod( 'google_plus_btn_visible', true );

?>

テーマで定義されている変数を変更するには set_theme_mod関数 を使い、
この関数の１つめの引数に 変数名 、２つめに 値 を渡します。

この例ではtwitter_btn_visible変数とgoogle_plus_btn_visible変数にそれぞれfalse(偽)の値を渡しています。（ ＝ ボタン非表示 ）

このPHPコードを保存すると、
次のようにツイートボタンとGooglePlusボタン以外が表示されるようになります。

カスタマイズ画面でボタン非表示にする場合と違い、
記事タイトル下にあるSNSボタンだけカスタマイズ可能ということです。

３．SNSボタン上のメッセージ変更

SNSボタンの上に「シェアする」が表示されますが、これもカスタマイズ可能。

このメッセージを表示しているのが share_message_label という変数です。

これを次のように set_theme_mod関数 で変えるだけで任意のメッセージになります。

<?php
set_theme_mod('share_message_label', "この記事をシェア！");
get_template_part('sns-buttons');

/** メッセージを元に戻す */
set_theme_mod('share_message_label', "シェアする");
?>

このPHPコードを保存すると・・・

上画像のように「この記事をシェア！」というメッセージが表示されるようになります。

SNSボタンのメッセージを一工夫すれば、シェア率アップにつながるかも。

まとめ

simplicityは初めからSNSシェアボタンがついてて便利です。

でも位置やデザインまで細かく設定できないのが不便ですね。

SNSボタンを自由にカスタマイズしたい場合、今解説した方法をお試しあれ。

The post simplicityでSNSボタンの種類や位置を自在にカスタマイズする方法 first appeared on Fukuro Press.

WordPressではサイドバーや記事下などのウィジェットエリアにサイドバーや人気記事などのウィジェットを置いて機能を追加することができます。

特にsimplictyではプラグインなどを導入しなくてもウィジェット機能が豊富で初めから新着記事や人気記事を表示したり、SNSのフォローボタンなどを表示するウィジェットが用意されています。

ただsimplicityではヘッダーがウィジェットエリアに対応していないのでヘッダー内に何かウィジェットを置くということができません。

そこでここではsimplicityでヘッダーをウィジェットエリアに追加し、そこに検索ボックスなどのウィジェットを設置する方法について解説します。

ヘッダーとは

まずウィジェットの設置方法の前にWordPressにおけるヘッダーについて説明します。

ヘッダーとは次のオレンジ色の枠で囲んだサイトの一部分のことです。

この部分には次のような情報が表示されます。

• サイトタイトル
• サイトの簡単な説明
• SNSフォローボタン

ページを開いたときに一番最初に表示されるサイトの顔になる部分です。

ただしヘッダーにはその下に表示されるナビメニューは含まれません。もしナビメニューをヘッダーに含めたい場合は次の記事でそのやり方を解説してあります。

simplicityでヘッダータイトルの横にナビメニューを表示する方法

ヘッダーの空きスペースが無駄なのでナビメニューをタイトル横やサイト概要横に設置したいと思う人も多いと思いますが、simplicityのカスタマイズ画面ではそのような設定はありません。しかし設定は無くてもテーマのCSSなどを少しだけ編集するだけでそのようなカスタマイズは可能です。ここではヘッダーのタイトルやサイト概要横にナビメニューを表示する方法を解説します。

fukuro-press.com

2019-11-19 15:44

ここでやることはこのヘッダー部分に次の画像のように検索ボックスなどのウィジェットを設置することです。

ただしこのようにウィジェットを置くにはヘッダーをウィジェットエリアに登録する必要があります。ここで紹介するのはヘッダーをウィジェットエリアに登録してウィジェットを設置する方法です。

ヘッダーにウィジェットを設置する方法

では、ヘッダーにウィジェットを設置する方法について解説します。

その手順は次の通り

ウィジェットエリアの登録

初めにヘッダーをウィジェットエリアとして登録します。

まずWordPress内の「テーマの編集」またはFTPソフトでsimplicityテーマがインストールされているフォルダを開いて、「functions.php」というPHPファイルに次の内容を追加してください。

if (function_exists('register_sidebar')) {
 
register_sidebar(array(
  'name' => 'ヘッダー内',
  'id' => 'header1',
  'description' => 'ヘッダー内に表示されるウィジェットです。',
  'before_widget' => '<div class="header_widget">',
  'after_widget' => '</div>',
  'before_title' => '',
  'after_title' => ''
));

}

register_sidebar関数でウィジェットエリアを登録しています。

この関数で指定している各引数の意味は次の通りです。

• name
  ウィジェットエリアの名前。WordPressの「外観」ー＞「ウィジェット」を開いたときのウィジェットエリアの名前として表示されます。
• id
  ウィジェットエリアのID。他と重複しない分かりやすいID名をつけてください。
• description
  ウィジェットエリアの説明。これはnameと同様にWordPressのウィジェット画面でウィジェットエリアの説明として表示されます。
• before_widget
  ウィジェットを囲む開始タグ
• after_widget
  ウィジェットを囲む終了タグ
• before_title
  ウィジェットエリアに表示されるタイトルの開始タグ(<h2>や<h3>など)
• after_title
  ウィジェットエリアに表示されるタイトルの終了タグ(</h2>や</h3>など)

今回はタイトルはいらないので記述していません。

register_sidebar関数を追加したらfunctions.phpを保存して閉じてください。

ウィジェットエリアの設置

register_sidebar関数を呼び出しただけではウィジェットエリアは使用できません。ヘッダーのテンプレートファイル内でウィジェットエリアを設置する必要があります。

まずヘッダーを出力している「header.php」というファイルを開きます。

そして次の画像でオレンジ色で囲った部分を探してください。

このオレンジ色の部分はサイトタイトル・ロゴ画像、サイトの説明などを出力している部分です。この部分の下に次のPHPコードを追加してください。

<?php dynamic_sidebar(header1); ?>

dynamic_sidebar関数に先ほど登録したウィジェットエリアのIDを渡して呼び出すことでその場所にウィジェットが設置されるようになります。

ヘッダー内へのウィジェットの設置

ここまで設定すればウィジェット画面から検索ボックスなどのウィジェットを設置することが可能です。

ではメニューから「外観」ー＞「ウィジェット」を開いてください。

開いてウィジェットエリアを見てみると次のように「ヘッダー内」というエリアが新たに追加されています。

この場所には次のように他のウィジェットエリアと同じく検索ボックスなどのウィジェットをドラッグ&ドロップで置くことが可能です。

ウィジェットを設置して「保存」ボタンを押したらブラウザで適当なページを開いて見てください。次のようにヘッダー下に検索ボックスが表示されます。

スタイルの微調整

最後にウィジェットの表示の仕方を少しだけ微調整します。

ヘッダーに設置したウィジェットはPCでは特に問題なく表示されますが、スマホなどの画面幅の狭い端末だと次のように画面幅いっぱいに広がって表示されてしまいます。

そこでsimplicityの「style.css」を開いてスマホ用に次のようなCSSを追加します。

@media screen and (max-width: 740px){

  .header_widget{
    margin-left:6px;
    margin-right: 6px;
  }

}

画面幅が740ピクセル未満の場合は次のように左右にマージンが少しだけ空くので見やすくなります。マージンの大きさについては好きなように調整してください。

以上がヘッダーにウィジェットを設置する手順です。

もちろん検索ボックスだけではなく、プラグインで用意されたウィジェットやカスタムHTMLコードも好きなように設置可能です。

まとめ

simplicityではウィジェットエリアにヘッダーが登録されていませんが、ここで紹介したように少しテンプレートファイルにコードを追加するだけで簡単にウィジェットが設置できます。

ここではヘッダーの下にウィジェットエリアを設置していますが、コードの位置を変えればヘッダー上にウィジェットを置くことも可能です。

以上simplicityでヘッダー領域にウィジェットを設置する方法について解説しました。

The post simplicityでヘッダー内に検索ボックスなどのウィジェットを設置する方法 first appeared on Fukuro Press.

ブログカードとは次のようにページのタイトル・デスクリプション・アイキャッチ画像が表示されたカード形式のリンクのことです。

このようなカード形式のリンクを作る場合は他のテーマではプラグインが必要になってしまいますが、WordPressテーマの１つである「simplicity」を使うとプラグインなしでブログカードの作成が可能です。

そこでここではsimplicityでのリンクカードの貼り方・カスタマイズ方法について解説します。

ブログカードを使う利点

ブログカードを使った場合ただリンクを表示する場合と比べて読者に伝わる情報が多くなるという利点があります。

例えばただリンクを作った場合はリンクテキストにページタイトルしか表示できませんが、ブログカードを使えばページタイトルだけでなく、簡単な概要やアイキャッチなど多くの情報を載せることが可能です。

ただのリンクならタイトルだけ見て内容でページを開こうか開かないか判断されてしまいますが、ブログカードなら読者に多くの情報が伝わるので興味を持ってもらいページも見られやすくなります。

なので内部リンクをブログカードにするのはPVを増やすのに非常に効果的です。

ブログカードの作り方

ブログカードの作成はとても簡単です。

次のように投稿ページの編集画面で１行にリンク先のページのURLを書くだけです。

https://fukuro-press.com/wordpress-migration/

あるいは内部リンクさせるなら次のような書き方も可能です。

<a href="https://fukuro-press.com/wordpress-migration/">https://fukuro-press.com/wordpress-migration/</a>

上のような１行を書くだけで次のようにブログカードが表示されます。

プラグインや面倒な設定とかは一切必要ありません。

ただしHTMLタグの記述ができるテキストエディタ内でブログカードを設置する場合は必ず次のようにURLのある行の前後に空白行を入れてください。

前後に空白を挟まない場合次のようにURLそのものが表示されてしまうので注意が必要です。

ブログカードのカスタマイズ

ブログカードをカスタマイズするにはまずメニューから「外観」ー＞「カスタマイズ」を選んで開いてください。

simplicityテーマのカスタマイズ画面が出てくるのでその中から「ブログカード（内部リンク）」という設定項目を選択して開いてください。

すると次のようなブログカードの設定項目が出てきます。

この画面でブログカードの次のような設定を変更できます。

アイキャッチ画像の位置

デフォルトの何も設定していない状態だとブログカードのアイキャッチ画像(サムネイル)は左側に表示されます。

このアイキャッチ画像を右側に設置するには設定項目の中の「サムネイルを右側にする」にチェックをつけて「公開」ボタンを押して公開してください。

次のようにブログカードのアイキャッチが右側に表示されるようになります。

カードを記事の幅に合わせる

デフォルトの状態だとブログカードは500ピクセルの幅に設定されています。

なのでパソコンなどの幅の広い端末で記事の幅いっぱいにブログカードを表示したい場合は設定項目の「カード幅を広げる」にチェックをつけて公開してください。

この設定を有効にすると次のようにブログカードが記事内のボックス幅いっぱいに広がって表示されます。

サイトロゴリンクの有効化

ブログカードには左下にサイトドメインがテキストとして表示されています。下の画像の矢印で示した部分がサイトドメインです。

デフォルト状態だとこれはただのテキストでトップページへのリンクではありません。

そこでこのテキストにトップページへのリンクを張るには設定項目で「サイトロゴリンク有効」にチェックを入れください。

これでサイトドメイン名が表示されるだけでなくそのテキストがトップページへのリンクになります。

以上simplicityでブログカードを作成とカスタマイズする方法について解説しました。

ただリンクを設置するよりブログカードの方がPVを増やすのに効果的だと思うのでsimplicityを使っているなら活用していきましょう。

The post simplicityでのブログカードの貼り方＆カスタマイズ方法 first appeared on Fukuro Press.

WordPressのテーマの１つであるsimplicityでは標準でツイートボタンやFacebookのシェアボタン、はてなブックマークやPocketなどのSNSボタンが搭載されています。

SNSボタンでの記事の拡散力というのはとても強力なので標準でこういう機能がついているのはブロガーにとってはありがたいです。

ただ便利なのは便利ですが細かいカスタマイズをsimplicityのカスタマイズ画面でやろうとするとできないこともあります。

例えばタイトル下では小さ目のSNSボタンを表示して、記事下では大き目のSNSボタンを表示しようと思っても管理画面にはそのような設定はできません。

そこでここでは表示する場所でSNSボタンのデザインを変える方法を解説します。

SNSボタンはカスタマイズしにくい

simplicityでは「外観」ー＞「カスタマイズ」から「SNS」を選ぶとSNSボタンのカスタマイズができます。

このカスタマイズ画面で設定できることは次のような項目です。

• ボタンのスタイル
• シェアボタンの表示位置(タイトル下か記事本文上のみ)
• 表示するSNSボタンの種類
• その他いろいろ...

色々設定できますが、それでも細かい処理をしようとすると限界があります。

例えばスマホなどでは画面幅と高さがとても狭いです。そのためあまりスペースの取らないアイコンタイプのボタンが使われます。しかし記事下には目立つ大きめのボタンを設置しようとしても管理画面ではそのような高度な設定はありません。

場所によってSNSボタンを切り替えたい場合はPHPから操作する必要があります。

と言ってもそんなに難しいことではなく記事内でPHPを使えるプラグインを使えば安全に記述できます。

SNSボタンのカスタマイズに必要なプラグイン

SNSボタンをカスタマイズするにはPHPを扱う必要があります。しかし直接テーマのPHPを編集してエラーなどが出るとサイト全体に影響が及ぶことがあります。

そこでここではウィジェット内で局所的にPHPが扱える「PHP Code Widget」というプラグインを使用します。

このプラグインは「プラグイン」ー＞「新規追加」をクリックしてプラグイン名で検索すると検索結果に出てきます。

次のURLからダウンロードして使う事もできます。

https://ja.wordpress.org/plugins/php-code-widget/

インストールして有効化すると「外観」ー＞「ウィジェット」に進むと「PHPコード」というウィジェットが追加されます。

これをPHPコードを表示したい領域にドラッグ＆ドロップします。以下はその設置例です。

PHPコードを書いて「保存」ボタンを押すと設置した場所でPHPコードが実行されます。

ここではこのプラグインを使って特定の場所のSNSボタンをカスタマイズします。

タイトル上と記事下でSNSボタンを変える

まずタイトル下と記事下の両方にSNSボタンを設置している場合、デザインを変えたい方のSNSボタンを非表示にしてください。ここではタイトル下のSNSボタンをカスマイズするものとします。

そして「外観」ー＞「ウィジェット」と進んで「投稿本文上」の領域にPHPコードを設置します。その中にSNSボタンを出力するコードを書いていきます。

WordPressではあるテンプレートを出力するのにget_template_part関数を使用します。

<?php
get_template_part('template');
?>

上のコード例では現在使用しているテーマフォルダ内にあるtemplate.phpというPHPファイルが出力されます。

このget_template_partにSNSボタンを出力しているテンプレートを渡せばいいということです。例えば標準のSNSボタンを出力するには次のようなコードを記述します。

<?php
get_template_part('sns-buttons-default');
?>

これを書いて保存するとタイトル下に次のようなSNSボタンが表示されます。

SNSボタンのデザインを変えるにはget_template_part関数に渡すテンプレート名を変えます。simplicityで用意されているSNSボタンのテンプレート名とデザインは次の通りです。

• sns-buttons-default
  各SNSで用意されているデザインのボタン(非推奨)
  
• sns-buttons-viral
  パソコン向けの大きめのデザインのボタン
  
• sns-buttons-balloon
  上にシェア数の吹き出しが表示されるバルーンタイプのボタン
  
• sns-buttons-icon
  画面の狭いスマホ端末で高速表示できるボタン
  
• sns-buttons
  各端末に最適なSNSボタンを表示。PCではsns-buttons-balloon、スマホではsns-buttons-iconが表示される

このテンプレートの中からタイトル上で表示したいものをget_template_part関数に渡せばそのデザインで表示されます。

もしさらにPCとスマホでも振り分けたい場合はsns-buttonsを使う以外にwp_is_mobile関数を使って次のように振り分けることも可能です。

if(!wp_is_mobile()){
    /** PCの場合 */
    get_template_part('PCのテンプレート');
}else{
    /** スマホの場合 */
    get_template_part('スマホのテンプレート');
}

wp_is_mobile関数はページを表示している端末がスマホまたはタブレットの場合にtrue、そうでないPCの場合はfalseを返してきます。

上のコードのように分岐させれば端末ごとに好きなSNSボタンを表示することも可能です。

以上タイトル下と記事本文下で別々のデザインのSNSボタンを表示する方法について解説しました。

The post simplicityのSNSボタンのデザインを記事下とタイトル上で変える方法 first appeared on Fukuro Press.

WordPressでサイト構築する場合、一番上に表示されるサイトタイトルとデスクリプション(サイトの説明)は設定画面から内容は変えることができます。

しかし設定画面からはサイトタイトルやデスクリプションにCSSを適用してスタイルを変更することはできません。

ここではWordPressでよく使われるテーマである「simplicity」で上部のサイトタイトルなどにCSSを適用する方法を解説します。

サイトタイトルのスタイルを変える方法

simplicityではサイトタイトルをh1タグ、サイトデスクリプションをh2タグとして出力しています。

実際simplicityを使っているサイトのあるページでソースを見ると次のようにタイトルとデスクリプションが生成されているのが分かります。

上の画像から分かるようにサイトタイトルは"site-title"というidが降られ、サイトの概要には"site-description"というidが振られているのが分かります。

タイトルのスタイルを変えるにはこのidに対してCSSを適用してやればいいことになります。

そのやり方ですがまず「外観」ー＞「テーマの編集」と進み、その中から「style.css」を選び開きます。

そこで「Ctrl + F」などで検索窓を出し、その中に"site-title"と打ってエンターを押すと次のようにそのidに対してスタイルを適用している部分が見つかります。

このスタイルを書き換えればサイトタイトルのデザインを変えることができます。

例えばフォントサイズを変えてさらに太字にしたいなら次のようにcssを書き換えます。

#site-title{
  margin-top:16px;
  margin-bottom:10px;
  /*font-size: 30px;*/
  font-size: 40px;
  line-height: 100%;
}

#site-title a{
  text-decoration:none;
  color:#222;
  /*font-size:30px;*/
  font-size: 40px;
  /*font-weight:normal;*/
  font-weight:bold;
}

テーマのCSSなので慎重に編集してください。後から戻せるように上のコードのように変更した箇所は消さずにコメントアウト(/*と*/で囲む)しておいた方が良いです。

変更したら「ファイルを更新」を押すとサイトタイトルにスタイルが適用されます。

サイトタイトルのカスタマイズ例

最後にサイトタイトルのカスタマイズ例をいくつか紹介します。気に入ったのがあったらコピペして使ってみてください。

文字に影をつける

次のように背景に影のついたタイトルです。

CSSコード

#site-title{
  margin-top:16px;
  margin-bottom:10px;
  font-size: 30px;
  line-height: 100%;
  /** 以下の行を追加 */
  text-shadow: blue 2px 2px 6px;
}

#site-title a{
  text-decoration:none;
  color:#222;
  font-size:30px;
  /*font-weight:normal;*/
  font-weight:bold;
}

text-shadowプロパティをテキストに適用することで影をつけています。

文字の縁取り

次のような縁取りされたタイトルも作れます。

CSSコード

#site-title{
  margin-top:16px;
  margin-bottom:10px;
  font-size: 30px;
  line-height: 100%;
  text-shadow: 
      blue 2px 2px 0px, 
      blue -2px 2px 0px, 
      blue 2px -2px 0px, 
      blue -2px -2px 0px, 
      blue 0px 2px 0px, 
      blue 2px 0px 0px, 
      blue 0px -2px 0px, 
      blue -2px 0px 0px;
}

#site-title a{
  text-decoration:none;
  /*color:#222;*/
  color: rgba(100, 255, 255, 1);
  font-size:30px;
  /*font-weight:normal;*/
  font-weight:bold;
}

先ほどのtext-shadowプロパティを応用して全方位にぼかしなしの影をつけることで縁取りしています。

一部のスマホのブラウザではtext-shadowが対応していないことがあるので文字色はサイトの背景色以外にするのが無難です。

文字をグラデーション

次のようにwebkit系で文字グラデーションに対応しているブラウザだと次のようにタイトルにグラデーションをかけることもできます。

CSSコード

#site-title{
  margin-top:16px;
  margin-bottom:10px;
  font-size: 30px;
  line-height: 100%;
 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: rgba(0, 0, 255, 1);
  background-image: 
    linear-gradient(to top, rgba(180,180, 255, 1), rgba(0, 0, 255, 1));
}

#site-title a{
  text-decoration:none;
  /*color:#222;*/
  font-size:30px;
  /*font-weight:normal;*/
  font-weight:bold;
}

background-imageプロパティにlinear-gradiet関数を渡すことでテキストをグラデーションさせています。

ただしこれはwebkit系のブラウザでしか対応していないので非対応の場合はbackground-color: rgba(0, 0, 255, 1);が適用され次のようなタイトルになります。

以上simplicityでサイトタイトルをcssで装飾する方法について解説しました。

The post simplicity上部のサイトタイトルとアイキャッチをCSSで装飾する方法 first appeared on Fukuro Press.

WordPressのテーマの１つである「simplicity」は内部SEO対策が簡単でレスポンシブに対応しているので多くのブログやサイトで使用されている人気のあるテーマです。

また設定から簡単にテーマの外観を変更することができ、カスタマイズ性もあります。

ただヘッダーを固定しようとした場合、そのような設定はsimplicityのカスタマイズ画面にはないので独自にスタイルを追加する必要があります。

そこでここではsimplicityで上部に表示されるヘッダーを固定し、スクロールしても常に表示され続けるようにする方法について解説します。

simplicityにおけるヘッダーとは

ヘッダーとは名前通りサイトの上部(ヘッダー)部分に表示されるコンテンツのことです。

simplicityの場合、デフォルトで次のような見た目になってます。

ヘッダー部分には次の内容が表示されます。

• サイト名
• サイトデスクリプション(概要)
• SNSなどのフォローボタン
• ヘッダー背景

ページを開いたときに一番最初に表示されるサイトの顔になる部分です。

ただしヘッダーのすぐ下に表示されるナビメニューはヘッダーには含まれていません。

もしsimplicityでナビメニューもヘッダーに含めたい場合、
以下の記事で解説した方法などを使ってください。

simplicityでヘッダータイトルの横にナビメニューを表示する方法

ヘッダーの空きスペースが無駄なのでナビメニューをタイトル横やサイト概要横に設置したいと思う人も多いと思いますが、simplicityのカスタマイズ画面ではそのような設定はありません。しかし設定は無くてもテーマのCSSなどを少しだけ編集するだけでそのようなカスタマイズは可能です。ここではヘッダーのタイトルやサイト概要横にナビメニューを表示する方法を解説します。

fukuro-press.com

2019-11-19 15:44

このヘッダーをカスタマイズするには、
メニューから「外観」ー＞「ヘッダー」と進み、カスタマイズ画面を開きます。

「ヘッダー」を開くと次のようにヘッダーのカスタマイズ画面がでてきます。

この画面でPCやスマホでのヘッダー画像やヘッダー高さ、タイトルテキストの代わりになるロゴ画像などを設定することができます。

ただしヘッダーを固定する設定項目はないので、次に紹介する方法で独自にスタイルを追加する必要があります。

simplicityでヘッダー固定する手順

ヘッダーを固定する手順は次の通り

まずメニューから「外観」ー＞「カスタマイズ」を開きます。

開くと現在使用しているsimplictyのカスタマイズ画面が開くので次のように一番下までスクロールして「追加 CSS」という項目を開いてください。

「追加 CSS」を開くと下の方に独自CSSコードを入力するテキストエリアが表示されます。

ヘッダーを固定するには、
このテキストエリアに 次のようなCSS を追加します。

@supports (transform: translateX(-50%)) and (-webkit-transform: translateX(-50%)){
  header{
    height: 100px;
  }

  #header{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%)

    width: 1070px;
    height: 100px;
    z-index: 100;
    margin: 0 auto;
  }
}

以上の内容を保存すればヘッダーが固定されて表示されます。

たったこれだけですが、このCSS内で何をしているのか次で少し説明します。

このCSSではまず「#header」内の次のコードで、ヘッダーを固定しているんです。

position: fixed;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);

「position: fixed」と指定することで画面内での位置が固定になります。

そして「left: 50%」で左側から５０%の位置にヘッダーの左端を置いて、「transform: translateX(-50%)」で要素の大きさの半分だけ位置を移動させることで画面横中央にヘッダーを表示させています。

またほんの一部ですが transformプロパティに対応していないブラウザ があるので、
その場合はヘッダーを固定しないように最初に@supportsを使って条件分岐させています。

@supports (transform: translateX(-50%)) and (-webkit-transform: translateX(-50%)){

このCSSコードを「公開」ボタンを押して公開するとスクロールされても追従し、画面上部に固定されたヘッダーの完成です。

完成ヘッダーはサイトを表示したときは普通のヘッダーと見た目は全く変わりません。

しかし下にスクロールしてみると次のようにヘッダーが上部で固定され、常に同じ位置に表示されるようになります。

こういう感じ

まとめ

ヘッダーの固定されたサイトというのはあまり多くないのでsimplicityでは固定ヘッダーの設定がないですが、このように独自スタイルを追加すれば簡単に固定ヘッダーは作成できます。

以上simplicityでヘッダーを上部に固定表示する方法について解説しました。

The post simplicityでヘッダー部分を画面上に固定表示する方法 first appeared on Fukuro Press.