記事一覧

2017/08/03
N カテゴリ複数
：プログラミング, 未分類
2017/08/03
N スタイルシートリファレンス > counter-increment
：未分類
2017/08/03
N プログラミングとは
：プログラミング
2017/08/02
N 固定ページで投稿の一覧表示の実装【初心者のためのWORDPRESS -07-】
：未分類
2017/08/02
N Hello world! Updated!
：未分類

カテゴリ複数2017/08/03 13:31

カテゴリ複数

カテゴリ複数

カテゴリ複数

カテゴリ複数

カテゴリ複数

カテゴリ複数

カテゴリ複数

カテゴリ複数

スタイルシートリファレンス > counter-increment2017/08/03 13:31

counter-increment …… 要素の連番（カウンタ）の値を進める

counter-incrementプロパティは、要素の連番（カウンタ）の値を進める際に使用します。

counter-incrementプロパティを要素に適用してカウンタ名を定義すると、ウェブページ内にその要素が現われるたびに、定義したカウンタの値が進められます。負の値を指定してカウンタを戻すことも可能です。

counter-incrementプロパティを適用する要素に:before擬似要素、:after擬似要素を付けて、contentプロパティでカウンタ名を指定してやることで、要素の直前または直後にカウンタの値を挿入することができます。

尚、Internet Explorer7以下は、counter-incrementプロパティ、counter-resetプロパティ、contentプロパティ、:before擬似要素、:after擬似要素に対応していません 。

■値

none
カウンタの値を進めない（初期値）
カウンタ名
指定した名前のカウンタの値を1つ進める
カウンタ名 整数値
半角スペースで区切って整数値を指定すると、カウンタの値がその数だけ前後する

■使用例

スタイルシート部分は外部ファイル（sample.css）に記述。

dt.sample1:before {
counter-increment:sample;
content:counter(sample) "位　";
}
h3 {counter-reset:sample;}

■HTMLソース

<html>
<head>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<h3>北海道で見たいものランキング</h3>
<dl>
<dt class=”sample1″>タンチョウ</dt><dd>見たこと無いから。</dd>
<dt class=”sample1″>マリモ</dt><dd>話のタネに。</dd>
<dt class=”sample1″>キタキツネ</dt><dd>かわいいから。</dd>
</dl>
<h3>北海道で食べたいものランキング</h3>
<dl>
<dt class=”sample1″>ウニ</dt><dd>ご飯に乗せて。</dd>
<dt class=”sample1″>カニ</dt><dd>まるごとボイルで。</dd>
<dt class=”sample1″>ソフトクリーム</dt><dd>夏に行くなら。</dd>
</dl>
</body>
</html>
↓↓↓

ブラウザ上の表示

北海道で見たいものランキング

タンチョウ
見たこと無いから。
マリモ
話のタネに。
キタキツネ
かわいいから。

北海道で食べたいものランキング

ウニ
ご飯に乗せて。
カニ
まるごとボイルで。
ソフトクリーム
夏に行くなら。

■関連項目

content …… 内容（コンテンツ）を挿入する
quotes …… 引用符を設定する
counter-increment …… 要素の連番（カウンタ）の値を進める
counter-reset …… 要素の連番（カウンタ）の値をリセットする

プログラミングとは2017/08/03 13:00

プログラミングとプログラム

では、具体的にプログラミングとは一体何なのでしょうか。

コンピュータのプログラミング（英: programming）とは、コンピュータプログラムを作成することにより、人間の意図した処理を行うようにコンピュータに指示を与える行為である。（コンピュータ以外にも「プログラミング」という語は使われるが、それらについてはこの記事では扱わない）

引用元:wikipedia

少し難しいので、もっと噛み砕いてご説明します。

「プログラミング」ではなく「プログラム」という言葉なら、イメージできる方も多いのではないでしょうか？

プログラムとは、和訳すると「番組表」「計画」「予定」という意味になります。実は意識していないだけで普通に使っている言葉です。

つまり、プログラミングとは、なにか行われること（結婚式のイベントや、運動会の種目）を順番に書き出す作業を指します。

もう少しプログラミングっぽく説明してみると、コンピューターにさせたい仕事を順番に書いていくことで、コンピューターのTODOリストのようなものです。

しかし、コンピューターは人間の言葉をそのままでは理解できません。そこで、コンピューターが理解できる言葉＝プログラミング言語で指示する必要があります。

今後、世界の共通言語とされる英語と同じような役目を果たすようになるのが、プログラミング言語です。

プログラミングの役割について

普段何気なく使用している機器の全てに組み込まれているプログラミングですが、必要性やランキング等参考になる記事を紹介します。ご参照ください。

【プログラミング入門】起業志望大学生必見 ゼロから学びたいあなたへ

【プログラミング義務教育化】政府の思惑と海外事情を徹底紹介

【2020年までに知っておくべき】プログラミング思考・考え方とは

プログラミングに頭の良し悪しは関係ない

プログラミング とは出典：ぱくたそ

あなたは黒い画面に何やらよく分からない記号でプログラミングは凄く難しそう、理系の人がやるもの、頭の良い人しか分からないものと思っていませんか？

プログラミングに頭の良し悪しは関係ありません。

英語や数学と同じでしっかり勉強すれば、身につけることができるものなのです。

本を読むだけではなく、手を動かすことも重要です。
まずはプログラムをひたすら書いてみる、分からなかったらすぐ人に聞く。

プログラミングは誰だって勉強できるのです。

詳しくプログラミングの勉強方法について知りたい方は、こちらの記事もぜひご参照ください。

【初心者必見！】プログラミング学習にオススメのサービス5選

初心者に捧ぐ！プログラミングを独学で勉強する最強入門バイブル

固定ページで投稿の一覧表示の実装【初心者のためのWORDPRESS -07-】2017/08/02 23:24

デザイナーのワードプレス実装ログ

デザイナーの野田沢です。

今回は固定ページでの投稿一覧を作成してみようと思います。

投稿の一覧のページはブログ専用サイトではなく企業サイトの新着情報などでWPを使用する場合には多く活用されると思います。

 

今回ご紹介する方法は固定ページでの表示なので、ある程度の一覧情報ならテンプレート化して使っていけると思います。

h1111111111

h33333333333

h44444444

h5555555
h666666666

 

aタグ

 

 

  1. list_1
  2. 1
  3. 2
  4. 3
  5. 4

 

Ī

<?php $paged = (int) get_query_var(‘paged’); $args = array(     ‘posts_per_page’ => 4,<br ?-->     ‘paged’ => $paged,
‘orderby’ => ‘post_date’,
‘order’ => ‘DESC’,
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
get_template_part( ‘bloglist’, get_post_format() );
endwhile;
endif;
wp_reset_postdata();
?>

dddddd

aaaaa

dddddd

aaaax2

bbbx2

dddd

v

aaa

 

 

  1. 111
  2. 222
  3. 333
  4. 44
  5. 111

 

  1. aaa
  2. 333
  3. 444
  4. 111

 

 

固定ページ用一覧表示PHP

    まずは下記のコードを確認してください。このPHPが固定ページで一覧を表示するためのコードです。

 

簡単にコードの説明をすると4行目のposts_per_pageは表示する記事の件数です。

私は4件と設定してありますが、5件目以上の記事はページングを設定してページ送りにて表示させる予定です。ページングについては次回の記事で詳しくご紹介したいと思います。
基本的にはコピペで実装できますが、1つ注意点があります。それは14行目にあるget_template_partと言う関数です。
上記の私の場合はbloglistという引き数がそれにあたります。
このbloglistでリピートさせる記事の中身を呼び出しています。
お察しの通り、このリピートさせる中身を作成していないと、上記のPHPコードを入れても何も表示されません。
bloglistと言う名前は任意で変更してください。

 

記事を表示させる一覧ページ用のテンプレート作成

では上記で説明したbloglistの中身を作成します。
私は上記PHPコードを ul タグで括り、中のリストをリピートさせて記事一覧を制作しました。
まずはget_template_partで呼び出している同じ名前のPHPファイルを新しく作成しましょう。今回はbloglist.phpとなります。
このPHPファイルの中身は至ってシンプルでリピートさせたいリストの中身をhtmlコードで記述するだけです。 PHPコードは一切必要ありません。
固定ページと同じディレクトリにbloglist.phpを保存すれば完成です。

Hello world! Updated!2017/08/02 16:32

Welcome to WordPress. This is your first post. Updated by RS CSV Importer!

会社概要

見出し GoogleMapで地図を貼り付けたい人は解説がありますのでご覧下さい。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。

会社概要（※角丸ボックスを使わない場合のサンプル）

見出し GoogleMapで地図を貼り付けたい人は解説がありますのでご覧下さい。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。
見出し ここに説明など入れて下さい。サンプルテキスト。

当テンプレートについて

当テンプレートはhtml5+CSS3(レスポンシブWEBデザイン)です

当テンプレートは、パソコン、スマホ、タブレットでhtml共通のレスポンシブWEBデザインになっております。
古いブラウザ（※特にIE8以下）で閲覧した場合にCSSの一部が適用されない（各を丸くする加工やグラデーションなどの加工等）のでご注意下さい。

各デバイスごとのレイアウトチェックは

最終的なチェックは実際のタブレットやスマホで行うのがおすすめですが、臨時チェックは最新のブラウザ(IEならIE10以降)で行う事もできます。ブラウザの幅を狭くしていくと、各端末サイズに合わせたレイアウトになります。

注意：cssはリアルタイムで反映されますが、javascript(js)は ブラウザを再読み込みさせないと反映されないので、レイアウトが切り替わったらブラウザを再読み込みさせる事をおすすめします。javascriptは小さい端末用の開閉ブロックなどに使われています。

各デバイス用のスタイル変更は

cssフォルダのstyle.cssファイルで行って下さい。詳しい説明も入っています。

cssフォルダのstyle.cssファイルで行って下さい。詳しい説明も入っています。
前半はパソコン環境を含めた全端末の共通設定になります。中盤以降、各端末向けのスタイルが追加設定されています。
media=" (～)"の「～」部分でcssを切り替えるディスプレイのサイズを設定しています。ここは必要に応じて変更も可能ですが、変更した場合、htmlの下部のjavascriptのウィンドウサイズの条件指定も合わせて変更しなくてはならないものもあります。

スマホ環境（※幅480以下の環境）でのみ

メインメニューが折りたたみ式（３本バーアイコン化）になります。バーのスタイル設定もstyle.cssで行う事ができます。

画像ベースは

「base」フォルダに入っています。
写真の元素材を当社運営の PHOTO-CHIPSや DECORUTOで配布している場合もございます。

角丸のボックスは使わない事もできます。

class="box"の指定がなければこのブロックのように背景に直接テキストがのります。

当テンプレートの使い方

注意：当テンプレートにはメニューが「２箇所」入っています

パソコンなどの大きな端末「menubar（幅481px以上）」向けと、スマホなどの小さな端末「menubar-s（幅480px以下）」向けがそれぞれ入っています。大きな端末向けは編集ソフトで見れると思いますが、小さな端末向けは見えないと思いますのでhtml側で編集して下さい。小さな端末向けパーツはhtmlの上の方にあります。

注意：当テンプレートにはロゴ画像が２つ入っています

上のメニュー同様、ロゴ画像も２種類あります。大きな端末向けはlogo.pngで小さい端末向けはlogo_s.pngです。両方準備して下さい。

titleタグ、copyright、metaタグ、他の設定

■titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>個人サイト向け 無料ホームページテンプレート tp_simple11</title>
を編集しましょう。
あなたのホームページ名が「Sample Site」だとすれば、
<title>Sample Site</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

■copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© Sample Site All Rights Reserved.
の「Sample Site」部分もあなたのサイト名に変更します。

■metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。

ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。

続いて、その下の行の
content="キーワード１,キーワード２,～～～"
も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。10個前後ぐらいあれば充分です。キーワード間はカンマ「,」で区切ります。

■h1ロゴのaltタグも変更しましょう。
html側に
alt="SAMPLE LOGO"
となっている箇所があるので、この「SAMPLE LOGO」もあなたのサイト名に変更しましょう。

トップページのスライドショーについて

css3を使ったスライドショーになっています。古いブラウザ（主にIE8以下）だと最後の１枚だけが固定表示されるので考慮して準備して下さい。
設定は全てcssフォルダのslide.cssで行っています。説明もありますので変更したい人は調整してみて下さい。
css3スライドショーについての詳しい解説はこちら。

プレビューでチェックすると警告メッセージが出る場合(一部ブラウザ対象)

主にjavascript（jsファイル）ファイルによって出る警告ですが、WEB上では出ません。また、この警告が出ている間は効果を見る事ができないので、警告メッセージ内でクリックして解除してあげて下さい。これにより効果がちゃんと見れるようになります。

2017年8月
月 火 水 木 金 土 日
     
 123456
78910111213
14151617181920
21222324252627
28293031