Tag Archives: おすすめ

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

WordPress プラグインなしで記事のランキングを表示させる方法

2020年07月13日

投稿者: アンディ

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日

投稿者: ヨッシー

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を1つにまとめて記載できます

フレックスアイテムの順番を入れ替え 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日

投稿者: ナタリア

Adobe Illustratorでパーツを組み合わせてイラストやアイコンを制作すると便利ですよね。修正するときにも、直したいパーツだけを選択すれば簡単に修正でき、操作時間も短縮できます。でも、制作したものをパス化して、背景を透明にするために苦労することありませんか?

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

1つ目のパターン

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

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

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

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

2つ目のパターン

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

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

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

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

最後に

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

サブセット化で日本語Webフォントの容量を軽量化する方法

2020年02月14日

投稿者: アンディ

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

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

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

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

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日

投稿者: アンディ

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にアイコンがないので、似ているフォントで代用してアイコンにしています。

デザイン例

PC用
スマホ用

使用頻度の高そうな「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;
    }
}

デザイン例

PC用
スマホ用

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

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

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

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

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

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

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

【CSSでできる!】hoverで画像を変える方法

2020年01月08日

投稿者: TORAT

こんな感じで画像Aをhoverして画像Bに変更したい!

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

【最新版】おすすめの無料フリー画像サイト【会員登録不要・商用利用可能】

2019年12月18日

投稿者: ヨッシー

WEBデザインやブログ記事でイメージに合った画像を無料で使用したい!でも会員登録はめんどくさい。

そんな方のために、今回は国内外問わず、会員登録なしで無料の写真&画像素材が使用できるフリー画像、素材サイトを紹介します。

なんとすべて無料で利用できるのでWebデザインやブログだけではなく、プレゼン資料などにも気軽に写真素材を利用することができるので、ぜひチェックしてみてくださいね!

無料(フリー)写真素材を使用する際の注意点

フリー素材は、WEB制作やブログ、プレゼン資料など様々な場面で役立つ非常に便利なサービスです。

しかし、掲載されているフリー素材を自由に使用できる訳ではないという点には注意してくてください。

下記に主な禁止事項などを記載させていただきます。

すべて自由に使用できる訳ではありません

今回ご紹介するサービスは、無料ダウンロード可能、商用利用可能のサービスですが、サービスによっては下記の行為が禁止されている場合があります。最低限のマナーを守って利用するように心掛けましょう。

  • 再配布禁止
  • 販売禁止
  • 加工なしでの販売の禁止
  • 公序良俗に反する写真素材の使用の禁止

フリー素材サービスを利用する場合は、必ず掲載元のサイトで利用規約を確認してから使用するようにお願いいたします。

無料(フリー)画像サイト 一覧

  • Unsplash
  • BURST
  • タダピク
  • Pixabay
  • ぱくたそ
  • Gratisography
  • BEIZ images
  • GIRLY DROP
  • food.foto
  • foodiesfeed
  • pro.foto
  • model.foto
  • Morguefile

ここでご紹介しているサイトは、すべて商用利用可能な無料(フリー)写真素材サービスです。

今回ご紹介させていただいたサービス情報は2019年12月現在のものです。利用規約は変更される場合があるため、念のため掲載サイトの利用規約を確認してから使用するようにしてください。

1.Unsplash

とにかく高クオリティな写真を取り扱う海外のストックフォトサイトです。
本当に無料なのか疑ってしまうほどの素晴らしい写真素材を利用することができます。

2.BURST

BURST

『BURST』はshopifyという企業が各分野の方に美しいフリー写真を提供するために運営している写真素材サイトです。
ダウンロードする際に解像度を選ぶことができるようになっている非常におすすめのサイトです。

3.タダピク

タダピク

現在、国内の43サイトから画像を検索することが可能となってます。
画像がとにかく多いので欲しい画像を手に入れることができるはずです。

※タダピクは無料(フリー)写真素材横断検索サービスですので、素材を利用の際は念のために配布元のサイトでライセンスや素材の使用権限について確認してください。

4.Pixabay

Pixabay

約160万枚以上の画像や動画、イラスト、ベクター素材がすべて無料で利用できるストックフォトサービスです。
海外のサイトですが、日本語対応しているので検索も簡単です。

5.ぱくたそ

ぱくたそ

人物から風景、食べ物、建物などの画像が豊富にそろっています。
企画系やコラボ画像などおもしろ画像が多いのも特徴のひとつです。

6.Gratisography

Gratisography

掲載画像はユニークなものからシュールなものまでたくさんあるので眺めているだけでも楽しめます。
個性的なサイトを作る際に重宝する素材が見つかるかもしれません。

7.BEIZ images

BEIZ images

風景画像が中心のサイトですが、デスクトップの壁紙に使えるテクスチャが数多く揃っています。
ほかにも花火や桜、紅葉など日本の四季を感じさせる写真が高クオリティで掲載されているのも特徴です。

8. GIRLY DROP

GIRLY DROP

ガーリーでおしゃれな画像を掲載しているサイトです。
ジャンルとしてはファッション、カフェ、雑貨まで女性の好みに合わせたテイストになっています。

9.food.foto

food.foto

料理や食材の画像がメインのサイトです。画像はプロのカメラマンが撮影しているため、高品質・高画質となっています。
お店HPや食べ物のチラシに最適な画像が見つかります。

10. foodiesfeed

foodiesfeed

海外の料理や食べ物を掲載しているサイトです。
サイトは細かくカテゴリー分けされているため検索も簡単です。 画像は高画質でとてもおしゃれなものばかりです。

11. pro.foto

pro.foto

こちらのサイトではプロのカメラマンが撮影した写真を利用することができます。
サイト内はシンプルで分かりやすくなっており、気軽に利用できると思います。 素材はエコロジー、ビジネス、四季のイメージ、年賀状、暑中見舞い、クリスマス、ウエディング、現金・マネー、バックグラウンド”がコンセプトとなってます。

12. model.foto

model.foto

プロのカメラマンが撮影した女性モデルを掲載しているサイトです。
様々なシチュエーションで撮影された写真が多く掲載されているのでチラシ、LP、バナーなどお使いいただけます。

13. Morguefile

Morguefile

海外の街並み、大自然など国内とはまた違う美しい画像が探せます。
高画質・高品質な画像を無料で利用できます。

まとめ

参考になりましたか?

お気に入りのフリー画像素材サイトを見つけた際は、ぜひブックマークしましょうね。

ただし利用の際は、必ずサイトの利用規約を読んで、最低限のマナーを守って利用するように心掛けましょう。