Tag Archives: おすすめ

おすすめに表示させる記事

WordPress プラグインなしで記事のランキングを表示させる方法 2020年07月13日 投稿者：アンディ wordpress

WordPressにおいてプラグインなしで、記事の読まれた回数をカウントし、ランキングとして表示させる方法をご紹介します。

プラグインを導入するとより手軽にランキングを表示できますが、なにかと不便だったり、サイト自体が重くなったり動かなくなることもあるので、なるべくプラグインは使用しないのが賢明かと思います。

当サイトもほぼプラグインなしで構築しています。コピペで実装できますので、参考になれば幸いです。

「functions.php」に追加

記事の閲覧回数をカウントする関数をfunctions.phpに追加します。

※functions.phpを変更する場合はバックアップを取ることを推奨します。

//記事のアクセス数を計測するために追記
function set_post_views($postID) {
	$count_key = 'post_views_count';
	$count = get_post_meta($postID, $count_key, true);
	if($count==''){
		$count = 0;
		delete_post_meta($postID, $count_key);
		add_post_meta($postID, $count_key, '0');
	}else{
	$count++;
	update_post_meta($postID, $count_key, $count);
	}
}

記事ランキングを表示する

5件表示
記事のタイトル
投稿された日時
アイキャッチ画像
登録カテゴリ

<ol>
<?php
$popular = new WP_Query(array(
    'posts_per_page'   => 5,
    'meta_key'         => 'post_views_count',//投稿数をカウントするカスタムフィールド名
    'orderby'          => 'meta_value_num',
    'order'            => 'DESC',
    'post_status'      => 'publish',
    'caller_get_posts' => 1,
    'offset'           => 0,
));
while ($popular->have_posts()) : $popular->the_post();
?>
    <li>
            <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
          <?php the_title(); ?>
          <?php the_time('Y.m.d'); ?>
          <!-- アイキャッチ画像が登録されているか -->
          <?php if(has_post_thumbnail()): ?>
          <?php the_post_thumbnail('index_thumbnail'); ?>
          
          <!-- ないときは記事の最初の写真、それもないときはfunctionsに設定したパスの画像 -->
          <?php else: ?>
          <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>">
          <?php endif; ?>

        <?php if( has_category() ){ ?>
        <span class="cat-data">
        <?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
        </span>
        <?php } ?>


            </a>

    </li>
<?php endwhile; wp_reset_postdata(); ?>
</ol>

$popular = new WP_Query(array());内に下記を追加すると特定のカテゴリに追加された投稿は除外されます。

	'category__not_in' => array(5),//特定のカテゴリを外す

「single.php」にカウンターを追加

記事にアクセスがあったときにpost_viewa_countの値を＋1する記述をsingle.phpに追加します。

<?php set_post_views( get_the_ID() ); ?>

しかし上記コードでは記事を確認するためにプレビュー表示した場合やクローラーが巡回した場合も回数がカウントされてしまいます。

なんでもカウントしてOKならば、上記で大丈夫です。

「functions.php」に追加

クローラーかどうかを識別するための関数をfunctions.phpに追加します。

//クローラーのアクセス判別
function is_bot() {
  $ua = $_SERVER['HTTP_USER_AGENT'];
 
  $bot = array(
        "googlebot",
        "msnbot",
        "yahoo"
  );
  foreach( $bot as $bot ) {
    if (stripos( $ua, $bot ) !== false){
      return true;
    }
  }
  return false;
}

「single.php」に追加

<?php if( !is_user_logged_in() && !is_bot() ) { set_post_views( get_the_ID() ); } ?>

CSSで装飾

出力しているところに好きなスタイルを適応させると完成です。

【NEW】フレックスボックスで柔軟なレイアウトつくり 2020年05月10日 投稿者：ヨッシー css

Flexbox(フレックスボックス)は、CSSの新しいレイアウト技法で、ブロック要素を簡単に横並びにすることができます。従来のfloat-leftで横並びするよりも遥かに便利です。※特にレスポンシブ時に◎

今回は、Flexboxのさまざまな使い方をご紹介します♪

フレックスコンテナ(親要素)の特性

設定	設定の説明
display:flex	子要素を横並びにすることができます
flex-direction	子要素の並ぶ方向を指定できます
flex-wrap	子要素を一行、複数行に並べることができます
justify-content	子要素同士を等間隔で並べることができます
align-items	子要素の位置する高さを指定できます

フレックスボックスの基本設定

「ブロック要素」は親要素に、display:flexを追加してください。

「インライン要素」の場合は親要素に、display:inline-flexを指定します。

記述例

<style>
/* ブロック要素の場合 */
    #flexbox{
      display:flex; 
    }

/* インライン要素要素の場合 */
    #flexbox{
      display:inline-flex; 
    }

</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

上記の指定をすると子要素がフレックスアイテムになります。

フレックスアイテムを一行、複数行に並べて配置　flex-wrap

flex-wrapを指定するとフレックスアイテムを一行に並べるか、複数行に並べるか指定できます。（display: table-cellみたいなイメージです）

Floatと違い親要素の幅を超えた場合でも改行しませんので、新たにプロパティを追加する必要があります。

設定	設定の説明
flex-wrap:nowrap	子要素を1行に収めることができます
flex-wrap:wrap	子要素が一行に収まらない際に複数行にすることができます
flex-wrap:wrap-reverse	子要素が一行に収まらない際に複数行にします ※順番を逆にして配置

記述例

<style>
    #flexbox{
      display:flex; 
      flex-wrap: wrap;
    }   
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

フレックスアイテムを1行に収めることができます

フレックスアイテムが一行に収まらない際に複数行にすることができます

POINT）flex-wrap:wrapを指定していない場合、子要素にwidth:30%を設定すると縮んで一行に収まります。

記述例

<style>
    #flexbox{
      display:flex; 
      flex-wrap: wrap;
    }
    .box-item{
      width:30%;
    }    
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

縮んで一行に収まります

フレックスアイテムの並ぶ方向を指定　flex-direction

flex-directionはフレックスアイテムの並ぶ方向を指定することができます。

POINT）奇数だけ逆向きの指定をすれば、とても簡単に互い違いのレイアウトにすることができます。

設定	設定の説明
flex-direction:row	子要素を左から右に配置できます
flex-direction:row-reverse	子要素を右から左に配置できます
flex-direction:column	子要素を縦（上から下）に配置できます
flex-direction:column-reverse	子要素を縦（下から上）に配置できます

flex-direction:row

記述例

<style>
    #flexbox{
      display:flex; 
      flex-direction:row
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

子要素を左から右に配置できます

flex-direction:row-reverse

記述例

<style>
    #flexbox{
      display:flex; 
      flex-direction:row-reverse
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

子要素を右から左に配置できます

flex-direction:column

記述例

<style>
    #flexbox{
      display:flex; 
      flex-direction:column
    }
    .box-item{
      width:30%;
    }    
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

子要素を縦（上から下）に配置できます

flex-direction:column-reverse

記述例

<style>
    #flexbox{
      display:flex; 
      flex-direction:column-reverse
    }
    .box-item{
      width:30%;
    }    
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

子要素を縦（下から上）に配置できます

フレックスアイテム同士を等間隔に並べて配置　justify-content

justify-contentはフレックスアイテムをどのように配置するか指定できます。たとえば、左寄せにしたり中央寄せ（フレックスアイテムは等間隔のまま）にすることができます。

設定	設定の説明
justify-content:flex-start	主軸の始点に配置します(デフォルト）
justify-content:flex-end	主軸の終点に配置します
justify-content:center	主軸の中央に配置します
justify-content:space-between	両端から均等に配置します
justify-content:space-around	主軸に対し均等間隔に配置します

justify-content:flex-start(デフォルト)

記述例

<style>
    #flexbox{
      display:flex; 
      justify-content:flex-start
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

主軸の始点に配置します(デフォルト）

justify-content:flex-end

記述例

<style>
    #flexbox{
      display:flex; 
      justify-content:flex-end
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

主軸の終点に配置します

justify-content:center

記述例

<style>
    #flexbox{
      display:flex; 
      justify-content:center
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

主軸の中央に配置します

justify-content:space-between

記述例

<style>
    #flexbox{
      display:flex; 
      justify-content:space-between
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

両端から均等に配置します

justify-content:space-around

記述例

<style>
    #flexbox{
      display:flex; 
      justify-content:space-around
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

主軸に対し均等間隔に配置します

フレックスアイテムの位置する高さを指定　align-items

align-itemsを指定するとフレックスアイテムの位置する高さを揃えたりできます。たとえば、ヘッダーなどで使い勝手がいいです。

設定	設定の説明
align-items:stretch	交差軸の始点から終点まで伸縮する(初期値) ※heightを設定していない場合
align-items:flex-start	交差軸の始点に配置する
align-items:flex-end	交差軸の終点に配置する
align-items:center	交差軸の中央に配置する
align-items:space-baseline	交差軸のベースラインに配置する

align-items:flex-start

記述例

<style>
    #flexbox{
      display:flex; 
      align-items:flex-start
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

交差軸の始点に配置します

align-items:flex-end

記述例

<style>
    #flexbox{
      display:flex; 
      align-items:flex-end
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

交差軸の終点に配置します

align-items:center

記述例

<style>
    #flexbox{
      display:flex; 
      align-items:center
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

交差軸の中央に配置します

align-items:space-baseline

記述例

<style>
    #flexbox{
      display:flex; 
      align-items:space-baseline
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

交差軸のベースラインに配置します

フレックスアイテム(子要素)の特性

設定	設定の説明
order	フレックスアイテムの並べる順番をどうするか指定するプロパティ
flex-grow	フレックスアイテムを他の要素と比べてどのくらい伸ばすか指定するプロパティ
flex-shrink	フレックスアイテムを他の要素と比べてどのくらい縮めるか指定するプロパティ
flex-basis	子要素の幅を指定できます。 ※flex-basis、widthがどちらとも設定されている場合は、flex-basisの設定値が優先。
flex	flex-grow、flex-shrink、flex-basisを１つにまとめて記載できます

フレックスアイテムの順番を入れ替え Order

フレックスアイテムの順番をばらばらに入れ替えるすることができます。

記述例

  <div id="flexbox">
    <div class="box-item" style="order:3">1</div>
    <div class="box-item" style="order:4">4</div>
    <div class="box-item" style="order:5">2</div>
    <div class="box-item" style="order:1">3</div>
    <div class="box-item" style="order:2">5</div>               
  </div>

このように順番を指定できます。

フレックスアイテムの幅を指定　flex-basis

flex-basisは、widthと同じ意味です。※flex-basis、widthがどちらとも設定されている場合は、flex-basisの設定値が優先されますのでお忘れなく。

記述例

  <div id="flexbox">
    <div class="box-item" style="flex-basis:30%;">1</div>
    <div class="box-item" style="flex-basis:30%;">2</div>
    <div class="box-item" style="flex-basis:120px;">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>               
  </div>

イメージ画像

フレックスアイテムを伸ばす範囲を指定　flex-grow

フレックスコンテナー内の残っている空間のうち、どのくらい伸ばすか (フレックス伸長係数) を設定します。※残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものを指します。

記述例

<div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item" style="flex-grow:0">2</div>
    <div class="box-item" style="flex-grow: 1;">3</div>
    <div class="box-item" style="flex-grow: 2;">4</div>
    <div class="box-item" style="flex-grow: 3;">5</div>               
  </div>

イメージ画像

フレックスアイテムを縮める範囲を指定　flex-shrink

フレックスアイテムの縮小係数を指定できます。初期設定値(伸縮なし)は「0」です。

<div id="flexbox">
    <div class="box-item" style="flex-shrink:1">2</div>
    <div class="box-item" style="flex-shrink:1">2</div>
    <div class="box-item" style="flex-shrink:1;">3</div>
    <div class="box-item" style="flex-shrink:2;">4</div>
    <div class="box-item" style="flex-shrink:2;">5</div>               
  </div>

イメージ画像

いかがでしたでしょうか。

参考になれば感激です。

Illustratorで制作したイラストを塗りなしの線画化に！ 2020年03月12日 投稿者：ナタリア Illustrator デザイン: Adobe Illustratorでパーツを組み合わせてイラストやアイコンを制作すると便利ですよね。修正するときにも、直したいパーツだけを選択すれば簡単に修正でき、操作時間も短縮できます。でも、制作したものをパス化して、背景を透明にするために苦労することありませんか？

まず、上記のイラストを見てみましょう。重ねて、組み合わせて、塗りに色を入れて制作することが多いと思います。そういったときは塗りをなしにすればきれいな絵になりませんね。Illustratorを使う上でパスファインダーの「分割」と「合体」を使いこなせていれば大抵のことは効率的にできます。ですが、場合によってはアイコン化したり、線だけのイラストを依頼されたときに有効活用できるのがパスファインダーの「刈り込み」というツールです。今回は、そのツールを使った作業を簡単に2パターンをご紹介したいと思います！

1つ目のパターン

主に刈り込みだけを使用して、簡単に透明背景にするパターンです。パス化したい部分を選択すると重なっている部分があることがわかりますね。塗りなし、パスだけにすると、絵がわかりにくくなります。そこで、“塗りあり”のままでパスファインダーで刈り込みを選択します。ワークスペースにパスファインダーがないときはメニューバーの「ウィンドウ」=>「パスファインダー」で開いてください。

すると、重なっていたところの部分は分割されます。

あとは線の色、太さやパスの微調整をして、完成です！（線のウィンドウの角の形状、線端を利用すると便利です。）

塗りなしにして、背景が何色でも、柄が入っても対応できるイラストになりました。

２つ目のパターン

２つ目のパターンは、塗りなしのパスがあるときの場合です。刈り込みだけではできないので“面の部分”と“線の部分”と二つに分けてやっていきます。この場合、円形の部分(線の部分)とその他(面の部分)と分けました。まずは線がある部分を選択して、分割します。

線の部分が一体化したら、今度は面の部分も選択して、刈り込みをします。この時も塗りに色を付けるのを忘れないでください。

そうすると、きれいに分割され、重なっている部分は無くなります。

終わったら塗りをなしにして、線の色、太さを調整して完成です。どんな背景にでも使えるイラストになりました。

最後に

パス化して、どんな背景にでも対応できるイラストの作り方でした。面があるパーツのみ制作して刈り込みしてから線や細かいところを調整したり、すべて分割して、部分的に合体したり、クリッピングマスクを使ったり、パスを切ったりとやり方は色々です。今回は様々な方法の中、私が便利と思う「刈り込み」を紹介させていただきました。ぜひIllustratorの機能を活用してください。

サブセット化で日本語Webフォントの容量を軽量化する方法 2020年02月14日 投稿者：アンディ デザイン

Webサイトをデザインする際、フォント選びはそのサイトの雰囲気を左右する重要な要素のひとつとなります。

こだわりのあるフォント、おしゃれなフォントをWebサイトに使うことで差別化することができます。 WebサイトにWebフォントを使うことも増えつつあります。

Webフォントを使用するメリット

見栄えが良くなる、デザイン性が高くなる
テキスト表示できるためSEO効果がある
他サイトと差別化できる
どの端末で閲覧しても同じフォントになる
自動翻訳に対応できる

Webフォントの使い方はこちら

Webフォントを使ってWEBサイトのデザインを高める

Webフォント使用の注意点

Webサイトをより魅力的にするWebフォントですが、日本語のWebフォントには最大の問題点があります。それは容量が大きくなってしまうことです。

日本語フォントは含まれる文字数が多いためファイル容量がかなり大きくなります。10MBを超えたりするものもあります。さすがにこれは重すぎて表示するまでに時間がかかってしまいます。表示速度が下がると、検索順位の低下や、閲覧者の離脱につながるため、避けることが望ましいですね。

そんな容量の大きい日本語フォントですが、サブセット化することで容量を軽くする事ができます。サブセット化とは、フォントに含まれる文字の中から必要な文字だけを抜き出しファイルサイズを小さくすることです。

それではダウンロードしたフォントをサブセット化して軽量化する方法をご紹介します。

サブセット化で容量を減らす

好みのフォントをダウンロード

試しにこの棘薔薇フォントというのををダウンロードしました。

それでは容量を確認してみましょう。

なんと16.7MBでした。これはさすがに重い、、

ソフトのインストール

サブセットするにはいくつかのソフトが必要になります。まずは、下記からサブセットフォントメーカーとWOFFコンバータをインストールします。

サブセットフォントメーカー

インストールしたサブセットフォントメーカーを起動してみましょう。

画面は下のようになっています。

サブセットフォントメーカーでは、アスキー文字 + 非漢字文字 + 第1水準漢字でサブセット化し、ファイルサイズを削減します。

つまり必要なフォントだけを残し使わないフォントは削除します。

「作成元フォントファイル」で今回軽量化するフォントを指定します。
「作成後フォントファイル」は軽量化した後のフォントの保存場所を指定します。
「フォントに格納する文字」は第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがなを貼り付けます。下記よりコピペしてください。
「作成終了後、WOFFコンバータを起動する」にチェックを入れます。
作成開始でサブセット化します。

フォントに格納する文字

第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがなを下記からコピーし、サブセットフォントメーカーのフォントに格納する文字の部分にペーストします。

https://docs.google.com/document/d/1Qs-XTAZEgFxx9TbfTNCrGMGuEJqxv2T5SKTLRJ4Gv6Q/edit

WOFFコンバータ

「変換前ファイル」で先程サブセットフォントメーカーで軽量化したフォントを指定します。
「変換後ファイル」で変更した後のファイル名を指定します。
「EOTファイルを生成する」でIEに対応したフォントファイルを制作できます。

また、様々なブラウザに対応するため4種類のフォーマットのファイルを作成ことをおすすめします。

.eot
.ttf
.woff2
.woff

10MBを超えるほとんどの日本語フォントは1MB以下に軽量化することができます。

変換後の容量確認

今回例でサブセット化した棘薔薇フォントはサイズを87%減少することができました。

まとめ

こだわりのあるフォントを使用することでサイトをより魅力的にすることができますが、日本語のWebフォントを導入する際は容量に注意する必要があります。

ですが今回ご紹介した方法で容量を軽量化することで問題なくサイトに導入することができます。

日本語フォントを使用するときは必須と言っていいと思います。ぜひ活用しWebサイトのデザイン性を高めてみてはいかがでしょうか。

WordPressプラグインなしでSNS共有ボタンを設置する 2020年01月09日 投稿者：アンディ wordpress

SNSの持つ高い拡散力はブログを運営していく上で無視することはできません。上手に活用することで新しいユーザーの獲得や読者の増加といった機会を大幅に増やすことができます。

WordPressの投稿記事内などの特定の場所にSNSのシェアボタンをプラグインなしで設置する方法を紹介します。

SNSの効果的な使用方法についてはこちら

SNS

余談：プラグインを使わない理由

プラグインを使わない理由は、サイトの読み込み速度が早くなること、自由にカスタマイズができること、プラグインのアップデートによる不具合の干渉を受けないことなどがあります。

より軽快にサイトが表示されれば検索順位も上げられますよね。

また、プラグインの脆弱性からサイトを攻撃される恐れもあるとか。
なんせできる限りプラグインは使わないということを目指した方がよさそうです。

SNSボタンをまとめたsns.phpを作成する

まずは、SNSボタンをテンプレートとして使用するために”sns.php”など任意の名前をつけたPHPファイルを作成します。下記のコードをコピペしたPHPファイルをWordPressのテーマ内に設置しておきます。

こうすることで好きな場所に一行のコードで設置することができます。

下記は「Facebook」「Twitter」「LINE」「はてなブックマーク」の4つのSNSシェアボタンを設置するためのコードとなっています。

sns.phpファイルを作成

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>

<div class="share">
<ul>
    <!--Facebookボタン-->
    <li class="facebooklink">
     <a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
       
    <i class="fa fa-facebook"></i><span> facebook</span>
    </a>
    </li>

    <!--ツイートボタン-->
    <li class="tweet">
    <a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
      <i class="fa fa-twitter"></i><span> tweet</span>
    </a>
    </li>

    <!--LINEボタン-->
    <li class="line">
    <a href="//social-plugins.line.me/lineit/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
        <span>LINE</span>
	</a>
    </li>

    <!--はてなボタン-->
    <li class="hatena">
    <a href="//b.hatena.ne.jp/entry/<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"><i class="fa fa-hatena"></i><span> はてブ</span>
    </a>
    </li>
</ul>
</div>

SNS共有ボタンのアイコンにFontAwesomeのWebアイコンを表示させています。FontAwesomeを使用する設定を行っていない場合はWebアイコンを利用する設定を行ってください。

CDNで利用するには、下記のリンクをheadタグに追加します。

headタグに追加

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

CSSでデザインを整える

次にCSSを使って装飾を行いましょう。下記にはデザイン例を載せましたので好みにカスタマイズしてください。

レスポンシブ対応も忘れずに行いましょう。@mediaを使用するには viewportの設定を行ってください。

CSSスタイルシートに追加

.fa-hatena:before {
    font-family: Verdana;
    font-weight: bold;
    content: 'B!';
}

.share {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-right: 3em;
}

.share ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.share ul:after {
    display: block;
    clear: both;
    content: '';
}

.share li {
    float: left;
    width: 25%;
    margin: 0;
    margin-top: 15px;
}

.share li a {
    font-size: 14px;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

.share li a:hover {
    opacity: .8;
}

.share li a:visited {
    color: #fff;
}

.tweet a {
    background-color: #55acee;
}

.facebooklink a {
    background-color: #315096;
}

.line a {
    background-color: #00b900;
}

.hatena a {
    background-color: #008fde;
}

@media screen and (max-width:768px){
    .share li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 3px;
    }
    
    .share li i {
        font-size: 1.3em;
        padding-top: 3px;
    }
    
    .facebooklink i, .tweet i, .hatena i {
        display: none;
    }
}

CSSで下記のようなボタンにしました。

はてなブックマークはFontAwsomeにアイコンがないので、似ているフォントで代用してアイコンにしています。

デザイン例

使用頻度の高そうな「Facebook」「Twitter」「LINE」「はてなブックマーク」を設置しましたが、他に追加するとしたらGoogle+はサービス終了したしPocketとかFeedlyくらい？

あと、スマホ用ではアイコンをdisplay:none;にして文字のみの表示にしましたが、逆にしてアイコンのみの表示にしてもいいかと思います。

sns.phpに追加

<li class="pocket">
    <a href="//getpocket.com/edit?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
    <i class="fab fa-get-pocket"></i><span>Pocket</span>
	</a>
</li>

CSSスタイルシートに追加

.pocket a{
    background-color: #EF4156;
}

@media screen and (max-width:768px){
    .share li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 3px;
    }
    
    .share li i {
        font-size: 1.3em;
        padding-top: 3px;
    }
    

    .facebooklink span, .tweet span, .hatena span{
        display: none;
    }
}

デザイン例

ちなみにFontAwsomeのLINEとPocketのアイコンは有料となっています。

記事内にSNSボタンを設置する

投稿記事内や、任意の場所にSNSボタンを表示させるには下記のコードを一行追加するだけで設置する事ができます。

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

‘sns’には制作したファイルの名前が入ります。先程「sns.php」という名前のファイルを作成したので「sns」と記述します。

WordPressの投稿記事に設置したい場合は「single.php」に追加します。

もちろん投稿記事以外の他の場所にも設置することができます。テンプレートを作っていおけば一行のコードを記述するだけでいろんな場所で読み込めるため便利です。

【CSSでできる！】hoverで画像を変える方法 2020年01月08日 投稿者： TORAT css: こんな感じで画像Aをhoverして画像Bに変更したい！

という場合の方法をご紹介します。

まずはデモをご確認下さい↓↓

画像が変わっているかと思います。

では実際にコードを書いていきましょう！！

画像Aを背景画像に指定し、hoverで画像Bを表示させる

それだけです！とても簡単です。

コードは下記の通りです。

See the Pen JjoprgM by izumi sasaki (@izumi0110) on CodePen.

画像Aと画像Bを作るとき、縦と横のサイズは必ず同じにしましょう！！

まとめ

今回はシンプルに画像を変更しているだけですが、

リンク先に飛ばす画像にアレンジしてみたり、他にも色々な応用が出来るかと思います。

ホームページにhoverアクションがあると操作が楽しくなりますね。

TORATのホームページではスタッフ紹介の所に取り入れています。(PC版のみの対応しています。)

ぜひチェックしてみて下さいね！