ラベル ブログ作成術 の投稿を表示しています。 すべての投稿を表示
ラベル ブログ作成術 の投稿を表示しています。 すべての投稿を表示

2018年10月15日月曜日

Bloggerでドメインを変更するとブログが削除されるが元に戻すと復活する


恐ろしいくらいアホなエピソードです。記事にしてどうする笑

Bloggerのブログのドメインって自分で設定できるんですね。

私は他にはYahoo!ブログしかやったことがないので何とも言えないのですが、特別な手順を一切踏まずにいつでもドメインを簡単に編集できてしまう無料ブログというのは他にあるんでしょうか...(ちなみに有料で独自ドメインを購入することもできますが…)

で、実際に、「このドメイン飽きたなあ...変えちゃおう」などと考えて、設定>基本からドメインを編集してしまいました。

この状態でブログを表示させようとすると「ブログは削除されました」などと表示されます。

え、今までの苦労が水の泡!?と一瞬めちゃくちゃ焦りました。

そしてとりあえずドメインを元に戻してみました。

するときちんと表示されるようになりました。

削除されるのではなく表示できなくなるだけのようですね。

つまり、元のドメインを覚えていれば間違って変更してしまっても復活させることができます。

もし忘れてしまったら、検索をかけて自分のブログのURLを見つければOKだと思います。
または履歴をたどるとか。

ただ、とりあえず怖さがわかりました。バックアップは重要かもしれません。

2018年9月16日日曜日

これまでに設定したBloggerのブログのデザイン、テーマ、カスタマイズ


最近たびたびブログテーマ(色やデザイン)を変えていて、二回目に訪問してくださった方がいても同じブログだと気づかないんじゃないかと思っていましたが、とりあえずこれで落ち着けようと思っています。

私はブログ作成とかHTMLとかについて基本的には書くつもりがない上に、細かい設定等に関しては素晴らしいサイトが色々あるので、今回はBloggerで今までこんなカスタマイズしてきたよ~というのを大まかに説明してリンクを貼っておきます。
(大雑把に○○と□□をやりました、みたいなブログ記事をあまり見たことがないので)

普段は全然違うことを書いているので、これに関してはオリジナリティゼロですが悪しからず。


テーマを選ぶ

Bloggerではもともとそれなりの種類のテーマが入ってます。
(以前はテンプレートという名前だったそうで検索するとそっちの方が色々出てきます)

本当は完全にカスタマイズしたいのですがさすがに敷居が高い…

というわけで、元からBloggerに入っているAwesome Inc. のものを使わせていただいています。

最初はAwesome Inc.の別のテーマを使っていたのですが、下に表示している新着記事やTopicsの文章の文字が白っぽくなってしまい(背景も薄い色なのに)、見づらすぎてやめました。

次にContempoのものに変更。色々シンプルで見やすくなったとは思ったのですが、アルファベットのフォントが特殊&プロフィールやアーカイブが見づらいということでこれまたやめました。

今はAwesome Inc.の別のテーマを使っています。

オレンジというのも落ち着く色でいいかと。

ガジェットを追加・表示

ガジェットというのは、ブログに表示されているアーカイブやPVその他の項目です。

これを編集画面の「レイアウト」から追加していきます。

…が、ここで困ったのはスマホで一部のガジェットが表示されないことでした。

これの解決方法はいろいろなところに書いてあります。

komeiy.blogspot.com/2014/12/blogger_7.htmlなど。

とにかくテーマ>HTMLの編集から該当の個所を探してmobile='yes'と自分で書き込みました。

私の場合、追加したのはカテゴリ(ラベル)、Topics(人気の投稿)、PVなどです。


※注意

これは探してもあまり書いていなかったことなのですが、ただ書き加えただけでは反映されません。

テーマ>歯車マーク>モバイルテーマの選択から、カスタムを選ぶ必要があります。

そうしないと何を変更してもスマホに反映されなくなってしまいます。



カテゴリの階層化

カテゴリと書きましたが、Bloggerにはカテゴリはありません。

その代わりにラベルが存在します。

代用はできますが、どちらかというとタグに近いように感じます。


◇Bloggerのラベルのメリット
 ・一つの記事に対してたくさんのラベルを選ぶことができる

◇Bloggerのラベルのデメリット
 ・そのままでは階層化ができない

まずはメリット。

普通のブログのカテゴリはたくさん選ぶことはできないと思うのですが、Bloggerならできます。

あくまでも「ラベル」だからです。

記事の編集画面の右の方のラベルをクリックし各ラベルをカンマで区切ればいくらでも作れてしまいます。


次にデメリット。

これは、最初は気にならなかったのですが(主にゲームの)カテゴリが増えるにしたがって気になるように。

ラベルは五十音順or頻度順でしか並べることができないので、ゲームの色々なジャンルのラベルが散らばっているのを何とかしたいと思い調べてみました。

ネットで検索したところ、3種類の方法が見つかりました。
(ちなみに、以降、階層の上のラベルを「親」、下のラベルを「子」とします)
  1. ラベルのガジェットを増やす
  2. 開閉可能な階層にする
  3. 「子」のラベルのみ字下げする
(結論から言うと、今は3の方法を使っています。見やすくなったので、そこから記事を探してみてください)
1.ラベルのガジェットを増やす


最も簡単な方法です。

https://www.howtonote.jp/blogger/label/index4.htmlに書いてありました

元々「ラベル」の存在を表す場所が「カテゴリ」などの名称で一つだけあったのを、各ジャンルの名称にかえていくつも作ってしまおうという方法です。

この方法の難点は、

・パソコン版の表示だと各ガジェットは四角い枠になって分かれているので若干見た目が大げさ
・「親」のラベルはクリック不可能(というか実際ラベルではなくガジェット名)

ということです。

というわけでこの方法はちょっとやってみてすぐにやめました。
(ただし超絶楽なのでとりあえずやるにはお勧めですよ!!)



2.開閉可能な階層にする

http://hiro-blogger-memo.blogspot.com/2013/05/blog-post.html#moreなどに記載されています。

探せば結構色々なところにコードが載ってそうです。

デフォルトで「子」のラベルが表示されていない(=閉じている)のと、「子」のラベルをクリックするときに、どうも一瞬「親」と「子」のラベル周辺の色がまとまって変わってしまって、自分が今どこをクリックしたのかわかりづらいような気がしてこれもやめました。

あと、コードがめちゃめちゃ長い…。

素人にはどこをいじれば何が変わるのかわかりませんでした…。

詳しかったらこれを採用してたかも。


3.「子」のラベルのみ字下げする

これはこれでシンプルな発想です。

https://blog.z0i.net/2016/05/blogger-label.htmlより。

コピペそのままだと開閉はできません(個人的にはできなくていいと思ってる)

ラベルを作るのが若干面倒でしたが、一度やってしまえばあとは同じラベル名の記事を書く時には候補の中から選ぶだけなのでどうといったことはありません。

あと、凄く見やすくなりますね。

というわけでこれにしました。

(そのままコピペしてスマホで見ても何も変わっていなかったので調べたらまたmobile='yes'がありませんでした。要注意ですね)


以上です!!あとは何もしてません!(笑)(2018年10月21日追記 スマホで絶対に自分のページビューを追跡しないような処理はしてます)

まあ、また不満が出てきたら何かカスタマイズするかもしれないですけど。

2018年8月18日土曜日

【HTML】【css】本当にコピペでOK!私の過去の記事の見出しの作り方を紹介します


はい、また新しい方面に手を出してます。

中途半端ですがぜひお付き合いください。

最近ブログでHTMLでわかりやすい見出しを作るようになりました。

その時にネットで調べて、「コピペでOK」という記事を何度となく見てきたのですが、ほとんどコピペでOKだった試しがありません。

なぜかというと、cssをHTMLに埋め込むには何通りか方法があって、そのための要素を外して記載しているからです。

私なんかは初心者過ぎてそもそもcssを埋め込むって何??となってしまい苦労しました。

というわけで、私の書いているものだけでも、リアルにコピペできる見出しを紹介します。

・文字の左の線+塗りつぶしの枠

【ゲーム】Airsとは?で使った見出しです。

例えばこんな感じ。

<div id="title2" large="" quot="" sans-serif="" style="background-color: #e0eeee; border-left-color: rgb(254, 200, 155); border-left-style: solid; border-left-width: 0.5em; color: orange; padding-top: 0.3em;" verdana="">
<span style="font-family: &quot;verdana&quot; , sans-serif;"> <span style="font-size: 30px;"><span style="font-family: &quot;verdana&quot; , sans-serif; font-size: 26px;">あいうえお</span></span></span></div>


これがこうなります。↓

あいうえお

上のソースをそのままコピペして、メモ帳でhtml拡張子で保存してみましたが、とりあえず2018年現在のHTML5ではきちんと表示されるようです。

ちなみに色やら幅やら文字サイズやらは適当というか私の好みなので弄ってみてください。

例えば<span style="font-family: &quot;verdana&quot; , sans-serif; font-size: 26px;"></span>を取り除いて、

<div id="title2" large="" quot="" sans-serif="" style="background-color: #e0eeee; border-left-color: rgb(254, 200, 155); border-left-style: solid; border-left-width: 0.5em; color: orange; padding-top: 0.3em;" verdana="">
<span style="font-family: &quot;verdana&quot; , sans-serif;"> <span style="font-size: 30px;">あいうえお</span></span></div>


とすると、下のようになります。


あいうえお

文字が大きくなって余裕がなくなりますね。


あとは、実用的ではないですがこんなのはどうでしょう。

<div id="title2" large="" quot="" sans-serif="" style="background-color: #e0eeee; border-left-color: rgb(254, 200, 155); border-left-style: solid; border-left-width: 5em; color: orange; padding-top: 0.3em;" verdana="">
<span style="font-family: &quot;verdana&quot; , sans-serif;"> <span style="font-size: 30px;"><span style="font-family: &quot;verdana&quot; , sans-serif; font-size: 26px;">あいうえお</span></span></span></div>


border-left-widthが何を表しているのか、一目でわかりますね。↓

あいうえお



・左&下に線を引く

【ゲーム】【RPG】ヒュプノノーツ1 攻略 前半他でつかいました。


<div id="title2" large="" quot="" sans-serif="" style="border-bottom-color: rgb(250, 200, 200); border-bottom-style: solid; border-bottom-width: 0.2em; border-left-color: rgb(254, 200, 155); border-left-style: solid; border-left-width: 0.5em; color: orange; padding-left: 0.2em; padding-top: 0.4em;" verdana="">
<span style="font-family: &quot;verdana&quot; , sans-serif;"> <span style="font-size: 30px;"><span style="color: #666666; font-family: &quot;verdana&quot; , sans-serif; font-size: 26px;">あいうえお</span>
</span></span></div>


こんな感じ↓

あいうえお

シンプルで気に入ってます。


・下に点線を引く

上の見出しの中で、さらに小見出しとして使っています。

<div id="title2" large="" quot="" sans-serif="" style="border-bottom-color: rgb(250, 200, 200); border-bottom-style: dotted; border-bottom-width: 0.2em; padding-top: 0.4em;" verdana="">
<span style="font-family: &quot;verdana&quot; , sans-serif;"> <span style="font-size: 26px;"><span style="color: #666666; font-family: &quot;verdana&quot; , sans-serif; font-size: 20px;">あいうえお</span>
</span></span></div>


こうなります↓

あいうえお

超さりげないですね。

たくさん使っても変に主張しすぎないので便利です。


・最後に

実際のブログ作成では文字サイズはmediumとかlargeとかx-largeとか使っているのですが、今回はpxに統一しました。

そこは統一したのに、逆に色の書き方は統一していません笑

rgb(x,y,z)みたいな書き方は最近初めて知ったので残してみました。


新着記事

すみすみ ステージ240 攻略 (エリア12) すごい旗を立ててクリア

  エリア12では 缶入りクッキー 🍪が登場。 今回はその最終ステージ、ステージ240の攻略を書いていきます。 私自身はエリア12はすべて旗を立ててクリア済みなので、 すごい旗を立ててクリア を目指してみました。(ビッグスイーツが2つになる) ということで...

Topics