Google Bloggerを使うのは初めてだけど、無料配布されているお洒落なテンプレートを入れてみた

このブログテーマはポートフォリオとして機能するのでしょうか?



これはキャラクターイラストの背景に使おうとして作ったものです。
なんでこれを投稿しているかというと、
画質テストのためです。

この記事の内容はPCで見ないと意味不明だと思います。
2017/9/9スマホ版もMinimarlistテーマで閲覧できるようにしました


さっき4記事を投稿したら、ブログの表示が突然こんな風に変わって驚きました。


このテンプレートはNAVARまとめのこの記事


を見て選びました。
Minimalist

ここで配布されていたものなんですが
標準テンプレートよりかっこいいので
是非使いたいと思って入れてみたんです。


デモだけで格好良すぎる・・・
しかし、
テスト投稿4投稿してみても、
一番上の画像スライドはレイアウト画面にもないし
どう出てくるのかわからなくて

htmlに詳しくもないので、無くても良いやそのまま使ってしまえと
4記事目を編集していじっていたら
突然画像スライドが表示されました。

かっこよくて鳥肌・・・

仕組みはよくわかりませんが、
記事が増えたら画像スライドみたいになるんでしょうね
これが無料ですよ。

日本ではBloggerはあまり人気が無いそうですが、
いろいろいじってみてここまでのものができたなら
もう文句はありません。

あとはもう少しh3見出しのデザインをカスタマイズしたいです。

見出し←


デモのフッター付近にも横長の画像集が表示されていますが
これは本来インスタフィードなんです。
ダウンロードして説明ページをみると、
ウイジェットの設定方法がわかります。



これはコードさえわかればレイアウト画面で簡単に設定できる模様

が・・・

私はインスタは個人用アカウントで使用済み・・・

代わりにtumblrフィードを表示したいなと思いました。

無料ウィジェットは探せば簡単に見つかると思ったのですが、
意外と無くて(Bloggerに適用してくれないだけ?)
何時間も検索して探し回りました。


複眼RSS http://fukugan.com/


これで貼り付けコードを生成できますので、
レイアウト画面「Instagram」の項目にコードを貼り付けるだけ。

これでデモみたいな横長の画像フィードを作ることが出来ました!
あえて2列でも凄くいい感じです。

プレビューとか、ブログを表示で見るときに
サブドメインのままだと自動でhttpsで閲覧している状態になるんですが
httpsだと外部のウイジェットがたまに表示されなかったりします。
そんな時はsを消してリロードしてください。


メガメニュー


   最後に、ブログのヘッダー画像下のグローバルメニューのカスタマイズです。
これはダウンロードした時にフォルダの中に入ってる開設ページで説明してくれています
翻訳するとだいたい意味がわかるので・・・・


html を開いて4673段目あたりから始まる


<nav class='pi-navigation' data-menu-responsive='992'>
          <div class='container'>
 <div class='open-menu'>
              <span class='item item-1'/>
              <span class='item item-2'/>
              <span class='item item-3'/>
            </div>
            <div class='close-menu'/>
            <ul class='navlist'>
              <li><a href='/'>Home</a></li>
              <li><a href='/p/about.html'>About us</a></li>
              <li><a href='#'>Drop Down</a>
                <ul class='sub-menu'>
                  <li><a href='/search/label/Shooter'>Minimal</a></li>
                  <li><a href='#'>Sub Menu with Subs</a>
                    <ul class='sub-menu'>
                      <li><a href='#'>Feminist</a></li>
                      <li><a href='#'>Persona</a></li>
                      <li><a href='#'>Expose</a></li>
                    </ul>
                  </li>
                  <li><a href='#'>Powergame</a></li>
                  <li><a href='#'>Fashion</a></li>
                </ul>
              </li>
              <li><a href='#'>Restaurant</a></li>
              <li class='megamenu col-5'><a href='#'>Mega menu</a>
                <script class='java' type='text/javascript'>//<![CDATA[
                  var numposts = 5;
                  var outerclass = "sub-menu";
                  var starttag = "<li>";
                  var endtag = "</li>";
                  var intag = "div";
                  //]]>
                </script>
                <script class='java' src='/feeds/posts/default?alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
              </li>
              <li><a href='#'>Download</a></li>
            </ul>
 <div class='search-box'>
              <span class='icon-search'>
                <i class='fa fa-search'/>
              </span>
              <form action='/search' method='get'>
                <input name='q' type='search' value='Search and hit enter'/>
              </form>
            </div>
          </div>
        </nav>




この#の部分を自分のカテゴリに変えてくださいと
解説ページに書いてあります。

階層つけるのが難しいですが、
間違ったコードでプレビューしようとすると
ちゃんとBloggerのほうで赤くエラー出してくれるんです。
間違っている行が赤く表示されるので
噂みたいにページごとガッタガタにならずに済みましたw

<ul>は</ul>で閉じなきゃならないとか
そういう法則があるみたいなので
それがわかっていればエラーの原因がなんとなくわかるかと思います。

「Bloggerはhtmlいじるとページがめちゃくちゃになってしまう事もあり、
素人に扱うのが難しい」と聞いてたのですが、
意外と優しい?
IT素人でもなんとかカスタマイズできそうです。

鴎十

0 件のコメント:

コメントを投稿

tumblr

複眼画像RSS Powered by 複眼RSS