Tag Archives: おすすめ

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

大改造劇的ビフォーアフター in TORAT 2020年10月29日 投稿者：リッキー Information デザイン: こんにちは！デザイナーのリッキーです！

今回は【大改造劇的ビフォーアフター in TORAT】ということでフロントエンドエンジニア・デザイナーチームで会議室の模様替えをしました！

お洒落になれば仕事へのモチベーションも大きく高まり作業効率も上がるはずこれは責任重大です

よつ！家具ざんまい！

全部の家具が到着しましたこれがいったいどんな変貌をとげるのでしょうか

illustratorの魔術師、ナタリアさんがイスを組み立てています

一体どんなアートに生まれ変わるのでしょうか

昔イスを制作中、力が強すぎて破壊してしまったことから

”イスクラッシャー”

の異名をもつCTOチャンさん

今回は棚の制作をしております

株式会社TORATの”BOSS”こと岡本社長、あだ名はトラちゃん

おや、匠がいかつい鉄パイプのようなものをもって工房に現れました。

匠はこれを一体何に使うつもりなのでしょう？

真剣なまなざしです

気づけば外も真っ暗に・・・

※ここからは松谷卓さん作曲の『ＴＡＫＵＭＩ/匠』を

聴きながらお楽しみください

なんということでしょう

ナチュラルな木を基調としたインテリアに生まれ変わりました

これまたなんということでしょう

匠がもっていたいかつい鉄パイプはお洒落な間接照明に生まれかわりました

なんということでしょう

机も以前は4人座るのがぎりぎりでぐらぐら揺れてしまっていた生まれたての鹿机がしっかりした土台の6人は座れる広い机にかわりました

住み慣れた我が家が新しくなりこれからはこの空間で快適に過ごせることでしょう

インテリアがお洒落だとさらにかっこよくみえる

環境で人は変わります。人が変われば組織は変わる

おしゃれなオフィスは、メンバーのモチベーションも上げ、生産性も上がり、意識改革にもなります

さぁ、一緒におしゃれなオフィスで働きませんか。

以上【大改造劇的ビフォーアフター】でした！

ありがとうございました！

【密着】WEBデザイナーの1日 2020年10月06日 投稿者：リッキー Illustrator Photoshop デザイン

こんにちは！

はじめまして、今年の7月よりデザイナーとして

中途入社いたしましたWEBデザイナーの福井力斗(フクイ　リキト）と申します。

今日はWEBデザイナーの1日を紹介していきます。

WEBデザイナーの1日の流れが知りたい！
どんな業務を行っているの？
お昼とかどうしているの？
残業とかは？

この記事をみていただくとざっくりわかっていただけると思います。
ではさっそくいってみましょう！

let’s go！

9:00~9:30 出社

朝は９：３０から全体の業務が始まるのでみなさんそれまでに出社しています。

自分はそれまで自分のスキルアップのための勉強時間として８：００〜８：３０には出社するようにしています。

朝がゆっくりなので通勤ラッシュを避けることができるのは最高ですね！
あと、服装も自由！私服通勤！最高！

２０％の確率で掃除のおばちゃんに遭遇しますが気にしません。

いつも綺麗にしていただいてありがとうございます。

ですが朝一の挨拶は大切
誰もいなくても元気に挨拶！
挨拶はとても大事

９：３０〜　業務スタート

今日1日することをチャットワークで共有して業務を開始します。

自分は主に案件ごとのサイトデザイン・バナー制作・サポートを行っています。

週に２回は全員で集まって
全員でミーティングをして進捗状況を全員で把握するようにしています。

デザイナーは1人で動くことが多いイメージでしたが

まったくそんなことはなく、チームで動くことのほうが多いので

情報の共有はすごく大切です。

調べてもわからないことは実務の中で教えていただけます。

できたものは優しい先輩達にフィードバックをもらったりしています。

フォントのチョイスや、配置、配色、文字組、イラストなどの

レビューをもらいます。

だいたい２～５稿くらいのやりとりがあります。

その場で不安を解消できるので安心して業務に取り組むことができます！

１２：００〜１５：００　お昼休憩

この時間の間ならいつでも好きな時間にお昼休みをとってもいいことになっています。

お昼時の混む時間を避けられるので
みなさん外に食べに行ったりコンビニで買ってきて食べたりしています。

今日はマーサーブランチギンザテラスに食べにきました。

お昼は時間との勝負…

並んでいたので本当に残念ですが断念して
エッグスンシングス銀座店にしました。

テラス席で優雅なランチ
撮影を手伝ってくれたアンディー先輩と優雅なお昼のひととき

ドリンクも美味しくいただきました

1時間のお昼休憩がおわると業務にもどります。

写真加工前と加工後のビフォーアフター

↑背景がごちゃごちゃしていて人に視線がいかない

↑人と文字に目がいくようになった。お洒落・かっこいい。僕カッコいい

↓加工の解説はこちらに詳しくまとめています↓

【WEBデザインでカッコいいメインビジュアルの作り方】

１８：３０　退社

定時ピッタリで退社できることがほとんどなので
業務後の時間に余裕があり週末にもしっかり休むことができます。

終わった後は友人とご飯に行ったり会社のメンバーとご飯にも行けますね！

最高！

自分は何も予定がない時は自分のスキルアップのために時間を当てています

最後に

入社して２ヶ月がたちました
ほんっとにあっという間で日々楽しく過ごせています。

すぐに案件の担当もさせてもらい責任感とやりがいしかありません！！

努力を評価してくれる環境が揃っているので
モチベーションにもなっています。

一つ上の仕事ができるように日々スキルアップして楽しみながら
成長してTORATを盛り上げていきたいと思います！

以上、WEBデザイナーの1日でした！

ありがとうございました！

Googleおすすめ拡張機能 7選 2020年05月16日 投稿者： TORAT Google

今回は数あるGoogle拡張機能の中から筆者がよく使用しているGoogle拡張機能を紹介いたします。WEBサイト制作時にとても重宝しています♪

使用するときはchrome ウェブストアから使用したい機能をchromeに追加するをクリックするだけです。

それでは紹介させてください。

ColorPick Eyedropper

Webサイト内でフォント、ヘッダー、フッター、ロゴ、アイコン、背景などの色（カラーコード）を調べたい時ありませんか。

そんなときに便利なのが『ColorPick Eyedropper』です。

使い方はツールバーにあるColorPick Eyedropperのアイコンをクリックし、カラーコードを調べたい位置にカーソルを重ねるだけで確認できます。

ColorPick Eyedropper – Chrome ウェブストア

Page Ruler Redux

『Page Ruler ReduxWeb』は要素やレイアウトの「幅」「高さ」「位置」を計測することができる拡張機能です。※単位はピクセル

レイアウトの確認や画像サイズを確認したい時におすすめです。

使い方は2種類あります。

一つ目はマウスをドラッグして範囲選択を調べる方法。

二つ目は「エレメントモード」です。こちらは知りたい要素にカーソルを重ねるだけで自動的にサイズを確認することができます。非常に便利。

Page Ruler Redux – Chrome ウェブストア

Clear Cache

『Clear Cache』はChromeブラウザのキャッシュをなんと1クリックで削除してくれる拡張機能です。

Webサイトが更新されない、Webサイトの動作が遅いという時にとても役に立つ拡張機能です。

下記項目も設定を変えると削除可能です。

アプリのキャッシュ
Cookie
ID・パスワードなどの自動入力フォ－ム
閲覧履歴
ダウンロード履歴

Clear Cache – Chrome ウェブストア

HTMLエラーチェッカー

『HTMLエラーチェッカー』はWebページのHTMLのエラー（行目、エラー内容）を簡単に確認することができる拡張機能です。

調べたいWEBサイトのページ上でアイコンをクリックするとHTMLのエラーのリストが表示されます。シンプルでわかりやすいです。

さらにおすすめなのが「自動エラーチェック機能」です。こちらはWebページを開くだけで自動でエラーをチェックしてくれます♪

ちなみに筆者は昔、タグの閉じ忘れが多かったです(笑)

HTMLエラーチェッカー – Chrome ウェブストア

Quick source viewer

『Quick source viewer』は HTML、JavaScript、CSS のソースコードを確認できる拡張機能です。

ソースコードは種類別にカラーで分けられていて、且つ見た目もキレイで、見やすく読みやいのが最大のポイントです。

Quick source viewer – Chrome ウェブストア

CSSViewer

WebページのCSSを手早く確認できるのが『CSSViewerChrome』です。

使い方は右上にあるツールバーのアイコンをクリックし、ソースコードにカーソルを乗せるだけで、CSSが表示されます。

確認だけならChromeのデベロッパーツールを開くよりも遥かに簡単なのですが、できるのは確認だけでソースコードをいじることはできません。。

CSSViewer – Chrome ウェブストア

Web Maker

『Web MakerChrome』は、なんとオフラインでコーディングができる拡張機能です。結果はリアルタイムで確認できます。

言語はHTML、CSS、JavaScriptの3つです。

Web Maker – Chrome ウェブストア

おわりに

いかがでしょうか。

他にも便利な機能がたくさんございますので色々探してみるのもありですね♪

それではまた別ブログで会いましょう！

【NEW】フレックスボックスで柔軟なレイアウトつくり 2020年05月10日 投稿者： TORAT 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>

イメージ画像

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

参考になれば感激です。

サブセット化で日本語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」に追加します。

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

大改造劇的ビフォーアフター in TORAT

【密着】WEBデザイナーの1日

9:00~9:30 出社

９：３０〜 業務スタート

１２：００〜１５：００ お昼休憩

写真加工前と加工後のビフォーアフター

１８：３０ 退社

最後に

Googleおすすめ拡張機能 7選

ColorPick Eyedropper

Page Ruler Redux

Clear Cache

HTMLエラーチェッカー

Quick source viewer

CSSViewer

Web Maker

おわりに

【NEW】フレックスボックスで柔軟なレイアウトつくり

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

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

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

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

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

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

flex-direction:row

flex-direction:row-reverse

flex-direction:column

flex-direction:column-reverse

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

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

justify-content:flex-end

justify-content:center

justify-content:space-between

justify-content:space-around

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

align-items:flex-start

align-items:flex-end

align-items:center

align-items:space-baseline

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

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

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

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

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

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

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

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

Webフォント使用の注意点

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

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

ソフトのインストール

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

フォントに格納する文字

WOFFコンバータ

変換後の容量確認

まとめ

WordPressプラグインなしでSNS共有ボタンを設置する

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

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

sns.phpファイルを作成

headタグに追加

CSSでデザインを整える

CSSスタイルシートに追加

デザイン例

sns.phpに追加

CSSスタイルシートに追加

デザイン例

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

９：３０〜　業務スタート

１２：００〜１５：００　お昼休憩

１８：３０　退社

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

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

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

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

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

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

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