WordPress学習記録 記事一覧

WordPressカスタム3兄弟マスター カスタムフィールド編【第45話】
【初心者向け】WordPressのテーマ作成で知っておきたい『カスタム3兄弟』をプログラミング初心者でも簡単にマスターできる方法についてご紹介しています。この記事ではカスタムフィールドをプラグイン『Advanced Custom Field』で簡単に設置する方法についてご紹介しています。
RaiseTech WordPressテーマ制作課題完成【第7話】
WordPressのテーマチェックエラーを全て解決しWordPressのテーマ制作が完成！プログラミング未経験なのにWordPressのテーマ制作をわずか1週間程度で完成させることができたRaiseTechのサポートと教材が凄すぎた…その内容は？
WordPressテーマチェックエラー13項目を自力で解決【第6話】
WordPressのテーマ制作最後の山「テーマチェック」のエラー13項目を自力で解決します。プログラミング未経験でいきなりWordPressのテーマ制作に挑戦してもエラーを解消することができるのか？どうやってエラーを解消したのか？についてご紹介しています。
WordPressテーマチェックエラー解消33連発 前編【第49話】
WordPress自作テーマ制作のテーマチェックをプラグイン「Theme Check」で行います。プログラミング初心者がテーマチェックエラー大量33項目を全て解消できるか？どのようにエラーを解消していったのかについてわかりやすくご紹介しています。
WordPressテーマチェックエラー解消33連発 中編【第50話】
WordPress自作テーマ制作のテーマチェックをプラグイン「Theme Check」で行います。プログラミング初心者がテーマチェックエラー大量33項目を全て解消できるか？どのようにエラーを解消していったのかについてわかりやすくご紹介しています。
WordPressテーマチェック後編 エラー解消33連発【第51話】
WordPress自作テーマ制作のテーマチェックをプラグイン「Theme Check」で行います。プログラミング初心者がテーマチェックエラー大量33項目を全て解消できるか？どのようにエラーを解消していったのかについてわかりやすくご紹介しています。
コピペ可 初めてでもできるハンバーガーメニュー後編【第21話】
コピペでプログラミング初心者でも簡単にハンバーガーメニューを実装できる！HTML+CSS+jQueryを使って実際にプログラミング初心者が初めてハンバーガーメニュー作りに挑戦した時の詳しいコーディング方法についてご紹介しています。
コピペ可 初めてでもできるハンバーガーメニュー前編【第20話】
コピペでプログラミング初心者でも簡単にハンバーガーメニューを実装できる！HTML+CSS+jQueryを使って実際にプログラミング初心者が初めてハンバーガーメニュー作りに挑戦した時の詳しいコーディング方法についてご紹介しています。
FLOCSSを使ってプロフィールサイトを作る完成編【第19話】
プログラミング初心者がCSS設計のFLOCSS（フロックス）を使って簡単なプロフィールサイトを8時間で作ってみました。実際にプログラミング初心者でもFLOCSSで簡単にサイトを作ることができた方法を実践を交えてご紹介しています。
FLOCSSを使ってプロフィールサイトを作る前編【第18話】
プログラミング初心者がCSS設計のFLOCSS（フロックス）を使って簡単なプロフィールサイトを作るための準備をしてみました。実際にプログラミング初心者でもFLOCSSで簡単にサイトを作ることができた方法を実践を交えてご紹介しています。
FLOCSSの各ディレクトリに保管するデータは？【第17話】
FLOCSSの構造である6つのディレクトリにはどんなデータを保管するべきなのか？現場でよく使われるCSS設計についてプログラミング初心者でも理解できるようにわかりやすく噛み砕いてCSS設計とFLOCSSについてご紹介しています。
CSS設計・FLOCSS（フロックス）って何？【第16話】
RaiseTechの次課題に必要な知識CSS設計・FLOCSSの予習を始めました。現場でよく使われるCSS設計についてプログラミング初心者でも理解できるようにわかりやすく噛み砕いてCSS設計とFLOCSSについてご紹介しています。
RaiseTech模写コーディング課題が完成【第15話】
RaiseTechのサイト模写コーディング課題が完成！プログラミング初心者が0からサイトの模写コーディングに挑戦。プログラミング初心者がたった10日でHTML+CSS+jQueryを使って模写コーディングを完成させることができたその方法についてご紹介しています。
HTML+CSS+jQueryでハンバーガーメニュー作り完成編【第14話】
レスポンシブには欠かせない「ハンバーガーメニュー」をHTML＋CSS＋jQueryでプログラミング初心者でも簡単に作ることができた方法を模写コーディングの記録とともにご紹介します。パソコンとスマホでハンバーガーメニューを切り替える方法についてもご紹介します。
HTML+CSS+jQueryでハンバーガーメニュー作り前編【第13話】
レスポンシブには欠かせない「ハンバーガーメニュー」をHTML＋CSS＋jQueryでプログラミング初心者でも簡単に作ることができた方法を模写コーディングの記録とともにご紹介します。パソコンとスマホでハンバーガーメニューを切り替える方法についてもご紹介します。
レスポンシブをSassのmixinで爆速＆効率的に進める方法【第12話】
レスポンシブ化で必須のメディアクエリ。Sassのmixin機能を使えば「爆速」「短い」「スッキリ」なレスポンシブ化ができる!?この記事ではプログラミング初心者ならぜひ知っておきたい簡単に使えるSassでメディアクエリを使う方法についてご紹介します。
HTML＋CSS＋jQueryでドロップダウンメニュー作り【第11話】
コーディング初心者向け HTMLとCSSとjQueryだけを使った簡単なドロップダウンリストを作成します。実際にプログラミング初心者でも簡単にドロップダウンリストを作ることができた方法についてご紹介しています。
模写コーディング backgroundプロパティとFontAwesomeを使う【第10話】
模写コーディング初心者向け backgroundプロパティで簡単に背景画像を調整、FontAwesomeでアイコンを表示させる方法は？実際にプログラミング初心者でも簡単にできた方法についてご紹介しています。
HTMLとCSSだけで画像を重ねて要素を中央揃えにする【第9話】
プログラミング初心者向け 画像編集ツールは一切必要なし！HTMLとCSSだけで複数画像を重ねて表示させる方法と要素を画像の中央に設置する簡単な方法。実際にプログラミング初心者でも簡単にできた方法についてご紹介します。
模写コーディングにプログラミング未経験者が挑戦【第8話】
RaiseTechの課題、模写コーディングにプログラミング未経験者が挑戦します。模写コーディングはどこから始めるのか、どうやって進めていくのかについて実際にプログラミング未経験者が模写コーディングの経過を記録しながらご紹介します。
WordPressテーマ制作に未経験者がいきなり挑戦【第5話】
RaiseTechの最初の課題であるWordPressのテーマ制作に挑戦します。未経験がいきなりWordPressのテーマを作ることができるのか!?またどうやってプログラミング未経験者がWordPressのテーマを作っているのかについてご紹介します。
RaiseTechの授業と課題制作がスタート【第4話】
RaiseTechの授業がついにスタート！CSSが反映されない、VS Codeでエラーが出るなどプログラミング未経験の文系大学生がプログラミング学習に奮闘します。プログラミングスクールの課題ってどんな感じなのか未経験でもできるのかについて書いています。
RaiseTech初授業までにやっておいて良かったこと【第3話】
RaiseTech WordPress副業コースに入会し初授業までにやっておいて良かった事前準備2選をご紹介。プログラミングスクールの受講前の準備には無料版ProgateとWordPressローカル環境構築がおすすめです。
プログラミング未経験文系大学生RaiseTechに入会【第2話】
未経験＆文系女子大生が調査・説明会参加などを通して10社以上のプログラミングスクールを比較しついにRaiseTech入会を決定しました。この記事では入会理由、RaiseTech WordPress副業コースの詳細、入会まで、入会後の流れをまとめています。
文系女子大学生プログラミング学習始めます【第1話】
文系・プログラミング未経験・大学生必見！本記事ではプログラミング未経験＆文系大学生の筆者が独学&無料でどれほどのレベルまで学習できたのか、プログラミング学習を始めようと思ったきっかけやプログラミング学習の目標についてご紹介しています。
WordPressローカル環境から本番環境へ移行完了【第57話】
ローカルで開発したWordPressのサイトテーマを本番環境へ移行しました。ついにRaiseTechの最終課題が完了です。この記事ではサブドメインの設定やWordPressのインストール、ローカルから本番への移行について初心者でもできた方法をご紹介しています。
模写コーディングHTMLファイルをWordPress化する【第58話】
HTML/CSSで模写コーディングしたファイルをローカル環境でWordPress化してみました。HTMLファイルをPHPファイルに変換してテーマ反映させる方法やWordPressのCSS,jQueryの読み込み方についてご紹介しています。
HTMLファイルをWordPressテーマ化する第1歩【第32話】
コーディングしたHTMLファイルデータをWordPressテーマとして動かすためにまず必要な作業「ローカル環境の構築」「共通パーツの分割」を行いました。HTMLファイルをローカル環境構築やテーマ反映に必要なファイルの作成、分割方法についてご紹介しています。
WordPress化 page.phpのCSSを修正【第37話】
前回page.phpのWordPress化でスタイルが崩壊してしまった固定ページの修正を行いました。HTMLの親子関係に気を使いながらプロパティの引っ越しを行うことで最初からまたスタイルを組み直すことなく修正を行うことができました。
WordPress化 ナビゲーションメニューを複数設定【第38話】
WordPressのナビゲーションメニューを複数箇所に設置できるようにする記述やメニューの設置の方法、スタイルの調整についてご紹介しています。この実装を行えばヘッダー下、フッター、サイドバーなど希望の位置にメニューを設置することができるようになります。
WordPress化 single.php編集とサイドバー階層化【第39話】
投稿ページをWordPressで編集したものを出力する編集とサイドバーにカテゴリーを希望通りの順に表示させ階層化する編集を行いました。サイドバーのカテゴリーの順番をプラグインで簡単に入れ替えたりカテゴリーの階層をクリック一つで表示させる方法をご紹介しています。
WordPress化 archive.phpの編集【第40話】
WordPressのアーカイブページのアイキャッチの出力やタイトルの出力や抜粋、リンクの出力、必須のページネーション機能を実装しました。出力するものがとても多いアーカイブページですが初めてでもつまずきなく完了することができました。
WordPress化 archive.php編集と検索機能の実装【第41話】
archive.phpの編集ではスマホレスポンシブ時のページネーションのWordPress化を、searchform.phpの編集では検索フォーム機能を実装しました。検索キーワードの受け渡しやキーワードを検索語も保持する方法、検索結果ページのスタイル修正を行います。
テーマチェック前の見直しと修正【第48話】
テーマチェックに取り掛かる前にindex.phpとarchie.phpのスタイルの細かな修正とエスケープ処理を行いました。特にエスケープ処理はテーマチェックでエラーを吐き出されてしまうのでファイル全てのデータ出力箇所を細部まで見直す必要があります。
WordPress化 footer.phpとpage.phpの編集【第36話】
ホームページ下のフッターにあるリンクから指定の固定ページに飛ばしたり記事の内容をWordPressで編集できるようにfooter.phpとpage.phpを編集しました。指定ページに飛ばすのは<a>のhref部分を書き換えることで簡単に遷移させることができました。
WordPress化 背景画像とjQueryの不具合を解決【第34話】
WordPress化で反映されなくなった背景画像とjQueryを解決することに成功しました。その原因は画像のパスの通し方と</body>の前に必須の『あの』WordPressテンプレートでした。どのように解決できたのかご紹介しています。
WordPress化 header.phpの編集【第33話】
本格的にWordPressテーマ化に取り掛かります。まずは全ページ共通パーツのheader.phpをWordPressで管理できるように編集を行います。基本情報のWordPress化には成功しましたが最後の最後でCSSが反映されないハプニングが発生してしまいました。
RaiseTech最終課題コーディングレビュー修正【第31話】
コーディングレビューで頂いた「サイドバー表示時のスクロール固定」や「headerタグが空になっている」という指摘箇所を修正しました。サイドバー表示時に後ろの画面のスクロールの止め方やheaderタグの役割について学習することができました。
サイドバースクロール修正＆コーディング完了【第30話】
前回のサイドバーのスクロールが固定される不具合をpositionプロパティの見直しで解決しました。またコーディング全5ページのスマートフォンサイズのレスポンシブ化を完了しRaiseTech最終課題のコーディングがまずは完成しました。
サイトコーディングの問題潰し後編&レスポンシブ化【第29話】
サイドバーがスクロールしない…サイドバーにアニメーションをつけたい…こんな課題の修正に挑戦しました。またコーディング全5ページのタブレットサイズのレスポンシブ化を一気に行いました。
サイトコーディングの問題潰し前編【第28話】
レスポンシブのブレイクポイントが合わない、preタグのインデントを揃えたいなどの問題やHTML構造とクラス名の見直しを行いました。コード側とフロント側でブレイクポイントがずれる原因やpreタグの性質について新たに学ぶことができました。
WordPress化 メニュー機能の拡張【第42話】
WordPress管理画面の「外観」＞「メニュー」から複数メニューを登録したりメニューの有無を判断して表示⇔非表示を切り替えたりするメニューの機能の拡張（カスタムメニュー）についてプログラミング初心者でもできた簡単な方法をご紹介しています。
デザインカンプからコーディング RaiseTech最終課題 【第22話】
RaiseTechの最終課題であるデザインカンプからのコーディングとWordPress化に取り掛かります！プログラミング未経験者が1ヶ月半でどれほどのレベルに達しているのかコードの内容を大公開しながらご紹介します。デザインカンプからのコーディングの方法についてもわかりやすくご紹介します。
エックスサーバーでドメイン設定とWordPressインストール【第56話】
エックスサーバーを使って独自ドメインの設定と独自ドメインにWordPressをインストール、HTTPS化しました。プログラミング知識がゼロでも1日あれば誰でもWordPressでサイトを立ち上げられる方法についてわかりやすくご紹介しています。
WordPressエックスサーバー契約＆ドメイン取得【第55話】
レンタルサーバー「エックスサーバー」を契約＆ドメインを取得してWordPressの本番環境の構築を進めていきます。この記事ではエックスサーバーの契約方法やドメインの取得方法についてプログラミング知識ゼロの方でも簡単にできる方法をわかりやすくご紹介しています。
WordPressローカル環境から本番環境への移行準備【第54話】
【超簡単!!】プラグイン「All-in-One WP Migration」を使ってWordPressのデータを簡単に移行するテストを行いました。All-in-One WP Migrationはプログラミングの知識がなくても誰でも簡単にWordPressを移行することができるその方法についてご紹介しています。
WordPressカスタム投稿アーカイブが表示されない原因【第53話】
カスタム投稿タイプをプラグイン「CPT UI」で作成したにも関わらず404エラーページが表示されてしまった時の解決法についてまとめています。確認するポイントはカスタム投稿スラッグとカスタムタクソノミースラッグが異なっているかどうか。こちらが同じだと404エラーになってしまいます。
WordPress化テーマユニットテスト【第52話】
【WordPressテーマ自作】テーマチェックが終わりテーマユニットテストを行いました。テーマユニットテストは任意の工程ですがさまざまな投稿パターンを想定し記事ページやメニューなどのスタイル崩れが起こらないかを簡単に確認することができます。
WordPressカスタム3兄弟マスター 実践編【第47話】
WordPressのカスタム投稿タイプ、カスタムフィールド、カスタムタクソノミーのカスタム3兄弟全てを使って記事を投稿する実践編です。プログラミング初心者でもできた　カスタム3兄弟の実装方法や使い方についてコピペOKで簡単にご紹介しています。
WordPressカスタム3兄弟マスター カスタムタクソノミー編【第46話】
【初心者向け】WordPressのテーマ作成で知っておきたい『カスタム3兄弟』をプログラミング初心者でも簡単にマスターできる方法についてご紹介しています。この記事ではカスタムタクソノミーをプラグインなしで自作するコピペOKの簡単な方法をご紹介しています。
WordPressカスタム3兄弟マスター カスタム投稿タイプ編【第44話】
【初心者向け】WordPressのテーマ作成で知っておきたい『カスタム3兄弟』をプログラミング初心者でも簡単にマスターできる方法についてご紹介しています。この記事ではカスタム投稿タイプをプラグインを使わずに自作するコピペOKの簡単な方法をご紹介しています。
WordPress化 SEOに効果的な404エラーページの作成【第43話】
SEO対策に有効的と言われている404エラーページ(404.php)を作成しました。404エラーページは404.phpで作成することができます。簡単な方法はあらかじめ作成してあるindex.phpのコードをコピペして不要部分を削ってエラー文を付け足すだけで実装できます。
WordPressテーマ化sidebar.phpの編集【第35話】
サイドバーパーツをsidebar.phpとしてWordPress化を進めていきます。ウィジェット機能をつけWordPressでサイドバーの管理をするためにどのようなことをすれば良いのかプログラミング初心者もできた方法についてご紹介しています。この記事ではサイドバーにカテゴリーを表示させるように編集を行います。
ヘッダーとサイドバーのレスポンシブ化【第26話】
ヘッダー部分とサイドバー部分のレスポンシブ化を開始！WordPress化に向けたレスポンシブ化の実装方法やプログラミング初心者がデザインカンプからどのようにレスポンシブデザインを作ったのかについて実際のソースコードを公開しながらご紹介しています。
初心者でも簡単！slickプラグインで作るスライダー【第27話】
「スライダーって難しそう…」「初心者でも簡単に作れないのかな‥」こんなお悩みもslickを使えばプログラミング初心者でも簡単に実装することができます。本記事ではプログラミング初心者が実際にslickを使ってスライダーの実装に挑戦しています。
投稿ページと固定ページのコーディング【第25話】
個別投稿ページ用のsingle.htmlと固定ページ用のpage.htmlのコーディングが完成！投稿ページで挿入されるさまざまな要素のスタイリングやプログラミング初心者がデザインカンプからどのように作ったのかについて実際のソースコードを公開しながらご紹介しています。
アーカイブページと検索結果ページのコーディング【第24話】
アーカイブページ用のarchive.htmlと検索結果ページ用のsearch.htmlのコーディング。ページネーションのスタイリングやプログラミング初心者がデザインカンプからどのように作ったのかについて実際のソースコードを公開しながらご紹介しています。
Googleマップの埋め込み方とフッターコーディング【第23話】
デザインカンプからのコーディング、フロントページが完成！サイトにGoogleマップを埋め込む方法やフッターの作り方をコードコピペ可でご紹介しています。プログラミング初心者がどのようにデザインカンプからコーディングをしているのかについても記録をしています。
みさん
文系女子大生、プログラミング学習始めました。
ホーム
WordPress学習記録 記事一覧