Pocket

早速ご説明です。

Facebookページ右上の「設定」ボタンをクリック

facebookページに管理者を追加

左メニューの「ページの役割」をクリック

ページの役割をクリック

名前またはメールアドレスを入力して管理人として追加したい人を選択

Facebookのアカウントを持っているユーザー名またはメールアドレスを入力すると候補が表示されますので、追加したいユーザーをクリックします。

右の権限は、管理者にする。

権限の違いは下記の通り。

管理者 編集者 モデレータ 広告主 アナリスト ライブ寄稿者
ページの役割と設定の管理
ページの編集とアプリの追加
ページとして投稿を作成、削除
モバイル機器からページとしてライブ配信
Facebookページとしてメッセージを送信する
ページへのコメントや投稿への返信、ページへのコメントや投稿の削除
ページから利用者を削除してブロック
広告、プロモーション、投稿の宣伝の作成
インサイトを表示する
ページとして公開した人の確認

詳細はこちら「Facebook ヘルプセンター : ページの役割

「保存する」ボタンをクリック

ボタンをクリックするとパスワードを求められるので、Facebookにログインする際のパスワードを入力しましょう。

以上で終了です。お疲れ様でした。

Pocket

Pocket

JavaScriptのライブラリであるjQueryでスムーススクロールを実装する方法を紹介します。

トップへ戻るやページ内リンクなどで利用範囲が広いですね。

目次

  • 通常の書き方
  • スクロール位置を調整
  • 特定のリンクを除外する
  • 特定のリンクを除外する・複数形
  • 特定のリンクを除外する・クラスで指定

通常の書き方

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"])').click(function(){
//スクロール速度 単位ミリ秒
 var speed = 800;
// アンカーの値取得
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を取得
 var position = target.offset().top;
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

これで、#で始まるリンクをクリックすると指定したidの要素までスクロールします。

WordPressだと「$」が競合するので、「$」の部分を「jQuery」にしましょう。
($(function()→jQuery(function())

スクロールする位置を調整

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"])').click(function(){
//スクロール速度 単位ミリ秒
 var speed = 800;
// アンカーの値取得
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を取得
 var position = target.offset().top - 120; 
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

var position = target.offset().top – 120; でスクロールする位置を調整します。
追従するヘッダー等を設定している場合は設定しないと要素が隠れてしまうことがあります。

特定のリンクを除外する

スライダーやドロワーメニュー等が挙動がおかしくなってしまう事があるので、特定のIDを除外する方法も覚えておきましょう。

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"]:not(a[href="#noscroll"])').click(function(){
//スクロール速度 単位ミリ秒
 var speed = 800;
// アンカーの値取得
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を取得
 var position = target.offset().top;
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

:not(a[href=”#noscroll”]を追加する。

この場合、「#noscroll」となっているaタグはスクロール処理しない

特定のリンクを除外する・複数形

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"]:not(a[href="#noscroll_1"],a[href="#noscroll_2"])').click(function(){
//スクロール速度 単位ミリ秒
 var speed = 800;
// アンカーの値取得
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を取得
 var position = target.offset().top;
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

:notに複数条件を設定する。
この方法だと、除外するIDが増えるたびに追加する必要があり、面倒です・・
それで次の方法です。

特定のリンクを除外する・クラスで指定


$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"]:not(a.noscroll))').click(function(){
//スクロール速度 単位ミリ秒
 var speed = 800;
// アンカーの値取得
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を取得
 var position = target.offset().top;
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

上記のように:not(a.noscroll)を追加してclass指定してしまえば楽ですね。必要に応じてIDとclass複合的にしてしまってもいいかと思います。

これで自由自在にスクロールできますね。

では、また。

Pocket