html code span要素でtext-alignが効かない！の解決方法
特定の部分を span 要素で指定して右寄せやセンタリングしたいと思ったのに、text-align が効かない！ と困っている方へ。 原因と解決方法を説明します。 span要素でtext-alignが効かない原因 text-alignはテキストの水平方向の配置（右寄せ・左寄せ・中央揃え）を指定するプ【...続きを読む】
WEB
html code 
html code fontawesome：基本的な使い方とヒント～大きさ・色を変える・その他もろもろ
Font Awesome ウェブアイコンの基本的な使い方をまとめました。 基本的な使い方～Font Awesome ウェブアイコンを使う準備 Font Awesome ウェブアイコンを使う方法は、CDN (Contents Delivery Network) を利用する方法とsvg (Scalabl【...続きを読む】
html code HTML & CSS：著作権記号や円記号など特殊文字まとめ
ウェブサイト制作で使う頻度が高いと思う特殊文字をまとめました。 使う可能性が高い特殊文字 記号 読み方 特殊文字 （実態参照） 特殊文字 （数値参照） 説明 & アンパサンド & & ampersand © 著作権記号 © © copyright ® 登録商標記号【...続きを読む】
html code リダイレクト：301（恒久的なURL変更）
301リダイレクト 恒久的にURLを変更になる場合は、301リダイレクト設定をして旧URLへのアクセスを新URLに誘導できます。 「このURLへのアクセスは、これからずっと永遠に次のURLに飛ばしてね」という転送設定なので、次のような場合には301リダイレクトを設定しましょう。 サイトのドメインを変【...続きを読む】
html code fontawesome：WordPressサイトにプラグイン無しで導入する手順
Font Awesome をプラグイン無しで WordPressサイトに導入する手順を解説します。 WordPress 以外のサイトにも使えますよ。 Font Awesome アカウントを登録する Font Awesome のサイトを開いて をクリックしましょう。 最初からプロ版を登録するなら、 を【...続きを読む】
SNS & web services Twitter：ナビゲーションがなぜか英語表記に！原因の心当たり無し… 日本語表記に戻したい！！
このサイトの twitter アカウントを今まで持っていなかったので、開設してみました！ 初めてのことなのでちょっと右往左往していたら、さっきまで日本語で表示されていたナビゲーションが英語表記になっていてびっくり。 というわけで、twitterの表示言語設定変更手順についてまとめます。 表示言語を変【...続きを読む】
html code HTML & CSS：ul、ol、liタグ～htmlで箇条書き～余白・インデントの調整【初心者向け】
html の箇条書き ul (unordered list) と ol (ordered list) の基本の使い方を別記事で説明しました。 マーカーから箇条書き項目までの幅や行間など余白を調整したいという方のために、その設定方法をまとめますね。 余白の調整については、ul (unordered l【...続きを読む】
html code HTML & CSS：ul、ol、liタグ基本の使い方～htmlで箇条書き【初心者向け】
htmlで箇条書きを表示する ul、ol、li タグの基本の使い方を説明します。 箇条書きを入れ子に（階層化）する方法や、リスト項目行頭のマーカーを変更したり消したりする方法、ol の順番を降順に変更する方法が理解できると思います。 htmlで箇条書きを表示する方法 ～ ulとol htmlで箇条書【...続きを読む】
html code HTML & CSS：サクラエディタのダウンロードとインストール手順
サクラエディタとは サクラエディタは日本製のWindows用テキストエディタで、フリーウェアとして配布されています。 フリーウェア（無料）なのに機能性が高く、htmlやcssはもちろんのこと、プログラミングにも使える優れモノ。 Webデザイナー志望者向けスクールとかでも高機能テキストエディタのひとつ【...続きを読む】
WEB HTML & CSS：htmlタグまとめ
htmlにコードをそのまま表示したい！ タグ 意味 説明 pre preformatted text（整形済みテキスト） preタグで囲んだ記述は、スペース・インデント・改行などをそのまま等幅フォントで表示 code code（ソースコード） codeタグで囲んだ記述は、ソースコードであることを示す【...続きを読む】
WEB HTML & CSS：underline に不満足！下線にpaddingを設定したい！text-decoration
テキストに下線を付ける場合、css の text-decoration: underline を使うと文字と下線がくっついてしまって不満。 例えば、こんな感じ。 文字と下線の距離を調整するために、border-bottom を使おう！ 仕上がりは、こんな感じ。 cssコードは以下の通り。 クラスを「【...続きを読む】
WEB HTML & CSS：cssだけできれいな見出しを作る！シンプル編～
画像無しでcssだけでキレイな見出しを作る！ 注）このページのサンプルcssには、異なるデザインをサンプルとして表示するため、サイト全体のcssを消すための記述を入れています。 サンプル１：見出しの両端にシングルラインを配置する 見出しの両端に1本線を入れる。見出し文が長くなると、両端の線は見出し文【...続きを読む】
SNS & web services Instagram：パソコンからインスタに投稿したい？ できるよ♪【2021年11月以降】
2021年11月より、WEB版Instagramに投稿機能が追加されました。 このアプデ前は、PCからインスタ投稿をするためにブラウザをデベロッパーツールでモバイル表示に切り替えなければならず、しかも、1度にアップできる投稿は画像1枚だけでした。 けれど、今は、ブラウザ設定変更不要。 複数枚の写真や【...続きを読む】
SNS & web services Instagram：パソコンからインスタに投稿したい？ できるよ♪
InstagramのWeb版は、メッセージ送信、検索、いいね、アカウントの変更などができますが、そのままでは、肝心の投稿はできません（＞＜） パソコンで加工した動画をインスタにアップしたい… ブラウザのデベロッパーツール機能を使えば、パソコンからでも画像投稿できますよ♪ では、その手順などを説明しま【...続きを読む】
Adobe css：レスポンシブ デザインのウェブページをきれいに印刷するためにcssに書くこと
@media print {section { display: block; page-break-before: always; }pre code {page-break-after: always;}@page {margin-top:0.4cm;margin: 0.5cm;}p a, co【...続きを読む】
Twitter Twitter：データをダウンロードする方法
さて、今回は twitterデータ ダウンロード方法を説明しますね。 ダウンロードできるデータの一覧は、こちらをご参照ください。 twitterデータ アーカイブをダウンロードする twitterデータ アーカイブのダウンロードをリクエストする パソコンでtwitterを開き、右パネルの「もっと見る【...続きを読む】
Twitter Twitter：データのアーカイブでダウンロードできるデータのすべて
twitterからダウンロードしたアーカイブに含まれるデータについて説明します。 twitter データのダウンロード方法は、こちらの記事を参照してください。 ダウンロードしたアーカイブ データをローカルで表示する アーカイブ データ（.zipファイル）を解凍し、Your archive.html 【...続きを読む】
Design Chrome：デベロッパーツールでスマホ機種を追加する
デベロッパーツールは、スマートフォンなどモバイル端末を含め、CSSなど細かい部分を検証することができるので、ウェブサイトのデザイン調整に活用していらっしゃるかたが多い機能ですね。 今回はデベロッパーツールにスマホ端末を追加する手順を説明します。 デフォルトで設定されている端末一覧から選択することもで【...続きを読む】
WordPress Plugins 超簡単に.jpgや.pngを圧縮！ WordPressにアップロード済み画像の一括圧縮も！
もちろん、ブラウザでサクサク圧縮 tinypngのサイトにアクセスして、圧縮したい.jpgや.pngを点線で囲まれた枠内にドラッグ＆ドロップするだけ。 圧縮が終わると、ブラウザ上にダウンロードボタンが表示されます。 何％圧縮されたのかもわかるので、ほほぉ～って感じ。 パソコンで複数の画像ファイルを選【...続きを読む】
SNS & web services Facebook：getfvidでFacebookプライベートビデオをダウンロードする：Getfvidの使い方
FBフレンドが撮影してくれた動画を思い出として保存しておきたい…。ってな場合に使えるオンライン無料ダウンローダーのご紹介。 Getfvid 無料オンラインFacebook動画ダウンローダー 使い方は極めてカンタン3ステップ。無料で使える動画ダウンローダーです。 ダウンロードしたいFacbook動画の【...続きを読む】
facebook Facebook：アカウント乗っ取り原因と対策 メッセンジャーが勝手にスパム送信してしまう件
またもや、不審なfacebookメッセージが勝手に送信されてしまう現象が増えていますね。 最近、「あなただと思います！」というタイトルの動画リンクがFacebookメッセンジャーで複数送られてきています。 少し前は、「このビデオはいつですか？」といった件名のメッセージもありましたね。 ほんと、迷惑行【...続きを読む】
SNS & web services セキュリティ対策：メールアドレスやパスワードの漏洩を確認できるサイト
セキュリティ対策はしっかりしていても、強力なパスワードを使っていても、インターネットのサービスを利用していればメールアドレスやパスワード、その他の情報が漏洩してしまう可能性はあります。 時折、「●●サイトから情報が漏洩した」との報道を目にすること、ありますよね？ そうなんです。あなたが利用しているサ【...続きを読む】
facebook Facebook：メッセンジャーをダウンロードする方法
「Facebookのメッセンジャーのデータをダウンロードしたいなぁ…」と思ったことはありませんか？ パソコンでカンタンにできます！ facebookメッセンジャーのダウンロード方法をステップバイステップで図解説明しますね。 Facebookデータをダウンロードできる場所「個人データをダウンロード」 【...続きを読む】
SEO SEO：サイトのトラフィック・パフォーマンスを判断する参考に【alexa.com】
「Webサイトはトラフィックが重要！」というのは誰もが理解していることですね。 Googleアナリティクスを使えば、自サイトのトラフィック情報を知ることができます。 では、競合サイトのトラフィックはどうなの？ 気になりますよね。 その疑問にお答えしましょう！ サイトトラフィックとは？ トラフィック（【...続きを読む】
Design パソコンでスマホ画面表示を一括チェック！レスポンシブ デザイン チェック ツール
スマホなどのモバイル端末でレスポンシブ デザインがどのように表示されるか？ 実機はもう不要です！ デバイスやサイズを指定してひとつひとつ確認するのも面倒なので、複数のユーザーエージェントの見え方を一括チェックできるGoogle Chrome拡張機能をご紹介しますね。しかも、操作はいたってカンタン。 【...続きを読む】
SNS & web services YouTube：音がでない…小さすぎ…なぜ？
いつもChromeを使っていて、時折、YouTubeをBGMに作業したりしているのですが、ある日突然、YouTubeの音が小さくなってしまいました！ YouTubeのボリュームは最大で、 パソコンのスピーカーを確認しても 最大なのに… 問題はブラウザの音量設定でした Windows10ではアプリごと【...続きを読む】
SNS & web services Twitter：タイムラインをサイトに埋め込もう
Twitterのタイムラインをサイトに埋め込む方法について、ステップごとに説明しますね。 事前準備 埋込コードを取得するTwitterのURLまたはTwitterユーザ名を用意しておきましょう。 Twitter URLは、ココ↓ Twitterユーザ名は、ココ↓ ちなみに… Twitterには「ユー【...続きを読む】
SNS & web services Twitter：個別のツイートをサイトに埋め込もう
Twitterの個別ツイートをサイトに埋め込む方法について、ステップごとに説明しますね。 Twitterのタイムラインを埋め込むコードの取得方法は、こちらにまとめてあります。 埋め込みコードを取得する サイトに埋め込みたいツイートをTwitterで表示し、ツイート右上部に表示される下向き矢印をクリッ【...続きを読む】
WEB vimeo動画をサイトやブログに埋め込むときのメモ ループ再生とかもね
vimeo側の設定 vimeo動画の公開設定 vimeo動画をサイトやブログに埋め込む前にvimeo側で動画の公開設定をしましょう。 無料で利用できるベーシックメンバーシップの画面を示しながら説明します。 設定する項目は、「試聴できる人」、「動画の埋め込み場所」、「コメントできる人の範囲」の3項目で【...続きを読む】
WEB 動画を圧縮する無料オンラインサイト VimeoやYouTubeにアップする前に使おう！
動画圧縮： Online Video Converter サイトにアクセスして動画をアップロードしよう Online Video Converter V3.0 このサイトにアクセスすると下図の画面が表示されます。 右上（下図でEnglishと表示されている箇所）から、日本語を選択することもできます。【...続きを読む】
Design jpgをカンタンに高品質・高圧縮！クォリティもコントロール可
JPEG圧縮：カンタンで高品質・高圧縮！しかも無料 使い方はカンタン 1. サイトにアクセスして画像をアップロード 画像のアップロード方法は2つ。 ボタンをクリックして、パソコンからファイルを選択します。 あるいは、「ファイルをここにドラッグ＆ドロップしてください。」部分にパソコンのファイルをドラッ【...続きを読む】
Design ピクセルとミリを変換する
画像サイズを正確に変換できる便利サイト：amanaimagesヘルプサイト ストックフォト老舗の（株）アマナさんのヘルプページが超便利なのでご紹介（というか備忘） できること ピクセルと解像度から使用サイズ(mm)を求める サイズ（ｍｍ）と解像度から必要なピクセル数を求める 紙サイズのpixcel 【...続きを読む】
WordPress PHP：7.2でWordPress post-tenplate.phpのCount関数Warning
表示されるワーニングと意味 warning: count(): Parameter must be an array or an object that implements Countable in …(ファイルパス)/wp-includes/post-template.php on line 2【...続きを読む】
Images キレイな素材：江戸小紋
とても素敵できれいなデザインだと思う。 ビバ！江戸さんの江戸の文様（和風素材・デスクトップ壁紙）サイトのご紹介です。 名物裂
WEB Design：Webサイト デザイン カラーを決める HTMLカラーコードと配色を調べる【超便利サイト5選】
サイトデザインの配色に困ったら参考にしてください。 超便利な5サイトの使い方をまとめます。 メインカラーが決まっていないかたや、お気に入りのサイトで使われている色のカラーコードを調べたいかたは、こちらを参考になさってください。 PALETTABLE：数百万人のデザイナの英知を結集～美しいカラーパレッ【...続きを読む】
Design Google：Googleでカラーコード検索するとカラーピッカーが使える
Googleの検索フィールドにカラーコードを入力すると、カラーピッカーが表示されます。 Googleカラーコード検索はこんな時に便利♪ サイト制作中にササっと色を探したいとき 異なるカラーモードの色番号を知りたいとき（16進カラーコードをCMYKにするとか） とにかく便利。 Googleカラーコード【...続きを読む】
Images 「ブログに写真をアップしたら横向きになっちゃった！」を直す方法
原因は、写真ファイルに記録されているExif（イグジフ）情報です。 Exifはデジタルカメラやスマートフォンで撮影した写真データに付加される情報で、撮影したカメラのメーカー、機種、撮影日時、画像の方向、ISO、光源、圧縮率、撮影位置などいろいろな情報が含まれています。 Exif情報で撮影位置もわかっ【...続きを読む】
SNS & web services Favicon：超簡単！画像アップするだけでファビコン コードも生成してくれるサイト
ファビコンについて改めて説明は不要でしょう。 ブラウザのタブについているオリジナルの目印や、スマートフォンのショートカットとして表示されるアレです。 ファビコン ジェネレーターを使おう 必要な画像サイズ バリエーションだけでなく、htmlに入れるコードも生成してくれる至れり尽くせりのサイト「Favi【...続きを読む】
Design 利用価値大！海外のフリー画像サイト6選
サイト制作にもブログにも、質の高い画像は必須。なので、普段使っているサイトをまとめました。（これこそ備忘） Pixabay.com 日本語で検索もできるので便利。商用利用無料。帰属表示不要。利用に関するFAQページ DesignersPics.com 個人利用・商用利用とも無料。ウェブだけでなく、プ【...続きを読む】
Design オリジナル404エラーを設定する方法
404エラーとは？ 表示しようとしたURLが存在しない場合、サーバからブラウザに「そのページは存在しません」というメッセージが返されます。 WordPressなどのテーマやテンプレートの中には、あらかじめ404エラーページが用意されているものもありますが、もし、404エラー対応がなされていない場合に【...続きを読む】
Design Chrome：ColorPick Eyedropperで表示しているサイトのカラーコードを秒速で調べる
ColorPick Eyedropperは、表示中のブラウザに使われているカラーコードをチェックできるChrome拡張機能です。 ポインタを合わせてその部分のカラーコードを調べるのはもちろんのこと、チェックしたカラーコードを保存・印刷もできるので便利です。個人利用から複数サイト利用までライセンスが提【...続きを読む】
Design SSL：SSL化したのに、「このサイトへの接続は保護されていません」と表示される
常時SSL化（https）の重要性 SSL（Secure Sockets Layer）は、ウェブサーバとブラウザ間のインターネット通信を暗号化する仕組みです。データの送受信が暗号化されているため、悪意のある第三者の傍受や情報の改ざんを防ぐことができます。 SSLを設定すると、ブラウザのアドレスバーの【...続きを読む】
Adobe PHP：PHP5.1.0以降で発生するDATE関数エラー
date.timezoneのエラー PHP Warning: date(): It is not safe to rely on the system’s timezone settings. You are *required* to use the date.timezone setting o【...続きを読む】
Design fontawesomeとglyphicon
Font Awesome ver. 4.7.0 ここが使いやすいと思う。 ↓フォントオーサム↓ ↓グリフィコンズ↓