はてなブログ

テーマ『Marukkoi -まるっこい-』を公開しました

投稿日:

HTML・CSS初学者のゆうです、こんにちは。
この度、勢いとごり押しでテーマ『Marukkoi -まるっこい-』を公開しました。
文字通り、まるっこい感じを目指したテーマです。

f:id:m6tczm4q:20170105172107p:plain

インストールは下記URLより。

http://blog.hatena.ne.jp/-/store/theme/10328749687203754299

なんせ初学者なもので、なんだこのコードwww とか、なにこれおかしくない? とかいろいろあるかもしれませんが、ご了承ください。
インストール前に必ず現在利用しているCSSのバックアップを取ってね!

初期設定を行うといい感じになります

指定フォントとナビゲーションメニューが簡単に利用できます。
[ダッシュボード]→[デザイン]→[スパナマーク]を開いてください。

フォントもまるっこくする

フォントを変えると、よりまるっこくいい感じになります。

下記のコードを[スパナマーク]→[ヘッダ]→[タイトル下]に貼り付けてください。

<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />

まるっこいナビゲーションメニューを出す

まるっこいナビゲーションバーは、カーソルを乗せると色が変わってぴよんと文字が動きます。
利用するには下記のコードを[スパナマーク]→[ヘッダ]→[タイトル下]に貼り付けてください。

<div class="menu">
<ul>
<li><a href="〔URL〕">〔テキスト〕</a></li>
<li><a href="〔URL〕">〔テキスト〕</a></li>
<li><a href="〔URL〕">〔テキスト〕</a></li>
</ul>
</div>

そして〔URL〕の部分にリンク先URLを、〔テキスト〕の部分にテキストを入力してください。

<li>~</li>で囲まれた一行の数がメニューの円の数です。
増やしたい場合は、<li>~</li>をコピーして増やしてください。
例の場合は円が3つになります。

〈例〉
<div class="menu">
<ul>
<li><a href="http://www.yulog.xyz/">HOME</a></li>
<li><a href="http://www.yulog.xyz/archive">記事一覧</a></li>
<li><a href="http://www.yulog.xyz/entry/2016/05/20/220215">ABOUT</a></li>
</ul>
</div>

質問や要望はお気軽にどうぞ

質問、要望などはお気軽にお問い合わせください(ただ、初学者ですから対応できるかはわかりません)。

更新履歴

2017-01-07

  • ナビゲーションメニューで文字数が多いと文字が重なる現象を、はみ出る部分の文字を省略する形で修正しました。省略されるのが嫌な人は文字数を減らすかフォントサイズを小さくして使ってください。
  • サイドバーを336pxまで広げました。これにより、AdSenseなどの広告を貼ってもはみ出ないようになりました。
  • 余白などの微調整をしました。

2017-01-08

  • 背景画像を設定時、ヘッダを非表示すると空白ができる不具合を修正しました。
  • カテゴリやパンくずリストに関する微調整を行いました。

-はてなブログ

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ネタに困ったりモチベーションが下がったらブログチャレンジをしよう

はてなブログのブログチャレンジ、やってますか?実は私、最近この機能を知りました。タスクをクリアするごとにポイントが溜まって、レベルが上がってくんです。これはモチベーションアップにいいなって思いました。 …

はてなブログでZenbackのカスタマイズがぐちゃぐちゃ崩れて変になる→解決!

はてなブログにZenbackを導入してみた。ブログ画面から[デザイン]→[カスタマイズ]→[記事]といって、[記事下]のHTMLコード記述欄にZenbackのスクリプトコードをコピペする?ブログに戻っ …

【はてなブログカスタマイズ】タイトル横にアイコンを置きたいコード

はてなブログのタイトル横にアイコンを置きたいコードだよ\(^o^)/たぶん広告とかも置きたいよ! なんで”置きたい”って言ってるかというと、うまくできなかったからだよッ!なんたってこのコードはドットイ …

はてなブログProにしてみたよ

最近、はてなブログProにしようか迷っています。はてなブログProにすると、こんなことができるらしいです。 はてなブログProでできるようになる10のこと ブログ10個作成 まあゆくゆくは……?このブ …

はてなブログのちょっとしたTips

はてなブログのTipsをメモ書き。 はてなブログで編集ボタンが出てこない Adblockなどのコンテンツブロッカー(広告ブロックなど)を使っているとはてなブログの編集ボタンが出てこない。 記事編集画面 …

書いている人


《高梁ゆう》
パンツ大好きぱんつブロガーの高梁ゆうだよ!
無職になったウェーイ\(^o^)/
あっしの詳細はプロフィールを見てね!

ブログ更新情報

パンツ好きすぎてブログ作っちゃいました

広告

カテゴリー

アーカイブ