基金訓練(Webデザイン・プログラミング科)の75日目に行ってまいりました。
75日目は、Adobe Illustratorの実習です。
75日目の内容は下記のとおりです。
イラストレーターを使って既存のロゴをトレースの続き
基金訓練(Webデザイン・プログラミング科)の74日目に行ってまいりました。
74日目は、WordPressの実習です。
デフォルトのテンプレート(twentyten)をカスタマイズして、トップページを固定ページにしたサイトを作成していきます。
72日目その2と74日目の内容は下記のとおりです。
1.固定ページのテンプレート作成(テンプレートですが、各々の固定ページの専用テンプレートになります。)
- ¥wordpress¥wp-content¥themes¥twentyten フォルダ内のindex.phpを固定ページの数だけ同じフォルダにコピーします。
- それぞれ、top.php、info.phpなどのファイル名に変更します。
- テキストエディタで開いて、上部のコメント(/**~*/の部分)をすべて削除し、top.phpの場合は、
/**
*Template Name: TOP
*/
に置き換えます。TOPの部分がテンプレート名になるので、info.phpの場合は、その部分をINFOにします。
- それぞれのphpファイルの
<div id="content" role="main">~</div><!– #content –>
をすべて消し、前に準備しておいたHTMLの<div id="c_contents">~</div>部分をペーストします。
- 1カラムにする時は、
<?php get_sidebar(); ?>
を削除します。
- 編集したphpファイルをUTF-8Nで保存します。
(前回書き忘れましたが、header.php、footer.phpもUTF-8Nで保存しておきます。)
2.管理画面で固定ページの作成
- WordPressのダッシュボードのメニューから、ページ→新規追加 を選択すると、「新規ページを追加」画面になります。
- タイトルを「トップページ」と打ち込み、右の「ページ属性」の「テンプレート」で、「TOP」を選択します。
- タイトルの下の「パーマリンク」の編集ボタンを押し、「トップページ」を半角英字の「top」に変更して、OKボタンを押します。
- 右の公開ボタンを押すと、ページの追加が確定します。
- 同様に、2ページ目以降の固定ページもページ追加していきます。
- ブログページも新規ページとして固定ページと同様に追加しますが、「テンプレート」は「デフォルトテンプレート」にします。
3.トップページをフロントページに設定
- WordPressのダッシュボードのメニューから、設定→表示設定 を選択すると、「表示設定」画面になります。
- 「フロントページの表示」項目で、「固定ページ」を選択します。
- 「フロントページ」項目で、「トップページ」(先ほど作ったページのトップページのタイトル)を選択します。
- 「投稿ページ」項目で、「ブログ」(先ほど作ったページのブログのタイトル)を選択します。
- 変更を保存ボタンを押して確定します。
4.ブラウザで確認しながらcssファイル、phpファイルを修正
- グローバルナビなどのページへのリンクのパス名は、
<?php bloginfo( ‘url’ ); ?> /パーマリンクで設定した文字(トップページの場合はtop)
にします。
- ブラウザで各ページを確認しながら、¥wordpress¥css¥c_style.cssや、
¥wordpress¥wp-content¥themes¥twntyten¥style.cssを修正して、表示を整えて完成です。
基金訓練(Webデザイン・プログラミング科)の72日目に行ってまいりました。
72日目は、WordPressの実習です。
デフォルトのテンプレート(twentyten)をカスタマイズして、トップページを固定ページにしたサイトを作成していきます。
72日目の内容は下記のとおりです。
1.HTMLでページの作成
- 普通に、HTMLとCSSでトップページなどの固定ページを作成します。
※この時きちんヘッダー部、コンテンツ部、フッター部をdivでグループ分けしておきます。
(オリジナルのID名と同じにならないよう、c_header、c_contents、c_footer等にします。)
- これをコピペして、WordPressのページを作成していきます。
- 作成したCSSファイルの入ったCSSフォルダと、使用したイメージの入ったimageフォルダをwordpressフォルダにコピーします。
※CSSファイル名は、c_style.css等に変更しておきます。
2.ヘッダー、フッターの変更
- ¥wordpress¥wp-content¥themes¥twentyten フォルダ内のファイルを変更するので、フォルダごとバックアップしておきます。
- ¥wordpress¥wp-content¥themes¥twentyten フォルダ内のheader.phpをテキストエディタ(UTF-8Nで保存できるもの)で開きます。
- <div id="header">~</div><!– #header –>の中身をすべて消して、先に準備しておいたHTMLのheaderの部分をコピペして置き換えます。
- <img>タグのイメージファイルのパスは、
<? bloginfo(‘url’); ?>/image/イメージファイル名
にします。
- <head>部に、CSSファイルとのリンクを記述します。
<link rel=”stylesheet” type=”text/css” href=”<? bloginfo(‘url’); ?>/css/c_style.css” />
- この状態で、ブラウザで確認すると、テンプレートデフォルトのCSSファイルがあるので、表示が崩れています。
※確認は、管理ページ左上のWordPressのロゴをクリックしておこないます。
- オリジナルのCSSファイルは ¥twentyten¥style.css なので、そのファイルをテキストエディタで開いて編集します。
※ #wrapperのwidthの値などを変更したりして、表示を整えます。
- フッターもヘッダーと同様にしてfooter.phpを変更します。
sei2が、気になる家電、WEBデザイン、WEBプログラミング、基金訓練や日常の出来事を書いたブログです。