このブログテーマはポートフォリオとして機能するのでしょうか？
これはキャラクターイラストの背景に使おうとして作ったものです。
画質テストとして貼りましたがなかなか高画質でも表示してくれますね。
目次
上部の4つの新記事ＦＥＥＤについて
さっき4記事を投稿したら、ブログの表示が突然こんな風に変わって驚きました。
このテンプレートはＮＡＶＡＲまとめのこの記事
を見て選びました。
ここで配布されていたものなんですが
標準テンプレートよりかっこいいので
是非使いたいと思って入れてみたんです。
デモだけで格好良すぎる･･･
しかし、
テスト投稿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のほうで赤くエラー出してくれるんです。
間違っている行が赤く表示されるので
噂みたいにページごとガッタガタにならずに済みましたｗ
<ul>は</ul>で閉じなきゃならないとか
そういう法則があるみたいなので
それがわかっていればエラーの原因がなんとなくわかるかと思います。
「Bloggerはhtmlいじるとページがめちゃくちゃになってしまう事もあり、
素人に扱うのが難しい」と聞いてたのですが、
意外と優しい？
ＩＴ素人でもなんとかカスタマイズできそうです。
関連記事：
0 件のコメント:
コメントを投稿