読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

補足説明

サイトの構造を組み替える

サムネール画像を表示する

記事の概要を表示する

カスタムヘッダーの機能でヘッダー画像を管理する

ヘッダー画像を追加する

1段組と2段組のレイアウトを切り替える

2段組のレイアウトにする

「お問い合わせ」のページを作成する

ナビゲーションメニューを作成する

ヘッダーとフッターの設定をパーツ化して共有する

「サイトについて」のページを作成する

「サイトについて」のページを作成する

投稿されたコメント数を表示する

投稿されたコメントのデザインを指定

コメントを投稿して表示する

記事を投稿する

新規投稿 「投稿」→「新規追加」 テキストでは、入力するような内容になっていますが、授業ではすでに用意されているテキストファイル(XMLファイル)を読み込んで使用します。 ツール(インポート) WordPress形式を選択する 「インポート」プラグインをイ…

コメント投稿フォームのデザイン指定

コメント投稿フォームを表示する

RSSフィードを配信する

月別ページを作成する

カテゴリーページを作成する

メニューのデザインを指定する

メニュー全体をグループ化する class名を「blogmenu」と指定する <div class="blogmenu"> <ul> </ul> </div> リストマークは削除する /* メニュー */ .blogmenu ul { margin: 0; padding: 0; list-style: none; } 背景色を指定 .blogmenu .widget { margin-bottom: 30px; padding: 20px; backgrou…

メニューを表示する

ウィジェットを利用してメニューを表示する functions.php を用意する(何も記述しない) 「mytheme」内に配置 ウィジェットを有効にする register_sidebar サイドバーをひとつ定義して ID を返します

本文の左右に画像を挿入する

画像を用意する 画像は、sakura-kanban.jpg「800 × 534px」 画像の配置を「右」に指定して挿入する 右と左のどちらに配置する場合でも、画像は文章の前に挿入します 《プレビュー》 画像を右に配置する /* 記事 */ article { margin-bottom: 40px; overflow:…

画像にキャプションを挿入する

画像を用意する 画像は、sakura.jpg「800 × 534px」 キャプションを付けて画像を挿入する キャプション付きの画像を記事に揃えて表示する .wp-caption { max-width: 100%; } 《プレビュー》キャプションを画像の中央に揃えて表示する .wp-caption-text { mar…

大きな画像を記事の横幅に合わせて表示する

大きな画像を挿入する 中で挿入した画像を、「オリジナルサイズ」に置き換えてみる 《プレビュー》 記事の横幅に画像を揃えて表示する article img { border: none; max-width: 100%; height: auto; } 《プレビュー》横幅を小さく表示《プレビュー》

記事の本文に画像を挿入する

画像を用意する 画像は、redroof.jpg「800 × 534px」 自動生成される画像の大きさを確認する ここでの大きさの変更は、アップロード済みの画像には適用されません 画像の挿入位置を指定する 記事の編集画面を開いて、記事を開きます 画像挿入の位置 ビジュア…

PHP - 繰り返し

繰り返し(ループ) 同じ処理や似たような処理を何度も行いたい場合 While文の書き方 while( 条件式 ){ 条件を満たす場合の動作 条件判定が最終的に偽になる変更を入れる } このコードでは、「1月2月・・・12月」と文字列を出力します。 $monthが、13にな…

WordPressテンプレートタグ

テンプレートタグとは WordPressでは、ユーザーが典型的な処理を手軽に行えるようにするため、さまざまな関数が定義されています 非常に多くの関数が存在するため、関数がいくつかのカテゴリーに分類されています なかでもテーマファイルでよく使われる関数…

wp_headerとwp_footerを追加する

WordPressのテーマ作成では必須 と を追加する(必須) のちに、header.phpとfooter.phpを分離します </head> </body> これで、ログインしている時のみ、管理バーが表示されるようになります。 《プレビュー》 管理バーを非表示にする 「サイトをみるときにツールバー…

ヘッダーとフッターをデザインする

Webフォントを利用する Google Fonts <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Acme"> サイト名をWebフォントで表示する /* ヘッダー */ .siteinfo h1 { float: left; margin: 0; font-family: 'Acme', sans-serif; font-size: 20px; } 《プレビュー》 ヘッダーの設定 /* ヘッダー */ header { margin-bott</link>…

ヘッダーとフッターを表示する

ヘッダーを表示する サイト名を表示する <body <?php body_class(); ?>> <h1><a href="<?php echo home_url(); ?>"></a></h1> <div class="container"> 《プレビュー》 サイトの説明を表示する <body <?php body_class(); ?>> <h1><a href="<?php echo home_url(); ?>"></a></h1> <p></p></body></div></body>

トップページのデザインを指定する

トップページのデザインを指定する 記事の間隔を広くする /* 記事 */ article { margin-bottom: 40px; } 記事のタイトルを黒色にする /* 記事 */ article h1 a { color: #000; text-decoration: none; } 横幅の最大値を指定する .container { max-width: 650…

トップページを表示する

テンプレートタグの読み込み順序 「index.php」には、ダッシュボードで指定された数だけ投稿記事が表示されています。 その数を超えた場合に表示された表示されるのが「ページャー」です。 しかし、投稿記事の一覧には、「次の記事」「前の記事」という概念…

前後の記事へのリンクを表示する

前後の記事へのリンクを表示する 投稿記事のページャー(ページを移動する仕組み) $format(文字列) (オプション) リンクの文字列の書式 リンクの前後に追加する文字を設定できます 「%link」と文字列内に表記すると「$link」(次のパラメータ)に置き換…

アイコンを付けてデザインする

アイコンフォントを利用できるようにする http://fortawesome.github.io/Font-Awesome/ [ɔ:səm] すばらしい、cool CDN アイコンフォント HTMLにclass名を設定するだけで、簡単にアイコンを表示できます Font Awesome CDN CDN(Contents Delivery Network) h…

記事の投稿日とカテゴリーを表示する

日付の設定 記事の投稿日を表示する get_the_date() 「get_the_date()」は、現在の投稿(または指定された投稿)が書かれた日付を取得します the date() とは異なり、このタグは常に日付を返します 取得のみの関数のため、echo文で出力します 記事タイトルの…

記事の個別ページを作成

index.phpを編集する 基本構造の入力 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページタイトル</title> </head> <body> </body> </html> WordPressのテンプレートタグ 記事タイトルを表示 WordPressのif-else文 書き方としては、以下の4通りがありますが、いずれでも処理は同じになります

オリジナルテーマを作成

オリジナルテーマを作成する 「htdocs」→「wordpress0322」→「wp-content」→「themes」内に「mytheme」フォルダーを作成する 新規「index.php」を、フォルダー内に用意する 新規「style.css」を、フォルダー内に用意する 「style.css」内に、以下のように記…

WordPressの基本設定

サイト名を確認する 「ダッシュボード」→「設定」→「一般」 サイトの説明文を入力する 不要な記事の削除 「投稿」→「投稿一覧」→「Hello world!」 「固定ページ」→「固定ページ一覧」→「サンプルページ」 標準で用意されたカテゴリーの名前を変更する 「投稿…

WordPressとは

WordPressとは WordPress(ワードプレス)は、オープンソースのブログソフトウェアです PHPで開発されており、データベース管理システムとしてMySQLを利用しています 単なるブログではなくCMSとしてもしばしば利用されています 主な特徴 PHPによる動的なペー…