mysticな風景

このブログをはじめたときは、なんかMystic(神秘的)なものについて 書こうとはじめたんだけど、いつのまにか、テンプレート作成のブログに 変容してしまった。 今回はごくごくシンプルにタイトル周りだけちょっと工夫して、 スライダーをつけてお好きな画像で飾れるようにしてみました。 カスタマイズ方法については追記で書きますね。 1.上部ナビゲーションの編集
<nav id="menu">
<a href="<%url>archives.html" onfocus="this.blur();" class="nonborder border" title="記事リスト">Articles List</a>
<a href="#" onfocus="this.blur();" class="nonborder" title="LoremIpsum">Lorem Ipsum</a>
</nav>
<nav id="menu2">
<a href="#" onfocus="this.blur();" class="nonborder border" title="AobutMe">About me</a>
<a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder" title="管理画面">Log in</a>
</nav>
これはいつもとおんなじ。#のところにリンクをいれて、好きなタイトルに変更するだけです。 2.スライダーの編集
<ul class="rslides">
<li><img src="https://blog-imgs-122.fc2.com/m/y/s/mysticdiary/misty1_201809051544374db.jpg" alt=""></li>
<li><img src="https://blog-imgs-122.fc2.com/m/y/s/mysticdiary/misty2_201809051544383a6.jpg" alt=""></li>
<li><img src="https://blog-imgs-122.fc2.com/m/y/s/mysticdiary/misty3_201809051544401c2.jpg" alt=""></li>
</ul>
今回はレスポンシブスライドというプラグインを使ってます。 画像のアドレスをお好きな画像に変更してください。写真の大きさは揃えた方がうまくいきます。 head内にプラグインの設定が書いてあります。細かく設定されたい方は ここで変更してください。 3.記事下の著作者の紹介文
<span class="authorname"><span class="name"><%author_name></span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation. </p>
これはお好きな文章を入れてください。 今日付けで共有申請したので、またダウンロードできるようになるのに何週間かかかると思います。 よろしくお願いします。
YOU MAY ALSO LIKE
overlay

【無料WordPressテーマ/FC2ブログテンプレート】simpleblog【シンプル】

overlay

赤ずきんちゃん RedHood

overlay

超おひさしぶりです。

Administrator
littledream

個人的に収集したビンテージなパブリックドメインの画像を配布しています。好物はお寿司です。都市伝説が大好きです。パニック障害を持病に持つ自身のことなどをブログにも綴っています。

lamp lamp

5 Comments

  • SECRET: 0
    PASS: 74be16979710d4c4e7c6647856088456
    どうもはじめまして。
    素敵なテンプレートを製作されていて、いつもうっとりしています。
    余計なことですが、ちょっと気がついたことがありまして、ご報告まで。
    私は、Yahoo移行者さんの動向を追いかけておりまして、その関係で、たまたま見かけたのですが、mystylookだったと思いますが、とあるYahoo移行者さんが利用されているのですが、youtube動画のiframeが、記事幅からはみ出してしまっていました。
    私自身は、まだまだ駆け出しで、もちろん素人でして、いろいろと勉強中です。
    それでは、特にそれだけですので、ちょっとお耳に入れようと思った次第です。

  • SECRET: 0
    PASS: 0e39c6a10a7f47650b31c72bc7b5c020
    こんにちは。はじめまして。ブログをご覧いただきありがとうございます。
    ところで、ご指摘のiframeが記事幅からはみ出す件ですが、
    管理人のテンプレートはあまりユーザーさんには親切な作りになっていない
    のもありまして、一応スマホで見る際には、幅が100%になるようには
    最低限のCSSで設定しているんですけど、パソコンで見るときの場合は
    設定していないです。
    その辺はユーザーさんが自由にカスタマイズしてくださいとのスタンスで
    やってるんですけど、yahooブログから移行した場合にはみ出るのか
    どうかはよくわからないです。
    今後、ユーザーさんから設定の方法を聞かれたりした場合は
    回答しようかなと思ってます。
    取り急ぎいまの段階ではこんな対応です。
    これからもよろしくお願いします。

  • こんにちは、初めまして。
    どのテンプレートも本当に素敵ですね☆
    現在、mystylookを使わせて頂いているのですが、
    タブレットやスマートフォンで表示した場合、2カラムではなく1カラムでの表示になってしまうようです
    もしなにか対策がありましたら、お教え頂ければ幸いです。お手すきの際で結構です!

    • moooさんこんにちは。

      テンプレート使っていただきありがとうございます。

      mystylookですが、スマートフォンやタブレットで見るときは、
      1カラムになるように設定してあります。
      レスポンシブデザインというやつです。

      もしPC表示のままで閲覧したければ、CSSの編集画面で
      レスポンシブの設定を消去するか、コメントアウトしてください。

      /************************************************************************************
      smaller than 980
      *************************************************************************************/
      @media screen and (max-width:980px) {~
      以下CSS設定

      以上の表記から下を消去するか、
      /* 内容  */  
      コメントアウトの表記を使ってデザインに影響しないようにします。

      よろしくお願いいたします。

      • コメントに返信いただいていたのに、長い間気付かず本当に申し訳ありませんでした💦
        早速教えていただいた通りに編集し、無事に変更できました!ありがとうございました。
        お返事が遅れて、本当にすみませんm(__)m

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください