Instagram をAPIなしでホームページに表示させる

2021.6 こちらも表示ができなくなりました。

2020年後半あたりからInstagramの一覧などを特定のホームページに表示させるにはAPI登録が必要になりました。
ただ、API取得にはFacebookとの連携だったりトークンの期限を無期限にしたりと手間がかかります。

そこで、APIなしで表示できるJavaScriptがあります。
InstagramFeed」無料
https://www.sowecms.com/demos/InstagramFeed/

font-familyの指定(2021年版)

ゴシック体セット

body {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

“Helvetica Neue” -MacOS、iOS用欧文書体
Arial -Windows用欧文書体
“Hiragino Kaku Gothic ProN”, -MacOS、iOS用和文書体
Meiryo -Windows用和文書体
sans-serif -Android用書体

明朝体セット

body {
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

ブラウザ上で操作できる画像編集ツール

オンライン イメージエディタ
https://www.peko-step.com/tool/imageeditor.html

ブラウザ上で動作する無料の画像編集ツール。
インストール作業をすることなく、PCやスマートフォンで手軽に画像を加工することができます。

使用例:モザイクをかける場合
編集したい画像ファイルをドラッグ&ドロップ。

画像ファイルドロップ前

画像ファイルドロップ後

モザイクのアイコンをクリック。

アイコンをクリック

モザイクをかけたい範囲をドラッグして指定。

編集したい範囲をドラッグして指定する

「モザイクをかける」ボタンをクリック。

「モザイクをかける」ボタンをクリック

モザイクがかかる

編集が完了したら、「ファイル」→「保存」をクリック。編集後のファイルがダウンロードされます。

「ファイル」→「保存」をクリックし、編集後のファイルをダウンロード

WordPress引越し時、仮ドメインで表示/ログインしたい場合の方法

サーバ移行などで新旧サーバにWordPressを入れた場合、仮ドメインでのサイト表示やログインが必要になります。その際、手っ取り早く表示させる方法としてwp-config.phpに記述を足すものがあります。

define('WP_HOME','https://www.domain.jp');
define('WP_SITEURL','https://www.domain.jp');

※「https://www.domain.jp」部分は必要な記述に変更する。

この記述をwp-config.phpの「/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */」前に入れます。探すのが面倒であれば、最初の「<?php」次行で良いと思います。

タグを追加した状態

開いているタブをリスト化できるGoogle Chromeの拡張機能

GetTabInfo というGoogle Chromeの拡張機能
https://chrome.google.com/webstore/detail/gettabinfo/iadhcoaabobddcebhmheikmbcjcigjhc?hl=ja

拡張機能の追加方法
Chromeウェブストアで「GetTabInfo」と検索し「Chromeに追加」で拡張機能が追加できます。
上記のリンクからも追加が可能です。

使用方法
最初に行う設定
ブラウザ右上に追加された「GetTabInfo」のアイコン20200827_01をクリックします。
GetTabInfoのウィンドウが表示されます。
Templates をクリックし、
20200827_02

PRESET : basic を選択します。
20200827_03

「Preview」にタイトルとURLが一覧で表示されます。
20200827_04
これはHTMLのタグがついた形で記載されていますが、使いやすいようにテンプレートの編集が可能です。

テンプレート変更方法
「Template」内を編集し、「Save template」をクリック。
注:下図の例ではHTMLのタグを無し、タイトルとURLを縦に並べる形にしています。
20200827_05

テンプレート名(任意の名前、下図はbasic2としています)を入力し、「Save」ボタンを押下。
20200827_06

この設定が完了したら、2回目からはブラウザ右上に追加された「GetTabInfo」のアイコン20200827_01をクリックするだけで、サイトのタイトルとURLの一覧が表示され、コピーされた状態になります。
20200827_07

既にコピーされた状態なので、そのままテキストエディタ等にペーストできます。
20200827_08

Bootstrap4で改行brをスクリーンサイズで表示非表示

全て表示(初期値)    br class=”d-block”
XSサイズのみ表示    br class=”d-block d-sm-none”
SMサイズのみ表示    br class=”d-none d-sm-block d-md-none”
MDサイズのみ表示    br class=”d-none d-md-block d-lg-none”
LGサイズのみ表示    br class=”d-none d-lg-block d-xl-none”
XLサイズのみ表示    br class=”d-none d-xl-block”

全てのサイズで非表示    br class=”d-none”
XSサイズのみ非表示    br class=”d-none d-sm-block”
SMサイズのみ非表示    br class=”d-sm-none d-md-block”
MDサイズのみ非表示    br class=”d-md-none d-lg-block”
LGサイズのみ非表示    br class=”d-lg-none d-xl-block”
XLサイズのみ非表示    br class=”d-xl-none”