」を実施。ブログ力向上が目的！できれば早く終わらせたい！早速、実況中継開始です。
【実況中継】
【１２月８日】
１０：３０スタート
１０：３０ パソコン起動 作業開始
１０：３５ DVDが入れられない。久々なので入れ方を忘れる。
何とか入れ終わる。
１－２から開始
何か椅子が傾いてる。。。昨日の地震の影響？気になる！が進める。
ページ＞ページが固定ページに変わっている。
固定ページ＞固定ページ一覧に変更ね。
１０：５１ 早速記事を書くらしいが、CD-ROMからインポート可能。
ここでインポートにBloggerの文字が。。Bloggerの内容はWordPressにインポート可能？
インポートツールのインストール？
とりあえず今すぐインストール
５秒で完了
１０：５５ サイドバーのプラグインに「１」がついてる。プラグイン増えた？
１１：００ １－４
themeは、テーマって読むんだ？
ドメイン名/public_html/wp-content/themesにアップロード
FFFTPでsampleフォルダアップロード
属性は７５５で問題なし。
サンプルが匿名作になってる・・・
CSSでAuthorをかえないとダメそう
１１：１５ ２－１
１１：２５ ２－２
bloginfo(); タグテンプレートの（）の中身は省略できない。
１１：３４ ２－３
<meta>
<title>
<link rel>
の順を意識
１１：４５「 ３ブログ名のデザインを指定する。」
<div id="header">でphpを編集しないとだめじゃん。記載が抜けてる。
２－３まで終了
11：50～ 休憩
それにしても７章までか？先が長い。
１７：００ 再開
２－４から
while文
ループ
ポスト（記事）ごとのURL＝パーマリンク
the_permalink();
グループ化は、おおよそ３つに分ける
記事
記事群（コンテンツ）
全体（ヘッダー、コンテンツ）
１７：２３ 休憩 P57まで終了
１８：４１ 再開
ブラウザの標準サイズ1em=16px
Webページの標準横幅800px
margin: auto 中央に配置
１９：００
２－６
marginの値 ３つの場合は上、左右、下 一瞬ど忘れ
１９：２６
２－７
１９：２７ 休憩
休憩中考えたこと
今度実況中継をやるときはチャットルームにしよう。
チャットルームでも開設したいね。
チャットとなるとperlで組む必要があるのかな？
さすがにそれは面倒。レンタルしよう。
２０：００ 再開
画像のalt属性は必ず値を入れる。SEO的にも重要だね。
２０：２５ ２－８ P80
古い記事へのリンクは左矢印で記載。知らなかった。そんな常識があったのね。
２０：５０ ２－８ P89まで終了 休憩
２２：１０ 再開
コメントの仕方がいつもこんがらがる（HTMLとCSS）
HTMLは＜を使用するから<!-- -->のように < を使用する方。
CSSは＜を使用しないから/* */
overflow: hidden; → すべてのブラウザで同じような見え方。はみ出た部分は見えない。
２２：４５
２－９ P93まで終了
続きは明日以降かな。
【12月9日】
９：３０ 再開 ２－１０から
new_post_link();じゃなくてnext_post_link();
画面表示がおかしいと思った。
「だけ」に出力
<?php if(is_single()): ?><?php endif; ?>
９：５０
３－１ 画像レイアウト
サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)→WordPressの設定に合わせたサイズに設定
メディアは今のところ画像しか設定できない（投稿画面）。
サイドバーのメディアで追加できるのかな？
投稿で入力エリアを広げられる。
display: block; 余白の指定を機能させる
１０：１８ ３－２
１０：５０ ４－１ 休憩
１１：３０ 再開
SEO的には先にコンテンツを記述したほうが良い。サイドバーは後。
functions.phpをアップロード
属性を６４４から７５５へ変更
FFFTPの結果を見るとchmodコマンド使ってるね。XサーバーはUNIX系のOSだね。
１１：５０ ４－３ P154 開始
１６：００ ４－３ 再開
リストマーク削除
list-style-type: none
CSS セレクタ プロパティ 値
text-decoration: none;
→よく出てくる。そんなに「リンクに下線」は邪魔なのか？
１６：５５ ４－４
<?php wp_title(); ?>は凄い！タイトルと同時にカテゴリーページもタイトルに出力してくれる。
P163で本日終了 １７：０５
２０：０７ 諦めきれず再開
font-size:0.875em
emを抜かしただけでp#pagetitleのセレクタがまったく反映されない。
CSSはひとつの抜けがあるとそのセレクタは全滅みたい。
せめてフォントサイズ以外は反映されると思ってた。
本に記載ミスP165 （誤）青色#2b76cc→（正）青色#0c8bcd まあ、どっちも青だから変わらないけど。
HTTP500 内部サーバーエラー発生。
原因
（誤）<?php if(is_category(): ?> → （正）<?php if(is_category()): ?>
P169のorの内容は重要
２０：４０ ４－５
２１：２５ ４－６
HTMLで先にクラスやIDを指定（マークアップ）してからCSSのその該当クラス作る。
先に構造を決めてからそれをデザインするイメージ
display: none;にてh2タグの効果を消す。
ミス
（誤）.widget_calender h2→（正）.widget_calendar h2
またミス！ミス多すぎ！！
（誤）#wp_calendar→（正）#wp-calendar
text-decoration: none;なし
今度は「リンクに下線」入りか？
カレンダーには必要なのね。
テーブルも分割して構成
thead
tfoot
tbody
２１：５２ ４－７
RSSフィードへのリンク追加
<link rel="alternate" type="application/rss+xml" title="RSS フィード" href="<?php bloginfo('rss2_url'); ?>" />
↑ブラウザでフィードを自動検出
Feed Icons(http://feedicons.com/)でフィードアイコンゲット
vertical-align: middle;で画像を中央に。
RSSには複数バージョンがある。以前から気になっていたことだからこの際に調べよう。
<?php bloginfo('template_url'); ?>→テーマのURLを指定
２２：１８ ５－１
コメントとトラックバックの設置と設定
comments.php（パーツテンプレート）をサーバーへアップロード
マークアップ→デザインの順を意識
<?php comment_form(); ?>
コメントの投稿フォームを出力する
<?php comments_template(); ?>
comments.phpを読み込む
２２：４６ ５－３
デザインのパターンは全部一緒。
まずパーツ（コメントなど）を取り付けたらHTMLソースを確認して、
構造を確認。
※構造 パーツの詳細
例：タイトルのコメントをどうぞは<h3>
コメント欄は<textarea>など。
これが分かったら、CSSでにてdiv#comment h3{}などでデザイニングしていく。
display: blockは改行
P206
<code>タグ・・・初めて知った。こんなのあったんだ？
ミス。クラスじゃないのにドットをつけてしまった。
（誤）#comments .code→ （正）#comments code
２３：１４ ５－３が終了。休憩
２３：４５ ５－４ 受信したコメントを表示
２４：００ ５－５
ココの内容は.phpの連携出てきて難しい。復習が必要だな。
２４：２６ ５－６
comments.phpはindex.phpの一部分のイメージ。Javaとかのオブジェクト指向を思い出すなぁ。
２６：００ ５－７ 再開
２６：５０ ５－８終了 P238
【12月10日】
２１：３０ ６－１から再開
今回は固定ページ作成
WordPressでは記事をpost固定ページをpageと呼ぶ。
早速、サンプルのページをインポート！
contentsフォルダの中のpage.xmlを読み込む。
ツール→WordPress→ファイルをアップロードしてインポート
２１：３１ インポート終了。きちんとページが増えていた。
２１：３３ ６－２
固定ページは2段組じゃなくて1段組で作成
ヘッダーとフッターを個別のphpで作成。
固定ページ、記事両方の共通パーツになる。
パーツテンプレートの読み込みは重要そう。
P249は後でまとめよう。
２１：４３ ６－３
あっ。次回の実況またやりますよ。
今度はTwitterかチャットルームでやります。
固定ページ専用page.php作成
固定ページは記事とは違い紹介のためのページ。
コメントパーツなどを外す。
６－４ ２２：０５ ナビバー作成
display: inline;でナビを横並びに。
６－５ ２２：３３
P277 page.phpはWordPressが標準でサポートしているテンプレート
カスタムテンプレートは特定の固定ページを生成に利用できるテンプレート
２３：４７ P279で足止め
business.phpのソースはpage.phpと同じに作ったのに、business.phpで呼び出したページは何故か全体（コンテナ）が左によってしまう（IE8)。FirefoxやGoogleChromeだときちんと中央に寄る。
何故だろう？原因不明・・・
今日はここまで。
どうやらIEのバグらしい。margin: auto;が上手く機能しないらしい。
IEはこれでお別れかな？（笑）GoogleChromeかFirefoxでいくしかないかな？
とはいってもIEを使用している人が多いからその人たちのためにも対策を立てないと・・・
【12月11日】
４：３７
margin: auto;の件、上手く行きました。
【変更前】
/* コンテナ */
div#container {width: 760px;
margin: auto}
【変更後】
body {
text-align: center;
}
div#container {
width: 760px;
margin: 0 auto;
text-align: left}
昔からIE対策のためのテクニックであったそうです。
５：４５ ７－１
７－２
<?php wp_head(); ?>
が吐いているソース
body.custom-background
※本来なら「custom-background」部分は出力されないらしい。
仕方ないのでheader.phpのbody部分を下記に変更。
<body class="custom-background">
６：３０ 終了
評判通り分かりやすくて理解もしやすかった。この手の本は大抵挫折するんですがこの本はステップバイステップでレベルをあげられるので続いたのかもしれない。
あと実況中継をやるとなると、否応無くやらないといけないのでやり遂げられたのかも知れません。
スポンサードリンク
0 件のコメント:
コメントを投稿