system」でカラム数の変更や@grid-gutter-widthを変更すれば記述する事はありません。24カラムだけ憶えておけばVersionUpしても載せかえが簡単かなと思っただけです。今回は何をしましょうかw。そうそう、アーカイブやサイドバーの一覧表示の処理を紹介致しましょう。当サイトは一覧表示の枠内は全ての場所でクリックが出来る様に処理しました。端から端までどの部分でもですHTML5時代のタグのくくり方はHTML4時代とはかなり変わってきているこの処理の仕方ですが、ただaタグで全部をくくるだけでは何か腑に落ちないかなと・・・。SEO的には多分何ら問題無いとも思われます。実際、某上野の有名Web会社のサイトのMainContentsはdivをaタグでくくっていました。articleの中なのでそれ自体は問題無いかなとも思いましたので当サイトでも同じ様な記述にしています。HTML5からHTML4時代の約束事がかなり減っています。私もそこまで勉強出来ていないのですがブロック要素とインライン要素の兼ね合いがかなり自由になっています。いって完璧なCodeを組んだとしてもSEOで上位に行くとは限りませんし、速度が速くなるとも言えません。出来れば完璧なCodeを目指したいですね。SideBarのくくりは「ul-li-span」が良いのかも!SideBarにはMenuだとか過去の記事紹介とかバナーなど様々は要素が絡んできます。その場合何でくくればいいの?ってのが疑問になってきますが、やはりリストでくくる方が理にかなっているかなと・・・。そこで色々と探した結果こういう形になりました。こちらのCodeはphpからhtmlに変換された形です。次にphpだとこうなります。サイズ等は弄っていますが基本Stinger5のCodeです。長い間Stingerを使ってきたので本当に勉強になりました!素晴らしいCodeです!「ul-li-span」化するために少々弄らせて頂いております。ここまでは新着記事の表示なので標準のショートコードだけで問題ありません。ALL(全期間人気記事)が表示されています。POST」は先程のコードで良いのですが、人気記事はplug-inを使用してカウントしています。Posts」を使用しています。当サイトはOpen当初からこのplug-inでカウントしていました。その資産を使わない手はありませんね!使わないにしても入れておくだけでカウントしてくれているので先々でBlogを成長させるアイデアにもなりますのでオススメします。ここで注目なのがaタグの部分です。「li」タグに次いで「a」をそのままくくり、「span」を記述しました。これだとくくってないじゃん!!と言われそうですが後述するCSSで解決するのでお待ち下さい。「span」は「float:left」で横並びにし、今回は崩れが無いので「ul」の後で「clearfix」を投入しました。「:after」で「clearfix」すれば良いのですが、視覚化するためにもこの様な簡単な処理にしています。期間の変更は「range」の指定記述を「daily」「weekly」「monthly」と変更すれば良いです。全期間の指定は「all」にすれば今までの集計を表示してくれます。次に「li」領域を全部クリック出来る様にしよう!CSSだけで出来る全領域クリック!次にこのaタグを次のcssで指定すれば「li」タグ領域全体がクリック出来る様になります。この記述例はこちらから引用させて頂きました。・・・・と、記録していたのですがどこに行ったのかw。次回までに探しておきます。ググってもなかなか出なかった・・・。1;}こちらの記述から「li」タグにpostion:relativeをかけ、「a」タグでabsoluteと縦横を100%・z-indexで追い打ちであります。これだけでいけたはずです。ダメだったら突っ込んで下さい。調べ直しますw「li」には「:hover」することで色が変化するようにしています。0.4s;}ここで気をつけなければいけないのは「transition」です。「:hover」だけに指定するとhoverしたときにだけ変化します。マウスを領域外に持っていくと瞬間的に色が戻ると言う事です。0.4s;」と変化させたcssを記述しておくことです。戻る」で指定したCSSが行ったり来たりする訳です。これは今後ギミックを重要視するのであれば必須の処理です。Proを使うとPhotoshopでGIF変換したものより1/4に容量を抑えてくれました。シネマグラフを作成するためのソフトですが、かなり綺麗な状態で容量を抑えてくれます。こちらのアプリ紹介は別の講釈で・・・。後書き如何でしたでしょうか?色々と順番に説明していきたいのですが、なかなかどうして、難しいモノです。おで必要かなと思える部分と思い出した順番に紹介していきたいと思っています。BootStrapの説明が少々少ないかなと思っているので次回はPC表示とスマホ表示の場合のBootStrapの記述例を紹介したいと思います。お後が宜しいようで・・・。こんな画像も簡単にできます。SublimeText3はコーダー必須のテキストエディタ!しかし落とし穴もあったようだ・・・。謹賀新年明けましておめでとうございます。レビューサイトリニューアルで気が付いた解像度問題。Reservedメニューはこちらメニューはこちら。