WordPressで記事に画像を入れる方法【超初心者向け】WordPressWordPressで記事に画像を入れる方法【超初心者向け】WordPress(ワードプレス)で記事に【画像を入れる方法】を初心者向けに紹介した記事です。WordPressの基礎中の基礎の操作ですので、覚えておくようにしましょう。画像には「代替テキスト」も入力しておくことをおすすめします。[テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。WordPressを使い始めたばかりという超初心者向けの記事です。今回はWordPressの記事に画像を入れる方法についてご紹介します。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。大石ゆかり田島メンター!!WordPressの記事に画像を入れたいんですけど、どうしたらいいんですか〜?田島悠介WordPressはメディアという画面で画像を管理しているんだ。画像の使い方を教えるね!大石ゆかりはい、お願いします!WordPressで画像を挿入する方法まずはWordPress管理画面の左にある「投稿」メニューの中の「新規追加」を押して「新規投稿の追加」画面を開きましょう。本文の画像を挿入したい位置にカーソルを持っていったら「メディアを追加」ボタンを押します。すると「メディアを挿入」の画面が開くので、記事に挿入したい画像ファイルをドラッグ&ドロップします。この時、「ファイルをアップロード」にタブを切り替えて、「ファイルを選択」から画像を選んでも同じです。アップロードした画像一覧に今ドラッグ&ドロップした画像ファイルが追加され、選択できる状態になります。「キャプション」「代替テキスト」などが入力できます。代替テキストは「altタグ」としてソースコードに入力されるので、画像を説明した内容を入力するようにしましょう。「配置」では、記事の左寄り、真ん中寄せ、右寄りなどが選択できます。「リンク先」では、画像をクリックしたリンク先を設定できます。右下の「サイズ」はドロップダウンリストから画像サイズを選択できます。最後に「投稿に挿入」ボタンを押して画像の挿入は完了です。記事の投稿画面でこのように表示されれば成功です。画像をうまく取り入れて魅力的な記事を増やしていきましょう。WordPressの使い方がよくわからないという場合は、WordPressで記事を投稿する方法もご覧ください。大石ゆかり画像を入れると記事の印象が変わりますね!田島悠介そうだね。画像の表示する大きさも変えられるから、用途に応じて使い分けると良いね。大石ゆかりはい♪[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。関連する記事WordPressでプラグインを使って検索機能を作ってみよう!【初心者向け】WordPressで検索機能の作り方を解説している記事になります。検索機能を自分の力で開発しようとすると大変なので、今回はプラグインを使って行います。Checkerの使い方ーWordPressプラグイン【初心者向けWordPressのプラグインの使い方を初心者向けに紹介する記事です。Check...WordPressWPtouchの使い方ーWordPressプラグイン【初心者向け】WordPressのプラグインの使い方を初心者向けに紹介する記事です。Templateの使い方ーWordPressプラグイン【初心者向け】WordPressのプラグインの使い方を初心者向けに紹介する記事です。今回は、WordPressのカスタムフィールドを追加できるプラグイン、Custom...WordPressWordPressで記事作成時に改行する方法【初心者向け】WordPressで記事を投稿する際には改行する、もしくは段落を分ける操作をほぼ必ず行うと思います。WordPressではビジュアルエディタとテキストエディタの...WordPress遅いと感じたら導入!WordPressのページ表示速度を高速化できるプラグイン5選WordPressは、HTMLで構築したサイトと違って、動的にページを生成する仕組みです。そのため、アクセス数が増えると、サーバー負荷が増えてしまい、ページ表示...WordPressあわせてよく読まれている記事WordPressで記事を投稿する方法【超初心者向け】WordPressをとりあえずインストールしたという初心者向けの記事です。基礎中の基礎である、記事を投稿する方法を覚えましょう。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。管理画面の中に記事の投稿画面があるんだ。そこから投稿できるよ。WordPressの管理画面の左側にある「投稿」メニューの中にある「新規追加」をクリックします。「新規投稿を追加」画面が表示されます。記事のタイトル、本文をそれぞれ入力します。記事を公開する前に実際のサイト上でどう表示されるのかを確認する場合は、右上の「プレビュー」ボタンをクリックしてください。完成した記事はすぐに公開することもできますし、いったん下書きとして保存しあとで公開することもできます。公開する場合には「公開」ボタンを、いったん下書きとして保存しておきたい場合には「下書きとして保存」ボタンを押します。これで記事が投稿できました。投稿ができた記事をサイト上で表示させてみましょう。記事を投稿した画面の上方にある「投稿を表示」をクリックすることで、投稿した記事を確認することができます。クリックすると表示されました。WordPressの投稿は、WordPressを活用するために必須の操作なのでしっかり覚えましょう。投稿の方法がわかったら、WordPressの記事に画像を入れる方法もチェックしてみてください。画像を入れたり文字の大きさを変えたり色々できるから、試してみると良いね。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。WordPressWordPressでアイキャッチ画像を設定する方法【初心者向け】WordPressでは、記事1つ1つにサムネイル画像(アイキャッチ画像)を設定することができます。ブログの記事冒頭や記事一覧ページに配置されている、一番目を引く画像です。TechAcademyマガジンの場合は、このように表示されています。そこで今回は、アイキャッチ画像の設定方法について簡単にご紹介します。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。アイキャッチ画像のことだね。それなら記事ごとに設定するんだけど・・・ちょっとやってみようか。アイキャッチ画像は記事投稿画面で設定できるのですが、デフォルトの記事投稿場面ではまだ表示されていないことが多いので、これを表示させてみましょう。投稿編集画面で、右上に表示される「表示オプション▼」というボタンをクリックします。すると、投稿画面で表示されるオプションリストが表示されます。その中から「アイキャッチ画像」を探し、チェックボックスにチェックしましょう。すると、投稿画面の右サイドに、「アイキャッチ画像」のエリアが出来ます。これでアイキャッチ画像追加の準備はできました。アイキャッチ画像設定エリアの、「アイキャッチ画像を設定」というテキストリンクをクリックします。すると、画像追加画面が立ち上がるので、設定したい画像を選択しアップロードしてください。アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。投稿画面に、設定したアイキャッチ画像が反映されます。間違ってアップロードしてしまった場合は、「アイキャッチ画像を削除する」というテキストリンクをクリックし、またやり直せば大丈夫です。記事を公開し、どのように反映されているかを見てみましょう。これアイキャッチ画像の設定は完了です。このように記事の冒頭に表示されるので、テキストだけよりぐっと見た目が華やかになりましたね。アイキャッチ画像を適切に設定して、より魅力的なサイトにしていきましょう。他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。WordPressWordPressで記事に「続きを読む」を設定する方法【初心者向け】WordPressで作成したサイトのデザインにもよりますが、TOPページや記事の一覧ページには、記事の一部を表示して「続きを読む」に誘導することも多いのではないでしょうか。そこで、今回は初心者向けに「続きを読む」を設定する方法を紹介します。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。「Moreタグ」っていうのを使うとできるんだ。続きを読むの設定は、記事を書く画面から可能です。「続きを読む」を表示させたいところで、下記の画像のように「Moreタグの挿入」のボタンをクリックします。T」のショートカットで追加することも可能です。このボタンをクリックすると、記事の途中で線が引かれ、右側に「More」と表示されることが確認できます。表示をビジュアルから「テキスト」に変えると「<!–more–>」のタグが挿入されていることがわかります。実際にどんなタグになっているかは理解しておくと良いでしょう。ここまでできたら、記事の一覧ページなどで確認します。先ほどMoreタグを追加した前までが文章で表示され、それ以降は表示されず、「続きを読む」のリンクが追加されたことがわかると思います。この「続きを読む」をクリックすると、記事の全体が表示され、そこには続きを読むのリンクは表示されません。記事一覧などで、「続きを読む」をクリックして記事を読んでもらわなければ意味がありませんので、「続きを読む」の前に、記事の要約や続きを読みたくなるような内容を含んでいるとより良いでしょう。「続きを読む」の場所を間違ってしまった、あるいはサイトのデザインが変わったから削除したいということもあるでしょう。削除の方法は簡単です。挿入した「More」をクリックしてください。ここで「Delete」キーをクリックすると消えます。これだけで削除は完了です。記事一覧ページなどで確認すれば消えていることがわかります。場所を変える場合は、再度新しいところでMoreタグを追加してください。WordPressを使いこなしたい場合は、WordPressでパーマリンクを設定する方法も合わせてご覧ください。一覧が表示してあるところに要約を持ってくることで、見に来た人により興味を持ってもらう効果がある反面、記事の書き方にも注意が必要だね。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。WordPressWordPressのギャラリー機能を使う方法【初心者向け】WordPressを利用して記事を書くと、簡単に画像ギャラリーを作成することができます。フォトアルバムや、作品集を作るのに便利です。そこで今回は、WordPressでの写真ギャラリー作成方法について紹介します。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。ギャラリー機能を利用したい記事を作成しましょう。作成したら、記事投稿画面からギャラリーで表示したい画像ファイルをアップロードします。「メディアを追加」というボタンをクリックしてください。ギャラリーで表示したい画像ファイルをアップロードします。複数の画像を選択して、ドラック&ドロップで一気にアップロードすることも可能です。これでアップロードができました。画像のアップロードが完了したら、左に表示されているメニューの中から「ギャラリーを作成」というテキストをクリックしてください。見た目はあまり変わりませんが、ギャラリー作成画面へ切り替わります。次に、ギャラリーで表示したい画像にチェックを入れます。初期状態では、前の工程でアップロードした画像にのみ、サムネイルの右上にチェックが入っています。他にも追加したい画像があれば、クリックしてチェックしてください。誤ってチェックしてしまった場合は、同じ画像をクリックするとチェックを解除することが可能です。選択した画像は、左下に小さく一覧表示されています。それぞれの画像に説明文を加えたい場合は、一つ一つクリックして編集していきましょう。「キャプション」の部分に入力すると、ギャラリーの画像下に表示されます。すべての画像の準備が整ったら、右下の「ギャラリーの作成」ボタンをクリックします。続いて、ギャラリーの表示順や表示数などを編集します。表示順は、ドラック&ドロップで変更できるので、直感的に操作できるでしょう。編集できたら、右下の「ギャラリーを挿入」ボタンをクリックしましょう。投稿画面に、ギャラリーが挿入されます。最後に、記事を公開してみましょう。サイト上では、このように表示されています。非常に簡単に画像の一覧を作成できるギャラリー機能。有効に活用してください。WordPressを使いこなしたい場合は、WordPressで記事にYouTubeの動画を埋め込む方法も合わせてご覧ください。ギャラリー機能、いいですね!一つ一つ画像並べると大変ですし。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。Shotsの使い方を紹介します。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。画面キャプチャを自動生成し、サイトに反映することができるプラグインです。ハウツー系の記事を作成したり、ポートフォリオサイトを作成したりするときにWebサイトの画面をキャプチャとして使うことが多いと思います。キャプチャして、サイズを変更してと手間がかかりますよね。このプラグインを使えば、WebサイトのURLと画像の横幅をショートコードを使って指定するだけでもキャプチャ画像を挿入できるので便利です。このプラグインはキャプチャ画像が自動生成されるため、WordPressのために使っているサーバーに負荷をかけることもありません。このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。やり方がわからない場合はWordPressのプラグインをインストールする方法をご覧ください。インストールができたら早速使ってみましょう。キャプチャ画像の挿入方法は、「ショートコードを使う方法」と「ビジュアルエディタを使う方法」があるので、自分の好きな方法で使ってみてください。1つ目の方法を紹介します。記事投稿画面を開き、キャプチャ画像を挿入したい箇所に以下のショートコードを入力するだけです。赤字部分のURLとサイズを変更することで、簡単にキャプチャを作ることができます。url=”●”にURLを、width=”●”にサイズを入力します。実際に、WordPressの記事の投稿で入力してみましょう。テキストモードになっていることを確認してから入力してください。このようにショートコードを入力するだけです。入力が完了したら、サイト上で確認してみましょう。これで1つ目の方法は完了です。続いて2つ目の方法を紹介します。こちらはWordPressのビジュアルエディタを使います。プラグインのインストールが完了すると、ビジュアルエディタにカメラのアイコンが追加されています。このボタンをクリックすると、画像の横幅を設定するポップアップが表示されます。今回は600pxとしました。「OK」をクリックすると、キャプチャするWebサイトのURLの入力が求められますので入力します。OKをクリックすると、自動でショートコードが入力されます。やっていることはどちらも同じですが、ショートコードの扱いに慣れていない方は、2つ目の方法の方が簡単かもしれません。今回の記事は以上です。Packの使い方も合わせてご覧ください。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。WordPressXcodeでiPhoneアプリの起動画面を変更する方法【初心者向け】Xcodeを使って、iPhoneアプリの起動画面を変更する方法を初心者向けに紹介していきます。iPhoneアプリの見た目で変更できるポイントとして、UIパーツやアイコンがあります。本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。Imagesの項目を探します。Sourceという項目があるので、その右端の”→”をクリックして、画像追加画面に移動します。すると、画像の追加画面が表示されます。この赤枠で囲った部分に画像をドラッグ&ドロップすることで追加していきます。今回はiPhoneアプリとしていますが、iPadアプリでも方法は同じです。画像の追加画面まで確認できたら、一度Xcodeは最小化して起動画面用の画像を用意しましょう。今回はPhotoshopを使って用意してみました。見た目にこだわるのが目的ですので、アプリのイメージに沿ったものを用意しましょう。ここで、注意しなければならないのが起動画面用の画像のサイズです。先ほどの画面でわかるように、”2×”と”R4”の2種類があります。それぞれ画像の高さが下記の通り異なりますので注意しましょう。Retina(3.5inch)に対応するために必要です。.jpgファイルでは読み込みエラーが出ることがありますので、.pngファイルを用意すると良いでしょう。画像の用意ができたら、先程の画像追加画面に戻ってドラッグ&ドロップで画像を追加します。完了するとこのように表示されます。起動画面に設定した画像はiOSシミュレーターで確認することができます。Retina(4inch))は緑色の画像にしました。Retina(3.5inch))ではクリーム色の画像にしました。例として画像の色を変えましたが、iOSシミュレーターのデバイスによって別の画像が表示されることが理解できたと思います。今回の記事は以上です。iPhoneアプリのアイコンを変更する方法の記事もあるので、合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。CORPORATION.。