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

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



これはキャラクターイラストの背景に使おうとして作ったものです。
画質テストとして貼りましたがなかなか高画質でも表示してくれますね。

目次

  1. 上部の4つの新記事FEEDについて
  2. インスタで絵を公開してなかったので、変わりにtumblrフィードを表示させたい!
  3. メガメニュー MEGA MENUって?



上部の4つの新記事FEEDについて




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


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

を見て選びました。
Minimalist

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


デモだけで格好良すぎる・・・

しかし、
テスト投稿4投稿してみても、
一番上の画像スライドはレイアウト画面にもないし

どう出てくるのかわからなくて

htmlに詳しくもないので、無くても良いやそのまま使ってしまえと

4記事目を編集していじっていたら

突然画像スライドが表示されました。

かっこよくて鳥肌・・・

これが無料ですよ。

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


インスタで絵を公開してなかったので、変わりにtumblrフィードを表示させたい!


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



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

が・・・

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

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

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


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

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



メガメニュー MEGA MENUって?


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


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素人でもなんとかカスタマイズできそうです。

関連記事:

十鴎SOOU

0 件のコメント:

コメントを投稿

tumblr

複眼画像RSS Powered by 複眼RSS