コーディング – クリエイター：コーディング備忘録ブログ

HTMLジャンプリンク

2021/12102021/1210 admin コメントをする

同じページ内で特定の場所にジャンプできるHTMLリンクを紹介します。

アンカー（目印）を作る

＜a name=”アンカー名”＞文字＜/a＞
ページ内の場所や特定の文字にアンカー名をつける。
例）＜a name=”a1″ ＞内容＜/a＞

ページ内のアンカーへリンクする

＜a href=”#アンカー名”＞文字・画像＜/a＞

＜a href=”ファイル名#アンカー名”＞文字＜/a＞
ファイル名#アンカー名のように指定すると、別のページのアンカー名をつけた場所にもリンクできます。

WordPressのおすすめプラグイン

2021/11162021/1116 admin コメントをする

Classic Editor

Wordprss5.0になってエディターが大きく変わってしまいました。以前のものが使いやすいというユーザーが多く、切り替えるためのプラグインが登場しました。Wordpressチームによって管理されている公式プラグインとなっています。

Contact Form 7

お問い合わせフォームを簡単に作成できるプラグインです。日本人が開発したプラグインのため使い勝手が良くなっています。シンプル設計で直感的に使用することができます。お名前、メールアドレス、題名、メッセージ本文だけならインストール後すぐに利用できます。カスタマイズもタブをクリックして挿入するだけです。URL、電話番号、ドロップダウンメニュー、ラジオボタン、ファイルなど必要に応じて追加することが可能です。

Yoast Duplicate Post

ブログの投稿や固定ページなどのコンテンツを複製するプラグイン（拡張機能）です。

Webサイトの作成方法

2021/11102021/1110 admin コメントをする

Webサイトには以下の４つの作成方法があります。

1.ブログサービスを利用する

ブログサービスとは、ブログを作成・管理する機能を提供しているサービスです。
代表的なサービスとしては、Amebaやライブドアブログが挙げられます。
ブログサービスは、ブログの機能に特化することでシンプルで簡単に利用できるのが特徴です。
ユーザ登録後、あらかじめ用意されたWebサイトのテンプレートから好みのデザインを選択します。

メリット:簡単にWebサイトが作れる
デメリット:ブログサービスは自由度がなく、カスタマイズができない

2.Webサイト作成サービスを利用する

Webサイト作成サービスは、Webサイトを作成・管理する機能を提供しているサービスです。
代表的なサービスとしては、Jimdo・Wix・FC2ホームページなどがあります。
Webサイト作成サービスであれば、ブログでは対応できないページの追加や構成の変更にも対応できるため、簡単なコーポレートサイトやショップサイトなどに利用可能です。
一部のサービスでは、ネットショップに対応できるものもあります。

メリット:比較的簡易でありながらブログで対応できないWebサイトも作成できる
デメリット:デザインや機能が自社の希望に合わなかった場合には、修正・変更ができない

3.WordPressを利用する

WordPressは、ホームページを作成するためのオープンソースの無料ソフトです。
利用者が多いため書籍やサイトも多数存在し、学習しやすいのが特徴
また、デザインのテーマも無数に公開され、機能やデザインが優れたものも多数存在
PHP・HTML・CSS等の言語知識があれば自身でテーマを編集し、細かくカスタマイズすることもできます。
さらに、ユーザ権限を管理する機能を持つため、サイト全体の管理者・記事執筆者・デザイン変更者などさまざまな担当者を登録し、それぞれに権限を持たせることが可能
WordPressを利用する場合にはサーバとドメインを自社で用意する必要があります。

メリット:自由にカスタマイズができ、自社の希望に即したWebサイトを作成できる
デメリット:PHPやHTMLなどのある程度のコーディングの知識が必要となる

4.コードを書き込む

HTMLやCSS、JavaScripなどの言語を用いてコードを書き込み、サーバー上にアップロードすることでWebサイトを作成する手法です。
Webサイトを作成する上での最も基本的な手法であり、一番柔軟に思い通りのサイトを作成することができます。
ただし、HTML・CSS・JavaScriptの言語知識が必要
テキストエディタという無料のソフトのみで作成できますが、Webサイトを公開する際にはWordPressと同様にサーバ・ドメインを準備する必要があり。

メリット:Webサイトを一から作り上げるため、自社の希望通りのサイトを作成できる
デメリット:最も難易度が高くコーディングの深い知識が求められ、Webサイト全体のコーディングをしなければならず時間がかかり、運用時のメンテナンスも自社内で実施しなければならない

デザインフリー素材サイト

2021/1152021/115 admin コメントをする

商用OKでクレジット表記不要のサイト

イラストAC

https://www.ac-illust.com/
無料会員だと、検索できる回数が1日5回までで、1日にダウンロードできる数も決まっているため注意

FLAT ICON DESIGN

http://flat-icon-design.com/

ハンコでアソブ

http://hankodeasobu.com/

ICOOON MONO

https://icooon-mono.com/

EC design

http://design-ec.com/

Webフォント

2021/1122021/112 admin コメントをする

Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出し、表示するCSS3から策定された技術です。

家庭用PCでは、予めインストールされているフォントは少なく、基本ソフトとなるOC（オペレーティングシステム）のバージョンにより、標準搭載されるフォントが異なるため、使用できるフォントも限られていました。

windows10から標準搭載 UDデジタル教科書体・Yu Gothic UI
windows8.1から標準搭載游ゴシック・游明朝
windows7から標準搭載 Meiryo UI
windowsVistaから標準搭載メイリオ
windows初期からのフォント MSゴシック・MS明朝／MSPゴシック・MSP明朝／MS UI Gothic

Webページの読み込みと同時に、ネットワーク上にあるフォントデータをダウンロードすることができるため、どのデバイスで見ても制作サイドが意図したフォントで表示することが可能。

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

1.
SEO効果を保ったまま、デザイン性を高めることができる
Webフォントの最大のメリットは、デザイン性の高いサイトの構築ができる点
ユーザー環境に寄らず、豊かなデザイン表現が可能となったことで、作成者の意図する印象を与えることができたり、文章の可読性・視認性を高めることができるようになりました。

従来は、デザイン性の高いサイトを構築する際、デザインフォントを含む箇所を画像としてWebサイトに配置してきました。
しかしこの方法では、検索エンジンの情報収集ロボット「クローラー」に画像と判定され、記載した文字情報は理解されません。
多彩なスタイルを持つWebフォントの出現でテキスト表現の幅が広がり、クローラーにしっかりと内容を伝えられ、かつデザイン性の高いWebサイトが構築できるようになりました。

2.
レスポンシブWebデザインに適している
画面サイズの異なる複数のデバイスに対応するWebサイトでは、折り返し位置やサイズ調整が自動で行われる「テキスト」での表現が最適です。
また、従来のようなデザイン性の高い箇所を画像で配置する方法では、対応するデバイス分の画像パーツの用意が必要になるなど、構築にも更新にも手間と時間が掛かります。Webフォントの出現は運用コストの削減にもつながっています。

レイアウトの種類

2021/10282021/1028 admin コメントをする

カラム・レイアウト

「カラム・レイアウト」は、垂直方向にコンテンツエリアを区切る手法です。
メニューやコンテンツなどが横並びになるタイプは2カラム・レイアウトと呼ばれます。
他にも3カラムと呼ばれるコンテンツの両脇にナビゲーションとメニューを配置するタイプがあり、これらはマルチカラム・レイアウトとして分類されています。