24(2)

童貞なので子供の作り方は知りません。よろしくどうぞ









<バナー>

やらないと知らないは別次元







まず初めに言っておきます。




21(2)

スマホで上手くできませんでした(てへぺろ)


livedoorblogはその辺やる気がないらしく、ケータイだと一工夫しないと上手く見れないみたいです。


http://akapeso.info/archives/20160518/1057509790.html

上記のサイトによると、livedoorblogでは記事本文にCSSを打ち込まないとスマホ表示では見出しが使えない模様。

(本文に打ち込むべきHTML)

<style type="text/css">
<!--

CSSの部分
-->
</style>




これで万事オーケーです。コピペするだけなので手間はほぼゼロですね!
------------------------------------------------------------




56(2)

結果出来なかったわバカ!!!!!


もぉぉぉぉぉ、記事自体は1時に書き終わってたんですけど、いざ投稿したらPCでしか見れないという悲しみですよ~。多分、livedoorblogでなければ出来ていた...はず(普通、スマホ用のCSSあるよね、ないの?)。PCビュー出来ない人はこれ以降、何書いてあるか分からないので、ブラウザバックしてドウゾ。はぁ、難しい。


とりあえず、供養ということで一応投稿しときます。適当に読み捨てておくれ。




☆追記☆

一応できました!!本当はFTPというやつを使った方が、GOOGLEさんの評価が高いんですけど、ウイルスが入りやすいってのと、私がMAC上のWINDOWsで書いているので、いまいちサーバーの取得の仕方が分かりませんでしたw

でも私はごり押しが好きなので、ちょっとごり押しのやり方を追記します。

記事内にCSSを入力するというのは同じなのですが、今回使ったのはこれ。

<style>
<!--

@media only screen and (max-width:768){
h1 {好きな設定}
}
@media only screen and (max-width:768){
h2 {好きな設定}
}
繰り返し
-->
</style>


をぶち込んであげると、見出し程度なら上手くいきます!このmax-widthというのはウインドウズサイズが768px以下にするということで、スマホのサイズに対応しています(なので、ガラケーだと見えないかもしれません)。ちなみにh11でのお遊び「次回予告」は文字がでかすぎるので、死んだままですww
ただ、タイトルも初期設定ではh1見出し状態になっているので、h1はあまり変更しないか、h100とか一生使わないようなものに設定するとよさげです~(実際死ぬほど崩れましたw)。

追記終わり






SEOというものがありまして、簡単に言うとGOOGLEさんの採点基準。アクセス稼ぎたい人はこの辺を意識する必要があるそうです。うちみたいなお遊びブログ(みんなでワイワイ系)は関係ないですけど。





参考
http://tanaka-desu.com/livedoor-blog-customize-01/

中段チェリー
上のような見出しのカラクリ

ブログ設定画面のPC→デザイン設定→カスタマイズ

54

※フォントのスペル間違えてますw場所は「Ctrl+F」で「h2」とかで検索すれば一発で分かります。

これはCSSと呼ばれる、「ウェブページのスタイルを指定するための言語」だそうで。簡単な言葉でいうと、「初期設定が羅列されている場所」だと思います(知りませんけど)。ここであらかじめ設定しておくことで、簡単にスタイルを呼び出すことができます。

ここで表示してあるのは、見出しの設定。うちのブログはh4まではすでに使用されている(レイアウトなどで)ため、大見出しがh6、中見出しがh7.....となっており、基本的にはh6→h7→・・・の順で文字の大きさを小さくしていくのが普通ですね!

見出しの作り方は、

<h5>中段チェリー</h5>

と入力するだけ。

このとき注意しなくてはいけないのは、HTMLタグ編集をONにしておくこと!(他のところはOFFで作業して、最後にまとめてONにして遊ぶのが普通です)


28


これがオフだとHTML(CSSを引っ張り出すマン)が頑張らないため、やる気スイッチをオンにしてやりましょう。


ここでちょっと、h6,h7で遊んでみます。

<h6>本文</h6>
角から昇格する瞬間が


22
※フォントのスペル間違えてます
※図はh2で書いてます(死んだ)


参考

飛んだ先を見れば分かりますが、デザインが折れ曲がっているところは全然理解できずw beforeとafterのとこ何言ってるのw基礎知識無しでこれはよくわからんな。



<h7>本文</h7>

たまらねぇんだ!!

参考

27
※h3→h7
41


参考というよりまるパクリですけどねw


<h8>溜まるわ!!!!!</h8>
<h9>溜まるわ!!!!!</h9>
<h10>溜まるわ!!!!!</h10>


53
※フォントのスペル間違えてますw
※h4,5,6→h8,9,10


溜まるわ!!!!!

溜まるわ!!!!!

溜まるわ!!!!!

はい、きんちゃさんのパクリ。border-rightが実線(solid)、border-bottomが二重線(double)の合わせですね!これが一番使い勝手がよさそう。パクります←


さらに、今度は見出しのみではなく、ちょっとしたお遊び。



52

<h11>次回予告</h11>






次回予告













お次はこれ~。


コピペ元

枠内の記事本文


<div style="background:#f9f9f9;padding:15px;border:3px dotted #999999;border-radius:10px;">枠内の記事本文</div>

という感じ。dottedが点線、border-radiusが枠って意味ですね。この枠内の記事本文というところに<h6></h6>とかをちょっとぶち込んでみます。






中段チェリーは

角チェリーから
・昇格するのが
・たまらねぇんだ!

そのまま中段に止まるのが
・たまらねぇんだ!!
・だ!!!


色のセンスww

<div  style="background:#5af626;padding:15px;border:6px double #fa95ed;border-radius:10px;"><h10>中段チェリーは</h10><h9>
角チェリーから</h9>・昇格するのが<br />・たまらねぇんだ!<br /><h9>そのまま中段に止まるのが</h9>・たまらねぇんだ!!<br />・だ!!!</div>


ぶち込んだのは上のhtml。<h10></h10>と<h9></h9>を合わせた形ですね。これだけ適当にやっても上手いこと行くもんですねw



で、ここまではどうでも良くて(勉強に30分かかったけどw)、普段からちょっとやりたいなぁと思っていたのが、ページ内リンク。

参考はこちら。

http://bamka.info/2959/


調べてみると、意外と簡単でテキスト同士を紐づけするだけでいいらしい。



<a href="#アンカー名">本文</a>

<h6 id="アンカー名">本文</h6>

※アンカー名さえ統一していれば、割と適当。h6でもh7でもって感じ。


ということで、「こっち」から「あっち」へ飛ぶやつを作ってみますね。

htmlは

<a href="#テスト">こっち</a>

<h12 id="テスト">あっち</h12>




こっち











あっち



うん、作って分かりました。たぶん?h6とか被っていると無理っぽいかな。ページ上に目的地が一個しかない状態にしないとだめっぽい。実際、この「あっち」の方をh6にすると飛びませんでした。


ということで、h6タグの方へ飛ぶものを作って見ましょう。



<a href="#テスト2">h6の説明へ</a>

h6の説明へ




上手いことすっ飛びましたねw h6を使った見出しにアンカーをくっつけただけです。なるほどこうやるのね。



SEO対策として、livedoorでいうと、http://tanaka-desu.com/livedoor-blog-customize-01/こちらのブログによると、以下の

・ページ送り注意
・パンくずリストの設置
・サイトマップをgoogleにぶち込む(http://web-nao.com/site-map/


はとりあえずやっといた方がいいとのこと。どれも先ほどやってみましたが1分でできますね。


気にしたい人は参考にしてどうぞ~。


終わり!!!





あぁぁぁああああああああスマホ表示出来なかったのショック過ぎる死にそうwwwwくっそww

・・・・スマホ・PCでのコメント欄及び個別ページが死にましたねwはぁ~、つっかえ!遊び過ぎたw

治りました。ブログのテンプレートで使われているh系は使わないで、hが大きいもの(今回でいえばh5)から使えば問題なしです~。



<バナー>

画像をポチして応援お願いします~

ブログ村へ

代わりにバナー頑張って作りましたー。押して!!!!!!