The post 【HTMLとCSS】プラグインが使えない時に目次を作る方法 first appeared on ランクエストマニュアル.
]]>基本的にランクエストのコラム内では、【Table of Contents +】という
プラグインを使用し、コラムに目次を設置しています。
手打ちで目次を作成する場合
ただ、クライアントの状況によって、
CMSの都合や、Verの都合により、
プラグインを入れられないケースは出てくると思います。
その場合は、手打ちで入力せざるを得ません。
やり方
回りくどく話しましたがやり方をご紹介しましょう。
(言ってしまえば、これをコピペすれば完成しますが、
サイトによっては余計なCSSがかかってしまう、デザイン的に合わないので、
変更したら何が変わるかも合わせて記載しておきます。)
目次を作成したい場所に下記コードをコピペしてみましょう。
<div id=”Column_tableContentBox” style=”width: 30%;”>
<p style=”text-align: center;”>目次</p>
<ul id=”column_tableContent” style=”list-style-type: none;”>
<li class=”TableContent” style=”padding: 5px”><a href=”#見出しのID”>テキスト</a></li>
<li class=”TableContent” style=”padding: 5px”><a href=”#見出しのID”>テキスト</a></li>
<li class=”TableContent” style=”padding: 5px”><a href=”#見出しのID”>テキスト</a></li>
<li class=”TableContent” style=”padding: 5px”><a href=”#見出しのID”>テキスト</a></li>
<li class=”TableContent” style=”padding: 5px”><a href=”#見出しのID”>テキスト</a></li>
</ul>
</div>
上記をコピペすると基本的な目次が表示されます。
ここからサイトにあったデザイン(文字色とか背景色)を追加していきましょう。
変えたい部分のstyle=” ここ ”にcssを追加するとデザインが変わります。
例えば、
目次の色を赤に設定し、文字サイズを32pxに設定したい場合…
「<p style=”text-align: center;”>目次</p>」
を
「<p style=”text-align: center; color: #ff0004; background-color: #0000ff; font-size: 32px; background-color: #0000ff;”>目次</p>」
に変更したら、文字色は赤、背景色は青、文字サイズは32pxになります。
※文字色のcss color: #●●●;
※背景色のcss background-color: #●●●;
※文字サイズのcss font-size: ●●px;
(色に関しては「HTML カラーコード」で検索すると見つかります！)
これ以外に枠線などを付けたい！みたいな時は…
「html border」で検索すると見つかります！
また、
「<li class=”TableContent” style=”padding: 5px”><a href=”#見出しのID”>テキスト</a></li>」
ここの部分でいつもと違うaタグの使い方(外部リンクを指定していない)をしていると思うのですが、
これは飛びたい場所へのリンクを付けていることになります。
例）<li class=”TableContent” style=”padding: 5px”><a href=”#seo1″>テキスト</a></li>
と設定した場合、下記記事の背景色水色の部分に飛びます。(idでseo1と名前を付けているから)
<p id=”seo1″>SEOの基本</p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
<p id=”seo2″>SEOの基本２</p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
<p id=”seo3″>SEOの基本３</p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
※idとclassは簡単に言うと名前を付けています。
違いはidはそのサイト内で１回だけ使うものclassはサイト内で何回も使えるもの
目次でいう<ul>は一回しか使わないのでidで指定<li>は何回も使っているのでclassで指定してあります。
まとめ
細かいcssなどに関しては、記事投稿個所で設定するのは難しいですが、
最低限で出来る事は多いので是非いい目次を作ってみてください！！
The post 【HTMLとCSS】プラグインが使えない時に目次を作る方法 first appeared on ランクエストマニュアル.
]]>The post 今まで見てもわからなかったphpのif文は、中身は理解すれば、実はとても簡単だった first appeared on ランクエストマニュアル.
]]>普段見ているphpファイルの中身に下記のような文字列があることは多いです。
僕も良く見ていましたが、
if文を使っているから、
何らかの条件で何かをしているんだろう・・・程度の知識しかなく、
難しく考えていました・・・。
ただ！実は調べてみると、土台の知識としてはとても簡単でした！
意味の見かた
見かたはとってもシンプルで・・・
上記画像のまんまでした！
記述の仕方が違うだけで、意味合いはやっぱりJSと同じでした…
ちなみに僕の前提知識としては、
JSのときのif文は使う事が可能程度です。
ですので、if文がどういう役割をしているのかはなんとなくでわかっていました。
ただ、JSとの記述の仕方が全く違うので、よくわからなかった！といった状況でした。
記述の仕方
<?php if ( ) : ?>
<?php else: ?>
<?php endif; ?>
この３個においては決まり文句として覚えてしまいました。
<?php endif; ?>以外はは:で閉めていることに注意が必要かなと思いました。
正直難しそうな記述の仕方ですが、
コピペでいいのかなと思いました。
他のプログラミングでも言えますが、使い方さえわかれば、
コピペしたものを少し文字列変えればうまくいくので、
意味合いだけ理解したら使えると思います！
上記のような使い方で、もっと中身を濃くしたものが実際のサイトでは使われていると思います！
<!– –>の中で書かれているものが実行したときにどんな意味合いがあるのかを記載しています。
<?php if ( ここ ) : ?>
ここの部分に入る文言として・・・
is_home() トップページ
is_front_page() トップページ
is_single() 記事ページ
is_page() 固定ページ
is_○○(‘投稿ID’) 〇〇の部分に記事ページなどを指定、IDを指定すると特定のページのみに適用される
is_○○( array(‘投稿ID’,’投稿ID’,’投稿ID’) 〇〇の部分に記事ページなどを指定、IDを指定すると特定のページのみ（複数）に適用される
また、ifの()内では、&&（ANDの意味）と||（ORの意味）を使って、
2つ以上の条件を組み合わせることができます。
!で○○じゃない時という指定をできる
まとめ
実際にはこの記事に書いてあることの他にももっと指定できることはたくさんあります。
ですが前提知識を覚えておくと、
is_xxxってなんだ？ってなったときに調べて理解できるので、
今までよりも、中身をのぞいて何をしているのかの理解をするのが早くなると思います。
The post 今まで見てもわからなかったphpのif文は、中身は理解すれば、実はとても簡単だった first appeared on ランクエストマニュアル.
]]>