HATENA與FC2的設定方法異同+代碼問題備忘

日記

週末修改了TITLE部分，添加了計時器、RSS和一些小插件，本來還有些想加的東西，但SIDEBAR太長了，不知怎麼整好，暫時作罷〜按理說是應該能拆分成上下左右四部分的……
然後就是兩個最大的問題，一個是相冊不能在WLW裡自動上傳圖片，得先在F裡上傳後再用WLW的在線圖片插件插入日誌裡，才能調整圖片大小、位置等。在線圖片也不能用WLW非常方便的效果功能=_+；另一個就是無法像FC2一樣添加<more!>拆分頁面，老是全文顯示，很煩啊！！！但逛站時看到有些HATENA的日誌是可拆分頁面的，貌似用了name=seemore來控制，但首頁的文章還是無法隱藏……=_+還是好煩！
但總的來說作為代碼白痴，看到最後的結果時我還是比較欣慰滴>_<

 

 

HATENA和FC2的TITLE設置思路差不多
但HATENA沒開放HTML代碼

摸了一下午終於搞明白了，HATENA和FC2一樣，タイトル部分的思路是一個CSS的BACKGROUND設置+HTML的タイトル文字、タイトル画像和LINK組成的，但FC2的HTML代碼是可以自己手動修改的，HATENA卻沒開放這部分功能，所以悶了好久摸不著頭腦。
這樣，HATENA的タイトル部分要換圖的話先要在管理/デザイン（DESIGN（/デザイン編集（DESIGN編輯）/詳細/スタイルシート（樣式表)裡修改CSS，添加自己的BACKGROUNDタイトル画像（這個地方的圖片不影響BODY部分，所以𥶡度要按原模板來，高度可以自定義，不過頭太大的話會比較不美觀……）。
修改代碼的過程具體來說就是這樣做。

BTW，關於圖片的尺寸，很多教程都是直接告訴一組數字，但我向來記不住數字，所以都是右鍵查看模板自帶的圖片尺寸，不過如果是背景圖的話就看不到大小了，可以把背景圖片另存下來，直接在PS裡修改，然後截屏到PSD裡對照實際頁面來做圖。


 

在CSS裡隱藏プログタイトル文字和画像

在CSS裡換掉背景圖後，再到管理/設定/プログ設定裡修改タイトル文字和画像。
タイトル画像的缺省位置不是和BACKGROUND對齊的，大約是在背景圖正中央偏下的位置，一開始我按タイトル的完整尺寸做，結果出來就變成這樣：



所以這個タイトル画像只要做成小圖標或文字標籤的樣式就可以了，類似舞台上的CHARACTER的感覺。直接使用タイトル文字的話設置的思路也一樣。不過隱藏這個部分後就會把HATENA提供的A!、RSS和博主TWITTER按鈕也消掉，需要之後手動添加到ページのフッタ裡。
如果上傳タイトル画像就會自動覆蓋タイトル文字。如果既沒有タイトル画像也不想顯示文字標題（但頁面名稱依然保留博客名字），就要在CSS裡修改讓タイトル隱藏。

在CSS裡隱藏文字或圖片的兩種代碼

  • display:none;
    可将抬头部分完全隐藏，包括文字与背景图，但对搜索引縕不友好，且被屏幕阅读器所忽略。
    如果使用这个代码的话，可以在里直接添加HTML控制的带链接抬头图和其他元素。
  • .texthidden{
    text-indent:-9999px;
    white-space:nowrap;
    line-height:0;}
    可将TITLE文字完全隐藏。
    text-indent是首行缩进，如TITLE有多行文字，需添加white-space:nowrap去掉多余部分和line-height:0去掉空行。

像我这样只有四个字的TITLE，只保留text-indent就可以了。
這樣，我的タイトル部分最後的代碼是這樣的：

h1 { text-indent:-9999px;background-image:url("画像のURL"); }

總的來說HATENA的タイトル設置思路就是：既然不讓我們自己改HTML代碼或者說改起來很麻煩，就乾脆都隱藏掉，只用スタイルシート（樣式表)好了。

 

SIDEBAR的小插件

加了一些RSS和TWITTER的鏈接，SIDEBAR部分添加了計時器和東のエデン応援的插件。
自己添加插件模板用的代碼，以東のエデン応援為例：

<div class="hatena-module">
         <div class="hatena-moduletitle">東のエデン応援</div>
         <div class="hatena-modulebody">
         <div align="center">
         <script type="text/javascript" charset="UTF-8" src="http://juiz.jp/blogparts/blogparts.js"></script>
</div></div></div>

moduletitle=模板標題，align=控制文字與圖片的對齊方式，一般用的就是center（居中）,left（左對齊） ,right（右對齊）和absmiddle（與同行內其他元素中心對齊）。後綴名為JS的鏈接部分是服務商提供的插件地址。

另外需要注意的是在ページのヘッダ裡有一個<div class="main">，是用來控制日誌主體的文字板與SIDEBAR位置的，它的結束部分</div>在ページのフッタ裡，如果不小心在ページのヘッダ裡多寫了一個</div>，文字板就會覆蓋整個頁面，SIDEBAR就被擠到頁尾去了，如果SIDEBAR是我這樣豎排的話，看起來會非常亂。
在<div class="main">前添加代碼的話插件的位置會按整個頁面的𥶡度來計算，在後面添加的話範圍就只有文字板部分。

 

血淚注意

所有DESIGN详细设定里的代码内容，在替换模板后会全部还原，所以在换模板前需要先备份代码部分。我一开始就是因为不知道这个，换了新模板后原先的LINK代码就全丢了=_+。
另外如果新代碼有問題的話，預覽後返回編集頁面時，代碼可能會消失，所以在預覽頁面前也要記得備份=_+。★

FC2設置後的實際效果
HATENA設置後的實際效果

相關日誌：