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;
}WordPressのSEOに最適なパーマリンク設定
見やすい、管理しやすい、SEO的に最適ということで採用している形式
年/月/post id にしています。
/%year%/%monthnum%/%post_id%
下のボタンからも設定可能
ブラウザ上で操作できる画像編集ツール
オンライン イメージエディタ
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」のアイコン
をクリックします。
GetTabInfoのウィンドウが表示されます。
Templates をクリックし、
PRESET : basic を選択します。
「Preview」にタイトルとURLが一覧で表示されます。
これはHTMLのタグがついた形で記載されていますが、使いやすいようにテンプレートの編集が可能です。
テンプレート変更方法
「Template」内を編集し、「Save template」をクリック。
注：下図の例ではHTMLのタグを無し、タイトルとURLを縦に並べる形にしています。
テンプレート名（任意の名前、下図はbasic2としています）を入力し、「Save」ボタンを押下。
この設定が完了したら、2回目からはブラウザ右上に追加された「GetTabInfo」のアイコンをクリックするだけで、サイトのタイトルとURLの一覧が表示され、コピーされた状態になります。
既にコピーされた状態なので、そのままテキストエディタ等にペーストできます。
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”
印刷時、リンク箇所にURLが入ってしまうのを回避
Bootstrapの場合、印刷時にリンク箇所へURLが付記されてしまうことがあります。
これを回避するには、CSSの記述へ下記を追加してください。
@media print {
a[href]:after {
content: "" !important;
}
abbr[title]:after {
content: "" !important;
}
}
忘れないようにメモ。